前言：
先囉嗦幾句，視覺上的對齊與平衡一直沒有找到比較規範的方法，完全憑感覺，前幾天在Medium上翻看文章，剛好看到一篇系統的講解視覺技巧的文章，所以決定試著翻譯一下，這篇文章對UI設計師規範化icon很有幫助，希望大家閱讀後能掌握其中的技巧，歡迎加入UI設計群587751709
閱讀這篇文章之前，我先提出三個問題:
1. 如何做出視覺平衡的icon？
2. 如何讓不同的形狀視覺對齊？
3. 怎樣才算是“完美”的圓角？
這篇文章將針對這三個問題做出解答。
我們的眼睛是一種奇怪的東西，經常對我們說謊。但是，如果你瞭解了人類視覺感知的特殊性，就可以做出更加符合用戶體驗的設計。運用視覺上的技巧不僅可以幫助字體設計師來創建可讀和均衡的字體，而且對於UI設計師規範化icon也是有所幫助的。
一. 同樣的尺寸，為什麼視覺感知上大小不一樣？
長寬為400px的正方形與直徑400px的圓，哪一個更大？毋庸置疑，在幾何學上，它們的寬度和高度都是相等的，但是請看下面的圖片，我們的眼睛會理所當然覺得正方形要比圓大一點。
如果你不相信這些形狀是相同尺寸的，這是帶有參考線和尺寸的版本。
讓我們來看下圖中的兩個形狀。在視覺重量方面，你覺得他們是否相等？
對我來說，是相等的。至少很難立馬分辨出哪一個視覺上更重一些。這不奇怪，因為我將圓的直徑增加了50px。
為了說明發生這種情況的原因，我們將第一個例子中（長寬為400px的正方形和直徑400px的圓）與第二個例子中（長寬為400px的正方形和直徑450px的圓）的形狀分別重疊。如下圖，這時，你就會注意到，在“a”區域中，正方形的重量超過了圓形，而圓形在“b”區域中超過了正方形。左圖中，正方形完全覆蓋了圓，就像從四面包圍著一樣。而在右圖中，圓和正方形視覺感知上平衡，沒有發生一個完全覆蓋另一個的情況，它們每個形狀都有四個間隙。
同樣，我們也可以用菱形和三角形來驗證。為了在視覺上與正方形保持平衡，它們應該更大一些。
那麼如何在界面中運用這個技巧呢？例如，當你創建一組圖標時，最重要的是，使它們視覺平衡，因此圖標不可以太大，當然也不可以太小。如果我們直接將圖標約束在正方形區域裡，則更像正方形的圖標會看起來更大。
我建議通過允許視覺上較小的圖標超出矩形區域，並在視覺上較重的圖標和圖標之間留下一些空間來填充不同形狀圖標的視覺重量。
現在來看一些真實項目中的視覺平衡的圖標。
明白了吧，為什麼一個圖標的顯示範圍總是要大於圖標本身，這是為了能夠讓非正方形的圖標在一個安全區域內微調，達到與正方形圖標視覺平衡的效果。
檢驗視覺是否平衡，最簡單的方法就是模糊對象。如果你的圖標變成了一個個相似的斑點，它們具有相同的視覺重量，那就證明是視覺平衡的。
但有時我們也可以使用現有的圖形，例如直接將產品logo做成分享和點讚的按鈕。Facebook和Instagram的圖標是圓角矩形的，而Twitter的圖標是一個小鳥的剪影，Pinterest則直接用首字母“P”設計icon。因此Twitter和Pinterest的圖標要設計的大一些，這樣他們就能與Facebook和Instagram的圖標保持平衡。
視覺平衡問題的另一個例子是與按鈕一起放置的文本框。如果按鈕直徑等於文本框的高度，那麼按鈕對於我們的眼睛來說，就會顯得小一些；但是如果你把按鈕放大一點，整個結構將會變得更加平衡。
如果只更改按鈕的樣式，則不需要放大。在下圖中，按鈕和文本框的高度都為80px，但由於按鈕填充了黑色，視覺上更重一些，所以右側的按鈕與相鄰的文本框能更好地平衡。
劃重點：
1. 視覺重量是人眼如何察覺物體的大小和意義，並不一定等於其實際像素大小。
2.圓形，菱形，三角形和其他非正方形的形狀要設計的更大一些，以便與正方形的形狀實現視覺平衡。
3. 圖標區域應該為視覺平衡保留一定的空間，對於一組圖標來說，這一點至關重要。
二.不同形狀的對齊
視覺對齊是視覺平衡和視覺重量問題的邏輯延續。看下面的兩個條紋。他們看起來一樣長嗎？
在絕對像素方面，答案是肯定的。然而，當你再看一次的時候，你會發現下面的條紋看起來要比上面的短。
這是另外一張兩個條紋的圖。觀察一下，有沒有什麼變化？
我對下面的條紋進行了視覺填充。超過上面條紋長度的20px是用來填充尖峰之間的空隙，這樣便可以使兩個形狀保持視覺平衡。
現在有一些更復雜的不同形狀條紋的例子。
如果你正在創建一個摺疊條紋和文字的海報，請牢記視覺平衡的方法。尖銳邊緣的條紋應該比其餘的形狀更加突出一點，尤其當它是一個矩形的時候。
那麼該如何對齊純文本和具有背景的段落呢？這取決於背景的視覺密度。如果它很輕，可以將突出顯示的段落與其餘的文本對齊。
通常背景很淺時，它並不會打斷正常閱讀的文本流。
還有一個方法可以應用於密集的背景。在圖片上，黑色背景與其餘的文本對齊，而其中的白色文本則以縮進形式放置。
與淺色背景不同的是，黑色具有很大的視覺重量，如果是無縫地插入一段文字，最好是按照下圖所示的方式對齊。
同樣的原理也適用於按鈕和輸入字段。當然，這並不是絕對的。
左側輸入字段的淺色背景超出了輸入信息和輸入的用戶名。“發送”按鈕的右邊緣與輸入背景的右邊緣沒有完全對齊，因為按鈕較暗，從視覺角度看，更重一些。
在右側，輸入框有黑色描邊，我們將它們與標題對齊，用戶名在輸入框內縮進。“發送”按鈕因為有三角形邊緣，所以將按鈕向右移動一點，以便與文本框保持平衡。
接下來，我們將進一步瞭解視覺對齊的方式——文本與按鈕的對齊。如圖，下面兩個按鈕雖然形狀不一致，但文本看起來是居中的。
關鍵在於，右邊的按鈕將裡面的文本向右移動了一些，因為右邊是三角形的。除此之外，箭頭狀按鈕的寬度增加了40px，這樣看起來與矩形按鈕的視覺重量相等。
文本按鈕不僅有水平對齊方式，而且還有單詞和背景的垂直對齊方式。這裡講的的第一種方法適用於各種操作系統、網頁和應用程序的界面。它是基於大寫字母 ( 即Cap-height ) 高度的對齊方式，等於H或者I的高度。
一般來說，大寫字母的升部和降部與按鈕邊緣的距離是相等的。這不是沒有根據的，因為命令行通常是用標題字寫的，英文中有更多的升部字母，（l，t，d，b，k，h），而不是降部字母（y，j，g， p）。
另一種方法是使用一個小寫字母 ( 即x-height ) 的高度來對齊文本和背景，在無襯線字體中，它與字母“x”的高度相等。
這種方法其實也行得通，因為文本的視覺重量主要集中在小寫字母的區域中。
雖然這些方法各有不同，但實際運用中並沒有多大的差別。
接下來將比較更多的例子。左側的“Cancel”和“OK”（頻繁使用到的按鈕）顯然更適合用Cap-height方法，因為“Cancel”沒有降部，“OK”都是大寫字母。而右側中只有“Sync”按鈕適合用x-height方法，因為它有上下突出的部分；“Cancel”和“OK”用此方法的話就放會顯得太高了。
圖標按鈕的情況略有不同。讓我們在一個圓形按鈕上放置一個“發送”圖標。哪一個按鈕看起來更加平衡？
我想你已經注意到，左邊的按鈕出了問題，這是因為不同的對齊方式。左邊的圖標中，如果它是一個矩形，在某種程度上，這是正確的，因為當你向開發人員提供SVG或PNG文件時，它是一個帶有矩形背景的圖標；正確的做法應該像右邊按鈕一樣，採用圖標底部的圓形背景與圓形按鈕居中對齊的方式。
當你為程序員提供切圖時，你需要預留一些區域，以便他們可以在背景上以視覺對齊的方式將圖標居中。
這個方法同樣適用於"播放"按鈕。如果直接對齊圓角矩形和三角形，它們就會看起來很奇怪。
如果想要更好地擺放好三角形的位置，可以先讓它對齊到一個圓形區域，然後再與按鈕背景對齊。
劃重點：
1. 具有鋒利邊緣的形狀應該設計的更大一些，以便與相鄰的矩形對象平衡。
2. Cap-hight（大寫字母高度）對齊是在按鈕背景上對齊文本的有效且廣泛使用的方法。
3. 將三角形圖標正確放置在按鈕上的有效方法之一是將圖標對齊到圓形底部，並將圓與背景對齊。
三.視覺中的圓角
什麼樣的圓可以比標準圓更圓？我以前沒有想過這個問題，但正如我在這篇文章的開頭所說的一樣，我們的眼睛很奇怪，有時候不會像我們預料的那樣感覺到差別。那麼，下面的圖片中的哪個圓看起來更圓？
我以前問過的人中大部分選擇3和4。1和2太瘦，5太豐滿了。如果我們將3和4重合，一個幾何圓和一個微調過的圓，我們會發現第二個圓比第一個圓視覺重量更重，因此我們的眼睛會覺得更圓。
為了說明我的觀點，我從三種著名的無襯線字體（Futura，Circe和Geometria）抽出“o”字母。鑑於高質量的字體是基於人的視覺感知，並使用複雜的光學結構系統建立的，我認為它們的圓形看起來比幾何圓形更圓。這些字母難道不令人賞心悅目嗎？
讓我們與標準的圓形重合。即便是最接近圓的Futura字體中的“o”，也有四個超出的部分。Circe和Geometria的字體比圓形更寬。儘管它們的高度和寬度相等，我們也可以看到這四個“肚子”，就好像它們吃多了一樣。
所以，從視覺角度來說，修改後的圓（右側）可能看起來比標準的圓形（左側）更圓。
那我們該如何使用這種方法呢？當然是為了做出舒服的圓角，如果你在流行的繪圖軟件——Photoshop、Illustrator或sketch使用內置的圓角工具，就會發現圓角過渡的並沒有那麼圓滑。
用圓角工具做出的圓角，人眼馬上就能發現直線突然變彎曲的轉折點，所以看起來不自然。
考慮一下，如何用視覺感知的方法來解決這個問題。
這種圓角在標準圓之外有一個額外的區域，使直線與曲線連接的地方沒有那麼生硬。
仔細觀察這兩個圓角之間的區別。
現在我們可以將這種方法應用於圓角矩形的按鈕。
我猜你可能已經注意到右邊的按鈕有更平滑的圓角，對你的眼睛來說更舒服。
iOS圖標也是如此。如果用簡單的圓角工具是做不出這種圓角的。在我們深入討論這個話題之前，我們先來看看下圖兩個不同的圓角矩形。
第一個是在sketch中創建的圓角矩形。第二個形狀是超橢圓形，也稱為Lamé曲線。它是由法國數學家GabrielLamé發現的，根據不同的公式，可以做出看起來像圓角矩形的形狀。
Marc Edwards提出了Lamé曲線的公式，形成了光滑和視覺上完美的形狀。iOS 7之後的圖標都是基於它的。
後來，這種形狀通過添加黃金比例和網格來規範化，用於指導繪製圖標的設計師。
使用超橢圓形狀的主要優點是它們更加圓潤和光滑的外觀，但是也有缺點，就是這些非標準的形狀難以直接應用到實際的界面中。
程序員可以組合多個SVG，在代碼中添加特殊的公式或腳本，或者使用iOS為其應用程序圖標使用PNG蒙版。
針對設計師而言，有一個簡單的調整圓角的方法。只需要將圓角矩形轉換為輪廓，進入形狀編輯模式，並手動將曲線手柄彼此靠近。
與傳統意義的圓角矩形相比，這種超橢圓形更為生動，這對於繪製視覺準確的圖標來說很重要。
劃重點：
1. 標準的圓角看起來像是人造的，你可以很容易的看到直線突然變成曲線的點。
2. 視覺過渡自然的圓角需要特殊算法或手動調整形狀。
小知識點
有時候，一個長寬不等的幾何正方形看起來更加方正。你可能會想，這是多麼荒謬的觀點，那麼，你覺得下面的正方形中，哪個看起來更加方正？
如果你選擇了左邊的形狀，那一定是受到了視覺感知的影響。
當我們瞭解到眼睛對物體的高度比其寬度更敏感時，會感到很神奇，它解釋了為什麼在無襯線字體中，字母“o”總是比標準的圓更圓。
好了，今天的教程就到這裡結束了，喜歡的話記得分享給更多的人看到噢~
歡迎加入UI設計群587751709
相關推薦
