17個(gè)提升用戶體驗(yàn)的 UI 設(shè)計(jì)小技巧 時(shí)間：2018-03-19     來源：移動(dòng)互聯(lián)網(wǎng)學(xué)院

下面由設(shè)計(jì)師應(yīng)晝雨成總結(jié)了17個(gè)提升用戶體驗(yàn)的 UI 設(shè)計(jì)小技巧，也是我們?nèi)粘Ｓ玫降暮芑�本的技巧，�?duì)于新手UI設(shè)計(jì)師建議一看，注意案例中「對(duì)」與「錯(cuò)」不是絕對(duì)的，僅用于參考作用。

01、圖標(biāo)保持統(tǒng)一性

圖標(biāo)是UI設(shè)計(jì)里非常重要的模塊之一，最重要的一點(diǎn)是要保持風(fēng)格統(tǒng)一。

如果是填充型的圖標(biāo)，那么一套設(shè)計(jì)里不要出現(xiàn)線性的圖標(biāo)設(shè)計(jì)。

其次就是描邊大小的統(tǒng)一，定下了3px就要全套保持即可。

最后圖標(biāo)要做到識(shí)別度和差異性。

02､字體運(yùn)用保持統(tǒng)一

字體合理運(yùn)用是UI設(shè)計(jì)很重要的一點(diǎn)，要么字體很不相同，要么就用一款字體。

像第一個(gè)案例，字體字形比較接近，但是又不是一款字體，看久了會(huì)非常突兀。

其次就是要突出主視覺文案的時(shí)候，要盡量把輔助字體縮小，形成對(duì)比。

03､風(fēng)格保持統(tǒng)一性

目前最流行的兩種設(shè)計(jì)方式，第一：扁平化 第二：卡片式。

卡片式最有意思的就是運(yùn)用投影來模擬現(xiàn)實(shí)的距離感和層級(jí)。

如果選用卡片式的設(shè)計(jì)方式，那么全局盡量都要運(yùn)用上投影效果，不要一塊卡片，一塊扁平，風(fēng)格保持統(tǒng)一很關(guān)鍵。

04､投影的合理運(yùn)用

投影選用的顏色正確和錯(cuò)誤，直接拉低作品的質(zhì)量。

在工作中，按鈕等控件使用投影盡量用吸取工具，把主色調(diào)提取出來，把明度壓低一些，總這要保持同色系的投影，這樣才會(huì)符合視覺邏輯。

其次，如果按鈕上有文字，文字盡量不要純白，記得帶一些同色系的淡淡顏色。

05､圖片類APP排版突破

規(guī)則是死的，人是活的。

很多時(shí)候，如果需求是比較寬且走文藝氣息的時(shí)候，要嘗試突破原則，用一些另類的排版方式，其實(shí)也是做好設(shè)計(jì)的本質(zhì)。

在圖片類app中，錯(cuò)落一些的排版會(huì)使你的作品更有魅力。

06､適當(dāng)留白

好的設(shè)計(jì)，是在最少的元素下還能第一時(shí)間突出重點(diǎn)信息。

極簡(jiǎn)是一種趨勢(shì)，你要減少不必要的元素，或者簡(jiǎn)化元素。

不要想著把畫面撐滿就是好的設(shè)計(jì)，有時(shí)候，適當(dāng)?shù)牧舭�，�?huì)給用戶呼吸的空間更重要。

07､正確使用文案

如果經(jīng)常用第一種方式給客戶看稿件，那么你很難通過。

做方案時(shí)，文案符合標(biāo)題或者產(chǎn)品主旨才行，其次就是上下間距一般是20-28,一般用24就夠。

千萬不要全部放無關(guān)的文案，很拉低你的設(shè)計(jì)水準(zhǔn)。

08､輔助文字的運(yùn)用

輔助文字的合理運(yùn)用，也是提升質(zhì)感和視覺的關(guān)鍵點(diǎn)。

如果有一個(gè)或者多個(gè)主要的視覺要素，那么輔助的文字大小盡量比主視覺要小，顏色要比主視覺淺。

比如主文字字號(hào) 24px，輔助視覺就要14-18左右即可。

09､輔助線段的作用

線段的作用，主要是區(qū)分信息層級(jí)。

所以輔助線段一般采取淺色調(diào)處理，千萬不要過重會(huì)顯得很臟，拉低整體質(zhì)感。

10､引導(dǎo)頁風(fēng)格統(tǒng)一

引導(dǎo)頁的作用，是引導(dǎo)用戶如何使用產(chǎn)品或者提醒更新內(nèi)容。

不能為了設(shè)計(jì)而設(shè)計(jì)，要把握住主題，針對(duì)主題進(jìn)行圖標(biāo)等元素設(shè)計(jì)；

比如新增查閱文件夾功能，那么就要根據(jù)文件夾，放大鏡等元素進(jìn)行設(shè)計(jì)。

如果用一個(gè)掃描儀的元素肯定是錯(cuò)誤的了。

其次就是風(fēng)格的統(tǒng)一，如果都是圖標(biāo)，或者都是圖片，那么全套都要統(tǒng)一。

11､間距的統(tǒng)一性

間距的統(tǒng)一性，是排版中時(shí)刻要注意的。

等距等比是保證界面干凈整齊的一個(gè)關(guān)鍵要素。

切記，要么處處一致，要么全都不一致。

12､顏色的合理性

顏色的合理運(yùn)用，是至關(guān)重要的。

一個(gè)app或者一個(gè)界面盡量要保證一個(gè)主色調(diào)，一個(gè)輔色調(diào)即可。

不要出現(xiàn)干擾或者與主色調(diào)無關(guān)的顏色，這樣會(huì)導(dǎo)致用戶質(zhì)疑你到底是不是一款產(chǎn)品。

其次就是，想讓用戶點(diǎn)擊什么按鈕，那么取消按鈕最好弱化視覺。

13､輔助指引的運(yùn)用

這一點(diǎn)是很多人忽視的，一款好的設(shè)計(jì)或者好的產(chǎn)品，一定要做好輔助指引工作。

比如上面的兩個(gè)登陸界面，如果再輸入過程中有相應(yīng)的指引，那么會(huì)減少用戶出錯(cuò)的幾率，也會(huì)減少來回點(diǎn)擊查看這個(gè)框是干什么的次數(shù)，總之，指引很關(guān)鍵。

14､該突出就大膽突出

很多時(shí)候，對(duì)比突出做到位了，才能讓用戶第一跟進(jìn)來把注意力集中在一個(gè)點(diǎn)上。

比如上面第一個(gè)案例：沒有形成鮮明的對(duì)比，用戶進(jìn)來就會(huì)不知道先把注意力集中在哪個(gè)點(diǎn)上，第二個(gè)是正確的作法。

15､讓用戶知道在什么位置

用戶位置，是交互邏輯上很重要的一點(diǎn)。

你要讓當(dāng)前位置足夠清晰，要一眼看到現(xiàn)在什么位置才是正確的，不要害怕對(duì)比過程，你要做的就是告訴用戶，我在這里。

16､根據(jù)閱讀順序做設(shè)計(jì)

人的正常習(xí)慣閱讀順序是，從上而下，從左到右，所以在做某些需求的時(shí)候，需要考慮閱讀順序這個(gè)概念，要讓用戶最快的時(shí)間獲取到文字信息。

17､恰當(dāng)跟隨漸變色趨勢(shì)

 

總結(jié)

2017年自從淘寶ui改版后，漸變色又逐漸流行起來，但是也不能盲目跟隨，還是看產(chǎn)品主要?dú)赓|(zhì)。

其次就是運(yùn)用漸變色彩不要跨色系，盡量同色系，根據(jù)明度的變化來調(diào)節(jié)，太浮夸太夸張就是不適合的了。

這17個(gè) UI 設(shè)計(jì)指南，都是設(shè)計(jì)界面的基本技巧，還有更多的細(xì)節(jié)要在項(xiàng)目時(shí)自己體會(huì)，這樣就會(huì)慢慢進(jìn)步、提升了。