眼睛通過光的反射接收信息，然后經(jīng)過大腦的處理形成我們最后看到的圖像，這種形成，可能會導(dǎo)致一些誤差。那視覺誤差會對UI造成什么樣的影響呢？

我們的眼睛是奇怪的器官，經(jīng)常向我們?nèi)鲋e。眼睛通過光的反射接收信息，然后經(jīng)過一次腦補(bǔ)最終形成我們所謂看見的圖像。腦補(bǔ)這個過程，會因?yàn)楦鞣N原因的影響，導(dǎo)致我們對于看見的事物的理解產(chǎn)生偏差。因此當(dāng)你知道人類視覺感受的特性時，你就可以通過人類視覺慣性做出“正確”的設(shè)計(jì)。

視覺尺寸和物理尺寸

哪個更大：400像素的正方形 or 400像素的圓圈？

在幾何上，它們的寬度和高度是相等的。但看看下面的圖片：我們的眼睛立即發(fā)現(xiàn)這個方塊比這個圓圈大。因此，物體的物理尺寸是一樣的，但視覺尺寸卻有可能不一樣的。

圓的直徑增加了 50px：讓我們再看一個正方形和一個圓形的圖片：改變圓形尺寸，調(diào)整尺寸的后的兩個圖形看起來才是一樣大的。至少也不會像圖一一樣，讓人第一眼就認(rèn)為正方形比較大。

圖2-1

圖2-2

為什么發(fā)生這種情況？

我重疊了第一個示例（400像素正方形和圓形）和第二個示例（400像素正方形和450像素圓形）的形狀。如下圖所示：正方形超過“a”區(qū)域的圓圈，而圓圈超過“b”區(qū)域的正方形。

• 左：正方形多出的四個面積巨大的 a 區(qū)域，就是造成這種視覺誤差的原因。
• 右：正方形無法將整個圓形包裹在內(nèi)了，圓形超出的四個 b 區(qū)域又與正方形多出來的 a 區(qū)域在視覺上互相抵消，所以 450px 的圓形與 400px 的正方形在視覺尺寸上更接近，也就是視覺上的“一樣大”。

菱形或三角形也是相同的效果，所有的圖形都能夠造成這樣的偏差。要與視覺尺寸平衡，它們應(yīng)該更寬，更高，以便它們的區(qū)域相似，比較區(qū)域的方法適用于具有足夠簡單的形狀。

這個現(xiàn)象對于界面設(shè)計(jì)會造成哪一些問題呢？

例如：當(dāng)繪制一套 icon 的時候，重要的是要使它們?nèi)勘３志?，以便沒有圖標(biāo)突出顯示或顯得太小。如果我們直接將圖標(biāo)寫入方形區(qū)域，則更像方形的圖標(biāo)看起來會更大。

我建議：通過允許視覺上較小的圖標(biāo)，懸掛在圖標(biāo)區(qū)域之外，并在視覺上較重的圖標(biāo)與圖標(biāo)區(qū)域之間，留出一些空間來補(bǔ)償不同形狀圖標(biāo)的重量。也就是：視覺重量小的元素要放大，視覺重量大的元素要縮小。

舉個例子：這些真實(shí)的icon是視覺尺寸平衡的。

模糊測試

檢查視覺平衡的最簡單的方法是模糊測試。如果您的圖標(biāo)變成相似大小的斑點(diǎn)，則它們大致具有相同的視覺尺寸。

但有時我們會使用已有的圖形，例如：社交網(wǎng)絡(luò)標(biāo)志。Facebook和Instagram的圖標(biāo)是正方形的，而Twitter則由一個鳥類剪影和Pinterest環(huán)繞的“P”表示。

這就是為什么Twitter和Pinterest圖標(biāo)更大一些，以便它們與Facebook和Instagram圖標(biāo)保持平衡。

視覺平衡問題的另一個例子是：表單配按鈕。如果按鈕直徑等于文本框高度，那么按鈕對我們的眼睛看起來會更小，但是如果稍微放大一點(diǎn)，整個構(gòu)造就會更加平衡、視覺尺寸才能相等。

但是，如果更改按鈕的顏色，則不需要放大。在下面的圖片中，按鈕和文本框高80像素，但由于強(qiáng)烈的黑色填充，讓它看起來的視覺重量更重，這也能達(dá)成視覺尺寸相等。

重要的是要記住：

1. 視覺尺寸是人眼對物體尺寸和重要性的感知程度，并不一定等于其像素尺寸。
2. 圓形，菱形，三角形和其他非正方形形狀需要更大、更重才能與方形形狀進(jìn)行視覺平衡。
3. 圖標(biāo)區(qū)域應(yīng)該留有一定的安全區(qū)域，這對于一組圖標(biāo)來說非常重要，留給設(shè)計(jì)師的操作空間解決視覺尺寸對等問題。

原文作者：Slava Shestopalov

原文鏈接：https://medium.muz.li/optical-effects-9fca82b4cd9a

本文由 @VisualCChttps? 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議