在產(chǎn)品設(shè)計的過程中，好的工具能提高我們的效率。但與此同時，工具因其自身的局限性也會引發(fā)一些問題。在今天的譯文中，作者 Luke 分析了這些問題，然后給出了解決方案，并鼓勵設(shè)計師要相信自己的眼睛和直覺。下面進入譯文。

當我還是個設(shè)計新手的時候，我依靠 Photoshop 或者 CSS 來判斷一個設(shè)計是對還是錯。舉幾個例子，假如兩個圖形通過 PS 的「對齊」功能校準了，那我就認為他們是對齊的。假如兩個不同的形狀是同樣的尺寸，那我就認為他們是一樣大的。假如兩個顏色是同一個十六進制色值（譯注：即 HEX，例如白色的十六進制色值為 #FFFFFF），那我就認為他們「看起來」是一樣的。

上面的說法看似合乎邏輯，卻是錯誤的工作方式。

因為這些軟件的計算結(jié)果雖然「合理」，但它們并沒有像人類那樣去感知形狀、顏色和尺寸。換句話說，這些軟件無法像人類那樣，通過一個參照物，去感知另一個物體，并理解兩個相互關(guān)聯(lián)的物體間的環(huán)境。

所以，設(shè)計師需要不同于計算機的「非理性」的頭腦去決定一個設(shè)計看起來是對還是錯，因為只有我們才能理解設(shè)計中的前后關(guān)聯(lián)，而電腦做不到這點——搞清楚這個問題的設(shè)計師才可謂是優(yōu)秀的設(shè)計師。

通常，經(jīng)過深思熟慮的設(shè)計并不會引起用戶太大的注意，但明顯錯誤的設(shè)計絕逼會引起用戶的抱怨。讓我們來看一系列常見的例子。

對齊與視覺重量

計算機無法精準地計算出一個物體的中心在哪個位置，它只能夠通過一些信息來做判斷，例如寬、高，或者 x/y 坐標位置。作為設(shè)計師，我們需要通過我們的眼睛來輔助校準這個中心位置。

標準的播放圖標里的三角形是居中對齊的嗎？并不是。畫一個輔助的矩形就知道了——這個三角形偏離了中心線。

左側(cè)這個標準的播放按鈕里的三角形，若畫上一個輔助矩形后，可以看見它并不是完全居中的。

上圖右側(cè)這組完美居中的播放按鈕，三角形看起來卻是偏左的，而且偏得挺明顯的，這是為什么呢？原因在于視覺重量。三角形的大部分質(zhì)量分布它的左半部分，這造成了它偏左的假象。

為了解決這個問題，我們必須手動校準三角形的位置，直到它「看起來」是居中的。

顏色

通過眼睛調(diào)整顏色則更加微妙。這也與物體的「重量」有關(guān)——即這個顏色出現(xiàn)的面積有多大。

簡而言之，同一個綠色被用來填充圖標和文字時，文字的綠色有可能看起來就要比圖標顯得更淺一些。

左側(cè)的圖標和文字組合使用的同一個 HEX 色值，右側(cè)的組合則使用了兩種不同的色值。

這很微妙，但你能看出來圖標要比文字的顏色更「重」。為了解決這個問題，不論你是把圖標的顏色調(diào)淺，或者把文字調(diào)深都可以——我的建議是選擇一個符合 AA 可訪問性指南的顏色即可（譯注：AA 可訪問性指南指的是 W3C 提出的方便有障礙人士訪問網(wǎng)頁的指南）。

我推薦使用 HSB / HSL 色值。它們允許設(shè)計師通過調(diào)整「L」或者「B」的值來迅速地改變一種顏色的明度。

尺寸

尺寸指的是我們的大腦所感知到的物體和文字的大小。假設(shè)有這么兩組圖形，一個 120×120 像素的矩形面積比一個 120×120 像素的圓要大。所以圓形必須再大一點才能看起來與矩形相匹配。

左側(cè)的兩個圖形都是 120×120 像素，但圓形看起來要小一些。右側(cè)的圓形是 126×126 像素，看起來和 120×120 像素的矩形差不多。

與其他的調(diào)整相比，它顯得很微小。但這個微小的調(diào)整能使得整體設(shè)計看起來更好——通過一個像素一個像素的調(diào)整，直到感覺對了為止。

（譯注：接下來作者介紹了英文字母大小寫放在一起時，如何調(diào)整視覺比例的方法?？紤]到中文都是方塊字，并不存在類似的問題，參考價值不大，故不作翻譯，有興趣的同學可以去閱讀原文。）

……

在進行界面設(shè)計時，每增加一處這類細微的設(shè)計調(diào)整，都會影響網(wǎng)站的整體感覺。這種關(guān)注細節(jié)的能力將造就偉大的設(shè)計。

當這些習慣養(yǎng)成之后，比如減少 2 像素文字，或者輕移三角形 10 個像素等，它將使得你的設(shè)計有可能做到真正的像素級完美。

計算機，乃至人工智能目前都無法理解設(shè)計中物體間的上下關(guān)聯(lián)，所以它們不能做出像設(shè)計師那樣的校準。在計算機能夠解決這個問題之前，它仍然不能用于做復雜的設(shè)計決策。

此外，我們也不應該依靠計算機來思考所有的事情。我們應該信賴自己的眼睛與直覺。設(shè)計師在每天的工作中都在磨練自己的直覺，所以我們要信任設(shè)計師，哪怕計算機說這是「錯誤的」。

作者：Luke Jones

原文鏈接：Optical Adjustment

#專欄作家#

zhucbeta，微信公眾號：設(shè)計譯言，人人都是產(chǎn)品經(jīng)理專欄作家。前產(chǎn)品汪現(xiàn)線框仔，關(guān)注以用戶為中心的產(chǎn)品設(shè)計。Trying to make a Duang in the universe.

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。