為什么一個簡單的界面在你做完之后感覺不夠精致，可能是因為你錯過了一些容易忽視的設(shè)計細節(jié)。本文作者教您如何通過案例研究改進您的設(shè)計，并一起學習！

我自己讀完這篇文章后感覺很棒：做好設(shè)計不能靠數(shù)學的精確實施。在許多情況下，我仍然要相信自己的眼睛。我使用心理感知作為協(xié)助優(yōu)化設(shè)計的標準。最終結(jié)果是給用戶的。說也許是最好的。

每當你看到一個界面，你的大腦實際上是在欺騙你。無論你怎么努力使事情看起來一致 - ——旁觀者的眼睛經(jīng)常不同意，因為在現(xiàn)實生活中我們用大腦來感知物體。因此，作為設(shè)計師，我們唯一的選擇是扭轉(zhuǎn)用戶大腦的“欺騙”（譯者注：視覺上）。在本文中，我將向您展示設(shè)計組件需要改進的位置。我們來看看這個彈出的例子。

△7已經(jīng)調(diào)整

△無需調(diào)整

嘗試比較調(diào)整前后的視覺感受。直接比較可能會讓人很難看出差異，所以我制作了一個GIF來幫助大家比較。

首先，調(diào)整重心

現(xiàn)實世界中的任何物體都受到重力的影響。這意味著一旦沒有支持，它就會下降。我們的大腦會自動將現(xiàn)實世界的期望應(yīng)用于界面的元素，并假設(shè)屏幕上的任何對象都“試圖”關(guān)閉。即使物體完全靜止，我們的大腦仍然認為它會向下移動（物體上方的空間會增加，下面的空間會減?。┎⒃谝曈X上調(diào)整它。當在實踐中看到時，完美垂直的中心物體將是低的。為了使物體在視覺上保持一致，我們必須抵消重力的“期望”并稍微向上移動物體。如下圖所示：

物體越大，它越“重”，“下降”越快。所以我們需要為更大的物體補償更多，而較小的物體補償較少。粉紅色顯示容器拿著“較小”按鈕：

其次，調(diào)整圓角按鈕的邊距

將圓形按鈕稍微移動一點也是個好主意。

否則，按鈕將被視為略微錯位，在視覺上“向內(nèi)凹陷”。同時，如果按鈕圓角很小，它看起來像邊緣的直線，因此不需要視覺補償。

第三，調(diào)整標題邊距

同樣的原則適用于標題，特別是較大的標題。隨著字體大小的增加，每個字母周圍的空白區(qū)域變大，破壞了左邊框的視覺感知。為了改變這種情況，我做了一個小的負左邊距：

當然，將它應(yīng)用于設(shè)計中的每個標題都是非常費力的事情，因為它需要手動調(diào)整過程，但是對于更突出的標題（例如，在登錄頁面上）是值得的。

第四，調(diào)整文本塊的右邊框

使用左對齊文本時，文本塊的右邊緣變?yōu)椤安徽R”，文本內(nèi)容似乎偏移。與圓形按鈕的情況類似，我會將整個文本塊稍微向右移動，以便在視覺上居中：

因此，右邊緣更接近右側(cè)隱含的垂直對齊規(guī)則。如果我們不對此進行調(diào)整，則會有明顯的差異：

五，調(diào)整顏色

顏色的感知根據(jù)填充區(qū)域而不同。應(yīng)用于白色背景的文本顏色將顯示為比放置在相同顏色的同一大塊上的文本更亮。相反，如果我們將彩色文本放在深色背景上，顏色會顯得更暗。背景“吸收”文本顏色并始終使其在視覺上轉(zhuǎn)換為背景顏色。為了適應(yīng)這個事實，當我在淺色背景上使用文字時，我會稍微減輕顏色并在深色背景上點亮顏色。

字體大小和重量越小，您需要的補償越多：

六，調(diào)整灰度

這是顏色調(diào)整的特例。我嘗試使用100％黑色并修改其不透明度以創(chuàng)建灰色文本，而不是直接設(shè)置顏色值：

這樣，當您使背景變暗時，您的灰色將不會“不可見”：

半透明黑色有助于實現(xiàn)可讀結(jié)果，而無需創(chuàng)建許多不同的樣式。對于更深的背景，半透明白色也是一種選擇：

7.調(diào)整投影密度

我使用的不同陰影濃度取決于陰影對象的顏色。對于較暗的物體，使陰影更強，對于更亮的物體，使陰影更亮：

如果沒有這種技術(shù)，假設(shè)兩個陰影具有相同的不透明度，則較暗物體的陰影在較暗物體的陰影旁邊看起來會更暗：

總結(jié)

當然，并非每個項目都需要額外的視覺調(diào)整時間，但如果您正在開發(fā)的界面需要特別注意并且需要脫穎而出，使用上述所有技術(shù)將導(dǎo)致更加和諧的結(jié)果。

« 王思聰用33歲生日派對的個人飛機帶40位美女接送 | 奇信集團榮獲2018年中國企業(yè)服務(wù)“商業(yè)創(chuàng)新企業(yè)獎” »