我們的眼睛很奇怪，因?yàn)樗?jīng)常對(duì)我們說(shuō)謊。但如果你了解人類視覺感知的這種特性，你就能設(shè)計(jì)出更友好的用戶界面。如果你是一個(gè)字體設(shè)計(jì)者，通過(guò)利用人眼的視覺特性，你就能設(shè)計(jì)出“看上去”更加和諧的字體。如果你是設(shè)計(jì)用戶和機(jī)器交流方式的界面設(shè)計(jì)師，了解這種視覺特性，對(duì)你的工作也會(huì)十分有用。究竟這種視覺特性是什么？請(qǐng)繼續(xù)往下看。

1. 幾何視角和人眼視角

你覺得下圖中的正方形和圓哪個(gè)較高？

是不是感覺左邊的正方形比右邊的圓大很多。但是如果我告訴你，從幾何的角度來(lái)看，它們的寬度和高度是一樣的。我知道你一定覺得我再騙你，那我只能標(biāo)注一下刻度了。

我們?cè)賮?lái)看一張圖，你看一下這張圖中的正方形和圓的高度（直徑）是不是一樣？

對(duì)我來(lái)說(shuō)，正方形的高度和圓的直徑看上去是一樣的，換句話說(shuō)，我不能馬上告訴你它們哪個(gè)更大。不知道你是不是也有相同的感覺？

其實(shí)，是因?yàn)槲野褕A的直徑增加了50像素。

為了說(shuō)明這個(gè)問(wèn)題，我把上面兩個(gè)例子（一個(gè)是：400像素的正方形和圓；另一個(gè)是：長(zhǎng)為400像素的正方形和直徑為450像素的圓）中的圖形重疊后得到如下圖所示的圖。

如上圖所示，左邊中的正方形比圓形多了區(qū)域a的部分，右邊中的圓形比正方形多了區(qū)域b的部分。左圖中的正方形完全包住了圓形，而右圖中的正方形和圓形相對(duì)比較均衡。他們兩個(gè)沒有任何一方完全包住了另一方，相反，他們都比對(duì)方多出了四個(gè)區(qū)域。而且，右圖中的正方形和圓形的部分區(qū)域是重合的，雖然正方形的寬度和圓的直徑是不一樣的。

我們可以在正方形和菱形的對(duì)比中發(fā)現(xiàn)同樣的現(xiàn)象。為了讓他們看上去一樣，正方形要稍微寬一點(diǎn)、稍微高一點(diǎn)?；诿娣e大小的處理方式在各種簡(jiǎn)單的形狀是完全有效的。

有沒有覺得上圖中1比2大，3比4大？

那在我們?cè)O(shè)計(jì)界面時(shí)，我們?cè)鯓舆\(yùn)用這種原則呢？

舉個(gè)例子，當(dāng)你設(shè)計(jì)一組圖標(biāo)時(shí)，很重要的一點(diǎn)是讓這組圖標(biāo)看上去是一樣大的，這樣就不會(huì)有某些圖標(biāo)過(guò)于突出，也不會(huì)有某些圖標(biāo)看起來(lái)太小。如果我們直接把圖標(biāo)放到正方形區(qū)域里，那么，那些比較方的圖標(biāo)看起來(lái)會(huì)更大一點(diǎn)。如下圖所示。

有沒有覺得2比1大，4比3大？

因此，我建議在設(shè)計(jì)圖標(biāo)時(shí)，稍微調(diào)整一下不同形狀的圖標(biāo)的大小。讓那些看起來(lái)小一點(diǎn)的圖標(biāo)稍微大一點(diǎn)，而讓那些看起來(lái)比較大的圖標(biāo)稍微小一點(diǎn)。如下圖所示。

事實(shí)上，現(xiàn)在很多圖標(biāo)確實(shí)做了這樣的微調(diào)。

現(xiàn)在我們應(yīng)該清楚為什么圖標(biāo)區(qū)總是比圖標(biāo)本身大一點(diǎn)了吧——僅僅是因?yàn)橄胱尣皇欠叫蔚膱D標(biāo)看上去和方形的圖標(biāo)一樣大。

其實(shí)，最簡(jiǎn)單的測(cè)試用戶視覺區(qū)域大小的方式是模糊圖標(biāo)。如果模糊后圖標(biāo)產(chǎn)生的像素差不多，那這些圖標(biāo)看上去也就是一樣大的了。

但是實(shí)際工作中，我們經(jīng)常要用到已經(jīng)存在的圖標(biāo)。比如，經(jīng)常用于分享和點(diǎn)贊的社交網(wǎng)站logo。Facebook和Instagram的圖標(biāo)是方形的，而Twitter的logo是一個(gè)鳥的輪廓，Pinterest的logo是被圓包圍的“P”。這也是為什么Twitter和Pinterest的圖標(biāo)比Facebook和Instagram大一點(diǎn)的原因，因?yàn)檫@樣它們四個(gè)的圖標(biāo)看上去才是一樣大的。

另一個(gè)視覺平衡的例子如下圖，當(dāng)一個(gè)文本框后放著一個(gè)圓形的按鈕時(shí)。如果圓形按鈕的直徑等于文本框的高度，那么這個(gè)圓形按鈕看上去會(huì)比文本框小一點(diǎn)。但是如果你把圓形按鈕的直徑變大一點(diǎn)點(diǎn)，整個(gè)設(shè)計(jì)看起來(lái)會(huì)更均衡。

但是如果你調(diào)整了圓形按鈕的風(fēng)格，那就不需要調(diào)整按鈕的直徑了，如下圖所示。圓形按鈕和文本框的高都是80像素，但是由于圓形按鈕填充了黑色的背景色，兩者就看不出來(lái)哪個(gè)小了。

總結(jié)（敲黑板）：

1. 視覺大小是人類眼睛感知道的物體的大小和意義，這和物體實(shí)際的像素大小不一定相等。
2. 圓形、菱形、三角形等其它非正方形的圖標(biāo)需要稍微大一點(diǎn)，這樣才能和其它正方形的圖標(biāo)看上去一樣大。
3. 圖標(biāo)應(yīng)該要留有一定的空間用于視覺平衡。這對(duì)一組圖標(biāo)看上去一樣大是非常重要的。

2 不同形狀的一致性

視覺一致是對(duì)視覺平衡話題和視覺重量話題的邏輯延伸。拿下圖中的條紋舉例子，你看一下它們的長(zhǎng)度一樣嗎？

從像素的角度來(lái)說(shuō)，它們的長(zhǎng)度是完全相同的。然而，很多人乍一看，都會(huì)覺得下邊的條紋短一點(diǎn)。

再看一下這張圖，你覺得它們的長(zhǎng)度還一樣嗎？

我借鑒了視覺補(bǔ)償原理，將下邊的條紋長(zhǎng)度增加了20像素，以補(bǔ)償兩個(gè)條紋之間上的視覺差距，使得這兩個(gè)條紋的長(zhǎng)度看起來(lái)一樣。

當(dāng)然，還有一些更成熟的不同形狀的條紋的例子，如下圖所示。

因此，如果你正在設(shè)計(jì)海報(bào)折疊效果的條紋效果，或者你正往電子商城里的產(chǎn)品上系打折的條紋，確保這些條紋看上去均衡。尖銳的條紋邊緣應(yīng)該超出其它形狀一點(diǎn)點(diǎn)，尤其是長(zhǎng)方形的條紋。

那純文本和帶有背景色的段落要怎么放置呢？這取決于段落背景的視覺密度。如果背景色比較明亮，那么你可以在純文本里突出顯示段落。

由于背景色比較明亮，通常不會(huì)打斷用戶閱讀的文本流。

但是如果背景色更暗一點(diǎn)，這種方法就不再適用了。如下圖，黑色背景和剩下的文字對(duì)齊，而白色文字往里面縮進(jìn)了幾個(gè)字符。

為什么要這么做呢？和明亮的背景色不同的是，黑色的背景色有大量的視覺重量，如果把它放在段落中間，和其它的段落間距沒什么區(qū)別，那么最好的放置方式是和文字對(duì)齊，而不是突出一部分。

同樣是原則適用于按鈕和輸入框的位置擺放中，如下圖。這并不是一個(gè)標(biāo)準(zhǔn)，僅僅只是考慮到界面的視覺效果。

左圖中，輸入框的亮背景色可以稍微超出輸入框和用戶輸入的部分。“發(fā)送”按鈕的右側(cè)并不需要完全和輸入框的右邊對(duì)齊，因?yàn)榘l(fā)送按鈕的背景色比較深，人眼看起來(lái)更重一點(diǎn)。

右圖中，輸入框有黑色邊框，我把輸入框和文字標(biāo)簽對(duì)齊了，把用戶輸入的內(nèi)容往輸入框里縮進(jìn)了一點(diǎn)。“發(fā)送”按鈕有一邊是三角形的，因此，我把它稍微向右放了一點(diǎn)點(diǎn)，以讓它和正方形的輸入框看上去比較和諧。

上圖中，我們提到了文字和圖標(biāo)按鈕的對(duì)齊，現(xiàn)在我們就要討論一下這部分。如下圖，你看一下，文字相對(duì)按鈕是居中的嗎？

你能發(fā)現(xiàn)，我把右邊按鈕中的文字稍微往左邊移動(dòng)了一點(diǎn)嗎？因?yàn)橛疫叞粹o的右邊緣是三角形，而不是正方形。另外，右邊按鈕比左邊按鈕寬了40像素，使得它們看上去是一樣大的。如下圖所示。

文字按鈕不僅有水平對(duì)齊，也存在文字和背景的垂直對(duì)齊。我想告訴大家的第一種方法經(jīng)常在各種操作系統(tǒng)、網(wǎng)站和應(yīng)用界面設(shè)計(jì)中使用。它是根據(jù)字體大寫字母的高度（所謂的的大寫字母高度）對(duì)齊的，它的高度等于大寫字母“H”或“I”的高度。

基本上，在按鈕中，大寫字母距按鈕頂部和底部的距離都是相等的。這是合理的，因?yàn)榘粹o的名字都是寫在標(biāo)題中的，而且英文字母中的上行字母（ascender，字母向上斜，比如：l、t、d、b、k、h）比下行字母多（descender，字母向下斜，比如：y、j、g、p）。

另一種方法是在文字按鈕中根據(jù)小寫字母的高度對(duì)齊（所謂的X高度）。在sans和sans serif字體中，這個(gè)高度等于字母“x”的高度，不要驚訝哦～

這種方法也是合理的，因?yàn)槲淖值闹饕鈱W(xué)重量會(huì)集中到小寫字母所在的區(qū)域。

那這兩種方法之間有什么區(qū)別嗎？

雖然這兩種方法之間有區(qū)別，但是區(qū)別不是很大，如下圖。

我們?cè)賮?lái)看幾個(gè)例子。

下圖中的左側(cè)所代表的是根據(jù)大些字母對(duì)齊的方式，這也是“Cancel”和“OK”按鈕最常見的擺放形式。因?yàn)椤癈ancel”沒有下行字母，“OK”都是大寫字母。

下圖中的右側(cè)所代表的是根據(jù)x高的對(duì)齊方式。這對(duì)“Sync”按鈕來(lái)說(shuō)是最好的擺放形式，因?yàn)樗鼊偤糜幸粋€(gè)上行字母和一個(gè)下行字母。相對(duì)來(lái)說(shuō)，“Cancel”和“OK”的擺放形式看上去有點(diǎn)靠上。

而在圖標(biāo)按鈕中又有些許不同。讓我們把常見的“發(fā)送”圖標(biāo)放在一個(gè)圓形的按鈕中，如下圖。你看一下哪種放置方式看起來(lái)更和諧？

可能你已經(jīng)注意到上圖左邊的按鈕看上去不太對(duì)勁。這是因?yàn)椴煌膶?duì)齊方式引起的。第一個(gè)按鈕把三角形的圖標(biāo)當(dāng)成了矩形。在某種程度上它是對(duì)的，因?yàn)楫?dāng)你把SVG或PNG格式的圖標(biāo)發(fā)給研發(fā)時(shí)，研發(fā)會(huì)把它放在一個(gè)正方形的區(qū)域里。而第二個(gè)按鈕在放置圖標(biāo)時(shí)保證圖標(biāo)每個(gè)角到圓形按鈕邊緣一致。如下圖所示。

當(dāng)你在給研發(fā)準(zhǔn)備圖標(biāo)時(shí)，你需要預(yù)留一些區(qū)域，以保證研發(fā)把圖標(biāo)放在正方形的背景里可以居中，并且看上去是和諧的。

這在“播放”按鈕中也是一樣的。如果你直接把三角形的圖標(biāo)居中放在正方形的背景里，如下圖左邊所示，它看上去會(huì)很奇怪。

但如果你想要三角形看上去和諧，那你可以把它當(dāng)成一個(gè)圓形，然后讓正方形的背景和它居中對(duì)齊。

總結(jié)（敲黑板）：

1. 帶有棱角的形狀要比沒有棱角的形狀稍微大一點(diǎn)，才能和正方形的物體看上去一樣大。
2. 大寫字母對(duì)齊廣泛使用在有背景的按鈕上放置按鈕名字時(shí)。
3. 有效處理三角形圖標(biāo)在按鈕上的放置位置的方法是，將三角形當(dāng)成一個(gè)圓形，然后再和背景對(duì)齊。

3 光學(xué)圓角

有什么東西會(huì)比圓形更圓呢？之前我一直以為這種東西是不存在的。但是正如我在文章開頭說(shuō)的那樣，我們的眼睛很奇怪，有時(shí)候它感知到的事物并不是我們期待的那樣。

你看一下下圖中哪個(gè)圓是最圓的？

這個(gè)問(wèn)題我問(wèn)了很多人，他們都會(huì)在 圖3 和 圖4中選擇。圖1 和圖2明顯不夠圓，而圖5看起來(lái)太扁了。如果我們把圖3的幾何圓和圖4的變體圓重疊在一起，我們會(huì)發(fā)現(xiàn)，圖4看起來(lái)會(huì)比圖3更圓一點(diǎn)，如下圖，左圖為上圖的圖3，右圖為上圖的圖4，中間為兩者的重疊圓。

為了更好地說(shuō)明這個(gè)問(wèn)題，我以字母“o”的三個(gè)常見幾何字體為例：Futura、Circle和Geometria。由于高質(zhì)量的字體都是以人類視覺感知系統(tǒng)的基礎(chǔ)上、使用先進(jìn)的視覺建設(shè)系統(tǒng)而建立的，我想他們比幾何上的圓看起來(lái)更圓。你是不是也有這種感覺呢？

我們把幾何上的圓和上面三個(gè)圖重疊起來(lái)得到下面這個(gè)圖。即使是最接近幾何圖形的字體Futura居然也突出了四部分，而字體Circle和字體Geometric都比幾何上的圓更寬。當(dāng)然，這個(gè)比較是在高度和寬度都一樣的前提下進(jìn)行的。

因此，從視覺這個(gè)角度講，根據(jù)相關(guān)規(guī)則調(diào)整后的圓會(huì)比幾何上的圓看起來(lái)更圓。如下圖所示。

左邊為幾何上的圓。

那我們?cè)谠O(shè)計(jì)時(shí)如何利用這種現(xiàn)象呢？

是的，你沒猜錯(cuò)，我們?cè)谠O(shè)計(jì)圓角的時(shí)候可以利用這種現(xiàn)象。如果你使用當(dāng)下流行的Photoshop、Illustrator或Sketch等圖像編輯軟件畫圖，畫出來(lái)的圖是幾何上的圖形，而不是看上去更和諧的圖。如下圖所示。

有沒有覺得這個(gè)圓角是一條直線突然變成了曲線，換句話說(shuō)，這個(gè)圓角看上去一點(diǎn)都不自然。

我根據(jù)我們的視覺感知微調(diào)了一下這個(gè)圓角，如下圖。

我在本身的圓角上又增加了一個(gè)區(qū)域，使得直線到曲線的漸變看上去更加平和。如下圖。

你可以從下圖看一下兩張圓角之間的區(qū)別。

我們也可以在圓角按鈕上使用這個(gè)方法，如下圖。

我猜你已經(jīng)發(fā)現(xiàn)上圖中右邊的按鈕的圓角看上去更加平滑，看起來(lái)更舒服一點(diǎn)。

同樣，我們也可以把它運(yùn)用到app icon的設(shè)計(jì)上。一個(gè)并不簡(jiǎn)單的圓角使用標(biāo)準(zhǔn)達(dá)到了一個(gè)完美的結(jié)果。但是既然我們已經(jīng)談到這個(gè)話題，我們不妨自己試一試這兩個(gè)圓角有什么區(qū)別。

如上圖，左側(cè)的圖是我用Sketch畫出來(lái)的標(biāo)準(zhǔn)的圓形。右側(cè)的圖是superllipse，也就是俗稱的 Lamé curve。 Lamé curve是法國(guó)數(shù)據(jù)家Gabriel Lamé發(fā)現(xiàn)的。

Marc Edwards指出Lamé curve的公式會(huì)產(chǎn)生更佳平滑、看上去更加完美的形狀。iOS 7 之后的圖標(biāo)也在使用它。

之后，這個(gè)形狀又根據(jù)黃金分割比和指導(dǎo)新圖標(biāo)設(shè)計(jì)的網(wǎng)格調(diào)整為如下圖所示，但這已經(jīng)是另外一件事情了。

使用像superellipse這樣的形狀最大的好處就是他們看起來(lái)更圓、更平滑。但是，這種非標(biāo)準(zhǔn)形狀很難使用到真實(shí)的界面中去。它們應(yīng)該可以將多個(gè)特殊公式的SVG合并得出，或者使用一些腳本，或者像蘋果公司在它們的app 圖標(biāo)上做的那樣使用PNG的蒙版。

那在設(shè)計(jì)過(guò)程中，如果調(diào)整圓角呢？

你需要將默認(rèn)的圓角轉(zhuǎn)換為大綱，然后打開形狀編輯模式，手動(dòng)調(diào)整曲線的位置，如下圖。

調(diào)整后的圓角比精確輸入的圓角度數(shù)看起來(lái)更加形象，這對(duì)視覺校正圖像來(lái)說(shuō)是很重要的。

左：調(diào)整前

總結(jié)（敲黑板）：

1. 幾何上的圓角看起來(lái)更假一點(diǎn)，因?yàn)槟隳芎苊黠@地看出是一條直線突然變成了一個(gè)曲線。
2. 視覺校正的圓角需要特殊的公式或者手動(dòng)調(diào)整形狀。

彩蛋

有些時(shí)候，你是不是覺得自己畫出來(lái)的正方形看起來(lái)并不正，也不方？

你可能會(huì)想，這不是胡說(shuō)嗎？那么，請(qǐng)看一下下圖中的兩個(gè)正方形，哪一個(gè)看起來(lái)更方一點(diǎn)呢？

哪個(gè)更像正方形？

如果你的選擇是左邊那個(gè)，那么你可能是聽從了來(lái)自無(wú)偏光學(xué)感知的內(nèi)心聲音。

其實(shí)右邊更方正。

就我個(gè)人而言，當(dāng)我知道我們的眼睛對(duì)物體的高度比寬度更敏感時(shí)，我感到十分驚訝。而這也解釋了為什么幾何字體字母“o”的寬度比幾何上更寬、大寫字母“H”垂直的部分為什么總比水平的部分更寬。

— end —

感謝閱讀！

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

來(lái)源：Medium

原文作者：Slava Shestopalov

譯者：Q_misky

本文由 @Q_misky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議