圖形是產品設計中被討論得更多的元素之一。視覺設計師使用不同形狀的圖形來表達事物的多樣性；交互設計師選擇不同形狀的圖形，解決用戶在某場景下的訴求問題。其中爭議更大，且被更多互聯網設計師使用的圖形，是圓角矩形。而當中的討論點是：同樣的圖形，圓角處理與直角處理所傳遞的信息有什么不同？為什么圓角成了趨勢？

許多人認為圖形外框的多樣化趨勢是由 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、微博、知乎等。相比圓形而言，棱角尖銳的直角矩形給以人沉著、冷靜、拘謹、冰冷的感受，所以很少產品會將其作為展示型頭像開放給用戶使用。而圓角矩形正好中和了這兩者的氣質，也成了很多產品選其作為頭像的原因。通常這類頭像會出現在設計較為簡約的界面上，如微信首頁的用戶頭像。

無論是圓形頭像，還是圓角矩形頭像，其更終目的無非是身份識別以及彰顯個性。上節聊過，圓角在識別上會引導用戶傾向于圖形的視覺中心，而頭像作為辨識身份的信息，并不需要仔細審視，只需要快速識別即可。所以只有在點擊用戶頭像時，才會以矩形形式完整呈現。

這里有一個點是，當圓角矩形以頭像形式出現在界面中時，通常是以小圖的方式呈現。因此，當小圖集中于元素復雜的界面中時，圓角矩形犧牲了構圖結構，省略了四邊內容背景反而成為了優勢，信息與細節明顯少于直角矩形，以至于在界面上幫助用戶更快識別頭像內容，判斷圖形有用信息。

所以在頭像的形狀選擇上，圓角矩形的優勢會明顯高于其他圖形。而圓形與圓角矩形的差異就是上述提到的，要根據界面元素的豐富性、設計感等因素進行抉擇。

但是這里還有個思考點，就留個各位自己思考了。如果仔細觀察各類產品，去尋找圓形頭像與圓角矩形頭像的區別，那么在頭像尺寸上，也可以看到一些秘密。

原本我還想再以按鈕為例解讀圓角直角的差異，不過仔細回顧內容之后自認為已經非常詳細，相信各位自己也能去做好分析，所以就不增長篇幅了。有興趣的同學，可以自己做一波分析。