界面不精致，往往是你忽略了這些設(shè)計(jì)細(xì)節(jié)

為什么一個(gè)簡(jiǎn)單的界面，你做出來(lái)后總覺(jué)得不夠精致，很可能是因?yàn)槟氵z漏了一些容易忽略的設(shè)計(jì)細(xì)節(jié)。本文作者通過(guò)一個(gè)案例，細(xì)致入微的教你如何改良你的設(shè)計(jì)，一起學(xué)習(xí)起來(lái)吧！

我自己讀完此文有一個(gè)很大的感觸：做好設(shè)計(jì)不能全靠數(shù)學(xué)的精準(zhǔn)實(shí)施，很多時(shí)候還是要相信自己的眼睛，以心理感知作為判斷標(biāo)準(zhǔn)來(lái)輔助優(yōu)化設(shè)計(jì)，最后的結(jié)果對(duì)用戶來(lái)說(shuō)或許才是最優(yōu)的。

每當(dāng)你看到一個(gè)界面時(shí)，你的大腦其實(shí)都在欺騙你。無(wú)論你如何努力使事物看起來(lái)一致——旁觀者的眼睛往往不會(huì)同意，因?yàn)槲覀冊(cè)诂F(xiàn)實(shí)生活中是通過(guò)大腦來(lái)感知物體的。所以，作為設(shè)計(jì)師，我們唯一的選擇只能是反向「欺騙」用戶的大腦（譯者注：在視覺(jué)上）。在本文中，我將向你展示一個(gè)設(shè)計(jì)組件需要從哪些地方去做改善，一起來(lái)看看這個(gè)彈窗例子吧。

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

△ 沒(méi)有做調(diào)整

試著去比較調(diào)整前后的視覺(jué)感覺(jué)。直接對(duì)比的話可能很難看出區(qū)別，所以我做了一個(gè) GIF 幫助大家進(jìn)行對(duì)比。

一、調(diào)整重心

現(xiàn)實(shí)世界中的任何物體都會(huì)受到重力的影響。意思是，一旦沒(méi)有支撐就會(huì)掉下來(lái)。我們的大腦將現(xiàn)實(shí)世界的期望自動(dòng)應(yīng)用到界面的元素上，并假設(shè)屏幕上的任何物體都在「嘗試」掉下來(lái)。即使當(dāng)物體完全靜止時(shí)，我們的大腦仍然認(rèn)為它會(huì)向下移動(dòng)（物體上方的空間會(huì)增加，下面的空間會(huì)減少）并對(duì)其進(jìn)行視覺(jué)調(diào)整。一個(gè)完美垂直居中的對(duì)象，在實(shí)際中看到的時(shí)候會(huì)偏低。為了使物體在視覺(jué)上保持一致，我們必須反補(bǔ)償重力的「預(yù)期」，把物體略微上移。如下圖：

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

二、調(diào)整圓角按鈕的邊距

將圓形按鈕稍稍移動(dòng)到對(duì)其之外也是一個(gè)不錯(cuò)的主意。

否則，按鈕會(huì)被認(rèn)為略微不對(duì)齊，視覺(jué)上「向內(nèi)凹進(jìn)去了」。同時(shí)，如果按鈕圓角比較小，則在邊緣看起來(lái)還是一條直線，這時(shí)候就不需要進(jìn)行視覺(jué)補(bǔ)償了。

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

同樣的原則也適用于標(biāo)題，特別是較大的標(biāo)題。 隨著字體大小的增大，每個(gè)字母的周?chē)瞻锥甲兊酶哟螅⒋蚱屏俗筮吔绲囊曈X(jué)感知。 為了改變這一點(diǎn)，我做了一個(gè)小的負(fù)左邊距：

當(dāng)然，將它應(yīng)用于設(shè)計(jì)中的每一個(gè)標(biāo)題是很費(fèi)精力的一件事，因?yàn)檫@需要一個(gè)手動(dòng)調(diào)整過(guò)程，但是對(duì)于更突出的標(biāo)題（例如，在一個(gè)登錄頁(yè)面上）是值得的。

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

使用左對(duì)齊文本時(shí)，文本塊的右邊緣變得「不整齊」，并且文本內(nèi)容看起來(lái)會(huì)偏移。 類似于圓形按鈕的情況，我將把整個(gè)文本塊稍微往右邊移動(dòng)，使其視覺(jué)居中：

這樣，右邊緣就更靠近右邊隱含的垂直對(duì)齊規(guī)則。如果我們不這么調(diào)整，則會(huì)有明顯的感知差異：

五、調(diào)整顏色

根據(jù)填充區(qū)域的不同，顏色的感知是不同的。 應(yīng)用于白色背景上的文本顏色，將比放在同樣大塊的相同顏色上的文字顯得更加亮一些。 相反，如果我們?cè)谏钌尘吧戏胖貌噬谋荆伾雌饋?lái)會(huì)變得更暗。 背景會(huì)「吸收」文字顏色，總是讓視覺(jué)上轉(zhuǎn)向背景顏色。 為了適應(yīng)這一事實(shí)，當(dāng)我在淺色背景上使用文字時(shí)，我把顏色適當(dāng)調(diào)暗一點(diǎn)，而在深色的背景上把顏色適當(dāng)調(diào)亮。

字體尺寸和重量越小，就越需要補(bǔ)償：

六、調(diào)整灰度

這是顏色調(diào)整的一個(gè)特例。我嘗試選用100％黑色并修改其不透明度來(lái)建立灰色文字，而不是直接設(shè)置顏色值：

這樣，當(dāng)你變暗背景時(shí)，你的灰色不會(huì)被「看不清」：

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

七、調(diào)整投影濃度

我使用不同的陰影濃度取決于產(chǎn)生陰影物體的顏色。對(duì)于較暗的物體，應(yīng)使陰影更強(qiáng)烈，而對(duì)于較亮的物體，應(yīng)使陰影更輕薄：

如果沒(méi)有這個(gè)技巧，假設(shè)兩個(gè)陰影都具有相同的不透明度，那么較亮物體的陰影會(huì)在較暗物體的陰影旁邊看起來(lái)更暗：

總結(jié)

當(dāng)然，并非每個(gè)項(xiàng)目都需要花費(fèi)額外的視覺(jué)調(diào)整時(shí)間，但如果您正在開(kāi)發(fā)的界面需要特別重視并且需要脫穎而出，使用上述所有技巧將會(huì)帶來(lái)更加和諧的結(jié)果。

原文鏈接：《Optical adjustments in components》?Anton Lovchikov

歡迎關(guān)注譯者的微信公眾號(hào)：「?彩云譯設(shè)計(jì)」

「能讓設(shè)計(jì)更精致的細(xì)節(jié)」

• 《讓設(shè)計(jì)細(xì)節(jié)更高級(jí)的10個(gè)實(shí)用小技巧》
• 《網(wǎng)易資深視覺(jué)設(shè)計(jì)師：24個(gè)容易忽略的App設(shè)計(jì)細(xì)節(jié)》
• 《作品不夠精致？可能你沒(méi)有注意這5個(gè)細(xì)節(jié)》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com