視覺誤差對 UI 的實際影響講解及一大堆例子

簡評：視覺誤差會對 UI 造成什麼樣的影響，業界內流行的解決方案又有哪一些，本文將以超過五十個例子為你講解。

俗話說眼見為實，但其實我們的眼睛經常欺騙我們。眼睛通過光的反射接收信息，然後經過一次「腦補」最終形成我們所謂「看見」的圖像。腦補這個過程會因為各種原因的影響導致我們對於「看見」的事物的理解產生偏差。這一點對圖形化操作界面的設計影響非常。既然無法繞過，設計師就要學會如何去「適配」人類的視覺慣性畫出「正確」的界面。

1. 物理尺寸與視覺尺寸

長寬 400px 的正方形與長寬 400px 的圓形哪一個更大？假如這樣問你的話，那麼正確答案當然是一樣大。但是來看看下面這張圖，長寬各 400px 的兩個圖形看起來並不一樣大。你的眼睛告訴你 400px 的正方形比 400px 的圓形更大一些。物體的物理尺寸是一樣的，但視覺尺寸卻有可能不一樣的。

為了更加準確地證明這個現象的存在，下面這張圖給出輔助線，大家好好看看。

我們改變一下圓形的尺寸，看看現在這兩個圖形的視覺尺寸有沒有更接近一些？

每個人的感官可能都不一樣，但對於我來說，調整尺寸的後的兩個圖形看起來才是一樣大的，至少也不會像圖一一樣，讓人第一眼就認為正方形比較大。為啥會這樣？因為我將圓的直徑增加了 50px。

現在我們將圖形都疊起來看，看看為什麼會產生這種那麼明顯的誤差。400px 的兩個圖形疊在一起，你會發現整個圓形都被包裹在了正方形之內，而正方形多出的四個面積巨大的 a 區域就是造成這種視覺誤差的原因。再將 400px 的正方形與 450px 的圓形疊在一起，正方形無法將整個圓形包裹在內了，圓形超出的四個 b 區域又與 正方形多出來的 a 區域在視覺上互相抵消，所以 450px 的圓形與 400px 的正方形在視覺尺寸上更接近，也就是我們常說的「一樣大」。

不僅是圓與方，所有的圖形都能夠造成這樣的偏差。當我們追求「看起來一樣大」這個目標的時候，某些形狀的物理尺寸應該更大一些。

這個現象對於界面造成的設計會有哪一些呢？譬如說，當繪製一套 icon 的時候，我們當然是追求每個 icon 都看起來一樣大對吧？但假如我們只通過物理尺寸來進行量度的話，畫出來的 icon 必然會個大個小，烏七八糟，更傷的是，這種問題經常發生，手機里隨便打開個 app 都能發現這樣的問題。

在畫 icon 的時候，一定要把視覺尺寸這個無法用數字進行衡量的維度考慮進去。視覺重量小的元素要放大，視覺重量大的元素要縮小。建議大家可以去下載 HIG 的標註 icon 與 Material Design 的標準 icon 看看，數百個圖標每一個的物理尺寸都不盡相同，但看起來全部都是一樣大的，這是高水平的表現，值得細細學習與參詳。

抽幾個出來當做例子，大家看看

加個粉色等大的邊框，或許你會看得更加清楚。

不是每個人都會有空給每個圖標加個框來測量視覺尺寸的平衡，這裡教個大家一個老司機才會的辦法，搞個高斯模糊，如果高斯模糊之下每個圖標看起來都差不多大，那麼就可以說大致達成的視覺尺寸的相等。

面對那些不需要我們再畫的 icon，比如那些分享到 Twitter、分享到 Instagram ，官方已有提供的的 icon，用起來也要留個心眼。下面來個例子，Facebook 和 Instagram 的 icon 是正方形的，而 Twitter 和 Pinterest 的 icon 一個是不規則圖形，一個是圓形，所以為了達到視覺尺寸上的相等，當它們一起出現的時候，我們要放大 Twitter 和 Pinterest 的 icon，實際效果如圖所示。

另外一個達不到視覺尺寸相等的重災區就是表單配按鈕這種常見的組合。通常是長方形的表單如果和直徑相等的原型按鈕擺在一起，必然也會出現圓形按鈕看起來比較小的問題。處理方法相信大家也都知道了，略微放大按鈕，這樣整個表單和按鈕才能達到視覺平衡，視覺尺寸才能相等。

對於這個現象的處理方法並沒有那麼簡單，就拿上面那個例子來講，有沒有除了放大按鈕以外的其他處理手法呢，當然是有的。條件允許的話我們可以對按鈕添加一些顏色，讓它看起來的視覺重量更重，這也能達成視覺尺寸相等。

記住這些點

• 物體有物理尺寸，但是人眼所見，並對面積或體積自行加以理解後所認知的視覺尺寸並不會與物體的物理尺寸完全相等。
• 正方形的視覺重量是最重的，越接近正方形的 icon 看起來也會更重，更大，反之更輕更小。
• 規範給出的繪製 icon 的模板的安全區域主要就是為了解決視覺尺寸對等問題留給設計師的操作空間。

2. 視覺對齊與形狀

視覺對齊可以說是視覺尺寸這種現象的一種邏輯上的一種延伸。還是跟上半部分一樣，來看張簡單的圖，這兩個東西對齊了嗎？

以物理尺寸的角度來看，它們絕對對起來，因為這兩個長條是一樣長的。但是，由視覺的角度來看，上面那一條是不是看起來比下面那一條長一點？

我們修改下長度再看看。

試著增加下面那條長條的長度。讓下面那條長條的多出 20px，這時候它們看起來才是對齊的，達成了視覺對齊。

再來看看幾種常見的樣式。

以下這種彩帶樣式的圖相信大家都做過，要讓整個圖看起來平衡、整齊，就要利用上這種現象，有意識地加長需要加長的部分，才能做到對齊。

我們再看一個實驗例子，帶背景的文本要如何進行對齊。這時候要根據背景顏色的深淺要決定對齊的方式。

如果是淺色背景的話，我們就不需要改變文本的長度，直接添加背景，淺色的背景由於視覺重量輕，尚且不會造成什麼不好的影響。

如果是深色背景的話，做法就不一樣了。如圖所示，我們要讓黑色背景與文本對齊，而放置於黑色背景之內的文本要有一定程度的縮進，這樣才能達到視覺對齊的效果。

與淺色背景不同，深色背景的視覺重量本身比較重，要讓文本看起來更加一體的話，就一定要這樣做。否則抓眼的背景會過分突出，讓看起來對齊的感覺消失。

這種現象與排列原則最常應用於按鈕與輸入框。

左邊的淺色背景輸入框框體不會與標籤文字對齊，框內文本才會與標籤對齊。右側的深色邊框的輸入框的框體就要與標籤文字對齊，而框內容無需與標籤文字對齊。再看看發送按鈕，左邊側的發送圓邊發送按鈕與淺色背景的輸入框為了達成視覺對齊故意地做短了一點點，右邊的發送按鈕也因為形狀的緣故被故意地做長了一點，達成視覺對齊。

看起來非常簡單，可是僅僅一個對齊的細節還是非常的多的對吧。現在我們單拿一個按鈕出來挖掘更多細節。看看下面這個按鈕，你會覺得裡面的文字是完美居中的對吧。

它們看起來是居中對齊的，但實際上並不是，右邊箭頭形狀的按鈕中的文字在物理上並未居中對齊，它距離左右兩邊的邊距是不一樣的，這種形狀的按鈕文字必須靠左一些才能看起來對齊。

說完了水平居中，垂直居中也有非常多的細節要注意。這裡告訴大家一個東西，對於大部分操作系統而言或者說較為成熟的設計語言而言，垂直居中必定以按鈕文字的首一位大寫字母的高度開始算起，但在 Sketch 中，所有的文字都會默認地帶上行距，所以在製作文字按鈕時，無論是中文還是英文，一定要注意調整行距，這樣才能做到你所需要的垂直居中。

以次為排列原則基本上都會讓文字（以首位大寫字母算起）上下邊距相等。大家都這樣做的原因是在英文裡面，有升部的字母（而大寫字母的高度與升部字母的高度大體相似）（l,t,d,b,k,h）要多於有降部的字母（y,j,g,p）。

雖然我們不常用英文，但是多指導一些小常識沒有壞處。

說完了文字按鈕，再來說說 icon 按鈕，相信這個問題你也經常看到過。看看下圖，哪一個按鈕看起來對齊得比較好？

好吧，希望你能夠看出來左邊那顆按鈕是有問題的，實際上我在畫這枚按鈕的時候確實點了對齊，但是為什麼還會出問題呢？跟文字按鈕對齊一樣，對齊的方式選錯了。一般來說，我們都會默認將飛機當做是一個正方形來進行對齊，但由於圖形形狀的緣故，這樣做必然是錯的，將會導致 icon 過於靠左。右邊側那枚按鈕看起來就是對的，面對這種特殊的，帶角的形狀，一定要保證每個角距離按鈕邊緣的距離是一樣的，而這種對齊的方式不能再將 icon 當做是一顆正方形來看。

這就不能依賴 Sketch 的對齊工具了，你要自己畫個圓形作為參考線來進行對齊。

如下圖，播放按鈕也有三個角，那麼做它的對齊工作也要注意啦。左邊圖那枚按鈕就是直接點對齊的產物，看起來非常奇怪，對吧？

記住了，有角的 icon 要保證對齊的唯一方式是保證三個角到對應邊的距離相等。

記住這些點

• 邊緣有角的圖形要拉長一些才能在視覺上與方形邊緣的長度對齊。
• 製作文字按鈕時一定要記得調整行距。
• 有角 icon 的對齊方法是保證每個角到邊的距離相等。

3.視覺圓角

圓角也有細節？不是設置一下就好了么？當然不是，一個簡簡單單的圓角也有很豐富的細節。我們前面說過了，眼睛看到的東西並不能盡信，先來看看下面五個圓並嘗試回答哪個圓最圓。

我問過了很多人，大部分的回答都是 3 和 4 比較圓。第一個圓有點瘦，而第五個又有點胖，都不是很圓。還是學上面用到的套路，我們把 3 和 4 疊起來看。實際上 3 號是一個正圓形，而 4 號圓被可以地做胖了一點點，並不是一個正圓，不過也正因如此，很多人會認為 4 才是一個正圓。

這裡存在一個現象，經過一點點修改（變胖）的圓對於人的肉眼來說會比正圓更像正圓，這句話有點拗口，但是就是這個道理。看看下圖，左手邊的圓是一個正圓，右手邊的圓是一個經過修改的圓，你瞧瞧是不是這個感覺。

那麼我們又該如何利用這種無法規避的錯覺呢？利用這一點最常見的地方就是圓角啦，而最著名的實例當然就是在 iOS 裡面最常見的圓角了。我們常用的幾款設計軟體，Sketch、PS、Ai 提供的圓角設置用的是非常直接的計算，就是用一個物理正圓來計算你要的圓角，我們上面說到，人眼不會認為正圓是正圓，所以這也是你無法在 Sketch 直接畫出 iOS 圓角的最大原因。

打開這些軟體做個圓角試試看，人眼對於直線在某個點開始轉成曲線非常敏感，軟體確實使用了一個完美的正圓來做圓角，但是給人的感受就是生硬且不自然。

我們拿那個視覺正圓來手動做個圓角比比看。

生硬的過渡瞬間消失，用非正圓畫出來的圓角非常絲滑。

這枚非正圓因為胖了一些，多出來的那點正好給予了一定的過渡，讓直線向曲線的改變更加平順。這也是更接近 iOS 圓角的圓角製作方法。

我們把兩個圓角畫法放到一起比較。

圓角按鈕也同樣適用。

你的眼睛肯定能夠察覺得出來右手邊的那組按鈕的圓角看起來更圓，更自然，也更悅目。

這個技法在 App 的 icon 的製作上也有大量的使用空間，在深入分析之前，我們來看看下面兩個 icon。

左邊是 Sketch 正圓圓角直出，右邊是非正圓手動製作的 icon。很明顯，右邊那個更像 iOS 的 icon，看起來非常悅目，非常舒服。業界內也將繪製出這樣的圓角的曲線稱為 Lamé 曲線 （Lamé curve），由一位法國數學家， Gabriel Lamé 發現並命名。（好奇他是如何發現的）

這種曲線的方程式如下，從 iOS7 起，iPhone 所有的 icon 都基於此進行設計。除了那些 blingbling 的細節以外。除了這一種說法之外，還有說是由連個堆成的羊角曲線拼出來的，有興趣的朋友可以看看方遲的答案。iOS 還有很多這些內涵深厚的細節，不得不感嘆用戶界面設計真是一門精深的學問。

後面人們又根據黃金分割等理論加上了一些必要的參考線，最後就形成了 iOS App icon 的設計規範。

記住這些點

• 完美的正圓畫出來的圓角會有因過渡生硬而產生非常明顯的不自然感。
• 要做出 iOS 的圓角矩形的那種高端圓角需要一頓手動操作。

相關閱讀：蘋果的圖標為什麼那麼好看？！

原文鏈接：Optical Effects in User Interfaces (for True Nerds)

歡迎關注

• 知乎專欄 「極光日報」，每天為 Makers 導讀三篇優質英文文章；
• 個人專欄： 「DesignCoder」 設計是一項工程；
• 我的追波： Zhuyuxuan

推薦閱讀：