我們的眼睛是一個奇怪的器官，經常對我們說謊，但是如果你了解人類視覺感知的特殊性，就能夠理解眼睛的“謊言”，從而做出有親和力和清晰的設計。理解“眼見”和“腦見”所產生的差異，對于構建人機交互的界面UI設計師來說，是非常重要的。

1.物理尺寸和視覺尺寸

一個400px的正方形和400px的圓形哪個看上去更大？從幾何尺寸上看，他們的寬度和高度是相等的，但是從下圖中的兩個圖形可以看出，400px的正方形要比400px的圓形更大一點。這里用與重量有關的詞語描述視覺感知的差異會更合適，即400px的正方形要比400px的圓形在視覺感知上更重一些。

為了證明尺寸的正確性，下圖給出了輔助線和數值。

我們繼續看下圖中的正方形和圓形，在視覺重量上，他們是否相等？

答案是肯定的，至少很難立即分辨出哪個更重，這是因為圓形的直徑增加了50px。

為什么會這樣？我們把上面兩個案例進行了重疊。左圖（400px的正方形與400px的圓形），圓形完全被包含進了正方形里面，正方形超過了圓形4個a區域，正是造成視覺誤差的原因。右圖（400px的正方形與450px的圓形），正方形超過了圓形4個a區域，而圓形也超過了正方形4個b區域，兩個區域相互抵消。雖然他們的尺寸不同，但卻有著相似的面積，所以圓形和正方形在視覺上達到了平衡。

相同的原理也作用在菱形和三角形上，為了達到與正方形在視覺上的平衡，他們應該變得更寬和更高，以達到面積上的相似。

那么，如何在界面設計中運用這些原理呢？當我們創建一組圖標時，重要的是彼此之間保持視覺平衡，讓一組圖標看起來不會有過大或者過小的。如下圖所示，如果在相同的正方形框中繪制圖標，那么面積越大的圖標則看起來越大。

所以這種情況之下，就要放大那些看上去較小的圖標，縮小那些看上去較大的圖標，來達到視覺重量上的平衡。

下圖是一些實現了視覺平衡的圖標示例。

現在我們清楚了為什么一個圖標的背景區域總是大于這個圖標的主體，是讓了能讓非方形的圖標去調整大小，讓他們看起來不會小于其他方形的圖標。

通過一個簡單的方法可以檢查視覺平衡，即模糊，模糊后的圖標能變成大小相似的點，就說明這些圖標具有相同的視覺重量。

但有時我們會用到已有的圖標組合，例如比較常見的“分享”圖標，Instagram和Facebook是方形的，Twitter則是一個異形，Pinterest是一個圓形。這里Twitter和Pinterest的圖標就需要稍做放大，是為了能與Instagram和Facebook的圖標達成視覺上的平衡。

還有一個在視覺平衡上總是處理的不好的地方，是文字輸入框配合圓形的按鈕。如果這個圓形按鈕的直徑和輸入框的高度一樣，視覺上看起來就會覺得有些小，而稍稍放大之后，整個結構就會變得平衡。

但是如果改變了按鈕的樣式，則不需要放大。在下圖中，圓形按鈕和輸入框的高度是一致的，將按鈕填充成黑色，圓形實心按鈕跟輸入框就能達到一個較好的重量平衡。

劃重點：

視覺重量是眼睛所接收到的物體的形狀和感受，并不一定等于它的像素大小；圓形、菱形、三角形等形狀，設計時應稍大一些，以便跟正方形能達到視覺平衡；圖標四周要為視覺平衡留有一定空間，對于成組的圖標來說，這點尤為重要。2.形狀的對齊

視覺對齊是對視覺平衡和視覺重量的一個延伸，看下圖中的長條形，你覺得他們的長度一樣嗎？

其實這兩條形狀像素的長度是一樣的，但是第一眼看上去，下面的線要短于上面的線。

再來一張，感覺有什么變化嗎？

設計師對下面的兩根線進行了視覺的補償，將下面的線增加了20像素，增加了頂端的長度，使兩個形狀在視覺上達到平衡。

下圖還有一些更加復雜的圖形例子。

所以，當我們在設計一張有折疊條紋的海報，或在產品和網站上用到折疊條紋時，請注意要考慮視覺平衡：尖銳的邊緣要比其他的區域突出一些，特別是如果它是一個矩形。

那如何對齊有背景的文本和段落呢？這取決于背景的視覺重量，如果背景是輕的，可以將突出的段落和其他文本對齊。

由于背景很淺，一般不會打斷正常的閱讀。

但在深色的背景上需要不同的處理，下圖由于背景是黑色的，所以需要將背景與段落文本對齊，而背景中需要強調的白色文本則以縮進的方式對齊。

與淺色的背景不同，黑色有很大的視覺重量，如果目標是希望無縫的插入一段文字，最好是以下面的方式進行對齊。

相同的原則也可以用在按鈕和輸入框。

左側淺色背景的輸入框，標簽文字沒有跟輸入框的邊緣對齊，而是跟用戶輸入的內容對齊，右下角的發送按鈕，也沒有對齊輸入框的最右側，因為這個按鈕是深色的，從視覺上看是重的。

右側，輸入框是一個描邊的框，標簽文字跟輸入框的框體對齊，而用戶輸入的內容則有一定縮進；發送按鈕有一個三角形的邊緣，所以把此按鈕向右移動，也是為了跟上面的輸入框達到平衡。

下圖我們來看另一種對齊，即文本在按鈕中的對齊。下圖中的按鈕，文本看起來是完美居中的。

訣竅在于，右邊的按鈕，把文字向左邊移動了，因為它右邊的邊緣是三角形。此外，右邊箭頭按鈕的總寬度也增加了40像素，為了跟左邊正方形的按鈕看起來視覺上一致。

文本按鈕不僅有水平對齊，還有垂直對齊，特別是對于英文字體。在操作系統，網站和APP的界面設計中最常用到的對齊方式是Cap高度對齊，是基于大寫字母的高度對齊，等同于“H”和“I”的高度。

大寫字母的上方與下方的間距是相等的。這種對齊方式被最廣泛的應用也是有原因的。因為英文字母中有向上升部分的占多數，如：l, t, d, b, k, h。有下降部分的則占少數，如：y, j, g, p。而大寫字母的高度與具有上升部分的英文字母高度基本一致。

另一種對齊的方法是使用字體的小寫高度（所謂的“x高度”）來與背景對齊。在無襯線的字體中，它等同于字母x的高度。

這個方法也是有道理的，因為一個文字主要的視覺重量集中在放置小寫字母那個區域。

這兩種方法有區別嗎？有區別，但是區別不大。

說完了文字，我們在看圖標的對齊。圖標的情況略有不同，我們把一個發送的圖標放到一個圓形里，哪一個看起來更加平衡？

希望你能注意到是左側圖標在對齊上有些問題，因為兩個圖標用了不同的對齊方法。左側使用了默認的對齊方式，如果這個圖標剛好是矩形，那么這樣的處理方法是對的，因為把PNG或者SVG文件給開發同學時，他就是一個矩形的形狀。而右邊的對齊方法則是讓圖標的邊緣跟圓形背景的邊緣等距對齊。

如果當你準備切這樣一個圖標給開發，你需要預留一些空間，這樣他就能夠在視覺上達到對齊，如下圖。

播放按鈕也是同樣的道理，如果你直接對齊一個三角形和圓角矩形，看起來就比較奇怪。

如果要更好的將三角形放置準確，請將其放置在一個圓形容器中，然后將這個圓跟背景對齊。

劃重點：

具有不規則、鋒利邊緣的形狀應更大，以便與相鄰的矩形對象平衡。在按鈕文字對齊中，以Cap高度的對齊方式目前是應用最廣的形式。調整三角形圖標對稱時將它置入一個圓形容器，然后用這個圓形與背景對齊。3.視覺導角

什么會比圓更圓？正如開篇所說，我們的眼睛是很奇怪的，通常我們感覺到的跟想象中的其實不一樣，那么，下圖里面的圓哪一個看起來是最圓的？

一般人都會選擇3或4。人們覺得1和2太瘦，5又太胖，如果重疊第3和第4（一個幾何正圓和一個修改過的圓），我們發現修改后的4號要比3號胖一點，這樣的圓眼睛看起來會覺得更圓。一般人都會選擇3或4。人們覺得1和2太瘦，5又太胖，如果重疊第3和第4（一個幾何正圓和一個修改過的圓），我們發現修改后的4號要比3號胖一點，這樣的圓眼睛看起來會覺得更圓。

我從三種著名的幾何字體（Futura，Circe和Geometria）提取了O這個字母，鑒于高品質的字體是基于人的視覺感知而建立的，并且使用復雜的視覺結構系統，我認為它們的圓形看起來比幾何圓形更圓。

我們將這些圓與幾何的正圓相重疊，即使是最接近幾何正圓的Futura字體也都有一些溢出，其他兩個字體也是，都要比正圓形更寬。

所以，如下圖，從視覺的角度來看，修改過的圓看起來會比一個幾何圓形更圓。

怎么利用這種現象？對于導圓角，如果你用繪圖工具的導角工具，如PS，AI，Sketch。這個恐怕不能直接達到視覺上最好的結果。（這也是在Sketch無法直接畫出iOS的圓角的原因。）

人的眼睛會立即聚焦這些從直線轉到圓角的點，這樣的導角視覺上并不自然。

所以我們嘗試從視知覺的角度去解決問題。

這種導角有超出幾何導角的額外區域，使得直線和圓之間的折角不會那么明顯。

來，感受下這兩種導角帶來的區別。

這樣我們可以把這種方法應用在圓角按鈕上。

可以看出，右邊的圓角按鈕對于眼睛來說會更舒服。

相同的還對應在App的i買粉絲n設計上，他們不會簡單的用軟件導角工具來達到一個完美的結果。我們先看看這兩個圓角矩形。

第一個是在Sketch中創建的圓角矩形，第二個稱作是超級橢圓，也稱作Lamé曲線，是被一個法國的數學家Gabriel Lamé發現并命名。

Marc Edwards，提出了Lamé曲線的公式，形成了從視覺角度看完美的曲線。iOS7的圖標就是基于這個曲線。

后來這個形狀加入了黃金分割和網格，形成了iOS App i買粉絲n的設計規范，用來指導新的設計師。

使用超級橢圓的主要優點是他們有更加圓滑的外觀。另一方面，這些非標準的形狀難以用進實際的界面設計中。應該組合多個SVG，在代碼中包含特殊的公式或腳本，或者像Apple一樣給他們的PNG應用蒙版。

對于設計過程來說，這里對圓角有一個簡單的調整，需要先將圖形轉化成輪廓，利用圖形編輯來調整手柄，讓兩個點離得近一些。

這種圓角在視覺上會更為生動。

劃重點：

1、繪圖軟件計算的導角看起來會不自然，因為可以輕松的看到直線與曲線的轉角。

2、視覺感知良好的圓角需要特殊的公式，或者手動去調整。

補充

有時候一個不太準確的形狀反而看起來更加準確，看下面的形狀，哪一個看起來更像正方形？

如果你選了左邊，那么，你已經開始相信你有偏見的視覺感知了。

當我初次了解到眼睛對高度要比對寬度更加敏感的時候，覺得不可思議。現在終于了然：為什么在字體中，字母O總是要比幾何正圓更寬、而字母H的縱向線條總是要比橫向線條要粗了。

封面作者：Emeric LEPRINCE、Caroline Grimprel

medium

譯文地址：51UXC（買粉絲買粉絲）

作者：Slava Shestopalov

譯者：51UXC翻譯社