為什么同樣尺寸的圓形看起來(lái)比方形的小？

字體設(shè)計(jì)師不會(huì)把所有字母都設(shè)計(jì)得一樣高。他們會(huì)注意到人類視覺(jué)的特殊性，所以他們會(huì)使用光學(xué)技巧創(chuàng)造一個(gè)和諧的、可讀的、平衡的字體。

在上圖中，一個(gè)正方形、一個(gè)三角形和一個(gè)圓在幾何上是相等的。然而，我們的眼睛卻認(rèn)為三角形和圓形偏小。這是因?yàn)檫@三種形狀有不同的重量。從字體上講，就是黑色的數(shù)量分布并不均勻。

有兩種方式能夠使得它們保持視覺(jué)平衡：

A. 計(jì)算兩個(gè)形狀的面積，并保持它們相等

我不喜歡使用這種方法，因?yàn)樗贿m用于簡(jiǎn)單的形狀，如三角形、圓形和菱形。這種方法對(duì)于復(fù)雜的視覺(jué)效果不太有效。

B. 使尺寸更大、超出和模糊形狀是測(cè)試視覺(jué)重量最簡(jiǎn)單的方法

• 1）使非正方形的形狀變大(三角形、箭頭、破折號(hào)、線性圖標(biāo)等)
• 2）超出圖標(biāo)規(guī)范中的圓形邊界框
• 3）把圖形變模糊，比如加上高斯模糊，比較產(chǎn)生的視覺(jué)斑點(diǎn)大小，調(diào)整至差不多大小（主要是看模糊邊緣的尺寸），仔細(xì)觀察下面這張圖，對(duì)比看看效果。

現(xiàn)在你應(yīng)該明白了為什么非方形/圖標(biāo)看起來(lái)比方形小，讓我們看看真正的圖標(biāo)和 UI 元素如何使用這些光學(xué)原理變得更好。 

在設(shè)計(jì)整套圖標(biāo)時(shí)，確保它們的平衡是至關(guān)重要的。為了保持平衡，在圖標(biāo)背板和圖標(biāo)區(qū)域之間留出額外的空間，并允許非方形圖標(biāo)超出圖標(biāo)區(qū)域。

另一個(gè)例子是一個(gè)矩形的UI元素和一個(gè)圓形按鈕放在一起。如果圓形按鈕的高度與矩形UI元素相同，那么圓形按鈕看起來(lái)會(huì)更小。基于光學(xué)校正原理，你需要區(qū)別對(duì)待這兩個(gè)元素。 

看看下面的例子，WhatsApp，三星消息，和Swiggy支持聊天。你覺(jué)得哪一個(gè)更正確?請(qǐng)?jiān)诹粞詤^(qū)發(fā)表你的看法。

2. 為什么看起來(lái)總是不太圓？

還有比正方形更正方形的嗎?

我們的眼睛有古怪的視覺(jué)感知，我們看到的事物與現(xiàn)實(shí)不同。下面是一個(gè)類似的小測(cè)試，你覺(jué)得哪個(gè)圓和哪個(gè)方更標(biāo)準(zhǔn)?

在這些橢圓和矩形中，一個(gè)是正圓，一個(gè)是正正方形。我已經(jīng)修改了正確的，但他們似乎更對(duì)稱了，這是因?yàn)榇怪?水平錯(cuò)覺(jué)。(彩云注：右邊是調(diào)整過(guò)的，看起來(lái)會(huì)更圓和更正) 

大多數(shù)幾何字體不是幾何圖形。字體設(shè)計(jì)師通過(guò)牢記人類的視覺(jué)感知來(lái)設(shè)計(jì)高質(zhì)量的字體。他們幾乎在每個(gè)字母中都使用光學(xué)原理，以使字體保持平衡。

你從上面的測(cè)試中應(yīng)該明白了我的意思。要了解更多，請(qǐng)看下面的圖片。我把字母“O”從幾何字體Futura放在一個(gè)完美的圓圈旁邊。你覺(jué)得哪一個(gè)看起來(lái)更對(duì)稱?

你甚至在底部文字出現(xiàn)之前就猜到了，對(duì)吧?來(lái)自Futura的字母“O”比完美的圓更寬，但看起來(lái)更對(duì)稱。原因是，我們的眼睛傾向于看到的垂直區(qū)域比水平區(qū)域要長(zhǎng)，即使它們是相同的。 

讓我們看看這個(gè)錯(cuò)覺(jué)是如何出現(xiàn)在字母“T”上的。 

在上圖中，水平筆畫的粗細(xì)要小于垂直筆畫的粗細(xì)，以避免產(chǎn)生錯(cuò)覺(jué)。你可以在設(shè)計(jì)方形圖標(biāo)、方形背景或頭像邊框等時(shí)使用這個(gè)技巧。 

3、為什么這個(gè)圓角看起來(lái)還很硬？

如何使駕駛盡可能平穩(wěn)?

設(shè)計(jì)字體字形就像開(kāi)車。當(dāng)我們開(kāi)車時(shí)，如果已經(jīng)在彎道的起點(diǎn)時(shí)，我們不會(huì)轉(zhuǎn)動(dòng)方向盤，只是在到達(dá)彎道前稍作自然轉(zhuǎn)彎，以免發(fā)生意外。

字體設(shè)計(jì)者不依賴于圖形編輯軟件的預(yù)設(shè)弧度。他們會(huì)調(diào)整曲線使其更平滑，因?yàn)樗麄冎廊搜劭梢粤⒓醋⒁獾街本€突然變成曲線的點(diǎn)。

讓我們看看這兩種曲線：純幾何和微調(diào)。試著觀察哪一個(gè)干擾了你的眼睛，哪一個(gè)是光滑的。

讓我們看看在UI設(shè)計(jì)中我們可以在哪些地方融入這種學(xué)習(xí)。

你可能已經(jīng)注意到右邊的按鈕、圖標(biāo)和框架看起來(lái)更賞心悅目。而左邊的曲線有一個(gè)很硬的從直線到曲線的過(guò)渡。

我們?nèi)绾涡拚€呢?在設(shè)計(jì)時(shí)，可以進(jìn)入形狀編輯模式，手動(dòng)調(diào)整曲線手柄的大小，如下圖所示。

4、為什么同樣的間距卻看起來(lái)雜亂無(wú)章？

為什么眼睛的判斷比數(shù)值參數(shù)更重要?

間距是字體設(shè)計(jì)中最關(guān)鍵的部分。字體設(shè)計(jì)師根據(jù)字母的形狀對(duì)字母進(jìn)行組合，并以不同的間距排列字母。例如，字母A和V是三角形的，包含更多的外部空白。所以，如果它們一起出現(xiàn)，那么它們之間的間距會(huì)有點(diǎn)寬，需要減少間距。這有助于形成和諧的字體。

字體來(lái)源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap 

現(xiàn)在，讓我們看看如何將這個(gè)知識(shí)點(diǎn)運(yùn)用到視覺(jué)設(shè)計(jì)的其他方面。你可能已經(jīng)注意到，在圓形或矩形容器中放置三角形圖標(biāo)會(huì)使圖標(biāo)顯得不協(xié)調(diào)。這僅僅是因?yàn)楫?dāng)用軟件來(lái)對(duì)齊的容器中，三角形的面積兩邊是不相等的。看看下面的圖片，可以用視覺(jué)解釋來(lái)理解它。

為了使三角形在其容器內(nèi)具有光學(xué)中心，我們需要平衡兩邊的重量。對(duì)于三角形，你可以找到質(zhì)心，并將其與容器的中心對(duì)齊。現(xiàn)在，如果三角形是用形狀工具創(chuàng)建的，Adobe Illustrator會(huì)提供質(zhì)心的提示。

如果沒(méi)有看到質(zhì)心提示，也不要擔(dān)心。質(zhì)心可以通過(guò)簡(jiǎn)單地畫線從任何兩個(gè)邊的中心到它們對(duì)面的頂點(diǎn)來(lái)定位。查看下面的圖片來(lái)更好地理解它。

這種方法只適用于幾何形狀。對(duì)于其他更復(fù)雜的形狀，你需要依靠你的眼睛判斷，而不是數(shù)學(xué)參數(shù)。

需要記住的是:如果你為開(kāi)發(fā)者切圖時(shí)，你需要在圖標(biāo)周圍保留一些區(qū)域，這樣他們就可以將圖標(biāo)放在背景的中央。

從圖標(biāo)的質(zhì)心畫一個(gè)圈，留下它周圍的額外區(qū)域。

讓我們檢查一下，可以在留言區(qū)討論下到底哪個(gè)公司使用了錯(cuò)誤的資源？ 

5、明明一樣大，卻顯得頭重腳輕？

如何平衡? 

你有沒(méi)有仔細(xì)注意過(guò)字母“B”?它的底部被設(shè)計(jì)得比頂部大。如果我們?cè)O(shè)計(jì)的兩個(gè)半圓在數(shù)學(xué)上是相等的，它會(huì)看起來(lái)不平衡(檢查左圖)。這是因?yàn)槲覀冞M(jìn)化到從“視角”的概念來(lái)處理物理世界，在這個(gè)概念中，遠(yuǎn)處的物體看起來(lái)比附近的物體更小。（彩云注：可以理解為當(dāng)你在山腳時(shí)看到的山腳物體要比看山頂?shù)囊螅敢曉恚?

在印刷中，這意味著要使字體同樣平衡，就需要在底部畫得更重。

讓我們通過(guò)翻轉(zhuǎn)字體中的幾個(gè)字母來(lái)看到明顯的區(qū)別。

字體來(lái)源:Ek Mukta，作者:Girish Dalvi博士和Yashodeep Gholap 

同樣的概念適用于其他水平對(duì)稱的字母形式，甚至在字母“H”的交叉杠是放在實(shí)際的中心以上，使它看起來(lái)更平衡。

所以，下次當(dāng)你設(shè)計(jì)一個(gè)水平的圖標(biāo)或標(biāo)志時(shí)，使用這種底部重的技巧來(lái)讓它在視覺(jué)上更加平衡。 

6、為什么明明在一條線上看起來(lái)卻總是錯(cuò)位？

這種錯(cuò)覺(jué)也被稱為“波根多夫錯(cuò)覺(jué)”( Poggendorff illusion)，這是一種奇怪的現(xiàn)象，會(huì)扭曲我們對(duì)形狀相交角度不是90°的感知。出于某種原因，我們的大腦很難推斷出一條被其他形狀部分覆蓋的線，從而導(dǎo)致連續(xù)性的中斷。為了更好地理解它，先看看下面例子中的左邊的圖，看看哪條線是連續(xù)的，A還是B?然后檢查我縮小了封面線的右邊的圖片。我希望你明白我的意思。 

在拉丁字體中，' X '或' x '就是這種錯(cuò)覺(jué)的受害者，需要特殊處理使其看起來(lái)更自然。字體設(shè)計(jì)者稍微偏移對(duì)角線，以矯正X或X的光學(xué)效果。(彩云注：右邊是調(diào)整后的，視覺(jué)上看更加連續(xù)) 

如果你在為其他語(yǔ)言設(shè)計(jì)字體或?yàn)锳PP設(shè)計(jì)圖標(biāo)集時(shí)遇到類似的問(wèn)題，你可以嘗試像在字母“X”中那樣偏移斜線。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：彩云Sky    來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司