扁平化UI設(shè)計(jì)干貨

　　在當(dāng)今信息爆炸的文化背景下，人們每天要通過(guò)過(guò)手機(jī)APP接觸巨大的信息流，然后再持續(xù)的進(jìn)行評(píng)估、過(guò)濾并且再加工，具有認(rèn)知上的負(fù)擔(dān)，扁平化UI設(shè)計(jì)更加適合信息碎片化的傳遞方式。今天AAA教育郭老師就給我大家分享一下扁平化的UI設(shè)計(jì)干貨。

 

　　扁平化的UI設(shè)計(jì)通過(guò)將有效信息分類，對(duì)信息層級(jí)的編排與梳理，將核心內(nèi)容的路徑扁平化，使用戶通過(guò)更少的路徑便迅速獲得信息。
 

　　內(nèi)容簡(jiǎn)潔不僅能夠縮小應(yīng)用程序自身的空間占用量，而且縮短了數(shù)據(jù)加載的時(shí)間，提高了使用效率。

 

　　扁平化UI主要設(shè)計(jì)步驟
 

　　①在進(jìn)行手機(jī)應(yīng)用程序UI的設(shè)計(jì)之前，首先要做的就是明確功能和目的，要對(duì)產(chǎn)品的定位要有一個(gè)明確的了解，對(duì)目標(biāo)用戶進(jìn)行詳細(xì)的研究，分析出用戶群體的使用特征、情感、習(xí)慣、心理、需求等信息，并得出用戶研究報(bào)告和可行性設(shè)計(jì)建議。

 

　?、谄浯我龅木褪墙缑嫘畔⒌氖崂砉ぷ鳌Ｔ趯?duì)應(yīng)用程序功能和目的訴求充分了解的情況下，對(duì)整個(gè)信息層級(jí)進(jìn)行規(guī)劃，同時(shí)將整個(gè)應(yīng)用程序的重點(diǎn)功能和邏輯關(guān)系清晰的展示出來(lái)，把不必要的信息全部刪除。

 

　?、墼谕瓿闪诵畔⑹崂淼幕A(chǔ)上，第三步是為整個(gè)界面做岀原型的架構(gòu)，包括操作與跳轉(zhuǎn)流程、結(jié)構(gòu)與布局，按照有意義的方式將信息分組，每一級(jí)頁(yè)面中所包含的內(nèi)容與交互反饋方式都必須在這一步完成，為后續(xù)的原型設(shè)計(jì)做出明確的框架結(jié)構(gòu)。

 

　?、芨鶕?jù)成本和進(jìn)度，繪制出界面的原型圖，原型是一種設(shè)計(jì)的表現(xiàn)形式，它必須在最終方案成型之前就進(jìn)行展示，所以在此階段繪制出線框原型圖，便于展示方案、進(jìn)行討論，同時(shí)在設(shè)計(jì)中和開(kāi)發(fā)人員進(jìn)行溝通，一旦發(fā)現(xiàn)問(wèn)題能夠及時(shí)的進(jìn)行修改。

 

　　⑤界面的視覺(jué)效果設(shè)計(jì)，根據(jù)界面原型圖為框架，在此基礎(chǔ)上進(jìn)行視覺(jué)效果的處理。
 

　　參考品牌定位和品牌形象來(lái)確立不少于兩種視覺(jué)風(fēng)格提案并進(jìn)行分析，當(dāng)方案確立之后再對(duì)其進(jìn)行深化設(shè)計(jì)，包括界面元素的布局、色調(diào)風(fēng)格、圖標(biāo)、皮膚的表現(xiàn)等方面。

 

　　扁平化UI的設(shè)計(jì)美學(xué)
 

　　從設(shè)計(jì)本質(zhì)上來(lái)講就是簡(jiǎn)單的設(shè)計(jì)，是整體簡(jiǎn)約的設(shè)計(jì)風(fēng)格，視覺(jué)效果是為功能服務(wù)的，提倡功能大于形式。

 

　　無(wú)襯線字體
 

　　扁平化設(shè)計(jì)的魅力在于極簡(jiǎn)，同時(shí)能展現(xiàn)出極高的功能性。視覺(jué)效果上的極簡(jiǎn)，功能性上的最大化，又不妨礙信息的溝通，很大程度上必須依賴字體的編排，為了使文字的字體更加符合扁平化。
 

　　在設(shè)計(jì)時(shí)應(yīng)該選擇簡(jiǎn)單易用的字體，在通常情況下，最好的選擇就是無(wú)襯線字體，在西文中它被稱為無(wú)襯線體，在中文中則與黑體相對(duì)應(yīng)，它沒(méi)有銳利的轉(zhuǎn)折和收筆時(shí)的棱角，整體感覺(jué)較為流暢、簡(jiǎn)潔，呈幾何形態(tài)，在手機(jī)屏幕中也更加容易被閱讀。

 

　　色調(diào)與飽和度
 

　　鮮艷明亮的色彩能夠使界面在任何亮度背景下都有良好的對(duì)比度，為界面創(chuàng)造出與眾不同的感覺(jué)，以此獲得用戶的注意。
 

　　所以在通常情況下，提到扁平化設(shè)計(jì)的色彩方案，就會(huì)聯(lián)想到高飽和、單色調(diào)的色塊等等。

 

　　我們?cè)谶M(jìn)行顏色的選擇時(shí)都會(huì)考慮到視覺(jué)疲勞因素，通常選擇視覺(jué)上相對(duì)柔和，在使用過(guò)程中盡量延遲視覺(jué)疲勞出現(xiàn)的時(shí)間的顏色，通常的做法是降低色彩的飽和度。
 

　　扁平化UI設(shè)計(jì)更加傾向于單色調(diào)的色彩，歸根結(jié)底就是色調(diào)與飽和度的匹配，選用主色和輔助色的組合，運(yùn)用多種配色手法來(lái)創(chuàng)造優(yōu)秀的視覺(jué)體驗(yàn)。

 

　　簡(jiǎn)化圖形
 

　　扁平化UI設(shè)計(jì)中常用高度精簡(jiǎn)的圖標(biāo)，來(lái)代表某一個(gè)操作步驟或者是功能的視覺(jué)展現(xiàn)，在形態(tài)上進(jìn)行最大化的精煉和提取。有簡(jiǎn)潔、形象的控件圖標(biāo)，也有線條色彩豐富、具有描述性的圖標(biāo)，它們的共同特征是都具有基本的幾何形狀。

 

　　沒(méi)有多余的裝飾效果，僅僅將圖案從最開(kāi)始的具象表現(xiàn)的含義進(jìn)行提取，再用線條和色塊來(lái)進(jìn)行模擬，中間會(huì)經(jīng)歷數(shù)個(gè)步驟，并將細(xì)節(jié)與輪廓進(jìn)行適度的取舍，將極簡(jiǎn)的要素運(yùn)用到界面設(shè)計(jì)中去，清晰明了的表達(dá)信息。

 

　　版率
 

　　對(duì)于簡(jiǎn)潔的內(nèi)容元素來(lái)說(shuō)，還需要進(jìn)行美觀的排版設(shè)計(jì)，才能獲得更加良好的視覺(jué)效果。由于扁平化設(shè)計(jì)中使用的都是簡(jiǎn)潔的視覺(jué)元素，所以布局方案就顯得非常重要。

 

　　留白可以理解成版率，其主要的作用就是凸顯層次、突出內(nèi)容。
 

　　有限的手機(jī)屏幕尺寸能夠顯示出的信息量也是有限的，而通常界面中所展示的信息量和用戶所接受的有效信息，并不是成正比的，如果是為了提高信息量而壓縮版率，可能會(huì)降低用戶接收的有效信息量。

 

　　進(jìn)行版面設(shè)計(jì)的時(shí)候，在重要信息四周加上留白，就容易將視線集中到小面積的內(nèi)容上去，使焦點(diǎn)得到突出。
 

　　使用大圖片或者是色塊的時(shí)，根據(jù)頁(yè)面的不同內(nèi)容和功能，來(lái)適當(dāng)?shù)恼{(diào)整周邊的留白也較為重要，縮小留白或者是不留白，會(huì)使版面更加豐富、充滿活力，另外圖片展示空間的增加，會(huì)增強(qiáng)沖擊感，使版面更加富有張力。

 

　　動(dòng)態(tài)效果
 

　　美學(xué)不僅包含了圖形、色彩等藝術(shù)表現(xiàn)方式，也包含了其它可以引起用戶反映的其他視覺(jué)效果，所以動(dòng)態(tài)效果從某種程度上來(lái)說(shuō)也屬于美學(xué)的范疇。
 

　　適度的動(dòng)態(tài)效果可以使界面顯得更加一致和真實(shí)，并且能給用戶帶來(lái)眼前一亮的感覺(jué)。

 

　　動(dòng)態(tài)效果要在符合物理定律的基礎(chǔ)上來(lái)構(gòu)建動(dòng)畫(huà)，例如：考慮到重力、慣性、剛性等，使動(dòng)態(tài)效果顯得比較真實(shí)，同時(shí)能夠使用戶感覺(jué)更加自然。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。