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

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

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

希望你能注意到是左側圖標在對齊上有些問題，因為兩個圖標用了不同的對齊方法。左側使用了默認的對齊方式，如果這個圖標剛好是矩形，那么這樣的處理方法是對的，因為把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翻譯社