上兩篇了解過(guò)了視覺(jué)誤差對(duì)UI造成影響的其他兩個(gè)因素，本文主要講視覺(jué)誤差對(duì)UI造成影響的最后一個(gè)因素——視覺(jué)圓角。

視覺(jué)圓角

什么可以比圓形更圓？我曾經(jīng)認(rèn)為沒(méi)有什么。

但正如我在本文開(kāi)頭所說(shuō)的那樣，我們的眼睛很奇怪，眼睛看到的東西不能全信。那么，下面的圖片中的哪個(gè)圓圈看起來(lái)最圓？

我之前詢問(wèn)的人都是在3號(hào)和4號(hào)之間進(jìn)行選擇，數(shù)字1和2絕對(duì)太瘦，5太豐滿。如果我們將第3個(gè)和第4個(gè)圓重疊，實(shí)際上3是正圓，4偏胖一些，但是會(huì)有很多人認(rèn)為4才是正圓。

鑒于高品質(zhì)字體是基于人類(lèi)視覺(jué)感知而建立的，并且使用了復(fù)雜的光學(xué)構(gòu)造系統(tǒng)，我認(rèn)為字體O的圓形看起來(lái)比幾何形狀更圓。

讓我們將它們與幾何圓圈重疊，即使是最幾何的Futura的“o”也有四個(gè)突出部分。除此之外，Circe和Geometria都比圓圈寬，但即使它們具有相同的高度和寬度，我們也可以看到這四個(gè)“肚子”更胖。

看看下圖：左手邊的圓是一個(gè)正圓，右手邊的圓是一個(gè)經(jīng)過(guò)“變胖”的圓，但是“變胖”的圓看起來(lái)更像正圓。

我們?nèi)绾我?guī)避這種現(xiàn)象？

比如：常見(jiàn)的ios圓角，當(dāng)然是為了四舍五入！如果使用Photoshop，Illustrator或Sketch中的功能畫(huà)圓角，視覺(jué)看上去，是不能畫(huà)出準(zhǔn)確的圓角的。

人眼可以馬上檢測(cè)到一條直線突然變成曲線，軟件做出來(lái)的圓角并不自然。

我在考慮到我們的視覺(jué)感受的情況下，用非正圓畫(huà)出來(lái)的圓角非常平滑。

正圓之外還增加一點(diǎn)額外的部分，多出來(lái)的那點(diǎn)正好給予了一定的過(guò)渡，讓直線向曲線的改變更加平順。

比較一下：

現(xiàn)在我們可以將這種方法應(yīng)用于圓角按鈕。

我想你可能已經(jīng)注意到，右邊的按鈕有更圓滑的圓角，視覺(jué)效果更好。與應(yīng)用程序圖標(biāo)也是相同的，不會(huì)簡(jiǎn)單地使用標(biāo)準(zhǔn)的圓角來(lái)達(dá)到完美的效果。

但在我們深入探討這個(gè)話題之前，讓我們來(lái)看看兩種：

第一個(gè)是一個(gè)圓角矩形，我在Sketch中創(chuàng)建。第二種形狀是超橢圓形，也稱為?Lamé 曲線。

它是由法國(guó)數(shù)學(xué)家?Gabriel Lamé 發(fā)現(xiàn)并命名，根據(jù)所使用的公式不同，可能會(huì)有所不同，很明顯，右邊那個(gè)更像 iOS 的 icon。

從 iOS7 起，iPhone 所有的 icon 都基于此進(jìn)行設(shè)計(jì)。

曲線的方程式

后來(lái)，根據(jù)黃金分割等理論加上了一些必要的參考線。

重要的是要記?。?/strong>