「乾貨」視覺效應對UI設計的影響（多圖）

本文譯自Slava Shestopalov的Optical Effects in User Interfaces (for True Nerds)，我看了以後覺得非常有收穫，文章非常詳細地介紹了人眼感知到尺寸和實際物體尺寸的差異以及原因，對我們設計師做UI很有幫助，所以翻譯出來分享給大家。

正文

我們的眼睛是一個經常會說謊的神奇器官，但是如果你知道一些人眼視覺的奇妙特性，在做設計的時候就能得到更和諧的結果。不僅字體設計師要運用這些視覺效應來創造高平衡性的字體，UI設計師也可以運用這些效應來創造更好的人機體驗。

一、實際尺寸vs視覺感知的尺寸

看看下面這張圖，你覺得哪一個圖形看上去更大一些呢？

顯然，方形看上去更大一些。但實際上，方形邊長和圓形的直徑是相等的，都是400px。看來，同樣的尺寸，我們的眼睛會認為方形比圓形大。

再來看下面這張圖，你覺得方形和圓形的大小看起來如何？

這回，方形和圓形的視重看起來平衡了很多。至少，不能立即說出哪個大、哪個小。其實，我已經將圓形的直徑增至450像素。

為什麼會有這種現象呢？我用邊長400px的正方形分別重疊直徑400px的圓形和直徑450px的圓形，設正方形超出圓形的面積為a，圓形超出正方形的面積為b。可以明顯看出，正方形完全包圍了直徑為400px的圓形；而直徑450px的圓形和正方形看起來面積相當，儘管寬和高不一致。

菱形和三角形也有同樣的現象。為了看起來和正方形達到視覺上的平衡，菱形和三角形應該增加高或者寬。對於簡單的形狀來說，通過調節面積達到視覺平衡是一個很實用的方法。

那麼我們在做UI設計的時候，要如何善用這個視覺效應呢？舉個例子，比如你要設計一套圖標，很重要的一點就是要讓這些圖標在大小上看起來平衡，不應該出現其中一個圖標過大獲過小的情況。如果我們給每一個圖標限制在同樣大小的正方形里，那麼越是接近這個正方形形狀的圖標看起來就會更大。下圖就能很明顯看出第二個圖標比第一個大。

所以，建議在平衡一套圖標的大小時，我們可以做一些細微地調整。將大且重的圖標稍微縮小一點，將小且輕的圖標放大一點，稍微超出界限也沒有關係。

可以用高斯模糊的方法來觀察整套圖標的大小平衡，如果圖標看來都是相似大小的黑影，說明它們達到了相同的視重。

再看一套真實圖標的例子。

畫上參考線，發現恰好符合前面所說的尺寸調整規律。

可以用高斯模糊的方法來觀察整套圖標的大小平衡，如果圖標看來都是相似大小的黑影，說明它們達到了相同的視重。

有的時候，我們會排列一些已經設計好的圖標，比如Twitter、instagram、facebook等社交媒體。可以看到第二個Instagram和第三個Facebook的圖標是接近方形的，長和寬會小一些；而第一個Twitter圖標是異形，第四個Pinterest的圖標是圓形，尺寸會大一些。

再舉一個視重平衡的例子，下圖是一個輸入框配上圓形的按鈕。如果圓形的直徑等於輸入框的高度，看起來圓形就會有點太小。稍微把圓形放大一點，兩個部件在視覺上就會更加平衡。

但是如果按鈕的顏色是深色，就不必放大了。由於顏色深，按鈕看起來會更「重」，已經可以和輸入框一起達到平衡。因此不僅要考慮尺寸大小，我們還要考慮不同深淺、面積的顏色對視重的影響。

【要點】

1、視重是人眼接收到的物體尺寸，並不等同於物體實際測量的大小。

2、當圓形、菱形、三角形等其他非方形搭配方形時，它們要比方形稍大一些，整體才能看起來平衡。

3、當我們給圖標限定區域時，要預留一些空間用來調整各圖標的大小使其平衡。

二、實際對齊vs視覺對齊

看下面兩根條形，你覺得它們一樣長嗎？

實際上，是一樣長的。但是下面那根條形看起來會比上面的短。

再看下圖，兩根條形一樣長嗎？

其實，我稍微加長了下面的條形，讓它的箭頭部分超出對齊線20px。這樣，兩根條形看起來長度就相當了。

一些更複雜的條形，雖然形狀都不一樣，但是可以通過調整長度來達到視覺上的對齊。

假設我們要設計摺疊條，記得要使條形的末端視覺對齊，讓條形的末端稍微超出對齊線一點。

當文本中的一部分需要添加背景色時，如何使其看起來平衡且對齊呢？

如果背景色是淺色，那麼就不需要調整文本的對齊，因為淺色不足以形成干擾。

如果是深色的背景，我們就可以考慮可以讓背景和其餘文本對齊。如下圖所示，因為黑色的背景看起來很「重」，面積相對收縮可以和其餘文本達到更好的視覺平衡。

同樣的原則可以用在輸入框和按鈕的組合上。當然，並不是規定設計師必須這麼做，而是從視覺角度來分析這種差異。

左圖，Send按鈕的右邊緣並沒有和輸入框右邊緣對齊，而是稍微往裡縮了一點。這是因為Send按鈕顏色比輸入框要深，視覺上更重。

而右圖，輸入框有很明顯的邊界線，因此我將「Your name」和「Massage」和輸入框對齊。Sedn按鈕的右邊是三角形，因此稍微往右超出對齊線。

再來詳細探討一下文本按鈕中的對齊。看下圖，文本看起來是居中的，對嗎？

實際上，右邊的按鈕，我將文本向左移了一段距離，因為按鈕右邊的形狀是三角形。而且，右邊的按鈕形狀尺寸上比方形按鈕長了40px，這樣看起來才會和方形按鈕大小相當。

對於圖標按鈕來說，情況會比較不一樣。

先看看下圖，那個圖標看起來更平衡一些？

應該很容易就能看出左邊的圖標有很明顯的問題，這是因為左右兩個圖標使用了不同的對齊方式。左邊的圖標，是將兩個形狀的外邊緣看成正方形，讓兩個方形居中對齊。這個做法並沒有錯，因為當設計師將SVG或者PNG格式的圖給到開發的時候，圖片的邊緣本來就是方形的。而右邊的圖標，是將兩個形狀的外邊緣看成圓形，讓兩個圓形居中對齊，看起來和諧很多。

因此，當設計師在準備要給開發的圖片時，要懂得在合適的位置留出一定的空間，這樣開發在實現的時候，才可以讓元素達到視覺平衡。

同樣的情況也發生在播放按鈕上，如果簡單地讓形狀居中對齊，視覺上看起來就是不對齊的。

如果想讓三角形的位置更和諧一些，可以用圓形包住它，讓圓形和背後的方形居中對齊。

【要點】

1、當形狀的邊緣為非方形且和方形搭配時，尺寸上需要放大一點以達到視覺平衡。

2、為三角形找到合適位置的好辦法是用圓形包圍它，然後讓圓形和背景對齊。

三、視覺感知的圓角

如果問你，什麼形狀會比圓形更圓？你一定會很詫異，怎麼可能存在比圓形更圓的形狀呢？但是，像我們在前文討論的，我們的眼睛接收的形狀和實際形狀其實並不相同。所以，下圖中哪個圓看起來最圓呢？

我詢問過的一些人通常的答案是3號圓或者4號圓。顯然，1號和2號圓看起來太瘦，5號圓太胖。如果我們將3號圓和4號圓重疊起來觀察，會發現4號圓比3號圓稍微大了一點點，換句話說，視覺上更圓一點。但實際上，3號圓是幾何形體中的標準圓。

再來看一個字母「o「的例子，下圖的三個「o」分別來源於三種著名字體。這些字體在設計時都從人眼的視覺角度出發，使用了成熟的視覺設計系統，所以我猜想它們的圓應該要比精確的幾何圓看起來更圓，是這樣的嗎？

再做一次試驗，用3個幾何圓和3個字母o重疊，可以看出3個字母都比幾何圓稍微大一點。

因此，從視覺上來說，經過調整的圓（右邊的圓）是可以比幾何圓（左邊的圓）更圓的。

設計師應該如果運用這種現象呢？

答案就是，運用在圓角上！

如果設計師使用Photoshop、Illustrator或者Sketch的圓角功能來製作圓角，結果其實並不能達到視覺上的最圓。

我們的眼睛可以捕捉到從直線突然變成圓弧線的那個轉折點，因此這個圓弧並不算真正的平滑過渡。

我微調了這個圓角，使其看起來是平滑地過渡。

調整後的圓角面積比幾何圓稍微大了一點，使得轉折點無法被輕易發現。

放在同一張圖上來對比一下兩種不同的圓角。左邊是幾何圓角，右邊是微調後的圓角。

我們可以將這個方法運用在圓角按鈕上。右邊的兩個圓角按鈕，看起來是不是比左邊的兩個按鈕看起來圓呢？

App的圖標也有類似的情況，先看看以下兩個圖標形狀。

左邊的是用Sketch畫的圓角矩形。右邊的形狀是超橢圓（Superellipse），也叫Lamé Curve。是由法國的數學家Gabriel Lamé發現的基於方程式的點的集合。

Marc Edwards基於超橢圓得出了一種具有平滑過渡並且看起來完美的圓，從IOS7開始，蘋果的圖標就基於這個形狀。

使用這種超橢圓的好處是形狀更圓、更平滑。設計師如果想讓圓角接近這種狀態，可以將圓角兩端錨點的控制杠稍微拉長一點。

除了直角圓角，這種現象在一些角度更小的圓角上會體現得更加明顯。左邊是幾何圓角，右邊是超橢圓圓角。

【要點】

1、幾何圓角可以很容易地發現從直線到圓弧線的轉折點。

2、經過調整的圓可以比幾何圓看起來更圓。

3、視覺上看起來更圓的圓角需要基於公式或者人工調整的方式來實現。

四、真正的方形vs視覺看到的方形

有時，一個不是正方形的形狀看起來反而像正方形。為什麼呢？先對比下面兩個形狀，哪個更方一些？

如果你覺得左邊的更方，你就又一次聽從了你眼睛的判斷。

很有趣的是，相比寬度，我們的眼睛對物體的高度更加敏感。這也解釋了為什麼字母「o」的寬一般要比集合圓更寬一點點。

（完）

謝謝閱讀！

沁園