進(jìn)階高級！視覺偏差對UI設(shè)計(jì)的影響息爭決方案附50+案例

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

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

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

一. 物理尺寸與視覺尺寸

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

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

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

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

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

不僅是圓與方，所有的圖形都能夠造成如許的誤差。當(dāng)我們尋求“看起來一樣大”這個(gè)目標(biāo)的時(shí)候，某些外形的物理尺寸應(yīng)該更大一些。

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

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

抽出幾個(gè)當(dāng)做例子，大家看看。

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

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

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

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

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

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

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

記住這些點(diǎn)

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

二. 視覺對齊與外形

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

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

我們修改下長度再看看。

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

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

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

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

假如是淺色背景的話，我們就不必要改變文本的長度，直接添加背景，淺色的背景因?yàn)橐曈X重量輕，尚且不會造成什么不好的影響。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記住這些點(diǎn)

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

三.視覺圓角

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

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

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

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

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

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

我們拿那個(gè)視覺正圓來手動(dòng)做個(gè)圓角比比看。

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

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

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

圓角按鈕也同樣適用。

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

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

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

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

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