想要讓 UI 界面的體驗(yàn)更加優(yōu)秀,其實(shí)在很多時(shí)候都需要在細(xì)節(jié)上打磨即可。那么快速提升UI 設(shè)計(jì)效果的技巧有哪些?類(lèi)似這樣的小技巧有很多,列如讓元素看起來(lái)更清晰的技巧、只使用一個(gè)字體族做設(shè)計(jì)、長(zhǎng)篇幅文本最好在 20pt 浮動(dòng)、提供可選的新用戶引導(dǎo)流程、為陰影統(tǒng)一光源、用微妙的疊加圖層來(lái)改善對(duì)比度、克制地使用居中對(duì)齊的文本、請(qǐng)大膽使用留白、加深淺色背景上的文本等,下面是詳細(xì)介紹。
1、讓元素看起來(lái)更清晰的技巧
其實(shí)并不復(fù)雜,就是在通常不會(huì)用陰影的元素邊緣增加「多個(gè)投影」或者使用非常微妙的邊框(比陰影要稍微暗一點(diǎn)),可以讓這個(gè)元素看起來(lái)更加清晰,并且避免了彌散投影帶來(lái)的那種拖泥帶水的感覺(jué)。
2、只使用一個(gè)字體族做設(shè)計(jì)
雖然使用字體組合可以創(chuàng)造視覺(jué)風(fēng)格和樣式上的對(duì)比,但是實(shí)際上僅用一個(gè)字體族所制作的效果是完全沒(méi)問(wèn)題的。
請(qǐng)忽略「至少使用2種不同字體」這種設(shè)計(jì)規(guī)則,通過(guò)調(diào)整字重、尺寸、配色,你同樣可以達(dá)到相當(dāng)優(yōu)秀的效果。
3、長(zhǎng)篇幅文本最好在 20pt 浮動(dòng)
對(duì)于長(zhǎng)篇幅的文本內(nèi)容,比如博客文章,項(xiàng)目說(shuō)明以及需要用戶閱讀一段時(shí)間的內(nèi)容,最好在正文當(dāng)中,采用 20 pt 的文本參數(shù)。
當(dāng)然,考慮到使用場(chǎng)景、字體本身的樣式差異,20pt 這一參數(shù)并非是定死的,而是可以根據(jù)實(shí)際效果進(jìn)行靈活調(diào)整。在過(guò)去的 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è)用戶都有看完教程的必要,在界面中提供「跳過(guò)」選項(xiàng),讓用戶擁有選擇的權(quán)利,同時(shí),這個(gè)「跳過(guò)」按鈕盡量在界面的底部,畢竟在這個(gè)大屏當(dāng)?shù)赖臅r(shí)代,手指最便捷的交互區(qū)域主要集中在屏幕底部。
5、為陰影統(tǒng)一光源
這可以算是一個(gè)統(tǒng)一體驗(yàn)的進(jìn)階技巧了,當(dāng) UI 界面元素的光源不統(tǒng)一的時(shí)候,可能會(huì)有一部分用戶能夠感知到并覺(jué)得奇怪。但是如果光源統(tǒng)一,能夠給 APP 的體驗(yàn)帶來(lái)強(qiáng)烈的一致感。
6、用微妙的疊加圖層來(lái)改善對(duì)比度
文本和背景之間的對(duì)比度并不一定理想,這個(gè)時(shí)候你可以額外增加一個(gè)色彩疊加層,不過(guò)這個(gè)疊加圖層盡量不要使用純色,而是要用一定的漸變(從下往上或者從上往下)來(lái)變化,一方面優(yōu)化了元素之間的對(duì)比度,還能確保自然舒適。
7、克制地使用居中對(duì)齊的文本
居中對(duì)齊式的文本排版并非不能用,而是要克制地使用。盡量只在標(biāo)題和少量的小塊文本當(dāng)中使用居中的文本排版,對(duì)于其他的內(nèi)容,請(qǐng)還是遵循普世的左對(duì)齊排版。
8、請(qǐng)大膽使用留白
留白是排版設(shè)計(jì)的時(shí)候,最重要的元素。請(qǐng)不要吝嗇,不要過(guò)度追求信息的飽和度,盡量讓界面有呼吸感,在這個(gè)信息過(guò)載的時(shí)代,盡量給用戶以舒適通透的體驗(yàn)。讓行高至少為文本高度的 1.5倍,基于親近原則,合理地將元素分組的前提之下,讓元素與元素、組與組之間,不要過(guò)于密集。這是提升設(shè)計(jì)感最快的方法之一。
9、加深淺色背景上的文本
現(xiàn)在的設(shè)計(jì)師同學(xué)應(yīng)該很清楚不要在淺色和白色背景上使用純黑的文本了,大家通常會(huì)使用灰色或者使用使用透明度來(lái)控制文本的深淺,不過(guò)很多時(shí)候?yàn)榱苏故拘枰芏嗤瑢W(xué)用的灰色文本,可讀性并不強(qiáng)。
為了改善實(shí)際的體驗(yàn)和效果,保證文本內(nèi)容的可訪問(wèn)性,適當(dāng)加深文本的灰色,在保證色彩對(duì)比度以及和其他文本的層次感的前提下,達(dá)到優(yōu)秀的視覺(jué)體驗(yàn)。
以上就是關(guān)于快速提升UI 設(shè)計(jì)效果的技巧有哪些的全部?jī)?nèi)容,想了解更多關(guān)于UI 設(shè)計(jì)的信息,請(qǐng)繼續(xù)關(guān)注中培偉業(yè)。