UI/UX｜下次主管問你為什麼 UI 要用圓角的時候
聽過這個小故事嗎？1981 年，在蘋果的 Macintosh 開發階段，Steve Jobs 要求 Bill Atkinson——負責為 Mac 開發圖形的員工——設計出可以快速畫出圓角矩形的方法。當時 Atkinson 已經找到如何做出長方形、橢圓形和圓形的辦法，但賈伯斯堅持要做出圓角的矩形。Atkinson 覺得這個形狀肯定很難用電腦技術畫出來，而且感覺這個要求非常不必要，但 Jobs 馬上就神打臉：
Rectangles with rounded corners are everywhere! Just look around this room!——Steve Jobs
「到處都有圓角矩形！」Jobs 指著房間內的白板、桌椅，窗外的景物，一個一個圓角矩形都被點名，Jobs 更帶著 Atkinson 出門晃了一圈，指出每個小角落的圓角矩形給他看。終於，在 Jobs 給他看到一個「禁止停車」的路標牌時，Atkinson 認輸了。「好啦，我放棄，我回去看看是不是真的跟我想像的一樣困難。」
隔天下午，Atkinson 已經研究出如何畫出圓角矩形的方法，這個技術日後被應用在蘋果的各項產品中，演變到現在已經成了設計的基本。
圓角到底有什麼好處？
視覺上的美觀
這幾年，不管是 iPhone、Android 手機、Apple Watch、iPad 或是電腦，在硬體設計上都大量使用圓角。當所有的裝置都有圓角的時候，UI 介面的設計就自然而然也跟著將圓角大量導入視覺中。
圓角的設計讓產品看起來更新穎、跟上潮流，圓潤的造型也讓產品感覺比較容易親近，對於服務性產品、社交軟體、電商/網路商店等等全都適用。
但是，使用圓角只是單純因為「好看」嗎？它在 UI/UX 設計上能夠帶來什麼效果或好處？
使內容能夠更輕鬆地被用戶接納
- 認知負荷說
不像有些潮流純粹是為了視覺上的美觀，圓角設計對於使用者體驗也有許多正面的影響。圓角會使得資訊更容易被大腦處理，因為它能夠降低大腦的認知負荷。Jürg Nänni（Visual Perception 的作者）表示，視網膜中區處理正圓形的時候是最快速的，而處理邊邊角角的時候則比較費力，大腦處理的速度也較慢。於是，長得圓潤的圓角矩形相較於一般矩形，對於使用者來說就容易接納許多。
Barrow Neurological Institute 的研究也顯示，一個物體的顯著度與邊角的角度呈線性變化，銳角相較於鈍角要顯得更明顯突出。換句話說，角度越尖銳，物體就看起來越明亮；而越明亮的物體就越難以直視。
如上圖，角度越尖銳的星形與放射狀，看起來就越顯眼，在視覺上也比較令人感到明亮、不適，大腦的認知負荷也越高。
2. 視覺動線說
另有一說，是圓角——又或者是「曲線」——更符合一般人自然的視覺動線與眼球運動。舉下圖為例：
依序看圖（一）這五個長方形排列的時候，我們的視線並不會像圖（二）一樣垂直轉彎，而是如圖（三）一樣，以一個弧度轉彎。
同樣的，我們可以看到上圖中的視覺動線，也不會像圖（二）一樣尖銳地來回移動。如果讓視線跟隨圖（二）的動線移動，會發現在移動到尖角處時，視覺上產生了「斷點」，也就是停頓的時間。如圖（三）一樣以弧線的方式來回，才是更自然流動的視覺動線。
換句話說，當我們說圓角比較好看，可不只是視覺上的「好看」而已，而是真的比較好「看」。
3. 曲線偏坦說（Contour Bias）
還有一種解釋，認為我們相對於直角和銳角更容易接納圓角的原因，是因為我們的反射本能所致。在生活中，我們很直覺地將尖銳的物品視為「危險的」，而避免去接觸。
如果小孩子拿起一支牛排刀，你會趕緊讓他放下，以免發生危險；而如果小孩子拿起一顆球，你不會有太大的反應。神經科學會把這樣的表現稱之為我們對於尖銳物品的「迴避反應」。
在 Universal Principles of Design 中也寫到關於 contour bias，指的是人們傾向於偏好有曲線輪廓的物體，勝過於有尖角、頂點的物體。當面對一個尖銳的物體時，我們的杏仁核活性會增強（杏仁核對情緒反應——尤其是恐懼——十分重要，當個體遇到傷害性刺激時，杏仁核的特定區域會學會害怕，並產生恐懼的記憶）。也因此，當我們看到尖銳的物體，我們會本能地產生抗拒，而對於圓潤的物體接納度則會較高。
實驗顯示如果拿兩個相似的物體，例如兩隻手錶，但一支是圓形的，另一支則是方形的，實驗對象會明顯地偏好較為圓潤的那個物體。
除了圓角看起來比較舒服之外，從 UX 設計的角度來看，圓角還有什麼用處嗎？
使相似的內容更容易被區別
圓角矩形同時也是個非常有效率的「容器」，讓相似、相關的內容在並排的時候，比用純矩形來得更容易相互區別開來。
上圖 A、B 兩排矩形的間距一樣，顏色和邊框也相同，但是很明顯 B 排的矩形辨識度遠遠高於 A 排。這是為什麼呢？
首先，第一眼看過去的時候，A 排的矩形整體是連在一起的，中間找不到斷點。而 B 排矩形，因為有圓角的關係，所以斷點很明顯。▼
再來看兩種矩形的視覺聚焦：A 排由於直角的關係，視覺聚焦向外推，整體的效果比較發散。這會使得第一眼看過去的時候，容易分不清楚哪一條邊框屬於哪一塊矩形。反之 B 排因為圓角收攏的關係，視覺聚焦向中心推，區塊就比較容易區別開來。▼
善用圓角，不要濫用圓角
圓角會帶來溫暖、值得信賴的印象，國外甚至將圓角矩形稱作「友善的矩形（friendly rectangles）」。這也是為什麼許多品牌的 CTA 按鈕都會用不同幅度的圓角做設計，因為這樣可以讓消費者或潛在合作夥伴認為和這間公司做生意是安全的。
以「免費試用」為例，企業推出免費版或試用版的時候，都是希望越多人試用越好，因為用一用之後也許就有機會轉換成付費用戶了。圓角按鈕相當於對消費者說：「不要怕，試用不需要付錢」「這是免費的，別擔心」，藉此打造出一種可以安心使用的氛圍。
同樣的，要讓消費者更深入認識你的產品，最好的方法就是讓他覺得「只是暸解更多而已，你不喜歡的話沒關係」。
在使用圓角的時候，radius 是多少也會影響 UI 帶給用戶的印象。如果還是希望保留直角所帶來的方正、穩重的感覺，可以考慮使用 radius = 1-2pt/dp 的微圓角。如果想要塑造圓潤、平易近人的形象，可以用 radius = 8–12pt/dp 的弧度。如果 radius 的數值用到太大反而會矯枉過正，整個 app 就會看起來不專業、不好用，反而造成了反效果。
結語
雖然圓角的好處多多，但設計稿中也不宜過度使用，同時這也不代表不使用圓角就是比較差的設計。也有許多知名企業的官網是不吃圓角這一套的，例如 LINE、logitech 和 nVIDIA。
是否要使用圓角，以及圓角幅度究竟多大，取決於你的品牌視覺、你想傳達的話、你想讓用戶做出的行為。舉例來說：一個相片素材圖庫可能就不會選擇用圓角來呈現內容，因為這會破壞相片素材的完整性；又或者，像 Medium 這樣的平台，文章內的圖片不會使用圓角，因為無法保證圓角不會裁切到用戶其實想保持完整的角落。
所以下次主管問你「為什麼 UI 要用圓角？」的時候，除了「這樣比較美」之外你還可以告訴他：
- 配合硬體裝置的視覺特徵！（產品看起來更新穎、更年輕）
- 降低用戶大腦的認知負荷！（讓大腦處理資訊可以更輕鬆）
- 可以滿足用戶的曲線偏袒！（用戶更容易接納我們的內容）
- 才不會刺激用戶的杏仁核！（讓我們看起來溫暖、可信任）
- 讓相似的區塊更容易聚焦！（比較容易區別相似內容區塊）
如果有任何建議與補充，歡迎在底下留言討論！也歡迎發問問題，有時間我都會盡量回答～下次見～
↓↓ 如果喜歡這篇文章，請幫我掌聲鼓勵鼓勵～也歡迎追蹤，我會不定時發布新文章！