提升UI設(shè)計(jì)效果的方法

　　在創(chuàng)建漂亮而高效的UI設(shè)計(jì)的時(shí)候，你需要花費(fèi)不少的時(shí)間來打磨細(xì)節(jié)，并且在此過程中進(jìn)行不斷的調(diào)整，讓你的客戶、用戶以及你自己感到滿足。很多小技巧能夠恰到好處地提升界面的設(shè)計(jì)視覺效果、用戶體驗(yàn)。今天AAA教育郭老師就針對(duì)提升UI設(shè)計(jì)效果的方法進(jìn)行簡單的說明。
 

　　在創(chuàng)建漂亮而高效的 UI 的時(shí)候，你需要花費(fèi)不少的時(shí)間來打磨細(xì)節(jié)，并且在此過程中進(jìn)行不斷的調(diào)整，讓你的客戶、用戶以及你自己感到滿足。
 

　　我在做設(shè)計(jì)的過程中，發(fā)掘了不少實(shí)用的、有效的細(xì)節(jié)調(diào)整的技巧，可以快速地將整個(gè)設(shè)計(jì)稿的視覺效果提升一個(gè)檔次。
 

　　在這篇提升UI設(shè)計(jì)效果的方法文章當(dāng)中， 我將這些技巧梳理了出來，希望能夠給你一些幫助。
 

　　1.讓元素看起來更清晰

　　其實(shí)并不復(fù)雜，就是在通常不會(huì)用陰影的元素邊緣增加「多個(gè)投影」或者使用非常微妙的邊框(比陰影要稍微暗一點(diǎn))，可以讓這個(gè)元素看起來更加清晰，并且避免了彌散投影帶來的那種拖泥帶水的感覺。
 

　　2.只使用一個(gè)字體族做設(shè)計(jì)

　　其實(shí)并不復(fù)雜，就是在通常不會(huì)用陰影的元素邊緣增加「多個(gè)投影」或者使用非常微雖然使用字體組合可以創(chuàng)造視覺風(fēng)格和樣式上的對(duì)比，但是實(shí)際上僅用一個(gè)字體族所制作的效果是完全沒問題的妙的邊框(比陰影要稍微暗一點(diǎn))，可以讓這個(gè)元素看起來更加清晰，并且避免了彌散投影帶來的那種拖泥帶水的感覺。
 

　　3.長篇福文本最好在20pt浮動(dòng)

　　對(duì)于長篇幅的文本內(nèi)容，項(xiàng)目說明以及需要用戶閱讀一段時(shí)間的內(nèi)容，最好在正文當(dāng)中，采用 20 pt 的文本參數(shù)。
 

　　當(dāng)然，考慮到使用場景、字體本身的樣式差異，20pt 這一參數(shù)并非是定死的，而是可以根據(jù)實(shí)際效果進(jìn)行靈活調(diào)整。在過去的10年間，依然有很多網(wǎng)站遵循傳統(tǒng)采用 18pt 的字號(hào)，閱讀體驗(yàn)相當(dāng)糟糕。
 

　　4.提供可選的新用戶引導(dǎo)

　　在用戶首次安裝 APP 或進(jìn)入網(wǎng)站的時(shí)候，通常是會(huì)提供給用戶以一個(gè)新用戶教程以引導(dǎo)用戶熟悉產(chǎn)品和交互。
 

　　但是!并不是每個(gè)用戶都有看完教程的必要，在界面中提供「跳過」選項(xiàng)，讓用戶擁有選擇的權(quán)利，同時(shí)，這個(gè)「跳過」按鈕盡量在界面的底部，畢竟在這個(gè)大屏當(dāng)?shù)赖臅r(shí)代，手指最便捷的交互區(qū)域主要集中在屏幕底部。
 

　　5.為陰影統(tǒng)一光源

　　這可以算是一個(gè)統(tǒng)一體驗(yàn)的進(jìn)階技巧了，當(dāng) UI 界面元素的光源不統(tǒng)一的時(shí)候，可能會(huì)有一部分用戶能夠感知到并覺得奇怪。但是如果光源統(tǒng)一，能夠給 APP 的體驗(yàn)帶來強(qiáng)烈的一致感。
 

　　6.用疊加圖層改善對(duì)比度

　　文本和背景之間的對(duì)比度并不一定理想，這個(gè)時(shí)候你可以額外增加一個(gè)色彩疊加層，不過這個(gè)疊加圖層盡量不要使用純色，而是要用一定的漸變(從下往上或者從上往下)來變化，一方面優(yōu)化了元素之間的對(duì)比度，還能確保自然舒適。
 

　　7.克制的使用居中對(duì)齊文本

　　居中對(duì)齊式的文本排版并非不能用，而是要克制地使用。盡量只在標(biāo)題和少量的小塊文本當(dāng)中使用居中的文本排版，對(duì)于其他的內(nèi)容，請(qǐng)還是遵循普世的左對(duì)齊排版。
 

　　8.大膽的使用留白

　　留白是排版設(shè)計(jì)的時(shí)候，最重要的元素。請(qǐng)不要吝嗇，不要過度追求信息的飽和度，盡量讓界面有呼吸感，在這個(gè)信息過載的時(shí)代，盡量給用戶以舒適通透的體驗(yàn)。讓行高至少為文本高度的 1.5倍，基于親近原則，合理地將元素分組的前提之下，讓元素與元素、組與組之間，不要過于密集。
 

　　9.加深淺色背景上的文本

　　現(xiàn)在的設(shè)計(jì)師同學(xué)應(yīng)該很清楚不要在淺色和白色背景上使用純黑的文本了，大家通常會(huì)使用灰色或者使用透明度來控制文本的深淺，不過很多時(shí)候?yàn)榱苏故拘枰芏嗤瑢W(xué)用的灰色文本，可讀性并不強(qiáng)。
 

　　為了改善實(shí)際的體驗(yàn)和效果，保證文本內(nèi)容的可訪問性，適當(dāng)加深文本的灰色，在保證色彩對(duì)比度以及和其他文本的層次感的前提下，達(dá)到優(yōu)秀的視覺體驗(yàn)。
 

　　總結(jié)
 

　　想要讓 UI 界面的體驗(yàn)更加優(yōu)秀，其實(shí)在很多時(shí)候都需要在細(xì)節(jié)上打磨即可。類似這樣的方法有很多，后面我還會(huì)繼續(xù)補(bǔ)充。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。