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

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

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

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

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

2、為表單增加即時(shí)的信息反饋

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

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

3、使用近似色來(lái)配色，能夠省心很多

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

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

4、使用視覺(jué)對(duì)齊來(lái)強(qiáng)化視覺(jué)一致性

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

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

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

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

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

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

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

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

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