在我的設(shè)計(jì)之旅的早期，我完全依賴 Photoshop 和 CSS 中的標(biāo)準(zhǔn)設(shè)計(jì)并制作。如果 Photoshop 說(shuō)兩個(gè)形狀是對(duì)齊的，那么它們就是對(duì)齊的。如果兩個(gè)不同的人物大小不同，那它就是不同的。如果兩種顏色具有相同的十六進(jìn)制代碼，那么它們看起來(lái)就是一樣的顏色。

這種方法在我看來(lái)是合乎邏輯的，但事實(shí)證明它是錯(cuò)誤的。

程序執(zhí)行的計(jì)算是合理的，但程序無(wú)法考慮人類(lèi)對(duì)形狀、顏色和大小的感知。此外，程序無(wú)法理解對(duì)象之間的關(guān)系、它們?cè)谡w視覺(jué)環(huán)境中的位置，或者一個(gè)人將如何感知這個(gè)對(duì)象。

非理性的人類(lèi)思維決定了一個(gè)物體在光學(xué)上是否正確，因?yàn)槲覀兛梢钥吹讲⒗斫馍舷挛模@與計(jì)算機(jī)不同。了解這些細(xì)微的差異并能夠彌補(bǔ)它們是讓優(yōu)秀設(shè)計(jì)師變得更好的原因，因?yàn)橹挥猩贁?shù)人會(huì)注意到更正，但許多人會(huì)看到錯(cuò)誤。

讓我們看幾個(gè)說(shuō)明性的例子。

對(duì)齊+視覺(jué)重量

計(jì)算機(jī)無(wú)法確定一個(gè)物體相對(duì)于其他物體的視覺(jué)重量。它只能計(jì)算對(duì)象在 XY 軸上的寬度、高度或位置。設(shè)計(jì)人員有時(shí)必須通過(guò)所謂的光學(xué)補(bǔ)償來(lái)對(duì)此進(jìn)行補(bǔ)償。
圖標(biāo)內(nèi)的三角形與圓心對(duì)齊，對(duì)嗎？錯(cuò)誤的。如果我們?cè)谌切雾敳慨?huà)一個(gè)矩形，我們會(huì)看到它沒(méi)有居中。

在這種情況下，出現(xiàn)了三角形的視覺(jué)權(quán)重。其區(qū)域的很大一部分位于左側(cè)，這會(huì)產(chǎn)生三角形不在中心的視覺(jué)錯(cuò)覺(jué)。

為了解決這個(gè)問(wèn)題，我們需要手動(dòng)移動(dòng)三角形。

顏色

顏色的光學(xué)補(bǔ)償不太明顯。但即使在這種情況下，這一切都與物體的光學(xué)重量有關(guān)。
如果您對(duì)圖標(biāo)和文本使用相同的綠色陰影，則文本看起來(lái)會(huì)暗一些。

為了避免不同的光學(xué)權(quán)重，您可以使圖標(biāo)更亮或使文本更暗。

規(guī)模

比例是我們的大腦感知物體大小的方式，包括文本。例如，一個(gè) 120x120px 的正方形比一個(gè) 120px 的圓要大，所以需要把圓做大來(lái)補(bǔ)償。

與其他調(diào)整相比，顏色變化是一種微調(diào)。但即使將對(duì)象的大小更改 1 個(gè)像素，也可以極大地改進(jìn)您的設(shè)計(jì)。

大寫(xiě)字母

需要進(jìn)行更正的最后一個(gè)示例是在標(biāo)準(zhǔn)文本旁邊使用大寫(xiě)文本。標(biāo)題文本比標(biāo)準(zhǔn)文本更明顯，因此需要偏移。

在完成一個(gè)成熟的項(xiàng)目時(shí)，即使是很小的變化也會(huì)影響對(duì)畫(huà)面的整體感知。將優(yōu)秀設(shè)計(jì)與優(yōu)秀設(shè)計(jì)區(qū)分開(kāi)來(lái)的是對(duì)細(xì)節(jié)的關(guān)注。

計(jì)算機(jī)甚至人工智能都無(wú)法理解給定設(shè)計(jì)的背景，因此它們無(wú)法做出設(shè)計(jì)師可以做出的改變。我們?cè)谠O(shè)計(jì)時(shí)必須依靠我們的眼睛和直覺(jué)。