轉(zhuǎn)自：小白的交互設(shè)計(jì)

作者：PeterZ

來源：https://zhuanlan.zhihu.com/p/29447171

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

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

1. 物理尺寸與視覺尺寸

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

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

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

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

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

不僅是圓與方桥氏，所有的圖形都能夠造成這樣的偏差温峭。當(dāng)我們追求“看起來一樣大”這個目標(biāo)的時候，某些形狀的物理尺寸應(yīng)該更大一些字支。

這個現(xiàn)象對于界面造成的設(shè)計(jì)會有哪一些呢凤藏？譬如說，當(dāng)繪制一套 icon 的時候堕伪，我們當(dāng)然是追求每個 icon 都看起來一樣大對吧揖庄？但假如我們只通過物理尺寸來進(jìn)行量度的畫，畫出來的 icon 必然會個大個小欠雌，烏七八糟蹄梢，更傷的是，這種問題經(jīng)常發(fā)生富俄，手機(jī)里隨便打開個 app 都能發(fā)現(xiàn)這樣的問題禁炒。

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

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

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

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

面對那些不需要由我們畫的 icon蒿涎，比如那些分享到 Twitter、分享到 Instagram 惦辛，官方已有提供的的 icon劳秋，用起來也要留個心眼。下面來個例子胖齐，F(xiàn)acebook 和 Instagram 的 icon 是正方形的玻淑，而 Twitter 和 Pinterest 的 icon 一個是不規(guī)則圖形，一個是圓形呀伙，所以為了達(dá)到視覺尺寸上的相等补履，當(dāng)它們一起出現(xiàn)的時候，我們要放大 Twitter 和 Pinterest 的 icon剿另，實(shí)際效果如圖所示箫锤。

另外一個達(dá)不到視覺尺寸相等的重災(zāi)區(qū)就是表單配按鈕這種常見的組合。通常是長方形的表單如果和直徑相等的原型按鈕擺在一起雨女，必然也會出現(xiàn)圓形按鈕看起來比較小的問題谚攒。處理方法相信大家也都知道了，略微放大按鈕氛堕，這樣整個表單和按鈕才能達(dá)到視覺平衡馏臭，視覺尺寸才能相等。

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

記住這些點(diǎn)

物體有物理尺寸规婆，但是人眼所見，并對面積或體積自行加以理解后所認(rèn)知的視覺尺寸并不會與物體的物理尺寸完全相等蝉稳。

正方形的視覺重量是最重的抒蚜，越接近正方形的 icon 看起來也會更重，更大耘戚，反之更輕更小嗡髓。

規(guī)范建議的繪制 icon 的安全區(qū)域主要就是為了解決視覺尺寸對等問題留給設(shè)計(jì)師的操作空間。

2. 視覺對齊與形狀

視覺對齊可以說是視覺尺寸這種現(xiàn)象的一種邏輯上的一種延伸收津。還是跟上半部分一樣饿这，來看張簡單的圖浊伙，這兩個東西對齊了嗎？

以物理尺寸的角度來看长捧，它們絕對對起來嚣鄙，因?yàn)檫@兩個長條是一樣長的。但是串结，由視覺的角度來看哑子，上面那一條是不是看起來比下面那一條長一點(diǎn)？

我們修改下長度再看看肌割。

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

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

以下這種彩帶樣式的圖相信大家都做過奋早，要讓整個圖看起來平衡盛霎、整齊，就要利用上這種現(xiàn)象伸蚯，有意識地加長需要加長的部分摩渺，才能做到對齊。

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

如果是淺色背景的話挥萌，我們就不需要改變文本的長度绰姻，直接添加背景，淺色的背景由于視覺重量輕引瀑，尚且不會造成什么不好的影響狂芋。

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

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

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

左邊的淺色背景輸入框框體不會與標(biāo)簽文字對齊，框內(nèi)文本才會與標(biāo)簽對齊领虹。右側(cè)的深色邊框的輸入框的框體就要與標(biāo)簽文字對齊规哪，而框內(nèi)容無需與標(biāo)簽文字對齊。再看看發(fā)送按鈕掠械，左邊側(cè)的發(fā)送圓邊發(fā)送按鈕與淺色背景的輸入框?yàn)榱诉_(dá)成視覺對齊故意地坐斷了一點(diǎn)點(diǎn)由缆，右邊的發(fā)送按鈕也因?yàn)樾螤畹木壒时还室獾刈鲩L了一點(diǎn)注祖，達(dá)成視覺對齊猾蒂。

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

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

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

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

雖然我們不常用英文惰许，但是多指導(dǎo)一些小常識沒有壞處席覆。

說完了文字按鈕，再來說說 icon 按鈕汹买，相信這個問題你也經(jīng)撑迳耍看到過聊倔。看看下圖生巡，哪一個按鈕看起來對齊得比較好耙蔑？

好吧，希望你能夠看出來左邊那顆按鈕是有問題的孤荣，實(shí)際上我在畫這枚按鈕的時候確實(shí)點(diǎn)了對齊甸陌，但是為什么還會出問題呢？跟文字按鈕對齊一樣盐股，對齊的方式選錯了钱豁。一般來說，我們都會默認(rèn)將飛機(jī)當(dāng)做是一個正方形來進(jìn)行對齊疯汁，但由于圖形形狀的緣故牲尺，這樣做必然是錯的，將會導(dǎo)致 icon 過于靠左。右邊側(cè)那枚按鈕看起來就是對的，面對這種特殊的伞辛，帶角的形狀，一定要保證每個角距離按鈕邊緣的距離是一樣的蜒简，而這種對齊的方式不能再將 icon 當(dāng)做是一顆正方形來看。

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

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

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

記住這些點(diǎn)

邊緣有角的圖形要拉長一些才能在視覺上與方形邊緣的長度對齊。

制作文字按鈕時一定要記得調(diào)整行距。

有角 icon 的對齊方法是保證每個角到邊的距離相等助币。

3.視覺圓角

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

我問過了很多人，大部分的回答都是 3 和 4 比較圓华坦。第一個圓有點(diǎn)瘦愿吹，而第五個又有點(diǎn)胖，都不是很圓季春。還是學(xué)上面用到的套路洗搂，我們把 3 和 4 疊起來看。實(shí)際上 3 號是一個正圓形撵颊，而 4 號圓被可以地做胖了一點(diǎn)點(diǎn)逞刷，并不是一個正圓夸浅，不過也正因如此，很多人會認(rèn)為 4 才是一個正圓坯钦。

這里存在一個現(xiàn)象序仙，經(jīng)過一點(diǎn)點(diǎn)修改（變胖）的圓對于人的肉眼來說會比正圓更像正圓律秃，這句話有點(diǎn)拗口堤尾，但是就是這個道理≌呈遥看看下圖，左手邊的圓是一個正圓锦爵，右手邊的圓是一個經(jīng)過修改的圓，你瞧瞧是不是這個感覺樟氢。

那么我們又該如何利用這種無法規(guī)避的錯覺呢伟恶？利用這一點(diǎn)最常見的地方就是圓角啦叹螟，而最著名的實(shí)例當(dāng)然就是在 iOS 里面最常見的圓角了。我們常用的幾款設(shè)計(jì)軟件良价，Sketch蚣常、PS、Ai 提供的圓角設(shè)置用的是非常直接的計(jì)算贞绳，就是用一個物理正圓來計(jì)算你要的圓角，我們上面說到萎攒，人眼不會認(rèn)為正圓是正圓，所以這也是你無法在 Sketch 直接畫出 iOS 圓角的最大原因羹应。

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

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

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

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

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

圓角按鈕也同樣適用锈麸。

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

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

左邊是 Sketch 正圓圓角直出，右邊是非正圓手動制作的 icon鳖悠。很明顯乘综，右邊那個更像 iOS 的 icon，看起來非常悅目九妈，非常舒服。業(yè)界內(nèi)也將繪制出這樣的圓角的曲線稱為 Lamé 曲線 （Lamé curve），由一位法國數(shù)學(xué)家做入， Gabriel Lamé 發(fā)現(xiàn)并命名。（好奇他是如何發(fā)現(xiàn)的）

這種曲線的方程式如下蒋情，從 iOS7 起棵癣，iPhone 所有的 icon 都基于此進(jìn)行設(shè)計(jì)。除了那些 blingbling 的細(xì)節(jié)以外河劝。除了這一種說法之外，還有說是由連個堆成的羊角曲線拼出來的务甥，有興趣的朋友可以看看方遲的答案缓呛。iOS 還有很多這些內(nèi)涵深厚的細(xì)節(jié)，不得不感嘆用戶界面設(shè)計(jì)真是一門精深的學(xué)問票髓。

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

記住這些點(diǎn)

完美的正圓畫出來的圓角會有因過渡生硬而產(chǎn)生非常明顯的不自然感。

要做出 iOS 的圓角矩形的那種高端圓角需要一頓手動操作缎岗。