圖形是產品設計中被討論得最多的元素之一。視覺設計師使用不同形狀的圖形來表達事物的多樣性；交互設計師選擇不同形狀的圖形，解決用戶在某場景下的訴求問題。其中爭議最大，且被更多互聯網設計師使用的圖形，是圓角矩形。而當中的討論點是：同樣的圖形，圓角處理與直角處理所傳遞的信息有什麼不同？為什麼圓角成了趨勢？
許多人認為圖形外框的多樣化趨勢是由 CSS 技術的革新開始，但正確的時間點，應該是在 iPhone 4 被髮布的那一刻。
當中的差異是：前者是通過技術參數來改變形狀內容以引起用戶注意；後者是通過傳播真實產品塑造用戶對於圖形外觀的全新認知。認知的轉變，需作用於習慣與行為，而當中的核心手段，就是設計。（參考滴滴類產品改變人的出行方式）
用戶對於一款產品的認知，主要依據產品所能解決的實際問題以及外在形式。而設計師需要關注的點會更多，包括產品架構，流程，技術等內容。同時還需要站在用戶視角觀測產品是否易於使用，我們通常將其稱為「用戶心理模型」。類比於用戶只需瞭解手錶是否正常走動，能否準點報時，設計師則需要理解手錶設計框架，結構形式等詳細內容。其中最重要的，還是一名設計師對內容的全局認知。
回到圖形外觀的話題上，同樣的道理，人們對於產品設計中的圖形使用已經逐漸理想化，好比圖形外觀的形式如何已經不重要，重要的是圖形所傳遞的信息本身。這樣的認知稍顯片面，對於設計師而言，圖形以圓角形式呈現的背後邏輯，比表面上它所表達的信息更為重要。理解這一點之後，設計師再使用圓角矩形傳遞信息，理解上會更顯深刻。
所以我後面會圍繞下面這幾個問題，來說明圓角矩形的意義：
- 為什麼 iPhone 4 的發佈是圓角矩形成為設計趨勢的轉折點？
- 圓角矩形傳遞的信息有什麼不同之處？
- 頭像與按鈕為什麼越來越多地使用圓角？
圓角矩形為何成為趨勢
雖然在 iPhone 4 發佈時，大多數的軟件圖標都還是擬物風，但它們的圖形外框大多是以圓角矩形的方式來處理。在 iOS 系統裡，這種圓角矩形的載體已經成了其系統統一承載內容的形式。
也許有人會問為什麼 Apple 選擇了這樣的呈現方式，而不跟 Android 一樣，為了體現內容的豐富性，讓圖標外框多樣化呢？原因有兩個。
其一是喬布斯認為所有物件都有圓角，而相比圓形與橢圓，圓角矩形反而是生活中更為常見的現象。
Andy Hertzfeld 在 Round Rects Are Everywhere 中講了關於圓角矩形誕生的故事。
Apple 的天才程序員 Bill Atkinson 創立了一種能夠快速繪製圓形與橢圓的方法，喬布斯認為圓形與橢圓都不錯，但是圓角矩形會更好。而 Bill Atkinson 並不這麼認為，他覺得圓角矩形更難繪製，且人們也不需要圓角矩形。於是，喬布斯回應道：「到處都是帶有圓角的矩形！」他指著房間裡的各種物件，幾乎所有地方都可以看到圓角矩形。他甚至說服 Bill 和他一起繞著街區走一圈，指出他能找到的每個帶有圓角的矩形。當他們看到帶有圓角的禁止停車的標示時，Bill 終於被喬布斯說服，第二天就拿出了繪製圓角矩形的方案。
之後，他們將其命名為「RoundRects」。在接下來的幾個月裡，Roundrects 逐漸進入用戶界面的各個部分，並很快變得不可或缺。
尤其是在 13 年，iOS 7 對圓角的更新。它已經與我們平時認為的圓角矩形不同，這個圓角的優化過程非常複雜，當中涉及的數學算法如果不是專業的研究學者，可能無法理解其差異。
簡單來說，Apple 採用的圓角曲率所生成的圖形，是更圓滑，無明顯切角的。這樣的圓角矩形在過渡上更平滑，且在視覺上的體驗也更融洽。
其二是，為了打造沉浸式體驗，喬布斯認為應該讓 iPhone 的各個元素形式統一化。
與上述圓角圖標相似的是 iPhone 機身。
iPhone 機身所呈現的圓角在製作工藝上，比軟件圖標的圓角更為複雜。而其內外一致的表現形式就是為了打造沉浸式體驗，形成產品的品牌認知。而 iPhone X 的面世，就是為了將這一概念徹底落實。
前面提到，用戶與設計師對於一款產品的認知是不同的。用戶認識一款產品，首先關注的是外觀表現，其次才是被承載的內容。所以當用戶對 iPhone 以及其軟件圖標的展示形式已經形成認知，那麼 iPhone X 的全面屏也就是很自然的一種結果。
機身形態與軟件形式的自然結合，能夠讓用戶更好的接受產品的外在形式，且其全面屏的設計也能更好地被用戶認可。甚至被很多人吐槽的 iPhone X 齊劉海也是依據這樣的圓角形式來設計的，目的就是為了營造統一的產品形態。
以至於其他一些產品在機身上的模仿，導致讓人誤以為類似的工業特性所產生的第一直覺都是「這是一款 iPhone」，仔細一看才知道，噢，原來是……
當一款真實的產品被人所接受，以普遍使用在生活場景中，其中逐漸營造出用戶對圓角矩形的慣性認知，以至於它的可接受度也逐漸提高。
這也是我在開篇提到說「iPhone 4 的發佈奠定了圓角矩形成為設計流行趨勢的基調」的原因。
到這為止還只是背景，下面我們再深入聊聊特性。
圓角矩形所傳遞的信息特性
上節講述了圓角矩形興起的背景，當然這只是一部分，圓角矩形成為流行趨勢，不能說完全是因為 Apple。還有一點是，它自身本就具備的優勢。
上面提到喬布斯說服比爾，要有圓角矩形，因為生活中到處都是圓角矩形。但是這裡有一個問題沒有解決，即「為什麼生活中到處都是圓角矩形」呢？
玩 3D 工具的人應該知道，在 C4D 等軟件裡，想要對一件物體創建圓角通常是選擇「倒角」，再控制「段數」，之後通過「平滑」選項，將角度變得更為圓滑（當然還有其它方式）。目的是在渲染的時候不至於讓物體看起來太尖銳，色澤也更通透。
在生活中，物件稜角如果過於鋒利，則顯得不夠安全。工業角度，圓角/倒角可以讓物件更好組裝。相比稜角過於尖銳以至於讓人覺得冰冷，圓角的設計反而讓人更能感受到溫度。所以對於推崇自然至上的喬布斯，在選擇元素時，也會希望能貼近生活。
從視覺，觸感，便捷等因素能瞭解到真實物件的圓角優勢，但優勢是否適用於圖形元素呢？
這裡有個相通點，即虛擬圖形依附於視覺而存在。人眼在接收圖形信息時，對圓角矩形的認知會優於直角矩形。因為人眼結構中辨識力最強的部位，會優先識別圖形的視覺中心。而圓角與直角矩形的區別就在於內容速度的識別差異。
之所以存在這樣的差異，主要是因為圖形存在視覺引導的作用。圓角因為其平滑的四邊，將用戶的視線過渡到圖形中心，而直角矩形因為尖銳的特性，導致人眼在圖形識別上容易發散。因此，在圖形元素的選擇上，為了讓用戶聚焦，圓角則獲得了設計師的青睞。
所以之後在其它設計系統與設備上，更多圓角類圖形也被投入使用。尤其是在各類 App 與網頁設計中，圓角矩形更是被廣泛應用於頭像、按鈕等元素上。
頭像與按鈕的圓角含義
隨著互聯網產品的普及，人們對於產品界面的審美意識與體驗意識逐漸提高，界面的視覺呈現也成了互聯網公司所重視的對象。頭像作為產品界面中用於身份信息識別的主要元素，一直是用戶以及設計師最為關注的內容之一。
因此，對頭像外框形狀的選擇尤其謹慎。當中最為常見的主要有兩類：圓形、圓角矩形。所以在進行選擇時，設計師除了針對於兩類圖形依附於界面本身的視覺效果外，還需整體考量圖形與界面元素的融合程度進行綜合分析。至於直角矩形，目前很少會見到其用於頭像的設計上。
以圓形的表現形式而言，其周圍沒有任何節點與稜角，給人以靈動、均衡、平滑、優美的感受，通常會在帶有設計感或內容元素較為豐富的產品上出現，如 ins、微博、知乎等。相比圓形而言，稜角尖銳的直角矩形給以人沉著、冷靜、拘謹、冰冷的感受，所以很少產品會將其作為展示型頭像開放給用戶使用。而圓角矩形正好中和了這兩者的氣質，也成了很多產品選其作為頭像的原因。通常這類頭像會出現在設計較為簡約的界面上，如微信首頁的用戶頭像。
無論是圓形頭像，還是圓角矩形頭像，其最終目的無非是身份識別以及彰顯個性。上節聊過，圓角在識別上會引導用戶傾向於圖形的視覺中心，而頭像作為辨識身份的信息，並不需要仔細審視，只需要快速識別即可。所以只有在點擊用戶頭像時，才會以矩形形式完整呈現。
這裡有一個點是，當圓角矩形以頭像形式出現在界面中時，通常是以小圖的方式呈現。因此，當小圖集中於元素複雜的界面中時，圓角矩形犧牲了構圖結構，省略了四邊內容背景反而成為了優勢，信息與細節明顯少於直角矩形，以至於在界面上幫助用戶更快識別頭像內容，判斷圖形有用信息。
所以在頭像的形狀選擇上，圓角矩形的優勢會明顯高於其他圖形。而圓形與圓角矩形的差異就是上述提到的，要根據界面元素的豐富性、設計感等因素進行抉擇。
但是這裡還有個思考點，就留個各位自己思考了。如果仔細觀察各類產品，去尋找圓形頭像與圓角矩形頭像的區別，那麼在頭像尺寸上，也可以看到一些秘密。
原本我還想再以按鈕為例解讀圓角直角的差異，不過仔細回顧內容之後自認為已經非常詳細，相信各位自己也能去做好分析，所以就不增長篇幅了。有興趣的同學，可以自己做一波分析。
小結
簡單總結一下上面的內容：
- 第一節講解了圓角矩形在設計上成為流行趨勢的背景；
- 第二節告訴各位圓角矩形在信息傳遞上的優勢；
- 第三節以頭像為例將前面的知識點落地分析。
圓角本身只是一個很小的元素，就像其他設計理論、方法一樣，我們可以忽視它背後的理論，但作為設計師，對於這些細節的追求應該是持續且專注的。
鏈接：https://www.uisdc.com/rounded-rectangle-to-design-trends
今天就分享到這裡啦~~
如果有任何關於設計的問題
都可以添加Q群和大家一起討論喲！
QQ群：748077013
站長：小夥伴們可以關注一下偶滴抖音，我會定期給大家用詼諧幽默有意思的視頻來教大家更好的認識設計，打開抖音掃描下方二維碼或者直接搜索抖音號就可以看到我啦~筆芯
閱讀更多 UI設計靠譜站長 的文章
