起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品設計 | 圓角為何應用那么廣泛？
無論是硬件設計還是軟件設計，圓角的應用都非常廣泛。這是因為人眼處理圓角更容易，圓角具備較強的信息引導性，能夠更加凸顯卡片中的內容信息；同時，圓角的設計也更具安全性、親密性。
引言
我們最熟悉的蘋果公司在使用圓角卡片最早卡已追溯到1981年，當時 Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫出圓和橢圓。
Steve Jobs 看了之后有另外的想法，他說：“圓和橢圓都不錯，但是能畫出帶圓角的四邊形嗎？我們現在也能畫出嗎？” Bill Atkinson 回答說，很難做到，而且他認為并不真需要圓角四邊形。Steve Jobs 就立刻強烈回應了：“到處都是圓角四邊形！看看這個房間周圍就知道了！”并且還帶著 Bill Atkinson 出去轉看可以碰到多少圓角四邊形，最后 Bill Atkinson 被說服，第二天下午就拿出了滿意的結果。
目錄
- 手機工業設計圓角的應用
- 手機系統UI的圓角應用
- 人眼識別圓角更加容易
- 圓角的安全性、親密性
- 圓角使得信息更易于處理
- 總結
一、手機工業設計圓角的應用
首先，我們縱觀2018年當下各大廠商發布的手機，在工業設計上來看基本都采用了更加柔和的圓角設計，例如：iPhone、SAMSUNG、小米、VIVO等等。
在屏幕設計上同樣選擇了圓角設計，在細節之處也保持了高度的統一，例如：在攝像頭位置的連接處同樣采用了圓角弧度作為過渡。我們以iPhone為例：
可見，圓角設計的應用已經成為硬件工業設計的中的非常重要的設計語言。
二、手機系統UI的圓角應用
不止是手機的工業硬件設計上采用了大量的圓角，各大廠商的手機系統 UI 也大量采用了圓角設計。
大家最熟悉的可能就是 iOS 系統里的圓角設計，自2007年隨著 iOS 7 的發布，Apple 將 iOS 上的標志性的圓角標輪廓做了更新，將工業設計中的曲線連續概念應用到了視覺設計上，一直延續至今，在 iOS 12 全面應用。
除了 iOS ，Android 的各大廠商也紛紛使用圓角設計，例如 SAMSUNG 的 ONE UI，都是采用了圓角的設計語言。
以及國內的 MIUI 10 的系統界面設計同樣使用了圓角作為設計語言。
三、人眼處理圓角更加容易
相對于其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構造上中央凹(fovea centralis，是視網膜中視覺最敏銳的區域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的“神經影像工具”[1]。
所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近于圓。
例如：App Store today頁面，通過圓角的卡片設計用戶可以快速識別內容，但如果換成直角的話則會提升它的識別成本。
在巴羅(Barrow)神經學研究所完成的關于“角(corners)”的科學研究發現：“角的突顯性感知與角的度數的線性變化，銳角比鈍角產生更強的虛幻的突顯性”[2]。
換句話說，角越銳利，看起來就越顯而易見。而角出現的越凸顯，就越多對視覺過程產生影響。
例如：西瓜視頻改版中，將“銳角”的播放按鈕改成了“圓角”的播放按鈕，較少了銳角對用戶的視覺影響。
四、圓角更加安全
相對于銳角，圓角顯得更加柔和，具有安全感。尖銳的圖形或者物品更容易應用在警惕性的場景里，會給人予以警示或者傷害。
例如危險的標示：
圓角自身的圖形屬性則更加柔和、舒適，給人一種安全感和親密，例如：在設計玩具的時候會采用大量的圓角設計，來讓家長對其放下戒備心，讓家長覺得這是安全的，可以給孩子玩。試想哪個家長會給孩子一把刀子玩？
現在的少兒用戶群體增長也帶來了不可避免的趨勢，針對少兒用戶，由于群體的特殊性，少兒應用 app 中使用了大量的圓角設計，例如：ABC mouse 中控件都使用了大圓角的設計，使界面顯得富有童趣，且安全可靠。
五、圓角使得信息更易于處理
1. 圓角的引導性
圓角在使用地圖或圖表的場景中具有的得天獨厚的優勢，圓角的弧度能夠更加平滑的連續的引導用戶的視線，符合用戶的頭部與眼睛的自然運動，而銳角則會迫使用戶的視線進行強制轉折，其中容易造成用戶的停頓。
例如：北京的地鐵地圖，在折線處都采用了圓角設計，具有很強的引導性，來幫助用戶快速查詢各個地鐵站點。
在一些具有引導性、指向性的圖標中大量使用圓角曲線，例如高德地圖的導航界面，轉彎 icon 的轉折點使用了圓角作為過渡，引導用戶視線。
2. 圓角的內指向性
在卡片上的應用中，由于邊緣圓角向內指向矩形的中心更加明顯，所以更加凸顯卡片內的內容，如圖例：
當多個卡片并排時，帶圓角的卡片具有更強的內部指向性，且相鄰的兩條線差異化較大，我們可以清楚分辨他們的邊界線，所以更加容易被分辨。而同樣大小的直角矩形的內部指向性較弱以及臨近的兩根“線”更加相似，分辨起來會相對困難一些。
例如：nice 的好貨頁面，通過簡單的修改我們再次比較一下直角與圓角在實際中的應用。我們可以看到，在識別直角卡片的時候我們需要耗費更多的精力，而圓角卡片則不要耗費過多的精力，且由于圓角的內指向性，圓角卡片能夠更好的承托卡片內的內容。
六、總結
- 人眼的中央凹在處理圓角的時候更加快捷方便，而銳角則會對眼睛造成過多的影響，不易處理。
- 圓角更加具有安全感和親密性，這一點我們可以聯想到生活中對我們具有傷害性和威脅的物品，例如剪刀、危險標示等等。
- 圓角的弧度符合人眼和頭部的自然運動，具有良好的引導性；在卡片中能夠清晰區分卡片的邊界，且圓角具有優秀的內指向性，更加凸顯卡片中的內容信息。
參考鏈接
本文由 @ 姜正 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
