使用者介面的視覺效應（給真正的狂熱份子）

製作視覺平衡圖示的方法、修正各種形狀的靠齊，還有讓圓角完美呈現，用看圖的方式學會。

Optical Effects in User Interfaces (for True Nerds)

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. An illustrated guide.

本文原作者 Slava Shestopalov 是來自烏克蘭的資深體驗設計師，發表於 Muzli Magazine。

眼睛是令人摸不透的器官，常常不實話實說。如果可以熟悉人類視覺感知 (visual perception) 的特質，就能打造易懂又俐落的設計。不僅僅是字型設計師利用視覺技巧，製作易讀且良好平衡的字型，對於打造人機溝通的 UI 設計師也很有幫助。

1. 測量尺寸與視覺尺寸

400 像素 (pixel) 的正方形，和 400 像素的圓形，哪個比較大？從幾何學來看，寬高都是一樣的。但是，請看下圖。我們的眼睛立刻察覺正方形比圓形還重。這裡順道一提，視覺效應適合使用重量相關的字來形容。

你可能還不相信圖形是精準畫出來的，這裡是加上輔助線和數字的版本。

再來看看這組正方形和圓形。你覺得它們的視覺重量一樣嗎？

對我來說，肯定是的。至少，很難立刻就分辨出哪個比較重。這是因為圓形的直徑多了 50 像素。

我把第一個（400 像素的正方形與圓形）和第二個（400 像素的正方形與 450 像素的圓形）範例裡的圖形重疊，來解釋為何會這樣。如同下圖可以看到：正方形比圓形多出 a 區域，而圓形比正方形多出 b 區域。左邊可以看出正方形完全大過圓形，如同 4 邊都圍繞住。而右邊的圓形與正方形是均等的；沒有任何一個形狀把另一個包圍住，都有 4 個不相鄰的零碎部分。

我們可以從菱形和三角形看到一樣的效果。它們為了要在視覺上能夠與正方形平衡，就必須大一些。只要圖形夠簡單，使用區域為基礎的方法，表現就相當完美。

那麼，此現象要如何使用在介面上呢？舉例來說，在製作一組圖示的時候，良好的平衡很重要，沒有任何一個看起來特別突出或太小。如果我們直接在正方形裡刻進圖示，越接近正方形的圖示就會看起來更大。

我建議讓視覺上較小的圖示超出圖示區域；較重的則是跟圖示區域之間留白，才可以補償不同形狀的重量。

這裡有幾個視覺平衡的實際圖示。

所以，現在應該很清楚為何圖示區域一定要比圖示本身還要大：要能夠容納非正方形的圖示，且看起來不會比正方形的圖示小。

要測試視覺平衡，最簡易的方法是把它們模糊化。如果圖示變成看起來差不多的斑點，那就是有相同的視覺重量。

但是，有時候我們要跟既有的圖像一起使用。例如，用在分享與按讚按鈕的社交平台商標。Facebook 和 Instagram 的圖示是正方形的，而 Twitter 是以鳥的剪影代表，還有 Pinterest 是將字母 P 以圓形圍繞。這就是為什麼 Twitter 和 Pinterest 的圖示會稍微大一些，才可以跟 Facebook 和 Instagram 平衡。

另一個跟視覺平衡相關的範例，是跟圓形按鈕擺在一起的文字框 (textbox)。如果按鈕的直徑跟文字框的高度一樣，眼睛就會覺得按鈕比較小。只要稍微放大，整體結構就會更平衡。

但是，如果按鈕的顏色不一樣，就不需要放大。從下圖可以看到按鈕和文字框的高度都是 80 像素，但是右邊的按鈕因為填滿強烈的黑色，所以跟旁邊的文字框平衡得更好。

要記起來的重點

• 視覺重量是人類眼睛察覺物體的大小和重要性的依據，像素大小不需都一樣。
• 為了要跟近似正方形的形狀視覺平衡，圓形、菱形、三角形和其他非正方形都必須大一點。
• 為了達到視覺平衡，圖示要保留空間。這對應該要看起來前後一致的圖示集 (icon sets) 來說非常重要。

2. 各種形狀的靠齊

視覺靠齊是順著視覺平衡這個主題，和視覺重量現象的延續。請看下方的橫條圖，它們看起來像是一樣長嗎？

從像素來看，答案肯定是「沒錯」。只不過，第一眼看到下方的橫條圖比上方的短一點。

另外兩個長條圖，有什麼改變嗎？

我在下方的長條圖做了一些視覺補償，方法就是把尖端比上方多 20 像素，補償兩個尖端之間的缺口，讓兩者視覺相等。

這裡還有更多不同形狀的橫條範例。

所以，在做海報時，上面有折疊的長條圖和文字，或是在線上購物商店的產品圖卡放上閃亮的「特價」橫條，就要小心地讓它們在視覺上平衡。銳利的邊緣應該要稍微超出圖形的其他部分，尤其是方形的時候。

那麼，有背景（顏色）的一般文字和段落要怎麼做？這得要看背景的視覺厚度。如果很輕 (light) 的話，就可以把標註起來的段落跟其他文字靠齊。

因為背景很輕，所以不會干擾一般的文字流向 (text flow)。

厚重的背景就要用不同的做法。在圖片上，黑色背景跟其他文字靠齊，而且裡面的白色文字是依照縮排擺放。

黑色背景跟亮色的情況不同，有相當紮實的視覺重量。如果目標是要把一段文字自然地放入，最好要像下圖這個方式靠齊。

相同的原則也適用於按鈕和文字輸入欄。當然，這不是無法動搖的教條，只是根據視覺讓介面好看。

左邊輸入欄位的亮色背景可以超出標籤和使用者輸入的內容。Send 按鈕的右邊邊緣並沒有完全與輸入欄背景的右邊邊緣靠齊，是因為按鈕比較暗，以視覺感知看起來比較重。

右邊的輸入欄位都有實心的外框，我把它們跟說明標籤 (label) 靠齊，而且使用者在其中輸入資料時，會在範圍之內縮排。Send 按鈕有一邊是三角形的，所以它稍微往右移動，才可以看起來跟上方的方向輸入平衡。

接下來，還有一種靠齊的考量：文字和圖示按鈕的靠齊。請看下方的按鈕，文字看起來是置中的，沒錯吧？

巧妙的地方就在右邊按鈕的文字，因為右邊邊緣是三角形的，所以稍微往左移動一點。另外，箭頭形狀的按鈕寬度多了 40 像素，才可以在視覺上跟方形的相等。

文字按鈕不只是水平靠齊，也有文字和背景的垂直靠齊。第一個要說的方法使用在各種作業系統、網站和程式裡。是根據字型裡大寫字母高度的靠齊方式（也就是所謂的 cap height），相當於 H 或 I 的高度。

基本上，大寫字母以上、以下與按鈕邊緣之間的距離是相等的。這種方法很常見的原因是指令名稱通常是字首大寫，而有字體上端 (ascender) 的英文字母數量，也就是 l、t、d、b、k、h 這幾個有上方突起的，多過於有字體下端 (descender) 的 y、j、g、p。

另一種方法是使用字型的小寫字母高度（也就是所謂的 x-height）把名稱與背景靠齊。你應該猜到了，高度相當於字母 x。

此方法也行得通，是因為文字的主要視覺重量集中在放置小寫字母的區塊。

這些方法有沒有不同之處呢？當然有囉。只不過，沒有很明顯。

下圖還有更多比較範例。左邊這欄根據 Cap-height 的方法絕對比較適合廣泛使用的 Cancel（取消）和 OK 按鈕，因為 Cancel 沒有字體下端，而 OK 是全大寫。右邊那欄的 x-height 方法，只適合 Sync（同步）按鈕，它同時有上方和下方伸出來 (sticking out) 的元素；而 Cancel 和 OK 這兩個字就會看起來太上面。

情況在有圖示的按鈕會稍微有點不同。把很常用到的「寄送」圖示放在圓形的按鈕，哪一種樣式看起來比較平衡？

希望你注意到了，左邊有點怪怪的。會這樣是由於不同的靠齊方式。第一種是把圖示當成方形，某種程度上來說這是正確的，因為你交付給開發者的 SVG 或 PNG 檔案，是上面有紙飛機圖案的方形區域。右邊的樣式是把圖示裡尖銳的邊緣都跟圓形背景有相同的距離。

如果你準備把檔案交付給開發者，就必需要保留一些區域，他們才可以正確地在視覺上根據背景置中。

播放按鈕也有相同的情況。如果直接靠齊圓角方形與三角形這些形狀，就會看起來很詭異。

如果想根據視覺把三角形擺得更好，就用圓形繞起來，把圓形跟按鈕背景靠齊。

要記起來的的重點

• 有尖銳邊緣的圖形要稍微大一些，才會看起來跟鄰近的方形物體平衡。
• 使用 Cap-height 在按鈕背景上設定名稱的位置，這樣的靠齊很有效，而且是很常見的方法。
• 按鈕上三角形圖示正確擺放的有效方式之一，是用圓形圍繞住，接著把此圓形跟背景靠齊。

3. 視覺圓角

有什麼比圓形還要圓的？之前我並不把它當作一回事，但是就像在這篇文章開頭說的，我們的眼睛很詭異，有時候並不會依照預期來看。所以，下圖裡哪個圓形是最圓的？

我之前問過的人大多數都回答編號 3 或 4。1 號和 2 號肯定太瘦了，而 5 號太豐滿 (plump)。如果重疊第 3 個和第 4 個樣式，也就是幾何的和修正過的圓形，就會發現後者比前者稍微重一點點，我們的眼睛也因此它覺得比較圓。

再進一步解釋我想說的。這些是 3 個知名幾何無襯線體字型 (geometric font) 的 o 字母，分別是 Futura、Circe 和 Geometria。因為高品質的字型是根據人類視覺感知打造，而且使用細緻的視覺工程，因此假設這些圓的形狀比幾何學上的圓形還要圓。你的眼睛覺得這些字母都很舒服，沒錯吧？

把它們跟幾何圓形重疊。即使是最接近幾何的 Futura，它的 o 還是有 4 個多出來的部分。另外，Circe 和 Geometria 的字母則是比圓形還寬。但是，即使它們的寬和高都一樣，還是可以看到 4 個「肚臍」，就好像它們餓翻了之後吃太飽。

因此，以視覺上來說，有些修改過後的圓形（右邊）可能會比幾何圓形（左邊）還要圓。

我們要如何使用這個現象？當然是用在圓角上！如果在常見的圖形編輯程式，例如 Photoshop、 Illustrator 和 Sketch，使用內建的圓角功能，通常視覺上會不理想。

人類的眼睛立刻發現直線突然變成曲線的地方。這樣的圓角其實看起來不自然。

我把視覺感知納入考量，修正這個問題。

這樣的圓角方式比幾何圓形多出一些區域，讓直線和曲線的轉折處不容易發現。

請試著感受這些圓角方式之間的不同。

現在，把此方法用在圓角按鈕。

我猜，你已經發現右邊的按鈕有比較滑順的圓角，眼睛也覺得比較愉悅。

App 也圖示有相同的情況。如果僅僅只用標準的圓角，就無法達到完美的成果。不過，在我們深入探討這個問題之前，先來看看兩組不同的圓角。

第一個是在 Sketch 製作的圓角；第二個是超橢圓 (superellipse)，也稱之為拉梅曲線 (Lamé curve)。法國數學家 Gabriel Lamé 發現，這個算式可以有許多樣式，像是四個端點的星星，也是看起來像圓角的正方形。

Marc Edwards 認為拉梅曲線的公式可以做出滑順且完美視覺的圖形。從 iOS 7 開始，圖示就是以此為依據。

之後，這個形狀增加了黃金比例和網格系統，用來引導設計師打造新圖示，不過，這是另外一個故事了。

使用像超橢圓這些形狀的主要好處是它們更圓、更滑順的外觀。只不過，這些不是標準的形狀很難導入實際的介面。方法有：合併多個 SVG、在程式碼使用特別的公式或腳本，或像 Apple 的做法，是把應用程式圖示使用 PNG 遮罩。

至於設計流程本身的問題，有個簡易的圓角修正方法。就是得要把可以恢復的圓角效果外框化 (outline)，進入圖形的編輯模式後，手動調整曲線控制桿 。

將非常尖銳的角度圓角化時，差別更是明顯，這在繪製適當視覺的馬路或地鐵路線時非常重要。

要記起來的的重點

• 幾何的圓角看起來很不自然，因為可以輕易看到直線突然轉為曲線的點。
• 適當視覺的圓角得根據特殊的公式，或手動調整該圖形。

額外贈禮

有時候，不太符合幾何的正方形看起來更像正方形。你可能覺得：「這是在胡謅什麼？」那麼，你覺得底下的正方形如何呢？哪個看起來最接近正方形？

如果是選擇左邊的，那你總算聽到內心公正客觀的視覺感知。

知道眼睛對物體高度的敏銳程度多於寬度時，我自己也非常訝異。這解釋了為何即使是無襯線幾何字型的 o 也都比幾何圓形還要寬；而且字母 H 的垂直線段肯定會比水平的還粗。

推薦閱讀

其實這篇短文能提供此主題的認識還是有限。因此，我鼓勵你持續探索。以下是有關於完形心理學 (Gestalt) 起源、最初想法的文章與書籍清單。

• Barry Smith 的 Gestalt Theory: an Essay in Philosophy (英)，1998 年。深入研究完形心理學的緣起、人類知覺的哲學與心理層面。
• Steven Lehar 的 The World in Your Head: A Gestalt View of the Mechanism of Conscious Experience (英)，2002 年。這本書解釋人們對現實物體的認知。結論是我們看到的不是真實世界，而是大腦裡的反映。（第一章可以線上看。）
• James J. Gibson 的 The Perception of the Visual World (英)，1950 年（掃描版，有些圖片是低解析度）。這本書說明我們大腦中的生理流程如何影響我們看到世界的方式。
• James J. Gibson 的 The Ecological Approach to Visual Perception (英)。（一篇相同標題的文章，裡面有些重要觀念可以在線上看到）
• George Boeree 的 Gestalt Psychology (英)。完形心理學概念的簡要歷史。
• 完形心理學發明人的生平介紹：Max Wertheimer、Kurt Koffka 和 Wolfgang Köhler。

如果還想要看更多好用的視覺技巧，這是我的新文章：

Hopefully, the Ultimate Guide to a Flat Icon Set

歡迎在任何其它地方跟我聯繫。我在 Dribbble 有一些精緻的圖片；在 Behance 有完整呈現的專案，還有在 SlideShare 的設計簡報。