在進(jìn)行 UI 設(shè)計的時候，很多小技巧能夠恰到好處地提升界面的設(shè)計視覺效果、用戶體驗(yàn)。這篇來自Marc Andrew 的文章梳理了 6 個實(shí)用性很強(qiáng)的 UI 效果提升小技巧，是系列文章的十二篇，原文最早發(fā)布于 marcandrew.me 。

在創(chuàng)建實(shí)用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進(jìn)行有限度的微調(diào)，即可達(dá)到頗為不錯的效果。在之前，我已經(jīng)撰寫了很多實(shí)用的 UI & UX 優(yōu)化小貼士（看完文章在文末獲?。?，這篇文章繼續(xù)增加 6 條實(shí)用的建議，一起來看看吧！

1、靈活使用網(wǎng)格系統(tǒng)

當(dāng)你使用網(wǎng)格系統(tǒng)的時候，你的用法是嚴(yán)苛而「標(biāo)準(zhǔn)」的，還是自由靈活的？

基于我的設(shè)計經(jīng)驗(yàn)，我建議采用靈活機(jī)變一點(diǎn)，不要太過教條。比如我們目前使用最多的是 8pt 網(wǎng)格系統(tǒng)，我一直傾向于使用「軟網(wǎng)格」的策略，換句話說，就是在選擇元素之間的間距和邊距的時候，靈活使用 8pt 的倍數(shù)距離，而非生硬地只使用 8pt 參數(shù)。

這種設(shè)計方法，既可以兼顧到視覺設(shè)計的美感，而且能夠?qū)⒃O(shè)計在數(shù)據(jù)上盡可能契合到整體的8pt 網(wǎng)格。

2、為表單增加即時的信息反饋

即使在今天，我們依然可能在不少場合填寫字段較多的表單。從技術(shù)上來說，曾經(jīng)很多表單需要在提交之后再給予用戶以信息反饋，而如今則可以在 APP 和網(wǎng)頁上較為輕松地實(shí)現(xiàn)實(shí)時的字段驗(yàn)證和反饋。

這種設(shè)計策略很簡單，并不花哨，但是能在用戶交互的時候，盡可能即時看到有幫助的信息。很多時候，一個小圖標(biāo)和簡短的文字提示，就能夠幫助用戶更好地填寫表單。

3、使用近似色來配色，能夠省心很多

對于系統(tǒng)性的項目而言，配色是一個麻煩事兒，而近似色的配色策略在系統(tǒng)項目當(dāng)中的效果相當(dāng)突出，很大程度上是因?yàn)榻粕粌H可以很容易拓展，而且比起其他配色更容易保持整體的一致性，而不至于讓設(shè)計失控。

通常，我們可以基于色輪選擇一個主要的色相，然后選擇它兩側(cè)的顏色來共同構(gòu)成這套配色的基礎(chǔ)色，然后根據(jù)不同的使用場合需求，調(diào)整這幾個色相的明暗和飽和度，迅速拓展出一整套的配色系統(tǒng)。

4、使用視覺對齊來強(qiáng)化視覺一致性

如果你看過我之前的文章，你會注意到我對于網(wǎng)格系統(tǒng)，是一個徹頭徹尾的死忠粉，尤其是對于8pt 的網(wǎng)格，但是，即便是對于我這樣的愛好者而言，也無法做到百分百地遵循網(wǎng)格的邏輯。

因?yàn)閺母旧蟻碚f，我們想要的是盡可能好地在視覺上呈現(xiàn) UI，但是嚴(yán)格遵循網(wǎng)格有時候無法在視覺上保持自然，因?yàn)榫W(wǎng)格對齊，有時候無法做到「視覺對齊」。比如當(dāng)你的的標(biāo)題和邊緣設(shè)置為 16px 的間距之時，標(biāo)題下的副標(biāo)題或者正文，可能需要額外增加 2px，也就是 18px 的邊距，才能保持視覺上的左對齊。

不要每次都死摳網(wǎng)格，有時候也要靈活一點(diǎn)。

5、讓搜索框容納足夠多的搜索內(nèi)容

如果可能的話，讓搜索框盡可能長，讓用戶可以盡可能長的輸入文本內(nèi)容，以精確定位到他們想要的內(nèi)容。

沒有人喜歡自己在搜索框輸入內(nèi)容的時候，會因?yàn)檩斎雰?nèi)容太長，以至于文本需要一邊輸入一邊滾動，特別是當(dāng)用戶需要搜索的內(nèi)容較多，并且網(wǎng)站本身的內(nèi)容量也夠大的時候。你直接給用戶一個足夠長的搜索框，也可以在頁面頂部保留一個搜索按鈕，點(diǎn)擊按鈕的時候，出來一個橫貫頁面的搜索框，這樣就能容納用戶需要搜索的文本內(nèi)容了。

6、給較長頁面以懸浮的導(dǎo)航欄

對于頁面長度不長的網(wǎng)站或者 APP 而言，下拉隱藏式的導(dǎo)航是非常酷的設(shè)計，但是對于長的網(wǎng)頁和內(nèi)容而言，用戶對于導(dǎo)航的需求可能會更強(qiáng)烈，也更難以觸及，所以使用懸浮式的導(dǎo)航菜單是更加貼合用戶體驗(yàn)的。

不要讓用戶遠(yuǎn)離關(guān)鍵性的 CTA 按鈕，尤其是導(dǎo)航中的 CTA 按鈕，保持可用性，保持可訪問性。

作者：陳子木