無論是硬件設(shè)計(jì)還是軟件設(shè)計(jì)，圓角的應(yīng)用都非常廣泛。這是因?yàn)槿搜厶幚韴A角更容易，圓角具備較強(qiáng)的信息引導(dǎo)性，能夠更加凸顯卡片中的內(nèi)容信息；同時(shí)，圓角的設(shè)計(jì)也更具安全性、親密性。

引言

我們最熟悉的蘋果公司在使用圓角卡片最早卡已追溯到1981年，當(dāng)時(shí) Apple 的天才程序員 Bill Atkinson 正向團(tuán)隊(duì)展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機(jī)器上快速畫出圓和橢圓。

Steve Jobs 看了之后有另外的想法，他說：“圓和橢圓都不錯(cuò)，但是能畫出帶圓角的四邊形嗎？我們現(xiàn)在也能畫出嗎？” Bill Atkinson 回答說，很難做到，而且他認(rèn)為并不真需要圓角四邊形。Steve Jobs 就立刻強(qiáng)烈回應(yīng)了：“到處都是圓角四邊形！看看這個(gè)房間周圍就知道了！”并且還帶著 Bill Atkinson 出去轉(zhuǎn)看可以碰到多少圓角四邊形，最后 Bill Atkinson 被說服，第二天下午就拿出了滿意的結(jié)果。

目錄

1. 手機(jī)工業(yè)設(shè)計(jì)圓角的應(yīng)用
2. 手機(jī)系統(tǒng)UI的圓角應(yīng)用
3. 人眼識(shí)別圓角更加容易
4. 圓角的安全性、親密性
5. 圓角使得信息更易于處理
6. 總結(jié)

一、手機(jī)工業(yè)設(shè)計(jì)圓角的應(yīng)用

首先，我們縱觀2018年當(dāng)下各大廠商發(fā)布的手機(jī)，在工業(yè)設(shè)計(jì)上來看基本都采用了更加柔和的圓角設(shè)計(jì)，例如：iPhone、SAMSUNG、小米、VIVO等等。

在屏幕設(shè)計(jì)上同樣選擇了圓角設(shè)計(jì)，在細(xì)節(jié)之處也保持了高度的統(tǒng)一，例如：在攝像頭位置的連接處同樣采用了圓角弧度作為過渡。我們以iPhone為例：

可見，圓角設(shè)計(jì)的應(yīng)用已經(jīng)成為硬件工業(yè)設(shè)計(jì)的中的非常重要的設(shè)計(jì)語(yǔ)言。

二、手機(jī)系統(tǒng)UI的圓角應(yīng)用

不止是手機(jī)的工業(yè)硬件設(shè)計(jì)上采用了大量的圓角，各大廠商的手機(jī)系統(tǒng) UI 也大量采用了圓角設(shè)計(jì)。

大家最熟悉的可能就是 iOS 系統(tǒng)里的圓角設(shè)計(jì)，自2007年隨著 iOS 7 的發(fā)布，Apple 將 iOS 上的標(biāo)志性的圓角標(biāo)輪廓做了更新，將工業(yè)設(shè)計(jì)中的曲線連續(xù)概念應(yīng)用到了視覺設(shè)計(jì)上，一直延續(xù)至今，在 iOS 12 全面應(yīng)用。

除了 iOS ，Android 的各大廠商也紛紛使用圓角設(shè)計(jì)，例如 SAMSUNG 的 ONE UI，都是采用了圓角的設(shè)計(jì)語(yǔ)言。

以及國(guó)內(nèi)的 MIUI 10 的系統(tǒng)界面設(shè)計(jì)同樣使用了圓角作為設(shè)計(jì)語(yǔ)言。

三、人眼處理圓角更加容易

相對(duì)于其他圖形，人類的眼睛更容易識(shí)別圓角矩形而不是直角矩形，因?yàn)槿嗽谘劬Φ纳順?gòu)造上中央凹(fovea centralis，是視網(wǎng)膜中視覺最敏銳的區(qū)域)在處理圓形時(shí)最快，而處理矩形邊緣則需要涉及大腦中更多的“神經(jīng)影像工具”[1]。

所以，人眼處理圓角更容易，因?yàn)樗鼈兛雌饋肀绕胀ň匦胃咏趫A。

例如：App Store today頁(yè)面，通過圓角的卡片設(shè)計(jì)用戶可以快速識(shí)別內(nèi)容，但如果換成直角的話則會(huì)提升它的識(shí)別成本。

在巴羅(Barrow)神經(jīng)學(xué)研究所完成的關(guān)于“角(corners)”的科學(xué)研究發(fā)現(xiàn)：“角的突顯性感知與角的度數(shù)的線性變化，銳角比鈍角產(chǎn)生更強(qiáng)的虛幻的突顯性”[2]。

換句話說，角越銳利，看起來就越顯而易見。而角出現(xiàn)的越凸顯，就越多對(duì)視覺過程產(chǎn)生影響。

例如：西瓜視頻改版中，將“銳角”的播放按鈕改成了“圓角”的播放按鈕，較少了銳角對(duì)用戶的視覺影響。

四、圓角更加安全

相對(duì)于銳角，圓角顯得更加柔和，具有安全感。尖銳的圖形或者物品更容易應(yīng)用在警惕性的場(chǎng)景里，會(huì)給人予以警示或者傷害。

例如危險(xiǎn)的標(biāo)示：

圓角自身的圖形屬性則更加柔和、舒適，給人一種安全感和親密，例如：在設(shè)計(jì)玩具的時(shí)候會(huì)采用大量的圓角設(shè)計(jì)，來讓家長(zhǎng)對(duì)其放下戒備心，讓家長(zhǎng)覺得這是安全的，可以給孩子玩。試想哪個(gè)家長(zhǎng)會(huì)給孩子一把刀子玩？

現(xiàn)在的少兒用戶群體增長(zhǎng)也帶來了不可避免的趨勢(shì)，針對(duì)少兒用戶，由于群體的特殊性，少兒應(yīng)用 app 中使用了大量的圓角設(shè)計(jì)，例如：ABC mouse 中控件都使用了大圓角的設(shè)計(jì)，使界面顯得富有童趣，且安全可靠。

五、圓角使得信息更易于處理

1. 圓角的引導(dǎo)性

圓角在使用地圖或圖表的場(chǎng)景中具有的得天獨(dú)厚的優(yōu)勢(shì)，圓角的弧度能夠更加平滑的連續(xù)的引導(dǎo)用戶的視線，符合用戶的頭部與眼睛的自然運(yùn)動(dòng)，而銳角則會(huì)迫使用戶的視線進(jìn)行強(qiáng)制轉(zhuǎn)折，其中容易造成用戶的停頓。

例如：北京的地鐵地圖，在折線處都采用了圓角設(shè)計(jì)，具有很強(qiáng)的引導(dǎo)性，來幫助用戶快速查詢各個(gè)地鐵站點(diǎn)。

在一些具有引導(dǎo)性、指向性的圖標(biāo)中大量使用圓角曲線，例如高德地圖的導(dǎo)航界面，轉(zhuǎn)彎 icon 的轉(zhuǎn)折點(diǎn)使用了圓角作為過渡，引導(dǎo)用戶視線。

2. 圓角的內(nèi)指向性

在卡片上的應(yīng)用中，由于邊緣圓角向內(nèi)指向矩形的中心更加明顯，所以更加凸顯卡片內(nèi)的內(nèi)容，如圖例：

當(dāng)多個(gè)卡片并排時(shí)，帶圓角的卡片具有更強(qiáng)的內(nèi)部指向性，且相鄰的兩條線差異化較大，我們可以清楚分辨他們的邊界線，所以更加容易被分辨。而同樣大小的直角矩形的內(nèi)部指向性較弱以及臨近的兩根“線”更加相似，分辨起來會(huì)相對(duì)困難一些。

例如：nice 的好貨頁(yè)面，通過簡(jiǎn)單的修改我們?cè)俅伪容^一下直角與圓角在實(shí)際中的應(yīng)用。我們可以看到，在識(shí)別直角卡片的時(shí)候我們需要耗費(fèi)更多的精力，而圓角卡片則不要耗費(fèi)過多的精力，且由于圓角的內(nèi)指向性，圓角卡片能夠更好的承托卡片內(nèi)的內(nèi)容。

六、總結(jié)

1. 人眼的中央凹在處理圓角的時(shí)候更加快捷方便，而銳角則會(huì)對(duì)眼睛造成過多的影響，不易處理。
2. 圓角更加具有安全感和親密性，這一點(diǎn)我們可以聯(lián)想到生活中對(duì)我們具有傷害性和威脅的物品，例如剪刀、危險(xiǎn)標(biāo)示等等。
3. 圓角的弧度符合人眼和頭部的自然運(yùn)動(dòng)，具有良好的引導(dǎo)性；在卡片中能夠清晰區(qū)分卡片的邊界，且圓角具有優(yōu)秀的內(nèi)指向性，更加凸顯卡片中的內(nèi)容信息。

參考鏈接

Material Design 2來了？比圓更圓，圓了又圓

從圖標(biāo)轉(zhuǎn)角論親和力的差異 【含圖標(biāo)教程】

無框界面

用戶體驗(yàn)設(shè)計(jì)之圓角和直角

淺析圓角特征在產(chǎn)品設(shè)計(jì)中的應(yīng)用-嚴(yán)偉杰

從圓角角到圓角

西瓜視頻 3.0改版總結(jié)

本文由 @ 姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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