UI設計 | 如何設計一套視覺平衡的圖示

我們的眼睛很奇怪，經常誤導我們。但是如果你知道人類視覺的特殊性，你就可以構建出更好的設計。不僅字型設計師可以利用光學技巧來建立可讀和均衡的字型，這對於介面設計師也很有幫助。

在20世紀20年代，開發了視覺感知的格式塔理論。它解釋了我們的眼睛如何處理不同的影象以及我們的大腦如何解釋它們。你可能已經聽說過“接近原則”或“共同命運原則”等事情。本文涉及格式塔理論的一些要點，並強調實踐方面而非科學研究。底部有關於該主題的推薦材料列表。

01 測量的，和視覺的尺寸

更大的是400px 的正方形還是400px 的圓形？

從幾何學上講，它們的寬度和高度是相等的。但請看下面的圖片。我們的眼睛立即發現方形比圓形重要。

這是帶參考線的版本：

讓我們看一下另一張圖片，在視覺重量上面，你覺得它們相同嗎？

很難看出誰大誰小吧，這是因為我增加了圓形的直徑：

我重疊了第一個和第二個例子的形狀。在左側，400px 的正方形比400px 的圓形面積更大。這就是為什麼我們看到它在視覺上更大。在右邊，圓和正方形是平衡的。基本上，它們具有相似的區域，而它們的寬度和高度不同。

我們可以看到菱形或三角形也是一樣的道理：為了在視覺上與正方形平衡，它們應該更寬更高，以便它們的區域相似。基於區域的方法非常適合最簡單的形狀。

如何在介面中使用這個方法？當我們建立一組圖示時，重要的是要使它們均衡，以便沒有圖示突出太多或看起來太小。如果我們直接將圖示刻入方形區域，那麼更像方形的圖示看起來會更大。

我建議透過允許視覺上較小的圖示超出圖示區域之外，以及在視覺上較重的圖示和圖示區域之間留一些空間來補償不同形狀圖示的重量。

我們來看一組視覺平衡的圖示：

現在很明顯為什麼圖示區域總是比圖示主體大——只是為了允許非方形圖示適合它並且看起來不小於方形圖示。

檢查是否視覺平衡的最簡單方法是高斯模糊。如果你的圖示變成差不多相似的斑點，那麼它們就具有相同的光學重量。

但有時我們會同時用到一些logo，比如用作共享按鈕的社交網路的logo。Facebook和Instagram是方形的，而Twitter以鳥形輪廓代表，Pinterest以環繞的“P”代表。我們能夠發現：Twitter和Pinterest圖示有點大，這是為了讓它們看起來與Facebook和Instagram圖示平衡。

光學平衡問題的另一個例子是與圓形按鈕放在一起的文字框。如果按鈕直徑等於文字框高度，則按鈕看起來會比我們的眼睛小。當你放大一點點時，整個結構將變得更加平衡。

但是，如果我們更改了按鈕的樣式，就不需要放大了。在下面的圖片中，按鈕和文字框高80px，但由於強烈的黑色填充，右側的按鈕看起來視覺加重了，這與文字框就視覺平衡了。

要記住的事情

1、光學重量是人眼如何感知物體的大小和重要性，並且它不一定等於其畫素大小或面積。

2、圓形，菱形，三角形和其他非方形形狀需要更高和更寬，以便與方形形狀進行光學平衡。

3、圖示區域應該有一些空間用於光學平衡。這對於一組圖示來說至關重要，這些圖示應該始終如一。

02 不同形狀的對齊

光學對準是光學平衡主題的邏輯延續。看看下面的條紋，它們看起來長度相同嗎？

在畫素方面，答案是堅定的“是”。然而，乍一看，下條紋看起來比上條紋短。

再來看看這張圖片，有變化嗎？

我對下條紋進行了光學補償。允許尖峰超出上條紋長度20px，這是補償尖峰之間間隙，並使兩個形狀在光學上相等的方法。

下面有一些更復雜的不同形狀條紋的例子。

所以，如果你正在製作一張有摺疊條紋和文字的海報，或者你在網上商店的產品卡上加上了一條明亮的“折扣”條紋，請注意使它們在光學上保持平衡。鋒利的邊緣應該超出形狀的其他部分，特別是如果它是一個矩形。

那麼，如何對齊有背景的純文字和段落呢？這取決於背景的視覺密度。如果是淺色，可以將突出顯示的段落與文字的其餘部分對齊。

由於背景是淺的，它不會中斷通常的文字流。

對於深色的背景，可以使用不同的方法。在圖片上，黑色背景與文字的其餘部分對齊，而其中的白色文字用縮排放置。

與淺色背景的情況不同，黑色背景具有相當大的光學重量，如果目標是無縫插入段落，最好按下面所示的方式對齊。

同樣的原理也適用於按鈕和輸入框。當然，這不是教條，只是一個基於人類視覺感知的建議。

左側輸入框的淺色背景可以超出標籤和內容。“傳送”按鈕的右邊緣與輸入背景的右邊緣不完全對齊，因為按鈕顏色較深，從視覺角度看更重。

在右邊，輸入框有實心邊框，我將它們與標籤對齊，而使用者的輸入在框中有縮排。“傳送”按鈕有一個三角形的邊，按鈕向右移動一點，以便與上面的矩形輸入框保持平衡。

接下來，我們將進一步討論對齊——文字和圖示按鈕的對齊。看看下面的按鈕，文字看起來是居中的對吧？

訣竅是，在右邊的按鈕上，我把單詞向左移動了一點，因為右邊是三角形的。此外，箭頭狀按鈕寬40畫素，在光學上與矩形按鈕相同。

原文還講了一些英文按鈕的對齊建議，鑑於我們中文方塊字本身比較規範，譯者認為沒有必要在本文展開講，因此這裡省略部分內容，感興趣的同學可以去原文地址看。

接下來我們來看看在圓形裡面放置三角形圖示的例子，你覺得哪一個更平衡呢？

希望你注意到左邊的圖示有問題。如果圖示是矩形，左邊圖示的對齊方式在某種程度上是正確的，但三角形的銳邊與圓距離相等時，

如果我們在為開發人員切圖，我們是需要保留一些區域的，以便他們可以將圖示在背景上以光學方式居中。

“播放”按鈕也是一樣的道理。如果直接將這些形狀：一個圓角矩形和一個三角形-對齊，它們看起來會很奇怪。

如果你想要更好地定位三角形，請畫個圓並將此圓圈與按鈕背景對齊。

要記住的事情

1、帶有銳邊的形狀應該更大或更長，以與相鄰的矩形物件保持平衡。

2、帽高對齊是在按鈕背景上定位按鈕名稱的有效方法。

3、正確定位按鈕上的三角形圖示的有效方法之一是畫個圓覆蓋它並與背景對齊。

03 光學圓角

什麼比圓形更圓滑？我曾經認為沒什麼，但正如我在本文開頭所說的那樣，我們的眼睛很奇怪，有時會感覺不到我們所期望的東西。那麼，下圖中的哪個圓形看起來最圓滑？

我以前問過的人在數字3和4之間選擇。數字1和2肯定太瘦了，5太胖了。如果我們把第三個和第四個變種——一個幾何圓和一個修改過的圓——重疊起來，我們會發現後者比第一個變種重一些，因此對我們的眼睛來說更光滑。

為了表達我的意思，我從三種著名的幾何字型中取了字母“O”——Futura、Circe和Geometria。鑑於高質量的字型是建立在人類視覺感知的基礎上，並使用複雜的光學結構系統，我認為它們的圓形看起來比幾何圖形更圓。

讓我們用幾何圓把它們重疊。即使是最幾何的Futura的“O”也有四個突出部分。此外，Circe和Geometria的字母比圓圈還寬，但即使它們的高度和寬度相等，我們也能看到這四個“肚子”，就好像它們餓了，吃得過飽。

所以，從光學角度來說，一個修改過的圓（右邊）比一個幾何的圓（左邊）看起來更“圓”。

我們如何利用這種現象？當然是拐角圓角！如果直接使用設計軟體中的圓角功能，結果將不會是光學上的最優。

人的眼睛會立即發現一條直線突然變成曲線的地方。這種圓角看起來不自然。

考慮到我們的視覺感知，我修正了這個問題。

這種圓角在幾何圓之外有一個額外的區域，使得一條線與一條曲線相交的點不明顯。

試著感受一下這些圓角方法之間的區別。

現在我們可以將這種方法應用於圓角按鈕。

你可能已經注意到右邊的按鈕有更平滑的圓角，對你的眼睛來說更舒服。

APP圖示也是同樣的道理，不只是使用標準的圓角來達到完美的結果。但在我們深入討論這個主題之前，讓我們先看看兩個不同的圓形。

第一個是圓角矩形，第二個是超橢圓，也稱為Lamé曲線。它是由法國數學家加布裡埃爾·拉姆（Gabriel Lamé）發現的，根據公式的不同，可以從四角星到形狀看起來像圓角正方形。

關於超橢圓的繪製方式可以參考超級葉寫的這篇文章：

乾貨 | 如何快速在PS/AI/Sketch中繪製超橢圓

Marc Edwards提出了Lamé曲線的公式，得到了光滑和光學完美的形狀。從iOS 7開始的圖示就開始使用它啦。

後來，透過新增黃金比例比例和一個網格來指導新圖示的設計師來修改這個形狀，但這是不同的情況了。

使用像超橢圓這樣的形狀的主要好處是它們的平滑外觀。但在另一方面，這些非標準形狀很難插入到實際介面中。應該將多個SVG組合在一起，在程式碼中包含特殊的公式或指令碼，或者像蘋果公司的應用程式圖示那樣使用PNG蒙版。

至於設計過程本身，有一個簡單的圓角修復方法。我們需要將可恢復的圓角效果轉換為輪廓，進入形狀編輯模式，並手動將曲線控制柄彼此靠近，這樣調整後就沒有直接調圓角那樣生硬了。

銳角倒角的差異更為明顯，這對於繪製道路或地鐵方案非常重要。

要記住的事情

1、幾何上的圓角看起來像人造的，因為你可以很容易地看到直線突然變成曲線的點。

2、光學上正確的圓角需要特殊的公式或手動調整形狀。

一個小彩蛋

請看下面這張圖，你覺得哪個更方一點呢？左邊還是右邊？

留言告訴我吧！

原理：

我們的眼睛對物體的高度比對它的寬度更敏感，它解釋了為什麼即使在幾何字型中，字母“o”總是比幾何圓寬，並且字母“H”的垂直莖總是比水平的更粗。

原文：Slava Shestopalov （如涉及侵權或對版權有疑問，請聯絡我們，我們會盡快處理，感謝~