大開眼界！視覺誤差對(duì)UI設(shè)計(jì)的影響和解決方案（附案例）

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

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

一. 物理尺寸與視覺尺寸

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

為了更加準(zhǔn)確地證明這個(gè)現(xiàn)象的存在，下面這張圖給出輔助線，大家好好看看。

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

每個(gè)人的感官可能都不一樣，但對(duì)于我來說，調(diào)整尺寸后的兩個(gè)圖形看起來才是一樣大的，至少也不會(huì)像圖一一樣，讓人第一眼就認(rèn)為正方形比較大。為什么會(huì)這樣？因?yàn)槲覍A的直徑增加了 50px。

現(xiàn)在我們將圖形都疊起來看，看看為什么會(huì)產(chǎn)生這種那么明顯的誤差。400px 的兩個(gè)圖形疊在一起，你會(huì)發(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è)現(xiàn)象對(duì)于界面造成的影響會(huì)有哪些呢？譬如說，當(dāng)繪制一套 icon 的時(shí)候，我們當(dāng)然是追求每個(gè) icon 都看起來一樣大。但假如我們只通過物理尺寸來進(jìn)行量度的畫，畫出來的 icon 必然會(huì)個(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è)的物理尺寸都不盡相同，但看起來全部都是一樣大的，這是高水平的表現(xiàn)，值得細(xì)細(xì)學(xué)習(xí)與參詳。

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

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

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

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

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

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

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

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

記住這些點(diǎn)

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

二. 視覺對(duì)齊與形狀

視覺對(duì)齊可以說是視覺尺寸這種現(xiàn)象的一種邏輯上的延伸。還是跟上半部分一樣，來看張簡(jiǎn)單的圖，這兩個(gè)東西對(duì)齊了嗎？

以物理尺寸的角度來看，它們絕對(duì)對(duì)齊了，因?yàn)檫@兩個(gè)長(zhǎng)條是一樣長(zhǎng)的。但是，由視覺的角度來看，上面那一條是不是看起來比下面那一條長(zhǎng)一點(diǎn)？

我們修改下長(zhǎng)度再看看。

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

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

以下這種彩帶樣式的圖相信大家都做過，要讓整個(gè)圖看起來平衡、整齊，就要利用上這種現(xiàn)象，有意識(shí)地加長(zhǎng)需要加長(zhǎng)的部分，才能做到對(duì)齊。

我們?cè)倏匆粋€(gè)實(shí)驗(yàn)例子，帶背景的文本要如何進(jìn)行對(duì)齊。這時(shí)候要根據(jù)背景顏色的深淺決定對(duì)齊的方式。

如果是淺色背景的話，我們就不需要改變文本的長(zhǎng)度，直接添加背景，淺色的背景由于視覺重量輕，尚且不會(huì)造成什么不好的影響。

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

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

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

左邊的淺色背景輸入框框體不會(huì)與標(biāo)簽文字對(duì)齊，框內(nèi)文本才會(huì)與標(biāo)簽對(duì)齊。右側(cè)的深色邊框的輸入框的框體就要與標(biāo)簽文字對(duì)齊，而框內(nèi)容無需與標(biāo)簽文字對(duì)齊。再看看發(fā)送按鈕，左邊的發(fā)送按鈕與淺色背景的輸入框?yàn)榱诉_(dá)成視覺對(duì)齊故意地做短了一點(diǎn)點(diǎn)，右邊的發(fā)送按鈕也因?yàn)樾螤畹木壒时还室獾刈鲩L(zhǎng)了一點(diǎn)，達(dá)成視覺對(duì)齊。

看起來非常簡(jiǎn)單，可是僅僅一個(gè)對(duì)齊的細(xì)節(jié)還是非常多的。現(xiàn)在我們單拿一個(gè)按鈕出來挖掘更多細(xì)節(jié)。看看下面這個(gè)按鈕，你會(huì)覺得里面的文字是完美居中的對(duì)吧。

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

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

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

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

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

好吧，希望你能夠看出來左邊那顆按鈕是有問題的，實(shí)際上我在畫這枚按鈕的時(shí)候確實(shí)點(diǎn)了對(duì)齊，但是為什么還會(huì)出問題呢？跟文字按鈕對(duì)齊一樣，對(duì)齊的方式選錯(cuò)了。一般來說，我們都會(huì)默認(rèn)將飛機(jī)當(dāng)做是一個(gè)正方形來進(jìn)行對(duì)齊，但由于圖形形狀的緣故，這樣做必然是錯(cuò)的，將會(huì)導(dǎo)致 icon 過于靠左。

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

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

如下圖，播放按鈕也有三個(gè)角，那么做它的對(duì)齊工作也要注意啦。左邊圖那枚按鈕就是直接點(diǎn)對(duì)齊的產(chǎn)物，看起來非常奇怪，對(duì)吧？

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

記住這些點(diǎn)

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

三.視覺圓角

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

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

這里存在一個(gè)現(xiàn)象，經(jīng)過一點(diǎn)點(diǎn)修改（變胖）的圓對(duì)于人的肉眼來說會(huì)比正圓更像正圓，這句話有點(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ì)算你要的圓角，我們上面說到，人眼不會(huì)認(rèn)為正圓是正圓，所以這也是你無法在 Sketch 直接畫出 iOS 圓角的最大原因。

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

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

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

這枚非正圓因?yàn)榕至艘恍喑鰜淼哪屈c(diǎn)正好給予了一定的過渡，讓直線向曲線的改變更加平順。這也是更接近 iOS 圓角的圓角制作方法。

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

圓角按鈕也同樣適用。

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

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

左邊是 Sketch 正圓圓角直出，右邊是非正圓手動(dòng)制作的 icon。很明顯，右邊那個(gè)更像 iOS 的 icon，看起來非常悅目，非常舒服。業(yè)界內(nèi)也將繪制出這樣的圓角的曲線稱為 Lamé 曲線 （Lamé curve），由一位法國(guó)數(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ì)師都該懂的參考線完全手冊(cè)》

后面人們又根據(jù)黃金分割等理論加上了一些必要的參考線，最后就形成了 iOS App icon 的設(shè)計(jì)規(guī)范。

記住這些點(diǎn)

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

歡迎關(guān)注譯者的知乎專欄：https://zhuanlan.zhihu.com/designcoder

「還有哪些很難留意到的設(shè)計(jì)細(xì)節(jié)？」

1. 好的：《網(wǎng)易資深視覺設(shè)計(jì)師：24個(gè)容易忽略的App設(shè)計(jì)細(xì)節(jié)》
2. 壞的：《解析 iOS 11：蘋果還像過去一樣在意細(xì)節(jié)嗎？》

 

原文地址：User Interfaces

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com