進階高級！視覺偏差對UI設計的影響息爭決方案附50+案例

2018/2/8 15:24:49來源：互聯(lián)網(wǎng)

@-朱宇軒（譯者）：視覺偏差會對 UI 造成什么樣的影響，業(yè)界內(nèi)流行的解決方案又有哪些，本文將以超過五十個例子為你講解。

俗話說眼見為實，但其實我們的眼睛經(jīng)常誑騙我們。眼睛通過光的反射接收信息，然后經(jīng)過一次「腦補」最終形成我們所謂「看見」的圖像。腦補這個過程會由于各種緣故原由的影響導致我們對于「看見」的事物的理解產(chǎn)生誤差。這一點對圖形化操作界面的設計特別很是影響。既然無法繞過，設計師就要學會如何去「適配」人類的視覺慣性畫出“精確”的界面。

一. 物理尺寸與視覺尺寸

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

為了更加正確地證實這個征象的存在，下面這張圖給出輔助線，大家好悅目看。

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

每小我的感官可能都不一樣，但對于我來說，調(diào)整尺寸后的兩個圖形看起來才是一樣大的，至少也不會像圖逐一樣，讓人第一眼就認為正方形比較大。為什么會如許？由于我將圓的直徑增長了 50px。

如今我們將圖形都疊起來看，看看為什么會產(chǎn)生這種那么顯明的偏差。400px 的兩個圖形疊在一路，你會發(fā)現(xiàn)整個圓形都被包裹在了正方形之內(nèi)，而正方形多出的四個面積偉大的 a 區(qū)域就是造成這種視覺偏差的緣故原由。再將 400px 的正方形與 450px 的圓形疊在一路，正方形無法將整個圓形包裹在內(nèi)了，圓形超出的四個 b 區(qū)域又與正方形多出來的 a 區(qū)域在視覺上互相抵消，所以 450px 的圓形與 400px 的正方形在視覺尺寸上更接近，也就是我們常說的“一樣大”。

不僅是圓與方，所有的圖形都能夠造成如許的誤差。當我們尋求“看起來一樣大”這個目標的時候，某些外形的物理尺寸應該更大一些。

這個征象對于界面造成的影響會有哪些呢？譬如說，當繪制一套 icon 的時候，我們當然是尋求每個 icon 都看起來一樣大。但如果我們只通過物理尺寸來進行量度的畫，畫出來的 icon 必然會個大個小，烏七八糟，更糟糕的是，這種題目經(jīng)常發(fā)生，手機里隨便打開個 app 都能發(fā)現(xiàn)如許的題目。

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

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

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

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

面對那些不必要由我們畫的 icon，比如分享到 Twitter、分享到 Instagram ，官方已有提供的 icon，用起來也要細致。

下面舉個例子，F(xiàn)acebook 和 Instagram 的 icon 是正方形的，而 Twitter 和 Pinterest 的 icon 一個是不規(guī)則圖形，一個是圓形，所以為了達到視覺尺寸上的相稱，當它們一路出現(xiàn)的時候，我們要放大 Twitter 和 Pinterest 的 icon，現(xiàn)實結果如圖所示。

另外一個達不到視覺尺寸相稱的重災區(qū)就是表單配按鈕這種常見的組合。通常是長方形的表單假如和直徑相稱的圓形按鈕擺在一路，必然也會出現(xiàn)圓形按鈕看起來比較小的題目。

處理方法信賴大家也都知道了，略微放大按鈕，如許整個表單和按鈕才能達到視覺平衡，視覺尺寸才能相稱。

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

記住這些點

物體有物理尺寸，但是人眼所見，并對面積或體積自行加以理解后所認知的視覺尺寸并不會與物體的物理尺寸完全相稱。
正方形的視覺重量是最重的，越接近正方形的 icon 看起來也會更重，更大，反之更輕更小。
規(guī)范建議繪制 icon 的安全區(qū)域重要就是為了解決視覺尺寸對等題目，留給設計師的操作空間。

二. 視覺對齊與外形

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

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

我們修改下長度再看看。

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

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

以下這種彩帶樣式的圖信賴大家都做過，要讓整個圖看起來平衡、劃一，就要行使上這種征象，故意識地加長必要加長的部分，才能做到對齊。

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

假如是淺色背景的話，我們就不必要改變文本的長度，直接添加背景，淺色的背景因為視覺重量輕，尚且不會造成什么不好的影響。

假如是深色背景的話，做法就不一樣了。如圖所示，我們要讓黑色背景與文本對齊，而放置于黑色背景之內(nèi)的文本要有肯定程度的縮進，如許才能達到視覺對齊的結果。

與淺色背景不同，深色背景的視覺重量自己比較重，要讓文本看起來更加一體的話，就肯定要如許做。否則抓眼的背景會過分凸起，讓看起來對齊的感覺消散。

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

左邊的淺色背景輸入框框體不會與標簽筆墨對齊，框內(nèi)文本才會與標簽對齊。右側的深色邊框的輸入框的框體就要與標簽筆墨對齊，而框內(nèi)容無需與標簽筆墨對齊。再看看發(fā)送按鈕，左邊的發(fā)送按鈕與淺色背景的輸入框為了達成視覺對齊有心地做短了一點點，右邊的發(fā)送按鈕也由于外形的緣故被有心地做長了一點，達成視覺對齊。

看起來特別很是簡單，可是僅僅一個對齊的細節(jié)照舊特別很是多的。如今我們單拿一個按鈕出來發(fā)掘更多細節(jié)?？纯聪旅孢@個按鈕，你會覺得里面的筆墨是完善居中的對吧。

它們看起來是居中對齊的，但現(xiàn)實上并不是，右邊箭頭外形的按鈕中的筆墨在物理上并未居中對齊，它距離左右兩邊的邊距是不一樣的，這種外形的按鈕筆墨必須靠左一些才能看起來對齊。

說完了水平居中，垂直居中也有特別很是多的細節(jié)要細致。這里告訴大家一個東西，對于大部分操作體系而言或者說較為成熟的設計語言而言，垂直居中必定以按鈕筆墨的首一位大寫字母的高度開始算起，但在 Sketch 中，所有的筆墨都會默認地帶上行距，所以在制作筆墨按鈕時，無論是中文照舊英文，肯定要細致調(diào)整行距，如許才能做到你所必要的垂直居中。

以次為排列原則基本上都會讓筆墨（以首位大寫字母算起）上下邊距相稱。大家都如許做的緣故原由是在英文里面，有升部的字母（而大寫字母的高度與升部字母的高度大體相似）（l,t,d,b,k,h）要多于有降部的字母（y,j,g,p）。

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

說完了筆墨按鈕，再來說說 icon 按鈕，信賴這個題目你也經(jīng)?？吹竭^?？纯聪聢D，哪一個按鈕看起來對齊得比較好？

好吧，盼望你能夠看出來左邊那顆按鈕是有題目的，現(xiàn)實上我在畫這枚按鈕的時候確實點了對齊，但是為什么還會出題目呢？跟筆墨按鈕對齊一樣，對齊的體例選錯了。一樣平常來說，我們都會默認將飛機當做是一個正方形來進行對齊，但因為圖形外形的緣故，如許做必然是錯的，將會導致 icon 過于靠左。

右邊側那枚按鈕看起來就是對的，面對這種特別的，帶角的外形，肯定要保證每個角距離按鈕邊緣的距離是一樣的，而這種對齊的體例不能再將 icon 當做是一顆正方形來看。

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

如下圖，播放按鈕也有三個角，那么做它的對齊工作也要細致啦。左邊圖那枚按鈕就是直接點對齊的產(chǎn)物，看起來特別很是新鮮，對吧？

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

記住這些點

邊緣有角的圖形要拉長一些才能在視覺上與方形邊緣的長度對齊。
制作筆墨按鈕時肯定要記得調(diào)整行距。
有角 icon 的對齊方法是保證每個角到邊的距離相稱。

三.視覺圓角

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

我問過了許多人，大部分的回答都是 3 和 4 比較圓。第一個圓有點瘦，而第五個又有點胖，都不是很圓。照舊學上面用到的套路，我們把 3 和 4 疊起來看?，F(xiàn)實上 3 號是一個正圓形，而 4 號圓被做胖了一點點，并不是一個正圓，不過也正因如此，許多人會認為 4 才是一個正圓。

這里存在一個征象，經(jīng)過一點點修改（變胖）的圓對于人的肉眼來說會比正圓更像正圓，這句話有點拗口，但是就是這個道理?？纯聪聢D，左手邊的圓是一個正圓，右手邊的圓是一個經(jīng)過修改的圓，你瞧瞧是不是這個感覺。

那么我們又該如何行使這種無法規(guī)避的錯覺呢？行使這一點最常見的地方就是圓角啦，而最聞名的實例當然就是在 iOS 里面最常見的圓角了。

我們常用的幾款設計軟件，Sketch、PS、Ai 提供的圓角設置用的是特別很是直接的計算，就是用一個物理正圓來計算你要的圓角，我們上面說到，人眼不會認為正圓是正圓，所以這也是你無法在 Sketch 直接畫出 iOS 圓角的最大緣故原由。

打開這些軟件做個圓角試試看，人眼對于直線在某個點開始轉成曲線特別很是敏感，軟件確實使用了一個完善的正圓來做圓角，但是給人的感受就是生硬且不天然。

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

生硬的過渡瞬間消散，用非正圓畫出來的圓角特別很是絲滑。

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

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

圓角按鈕也同樣適用。

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

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

左邊是 Sketch 正圓圓角直出，右邊是非正圓手動制作的 icon。很顯明，右邊那個更像 iOS 的 icon，看起來特別很是好看，特別很是恬逸。業(yè)界內(nèi)也將繪制出如許的圓角的曲線稱為 Lamé 曲線（Lamé curve），由一位法國數(shù)學家， Gabriel Lamé 發(fā)現(xiàn)并命名。

這種曲線的方程式如下，從 iOS7 起，iPhone 所有的 icon 都基于此進行設計。除了那些 blingbling 的細節(jié)以外，除了這一種說法之外，還有說是由連個堆成的羊角曲線拼出來的。iOS 還有許多這些內(nèi)涵深厚的細節(jié)，不得不感嘆用戶界面設計真是一門精深的學問。

上面提到的參考線在這兒都有科普：《新手科普文！每個設計師都該懂的參考線完全手冊》