界面不精緻，往往是你忽略了這些設計細節

最新 04-23

全文共2411詞，閱讀大約需要5分鐘

文章簡介：為什麼一個簡單的界面，你做出來後總覺得不夠精緻，很可能是因為你遺漏了一些容易忽略的設計細節。本文作者通過一個案例，細緻入微的教你如何改良你的設計，一起學習起來吧！

我自己讀完此文有一個很大的感觸：做好設計不能全靠數學的精準實施，很多時候還是要相信自己的眼睛，以心理感知作為判斷標準來輔助優化設計，最後的結果對用戶來說或許才是最優的。

下面是譯文全文：

每當你看到一個界面時，你的大腦其實都在欺騙你。無論你如何努力使事物看起來一致——旁觀者的眼睛往往不會同意，因為我們在現實生活中是通過大腦來感知物體的。所以，作為設計師，我們唯一的選擇只能是反向「欺騙」用戶的大腦（譯者註：在視覺上）。在本文中，我將向你展示一個設計組件需要從哪些地方去做改善，一起來看看這個彈窗例子吧。

左邊：7處已經做了調整，右邊：沒有做調整。試著去比較調整前後的視覺感覺。

直接對比的話可能很難看出區別，所以我做了一個GIF幫助大家進行對比。

GIF

1、調整重心

現實世界中的任何物體都會受到重力的影響。意思是，一旦沒有支撐就會掉下來。我們的大腦將現實世界的期望自動應用到界面的元素上，並假設屏幕上的任何物體都在「嘗試」掉下來。即使當物體完全靜止時，我們的大腦仍然認為它會向下移動(物體上方的空間會增加，下面的空間會減少)並對其進行視覺調整。一個完美垂直居中的對象，在實際中看到的時候會偏低。為了使物體在視覺上保持一致，我們必須反補償重力的「預期」，把物體略微上移:

物體越大，它就越「重」，從而「下降」得更快。所以我們需要為更大的物體補償更多，而更小的物體補償更少。粉色顯示容納「更小」按鈕的容器：

2、調整圓角按鈕的邊距

將圓形按鈕稍稍移動到對其之外也是一個不錯的主意。

否則，按鈕會被認為略微不對其，視覺上「向內凹進去了」。同時，如果按鈕圓角比較小，則在邊緣看起來還是一條直線，這時候就不需要進行視覺補償了。

3、調整標題邊距

同樣的原則也適用於標題，特別是較大的標題。隨著字體大小的增大，每個字母的周圍空白都變得更加大，並打破了左邊界的視覺感知。為了改變這一點，我做了一個小的負左邊距：

當然，將它應用於設計中的每一個標題是很費精力的一件事，因為這需要一個手動調整過程，但是對於更突出的標題（例如，在一個登陸頁面上）是值得的。

使用左對齊文本時，文本塊的右邊緣變得「不整齊」，並且文本內容看起來會偏移。類似於圓形按鈕的情況，我將把整個文本塊稍微右邊，以使其視覺居中：

這樣，右邊緣就更靠近右邊的隱含垂直對齊規則。如果我們不這麼調整，則會有明顯的感知差異：

5、調整顏色

根據填充區域的不同，顏色的感知是不同的。應用於白色背景上的文本顏色將比放在同樣大塊的相同顏色上的文字顯得更加亮一些。相反，如果我們在深色背景上放置彩色文本，顏色看起來會變得更暗。背景會「吸收」文字顏色，總是讓視覺上轉向背景顏色。為了適應這一事實，當我在淺色背景上使用文字時，我把顏色適當調暗一點，而在深色的背景上把顏色適當調亮。