圓角設(shè)計(jì)在生活中是比價(jià)常見的設(shè)計(jì)了，在手機(jī)、網(wǎng)頁端我們都能看到圓角設(shè)計(jì)?？墒悄阌邢氲綖槭裁磮A角設(shè)計(jì)這么受大家喜歡嗎？圓角設(shè)計(jì)的優(yōu)勢是什么？本文作者從五個(gè)方面對圓角設(shè)計(jì)進(jìn)行了分析梳理，總計(jì)了圓角設(shè)計(jì)的優(yōu)勢，與大家分享。

前言

Steve Jobs 說服 Bill Atkinson 畫出圓角矩形

早在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é)果。

淘寶廣泛使用圓角卡片

再到21世紀(jì)的你，年年都逛淘寶雙十一，在瀏覽心儀的寶貝的時(shí)候，不知道你有沒有發(fā)現(xiàn)淘寶界面默默的完成了進(jìn)一步的改版，對比之前的“99劃算節(jié)”現(xiàn)在的界面中圓角卡片已經(jīng)在產(chǎn)品中得到了廣泛的運(yùn)用。

為什么淘寶會選擇圓角卡片作為自己重要的設(shè)計(jì)組件？它的優(yōu)勢是什么？

圓角卡片的優(yōu)勢

1. 設(shè)計(jì)趨勢

正如 Steve Jobs 在1981年所說：到處都是圓角四邊形看看這個(gè)房間周圍就知道了！我們可以縱觀近年來各大廠商發(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ì)語言。

2. 眼睛更易識別

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

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

例如在 App Store 中 today頁面，每天推送的內(nèi)容通過圓角的卡片設(shè)計(jì)呈現(xiàn)給用戶，可以快速識別當(dāng)前模塊，但如果換成直角的話，我們發(fā)現(xiàn)相對于圓角卡片它的識別成本明顯增加。

3. 感覺更安全

圓角自身的圖形屬性則更加柔和、舒適，給人一種安全感和親密。而尖角則給人一種尖銳、具有攻擊性的感覺，我們可以回憶一下日常比較尖銳的物體，例如剪刀、刀子、警示牌等等，都會給人造成傷害或者警示他人。

在設(shè)計(jì)玩具的時(shí)候會采用大量的圓角設(shè)計(jì)，來讓家長對其放下戒備心，讓家長覺得這是安全的，可以給孩子玩。事想哪個(gè)家長會給孩子一把刀子玩？

4. 信息更容易處理

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

當(dāng)多個(gè)卡片并排時(shí)，帶圓角的卡片具有更強(qiáng)的內(nèi)部指向性，且相鄰的兩條線差異化較大，我們可以清楚分辨他們的邊界線，所以更加容易被分辨；

而同樣大小的直角矩形的內(nèi)部指向性較弱以及臨近的兩根“線”更加相似，分辨起來會相對困難一些。

5. 便于實(shí)行組件化管理

圓角卡片有利于實(shí)行組件化管理，首先圓角卡片作為組件化主要載體之一，具有良好的延展性，能適應(yīng)不同的使用場景。

例如淘寶首頁和微淘頁面，前者作為整個(gè) App 主要流量入口、后者擔(dān)當(dāng)內(nèi)容社區(qū)的角色，兩者功能相差甚大，但通過圓角卡片都能滿足兩者的需求。

其次圓角卡片通過對內(nèi)容進(jìn)行規(guī)劃組織使得各業(yè)務(wù)線的內(nèi)容更加統(tǒng)一，內(nèi)容之間的層級更加明顯，信息之間有明確的主次順序關(guān)系，邏輯關(guān)系更加清晰，便于用戶識別。

劃重點(diǎn)

1. 圓角卡片更容易被人眼識別；
2. 圓角給人感覺更加安全；
3. 圓角卡片具有內(nèi)指向性，人們對于圓角卡片更容易識別4.圓角卡片的廣泛使用便于組件化的管理。

#參考文章#

1. 為什么我們都應(yīng)該學(xué)會組件化設(shè)計(jì)思維？ https://www.uisdc.com/component-design-thinkin
2. Material Design 2來了？比圓更圓，圓了又圓 https://zhuanlan.zhihu.com/p/35063573
3. 從圖標(biāo)轉(zhuǎn)角論親和力的差異 【含圖標(biāo)教程】 https://www.zcool.com.cn/article/ZNDcwNTI4.html
4. 無框界面 https://zhuanlan.zhihu.com/p/24771017
5. 用戶體驗(yàn)設(shè)計(jì)之圓角和直角 http://blog.sina.com.cn/s/blog_5d7170af0101dnpk.html
6. 淺析圓角特征在產(chǎn)品設(shè)計(jì)中的應(yīng)用-嚴(yán)偉杰 http://www.doc88.com/p-9592118891884.html
7. 從圓角角到圓角 https://mp.weixin.qq.com/s/j3iAigMJitiIT2yfBHF3CA
8. 西瓜視頻 3.0改版總結(jié) https://www.zcool.com.cn/work/ZMzExMTcxMDg=.htm

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

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