天天看點

如何提升UI設計的進階感

我們還可以從品牌基因中擷取靈感,品牌作為使用者熟知的形象是個絕佳的來源。

從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中态的小長條,這樣就建立起視覺上的聯系,讓使用者産生由内而外的一緻感受;例如馬蜂窩品牌形象中的微笑符号和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上,既讓界面視覺獨一無二,又進一步強化了使用者對品牌形象的認知。

六、無框設計 去繁從簡

在UI設計中,有許多的裝飾元素,如卡片的邊框、清單的分割線等,雖然邊框,分割線是分隔兩個元素的好辦法,但是它不是唯一的方法;使用過多會讓整個布局的設計感降低,或多或少都會幹擾使用者浏覽的視線,讓資訊内容失去注意力,是以可以減少不必要的裝飾元素。

我們可以通過以下幾個方法來劃分元素的視覺層次,讓畫面變得幹淨,整齊:

1)使用陰影

陰影同樣可以營造出邊界感,而且相比邊框分割線更加微妙,并不會顯得突兀,不會分散使用者的注意力,讓内容更聚焦。

2)使用不同的背景色來區分

通常,相鄰的元素背景隻需要有微妙的差别就能夠讓人對他們進行區分;是以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試删除分割線,因為你根本不需要它。

3)增加額外的留白

建立元素之間的分離效果,并不一定要通過線框來表現,隻要增加留白,讓它們分隔開就行了,通過留白和間距來實作元素分組是UI設計中的常用手法。

七、統一設計元素

在App中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。

通常個人中心的标簽欄圖示是一個人形剪影,它代表着使用者,是以可以在展示使用者頭像和使用者形象的界面中延續使用。

如果圖形擁有獨特的外觀,如橢圓矩形,也可以作為視覺符号的一種,延續到其他界面中,成為圖形或按鈕的外觀;這樣,整個界面就被統一的設計元素聯系起來了,給使用者始終如一的一緻感。

八、符合産品氣質的字型

選擇符合産品氣質的字型,可以與産品的定位相吻合,傳遞給使用者正确的情感意識。

雖然預設字型可以滿足大多數App 的設計需求,但會出現一個問題就是——系統字型的普适性并沒有什麼特色,在一些特定的情境下就顯得收效甚微;例如在運動類App中更适合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字型後,整體感覺在氣勢上就變弱了很多。

九、第三方圖示風格統一

大多數App都支援三方登陸,他可以減輕使用者注冊的時間成本。

通常是在注冊登陸頁的底部展示第三方圖示入口,這也是設計師最常忽略的内容,往往是直接将第三方圖示調整一緻大小和擺放整齊位置,沒有針對它們再設計;一個設計精緻的App不應漏過任何的細節,我們可以以自家App的圖示風格為依據,對第三方圖示進行優化設計。

十、圖檔中尋找色彩

App中優美的圖文設計,能帶給使用者如沐春風的視覺享受,它非常重要。我們經常看到文字疊加在圖檔背景上的設計樣式;為了減少複雜圖檔背景對文字的幹擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優的辦法。

我們可以從圖檔中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖檔融入到一起了,畫面變得進階和富有設計感。

十一、提高圖檔品質

圖檔的品質影響着整個App的格調和使用者的情緒,高品質的圖檔給人愉悅的視覺享受,産生美好的聯想;而低品質的圖檔會瞬間拉低App的質感。

在App設計中,一張漂亮的圖檔從收集到上線,需要經過裁剪,調色等過程才能被使用;即使是普通的商品圖檔,我們将它摳圖後調整成統一大小,再加上幹淨的背景,就能立刻提升商品的美感,界面視覺也會變得美觀、整潔。

十二、卡片式設計

現在的UI界面設計中,卡片式設計已經是一種非常常見的設計形式,它有利于資訊分層和整合,劃分出更加清晰的組織結構,實作複雜内容的簡化處理,提高空間使用率;同時卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢,也是提升設計品質感的良方。