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

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

眼睛是令人摸不透的器官,常常不實話實說。如果可以熟悉人類視覺感知 (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 像素,但是右邊的按鈕因為填滿強烈的黑色,所以跟旁邊的文字框平衡得更好。

要記起來的重點

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

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) 起源、最初想法的文章與書籍清單。

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

Hopefully, the Ultimate Guide to a Flat Icon Set

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