編者按：在進行 UI 設計的時候，很多小技巧能夠恰到好處地提升界面的設計視覺效果、用戶體驗。這篇來自Marc Andrew 的文章梳理了 6 個實用性很強的 UI 效果提升小技巧，是系列文章的十二篇，原文最早發布于 marcandrew.me 。

在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進行有限度的微調，即可達到頗為不錯的效果。在之前，我已經撰寫了很多實用的 UI & UX 優化小貼士（看完文章在文末獲取），這篇文章繼續增加 6 條實用的建議，一起來看看吧！

1、靈活使用網格系統

當你使用網格系統的時候，你的用法是嚴苛而「標準」的，還是自由靈活的？

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

這種設計方法，既可以兼顧到視覺設計的美感，而且能夠將設計在數據上盡可能契合到整體的8pt 網格。

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

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

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

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

對于系統性的項目而言，配色是一個麻煩事兒，而近似色的配色策略在系統項目當中的效果相當突出，很大程度上是因為近似色不僅可以很容易拓展，而且比起其他配色更容易保持整體的一致性，而不至于讓設計失控。

通常，我們可以基于色輪選擇一個主要的色相，然后選擇它兩側的顏色來共同構成這套配色的基礎色，然后根據不同的使用場合需求，調整這幾個色相的明暗和飽和度，迅速拓展出一整套的配色系統。

4、使用視覺對齊來強化視覺一致性

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

因為從根本上來說，我們想要的是盡可能好地在視覺上呈現 UI，但是嚴格遵循網格有時候無法在視覺上保持自然，因為網格對齊，有時候無法做到「視覺對齊」。比如當你的的標題和邊緣設置為 16px 的間距之時，標題下的副標題或者正文，可能需要額外增加 2px，也就是 18px 的邊距，才能保持視覺上的左對齊。

不要每次都死摳網格，有時候也要靈活一點。

5、讓搜索框容納足夠多的搜索內容

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

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

6、給較長頁面以懸浮的導航欄

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

不要讓用戶遠離關鍵性的 CTA 按鈕，尤其是導航中的 CTA 按鈕，保持可用性，保持可訪問性。

下面是往期的內容：