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

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

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

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

△無需調(diào)整

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

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

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

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

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

將圓形按鈕稍微移動(dòng)一點(diǎn)也是個(gè)好主意。

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

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

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

當(dāng)然，將它應(yīng)用于設(shè)計(jì)中的每個(gè)標(biāo)題都是非常費(fèi)力的事情，因?yàn)樗枰謩?dòng)調(diào)整過程，但是對(duì)于更突出的標(biāo)題（例如，在登錄頁面上）是值得的。

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

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

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

五，調(diào)整顏色

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

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

六，調(diào)整灰度

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

這樣，當(dāng)您使背景變暗時(shí)，您的灰色將不會(huì)“不可見”：

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

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

我使用的不同陰影濃度取決于陰影對(duì)象的顏色。對(duì)于較暗的物體，使陰影更強(qiáng)，對(duì)于更亮的物體，使陰影更亮：

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

總結(jié)

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

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