前言：

先啰嗦幾句万哪，視覺上的對齊與平衡一直沒有找到比較規(guī)范的方法秀撇，完全憑感覺嗅绰，前幾天在Medium上翻看文章舍肠，剛好看到一篇系統(tǒng)的講解視覺技巧的文章，所以決定試著翻譯一下窘面，這篇文章對UI設(shè)計師規(guī)范化icon很有幫助翠语，希望大家閱讀后能掌握其中的技巧。

附上Medium上的原文鏈接：

https://medium.muz.li/optical-effects-9fca82b4cd9a财边，

原文作者為Slava Shestopalov肌括，再次致謝。（本文包含約50張圖片酣难，建議移動端的同學(xué)們wifi環(huán)境下閱讀谍夭。）

閱讀這篇文章之前，我先提出三個問題:

1. 如何做出視覺平衡的icon鲸鹦？

2. 如何讓不同的形狀視覺對齊慧库？

3. 怎樣才算是“完美”的圓角？

這篇文章將針對這三個問題做出解答馋嗜。

我們的眼睛是一種奇怪的東西，經(jīng)常對我們說謊吵瞻。但是葛菇，如果你了解了人類視覺感知的特殊性，就可以做出更加符合用戶體驗的設(shè)計橡羞。運用視覺上的技巧不僅可以幫助字體設(shè)計師來創(chuàng)建可讀和均衡的字體眯停，而且對于UI設(shè)計師規(guī)范化icon也是有所幫助的。

—

一.同樣的尺寸卿泽，為什么視覺感知上大小不一樣莺债？

長寬為400px的正方形與直徑400px的圓，哪一個更大签夭？毋庸置疑齐邦，在物理尺寸上，它們的寬度和高度都是相等的第租，但是請看下面的圖片措拇，我們的眼睛會理所當(dāng)然覺得正方形要比圓大一點。

如果你不相信這些形狀是相同尺寸的慎宾，這是帶有參考線和尺寸的版本丐吓。

讓我們來看下圖中的兩個形狀浅悉。在視覺重量方面，你覺得他們是否相等券犁？

對我來說术健，是相等的。至少很難立馬分辨出哪一個視覺上更重一些粘衬。這不奇怪荞估，因為我將圓的直徑增加了50px。

為了說明發(fā)生這種情況的原因色难，我們將第一個例子中（長寬為400px的正方形和直徑400px的圓）與第二個例子中（長寬為400px的正方形和直徑450px的圓）的形狀分別重疊泼舱。如下圖，這時枷莉，你就會注意到娇昙，在“a”區(qū)域中，正方形的重量超過了圓形笤妙，而圓形在“b”區(qū)域中超過了正方形冒掌。左圖中，正方形完全覆蓋了圓蹲盘，就像從四面包圍著一樣股毫。而在右圖中，圓和正方形視覺感知上平衡召衔，沒有發(fā)生一個完全覆蓋另一個的情況铃诬， 它們每個形狀都有四個間隙。

同樣苍凛，我們也可以用菱形和三角形來驗證趣席。為了在視覺上與正方形保持平衡，它們應(yīng)該更大一些醇蝴。（嘖嘖嘖宣肚，最后一個三角形有點過了，嘚瑟）

那么如何在界面中運用這個技巧呢悠栓？例如霉涨，當(dāng)你創(chuàng)建一組圖標(biāo)時，最重要的是惭适，使它們視覺平衡笙瑟，因此圖標(biāo)不可以太大，當(dāng)然也不可以太小腥沽。（嗯逮走？你確定這不是廢話？）如果我們直接將圖標(biāo)約束在正方形區(qū)域里，則更像正方形的圖標(biāo)會看起來更大师溅。

我覺得可以允許視覺上較小的圖標(biāo)超出矩形區(qū)域茅信，并在視覺上較重的圖標(biāo)和圖標(biāo)之間留下一些空間來填充不同形狀圖標(biāo)的視覺重量。

現(xiàn)在來看一些Material design中視覺平衡的圖標(biāo)墓臭。

明白了吧蘸鲸，為什么一個圖標(biāo)的顯示范圍總是要大于圖標(biāo)本身，這是為了能夠讓非正方形的圖標(biāo)在一個安全區(qū)域內(nèi)微調(diào)窿锉，達(dá)到與正方形圖標(biāo)視覺平衡的效果酌摇。

那如何檢驗視覺是否平衡？最簡單的方法就是模糊對象嗡载。如果你的圖標(biāo)變成了一個個相似的斑點窑多，它們具有相同的視覺重量，那就證明是視覺平衡的洼滚。

有時候我們也可以使用現(xiàn)有的圖形埂息，例如用作分享到第三方app的按鈕。Facebook和Instagram的圖標(biāo)是圓角矩形的遥巴，而Twitter的圖標(biāo)是一個小鳥的剪影千康，Pinterest則直接用首字母“P”設(shè)計icon。因此Twitter和Pinterest的圖標(biāo)要設(shè)計的大一些铲掐，這樣他們就能與Facebook和Instagram的圖標(biāo)保持平衡拾弃。

視覺平衡問題的另一個例子是與按鈕一起放置的輸入框。如果按鈕直徑等于輸入框的高度摆霉，那么按鈕對于我們的眼睛來說豪椿，就會顯得小一些；但是如果你把按鈕放大一點携栋，整個結(jié)構(gòu)將會變得更加平衡砂碉。

如果只更改按鈕的樣式，則不需要放大刻两。在下圖中，按鈕和文本框的高度都為80px滴某，但由于按鈕填充了黑色磅摹，視覺上更重一些，所以右側(cè)的按鈕與相鄰的輸入框能更好地平衡霎奢。

劃重點：

1. 視覺重量是人眼察覺物體大小的意義户誓，并不一定等于其物理尺寸。

2. 圓形幕侠，菱形帝美，三角形和其他非正方形的形狀要設(shè)計的更大一些，以便與正方形的形狀視覺平衡晤硕。

3. 圖標(biāo)區(qū)域應(yīng)該為視覺平衡保留一定的空間悼潭，對于一組圖標(biāo)來說庇忌，這一點至關(guān)重要。

—

二.不同形狀的對齊

視覺對齊是視覺平衡的延展邏輯舰褪。大家看一看下圖的兩個標(biāo)簽皆疹，他們看起來一樣長嗎？

在絕對像素方面占拍，答案是肯定的略就。然而，當(dāng)你再看一次的時候晃酒，你會發(fā)現(xiàn)下面的標(biāo)簽看起來要比上面的短表牢。

這是另外的一張圖。觀察一下贝次，有沒有什么變化崔兴？

我對下面的標(biāo)簽進(jìn)行了視覺填充，超過上面標(biāo)簽長度的20px是用來填充尖峰之間的空隙浊闪，這樣便可以使兩個形狀保持視覺平衡恼布。

還有一些更復(fù)雜的不同形狀標(biāo)簽的例子。

當(dāng)你下次設(shè)計一個折疊條紋和文字的海報時搁宾，請牢記視覺平衡的方法折汞，尖銳邊緣的形狀應(yīng)該比其它的形狀更加突出一點。

接下來講一講盖腿，純文本和具有背景的段落之間的對齊爽待。其實這取決于背景的視覺密度，如果它很輕翩腐，可以將突出顯示的段落與其余的文本對齊鸟款。

通常情況下，背景很淺時茂卦，它并不會打斷用戶正常閱讀的文本流何什。

還有一個方法可以應(yīng)用于密集的背景。在圖片上等龙，黑色背景與其余的文本對齊处渣，而其中的白色文本則以縮進(jìn)形式放置。

與淺色背景不同的是蛛砰，黑色具有很大的視覺重量罐栈，如果你想用這個方式插入一段文字，最好是按照下圖所示的方式去對齊泥畅。

同樣的原理也適用于按鈕和輸入字段荠诬。

左側(cè)輸入字段的淺色背景超出了輸入信息和輸入的用戶名，“發(fā)送” 按鈕的右邊緣與輸入背景的右邊緣沒有完全對齊，因為按鈕顏色較深柑贞，從視覺角度來看方椎，更重一些。

而右側(cè)的輸入框有黑色描邊凌外，我們將它們與標(biāo)題對齊辩尊，用戶名在輸入框內(nèi)縮進(jìn)】导“發(fā)送” 按鈕因為有三角形邊緣摄欲，所以將按鈕向右移動一點，以便與輸入框保持平衡疮薇。

我們進(jìn)一步了解視覺對齊的方式——文本與按鈕的對齊胸墙。如圖，下面兩個按鈕雖然形狀不一致按咒，但文本看起來是居中的迟隅。

關(guān)鍵在于，右邊的按鈕將里面的文本向右移動了一些励七，因為右邊是三角形的智袭。除此之外，箭頭狀按鈕的寬度增加了40px掠抬，這樣看起來與矩形按鈕的視覺重量相等吼野。

文本按鈕不僅有水平對齊方式，而且還有單詞和背景的垂直對齊方式两波。這里講的的第一種方法適用于各種操作系統(tǒng)瞳步、網(wǎng)頁和應(yīng)用程序的界面。它是基于大寫字母 ( 即Cap-height ) 高度的對齊方式腰奋，等于H或者I的高度奏窑。

一般來說玩裙，大寫字母的升部和降部與按鈕邊緣的距離是相等的。這不是沒有根據(jù)的前普，因為命令行通常是用標(biāo)題字寫的扁凛，英文中有更多的升部字母桨嫁，（l舅踪，t茧痒，d，b锐想，k，h）乍狐，而不是降部字母（y赠摇，j，g， p）藕帜。

另一種方法是使用一個小寫字母 ( 即x-height ) 的高度來對齊文本和背景烫罩，在無襯線字體中，它與字母“x”的高度相等洽故。

這種方法其實也行得通贝攒，因為文本的視覺重量主要集中在小寫字母的區(qū)域中。

雖然這些方法各有不同时甚，但實際運用中并沒有多大的差別隘弊。

這樣的例子還有很多。左側(cè)的“Cancel”和“OK”（頻繁使用到的按鈕）顯然更適合用Cap-height方法荒适，因為 “Cancel” 沒有降部梨熙，“OK” 都是大寫字母。而右側(cè)中只有 “Sync” 按鈕適合用x-height方法刀诬，因為它有上下突出的部分咽扇；“Cancel” 和 “OK” 用此方法的話就放會顯得太高了。

圖標(biāo)按鈕的情況略有不同陕壹。我們在一個圓形按鈕上放置一個 “發(fā)送” 圖標(biāo)质欲。哪一個按鈕看起來更加平衡？

你大概已經(jīng)注意到糠馆，左邊的按鈕出了問題嘶伟，這是因為不同的對齊方式。左邊的圖標(biāo)中榨惠，如果你將它以矩形的方式對齊奋早，那肯定沒錯，因為當(dāng)你向程序員提供SVG或PNG文件時赠橙，它是一個帶有矩形背景的圖標(biāo)耽装；但其實呢，正確的做法應(yīng)該像右邊按鈕一樣期揪，讓圖標(biāo)以圓形的方式對齊背景掉奄。

設(shè)計師為程序員提供切圖時，需要預(yù)留一些區(qū)域凤薛，以便他們可以在背景上以視覺對齊的方式將圖標(biāo)居中姓建。

這個方法同樣適用于 "播放" 按鈕。如果你直接對齊圓角矩形和三角形缤苫，它們就會看起來很奇怪速兔。（這個例子你可以去看看手機(jī)app中的播放icon，大部分都沒有嚴(yán)格的視覺對齊活玲。）

想要更好地擺放好三角形的位置涣狗，正確的做法是谍婉，先讓它對齊到一個圓形區(qū)域，然后再與按鈕背景對齊镀钓。

劃重點：

1. 具有鋒利邊緣的形狀應(yīng)該設(shè)計的更大一些穗熬，以便與相鄰的矩形對象平衡。

2. Cap-hight（大寫字母高度）對齊是在按鈕背景上對齊文本的有效且廣泛使用的方法丁溅。

3. 將三角形圖標(biāo)正確放置在按鈕上的有效方法之一是將圖標(biāo)對齊到圓形底部唤蔗，并將圓與背景對齊。

—

三.視覺中的圓角

什么樣的圓可以比幾何學(xué)中的圓更圓窟赏？我以前沒有想過這個問題妓柜，但正如我在這篇文章的開頭所說的一樣，我們?nèi)祟惖难劬芷婀质涡颍袝r候不會像預(yù)料的那樣感覺到差別领虹。大家觀察一下，下圖中的哪一個圓看起來更圓求豫？

我想大部分人會選擇3和4塌衰。1和2太瘦，5又太豐滿了蝠嘉。如果我們將3和4重合最疆，一個幾何學(xué)的圓和一個微調(diào)過的圓，我們會發(fā)現(xiàn)第二個圓比第一個圓視覺重量更重蚤告，因此我們的眼睛會覺得更圓努酸。

為了證明我的觀點，我從三種著名的無襯線字體（Futura杜恰，Circe和Geometria）抽出“o”字母获诈。鑒于高質(zhì)量的字體是基于人的視覺感知，并使用復(fù)雜的光學(xué)結(jié)構(gòu)系統(tǒng)建立的心褐，它們的圓形看起來比幾何圓形更圓舔涎。這些字母難道不令人賞心悅目嗎？（我不管逗爹，反正就是看著舒服）

我試著將這些字母與幾何中的圓形重合亡嫌。即便是最接近圓的Futura字體中的 “o”，也有四個超出的部分掘而，而Circe和Geometria的字體顯得比圓更壯一點挟冠。盡管它們的高度和寬度相等，我們也可以看到這四個“肚子”袍睡，就好像它們吃撐了一樣知染。

綜上所述，從視覺角度來說斑胜，修改后的圓（右側(cè)）可能看起來比標(biāo)準(zhǔn)的圓形（左側(cè)）更圓持舆。

那我們該如何使用這種方法呢色瘩？當(dāng)然是為了做出更加舒服的圓角，如果你在流行的繪圖軟件——Photoshop逸寓、Illustrator或sketch使用內(nèi)置的圓角工具，就會發(fā)現(xiàn)圓角過渡的并沒有那么圓滑覆山。

用圓角工具做出的圓角竹伸，人眼馬上能發(fā)現(xiàn)直線突然變彎曲的轉(zhuǎn)折點，所以看起來很不自然簇宽。

考慮一下勋篓，如何用視覺感知的方法來解決這個問題。

按照上面 “o” 字母的微調(diào)方法魏割，這種視覺圓角在幾何圓之外應(yīng)該有一個額外的區(qū)域譬嚣，才能使直線與曲線連接的地方不那么生硬。

仔細(xì)觀察這兩個圓角之間的區(qū)別钞它。

我們可以將這種方法應(yīng)用于圓角矩形的按鈕拜银。

我猜你已經(jīng)注意到了右側(cè)的按鈕有更平滑的圓角，對你的眼睛來說更舒服遭垛。（升級iOS11的同學(xué)可以觀察一下計算器中數(shù)字“0” 按鈕的處理尼桶，很好的驗證了這個例子）

iOS圖標(biāo)也是如此。如果用簡單的圓角工具是做不出這種圓角的锯仪。在我們深入討論這個話題之前泵督，我們先來看看兩個不同的圓角矩形。

第一個是在sketch中創(chuàng)建的圓角矩形庶喜。第二個形狀是超橢圓形小腊，也稱為Lamé曲線。它是由法國數(shù)學(xué)家GabrielLamé發(fā)現(xiàn)的久窟，根據(jù)不同的公式秩冈，可以做出看起來像圓角矩形的形狀。

Marc Edwards提出了Lamé曲線的公式瘸羡，形成了邊緣光滑和視覺上完美的形狀漩仙。iOS 7之后的圖標(biāo)都是基于它設(shè)計的。

后來犹赖，這種形狀通過添加黃金比例和網(wǎng)格來規(guī)范化队他，用于指導(dǎo)繪制圖標(biāo)的設(shè)計師。

使用超橢圓形狀的主要優(yōu)點是它們更加圓潤的外觀峻村，但是也有缺點麸折，就是這些非標(biāo)準(zhǔn)的形狀難以直接應(yīng)用到實際的界面中。

程序員可以組合多個SVG粘昨，在代碼中添加特殊的公式或腳本垢啼，或者使用iOS為其應(yīng)用程序圖標(biāo)使用PNG蒙版窜锯。

針對設(shè)計師而言，有一個簡單的調(diào)整圓角的方法芭析。只需要將圓角矩形轉(zhuǎn)換為輪廓锚扎，進(jìn)入形狀編輯模式，并手動將曲線手柄彼此拉近馁启。（拉近多少驾孔？慢慢調(diào)嘛，建議拿標(biāo)尺）

與一般的圓角矩形相比惯疙，這種超橢圓形更為生動翠勉，這對于繪制視覺準(zhǔn)確的圖標(biāo)來說很重要。

劃重點：

1. 使用圓角工具繪制的圓角看起來像是人造的霉颠，你可以很容易的看到直線突然變成曲線的點对碌。

2. 視覺過渡自然的圓角需要特殊算法或手動調(diào)整形狀。

—

小知識點

有時候蒿偎，一個長寬不等的正方形看起來更加方正朽们。你可能會想，這XX在逗我呢酥郭？不信你看华坦，下圖中的正方形，哪個看起來更加方正不从？

如果你選擇了左邊的形狀惜姐，那一定是受到了視覺感知的影響。（也許是上帝的指引）

當(dāng)我們了解到眼睛對物體的高度比其寬度更敏感時椿息，會感到很神奇歹袁，它解釋了為什么在無襯線字體中，字母“o”總是比標(biāo)準(zhǔn)的圓更圓的現(xiàn)象寝优。

感謝大家百忙之中抽出時間閱讀這篇譯文条舔，原文作者為Slava Shestopalov，第三次感謝他的授權(quán)乏矾。滿滿都是干貨懊峡埂！還不點個贊Ｗ晷摹（昨天我看到優(yōu)設(shè)網(wǎng)也翻譯了原文凄硼，翻譯的很棒！哥們兒得加油了）

此致

敬禮