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

1. 幾何視角和人眼視角

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

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

我們再來看一張圖，你看一下這張圖中的正方形和圓的高度（直徑）是不是一樣？

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

其實，是因為我把圓的直徑增加了50像素。

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

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

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

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

那在我們設(shè)計界面時，我們怎樣運(yùn)用這種原則呢？

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

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

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

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

現(xiàn)在我們應(yīng)該清楚為什么圖標(biāo)區(qū)總是比圖標(biāo)本身大一點了吧——僅僅是因為想讓不是方形的圖標(biāo)看上去和方形的圖標(biāo)一樣大。

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

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

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

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

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

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

2 不同形狀的一致性

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

從像素的角度來說，它們的長度是完全相同的。然而，很多人乍一看，都會覺得下邊的條紋短一點。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這種方法也是合理的，因為文字的主要光學(xué)重量會集中到小寫字母所在的區(qū)域。

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

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

我們再來看幾個例子。

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

下圖中的右側(cè)所代表的是根據(jù)x高的對齊方式。這對“Sync”按鈕來說是最好的擺放形式，因為它剛好有一個上行字母和一個下行字母。相對來說，“Cancel”和“OK”的擺放形式看上去有點靠上。

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

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

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

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

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

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

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

3 光學(xué)圓角

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

你看一下下圖中哪個圓是最圓的？

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

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

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

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

左邊為幾何上的圓。

那我們在設(shè)計時如何利用這種現(xiàn)象呢？

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

有沒有覺得這個圓角是一條直線突然變成了曲線，換句話說，這個圓角看上去一點都不自然。

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

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

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

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

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

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

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

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

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

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

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

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

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

左：調(diào)整前

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

1. 幾何上的圓角看起來更假一點，因為你能很明顯地看出是一條直線突然變成了一個曲線。
2. 視覺校正的圓角需要特殊的公式或者手動調(diào)整形狀。

彩蛋

有些時候，你是不是覺得自己畫出來的正方形看起來并不正，也不方？

你可能會想，這不是胡說嗎？那么，請看一下下圖中的兩個正方形，哪一個看起來更方一點呢？

哪個更像正方形？

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

其實右邊更方正。

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

— end —

感謝閱讀！

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

來源：Medium

原文作者：Slava Shestopalov

譯者：Q_misky

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

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