編輯導語：圓角設計在生活中是比較常見的，在手機、網頁端等等我們都能看到各種圓角設計，特別是蘋果手機的軟件設計都為圓角；為什么設計師喜歡用圓角？本文作者對此做出了詳細的介紹，我們一起來看一下。

圓角無處不在，不論是banner中的按鈕、彰顯身份的頭像，還是承載內容的卡片。

但是，圓角的背后到底是什么樣的邏輯？或者直白點說，為什么這里是圓形頭像，那里是矩形？這里出現了全圓角按鈕，那里卻不是？

如果你和我有一樣的困惑，希望我的這篇文章能幫到你。

一、圓角的歷史

其實，互聯網中的圓角矩形最早源自于1981年的Macintosh。

喬布斯希望這種美好的形狀能夠出現在正在研發的蘋果系統中，他用生活中帶圓角的桌椅、甚至是街頭帶圓角的標志牌成功說服了工程師比爾·阿金斯特實現了圓角矩形的繪制技術，并為其命名為RoundRects；之后，這個美妙的形狀便被沿用到了蘋果所有的用戶界面當中。

值得一提的是，自那個徹底轉型扁平的ios7開始，所有的圓角矩形得到了特殊意義上的優化。

在7代之前，圖標的圓角曲率并非連續的，每個圓角與邊緣的銜接處都會帶有明顯的切邊；蘋果受工業設計的啟發，將工業中的曲線連續概念應用在了ui中，以連續、漸變式的曲率來將讓圓角矩形變得更加圓潤、平滑；同時，這種更新也與同一時間發布的iphone5c的邊角工藝設計達成了統一。

蘋果對圓角的執著并不僅僅停留于此。

到了2017年，圓角甚至被直接運用到了手機屏幕當中；當手機機身、屏幕、dock和圖標，每一處的圓角以近乎于等比數列的形式依次追隨時，就形成了一種充滿魅力的秩序感、和諧感；而這種被稱為全面屏的工藝也被各大廠商們競相效仿。

既然談到蘋果，就不得不談到蘋果的老對頭——微軟。

其實早在遠古的XP時代就出現了圓角界面設計，乃至后面的vista和win7；但是到了WP時代，微軟為了與蘋果做出風格差異，以完完全全的直角來作為觸屏端的設計語言，而這個語言也成為了微軟最具代表性的特有風格——metro（modern UI）。

在metro下，所有的圖標徹底得脫離了擬物的范疇，它們全被一巴掌拍扁，變為了地鐵標志牌一樣的直角矩形色塊；向來追隨蘋果腳步的微軟思想超前得引入扁平化的概念，這也加快了擬物時代向扁平時代的過渡的進程（雖然當時的win8由于忽略了占據絕對比例的非觸屏設備用戶的體驗，而被噴得體無完膚。）

這種另類的風格一開始并沒有被大眾認可，直至后面得到顯著優化的win10以及17年推出的Fluent Design，這種風格才算是真正得被用戶們接受；不過，由于直角本身過于方正銳利，導致這種風格猶如“鋼鐵直男”一樣缺乏細節和美感，因此喜歡這種風格的用戶依然是少數。

值得一提的是，在去年20H1版本的win10界面中罕見得回歸了久違的圓角，這也意味著微軟徹底放棄了自己堅守近10年的直角陣營，正式向主流的圓角風格妥協。

那為什么相比直角，圓角自自誕生以來便被產品廣泛運用，成為了經久不衰的設計趨勢？究其原因還得從圓角本身的特性講起。

二、圓角的特性

關于圓角本身的特性大致可以分為以下三個：

1. 親和感

從遠古時代開始，人類便意識到形狀的尖銳程度所帶來的實際意義；人類在木棍上綁上磨尖的獸骨、巖石作為武器以刺穿猛獸；但是相對應的，他們又畏懼猛獸的利齒、亦或是拿著同樣武器的敵方部落刺穿他們的身軀。

人類對這類尖銳物體本能的警惕感一直傳承至今，即便在現實世界中，絕大多數物件的制造都會為了避免尖角割傷用戶的手指，而為其注入圓角的工藝，讓尖角變得圓潤平滑；因此帶有圓角的矩形往往會給予用戶足夠的親和感、安全感。

2. 辨識

我們對圓角的認知除了源自遠古時代趨利避害的本能，人眼本身也同樣更偏愛圓角。

Visual Perception一書的作者，Jürg N?nni曾經研究并提出觀點：人的視網膜對于正圓形的處理速度要顯著高于對邊角的處理速度。

這是由于人類的視網膜中存在一塊視覺最敏銳的區域——中央凹，它處理圓形的速度最快，而處理邊緣則需要用到大腦中更多的“神經影像工具”。

而圓角矩形在視覺上比直角矩形更接近圓形，因此人眼處理圓角時則更加容易、更快得辨識。

3. 視覺引導

回到形狀本身，它們也自帶了“視覺引導”的屬性，拿圓形直角矩形、圓角矩形和圓形舉例：

圓形以及圓角矩形不存在任何的尖角，沒有任何突出的焦點，圓周以及圓角矩形的四個圓角會產生一個向中心過渡的趨勢，引導視線集中到形狀每部。

但是，矩形的四個頂角則形成了四個視覺焦點，人眼看矩形時，他們的視線其實傾向于發散而非聚焦（當然，易于發散的缺點也同樣導致了矩形在視覺上更加難以辨識）。

因此，直角矩形本身傾向的發散感和疏遠感，使得大多數的產品更樂于采用圓角矩形甚至全圓角矩形來作為ui的主要形狀；接下來，我從按鈕、頭像以及卡片這三類常見的元素來講解圓角的應用及原因。

三、按鈕篇

1. 全圓角

按鈕作為UI中的核心交互組件，它的任何細節都對用戶及商業價值起著至關重要的作用。

而在按鈕中存在著一種名為CTA（Call To Action，行為召喚）的按鈕，它存在的主要意義就是誘導用戶采取某種行動，比如購買、關注、訂閱等。

大多數的CTA按鈕采用了全圓角的形狀，就是為了通過全圓角的強聚焦特性來引導用戶快速注意并聚焦到按鈕中的文字，提高他們執行點擊行為的可能性；比如各大電商平臺的banner，就經常用到全圓角的按鈕。

另外，一些頁面中的引流入口也會借助全圓角按鈕；常見的如分享到第三方平臺的知乎、簡書和知識星球。

不過相比知識星球，知乎和簡書引流的做法相對就更加明智，它們的CTA按鈕直接做成了懸停，不論用戶滑到哪兒都可以隨時注意到并進行點擊（知識星球則將“下一篇”這個功能做成了懸停，但是這個功能僅僅在web網頁中存在，確實有點匪夷所思）。

值得注意的是，京東的引流按鈕僅僅以直角的形式嵌入到了Noticebar，而且跟隨滑動而非懸停；更夸張的是，美團和Airbnb直接去掉了引流按鈕，甚至連喚起功能都沒加入。

究其原因，可能是由于這類產品主要靠線上訂單實現盈利，因此從選品到下單所有的操作在網頁上即可完成。

除了平日特有的運營活動，它們對于引流的需求并不高；引流按鈕是可以加，只是不會像其他類型產品那么強調；因為一旦用戶去進行下載，往往由于交互步驟的繁多而增加訂單損失的風險，這對于以線上盈利為主的產品往往是非常不值的。

2. 圓角與全圓角的相互轉換

大多數時候，全圓角和圓角可以同時存在，甚至可以根據用戶使用場景的不同而發生相互轉換。

比如，知乎在進行查看回答的行為時，“關注”這個功能是圓角按鈕，而當點開答主的個人主頁后，“關注”則由圓角按鈕變為了視重更重的全圓角按鈕。

這就是由于在答案頁面時，用戶專注的是內容而不是人，如果”關注“變為全圓角則會相當于將聚焦用錯了場景，反而對用戶產生干擾；而當用戶進行了點擊答主頭像這個行為后，意味著用戶對其產生了特定的興趣，用戶專注的是人而非內容；因此才有了形狀、顏色的變化，促使關注行為的發生，這就是用對了場景。

值得一提的是，App store商品列表頁和詳情頁的按鈕僅僅是和知乎一樣的樣式上的改變，但是形狀均為全圓角。

這可能是由于App store的列表和詳情頁中，用戶所關注的對象均為商品，不論是哪個頁面，獲取商品都是最終的用戶訴求。

只是列表頁的使用場景也包含著搜尋，因此僅在按鈕視重上做出差異化；而知乎不光光是使用場景的差異，回答和個人主頁分別對應著獲取答案信息和關注用戶兩種不同類型的最終訴求，所以按鈕在樣式改變的同時也調整了形狀。

3. 圓角與產品的調性

當一些按鈕不具備行為召喚屬性時（比如表單提交按鈕），按鈕的圓角一定程度上與產品本身的調性有關；受圓角親和感特性的影響，擁有活潑、童趣、熱情這類暖系調性的產品往往比那些偏向冷靜、成熟、嚴肅類的產品更適合全圓角風格。

比如淘寶和微博的登錄按鈕全部使用了全圓角按鈕，而QQ更加極端得省略掉矩形的邊緣特征，直接以圓形作為登錄按鈕來凸顯年輕的定位。

而知乎、微信和支付寶這類冷系調性的產品統一采用了圓角矩形。

全圓角依然有邊緣的存在，Google在Meterial Design中甚至創造了一種全新的按鈕——FAB懸浮球，配合高飽和度的顏色可以迅速引導用戶的注意力并進行點擊。

四、頭像篇

頭像作為用戶身份的彰顯，在ui中也存在不同的圓角差異。

拿鵝廠最典型的兩個社交產品來舉例，為什么微信的頭像是圓角矩形，而qq的頭像卻全部是圓形？

一方面與產品本身的定位有關：qq更針對的是陌生人之間的連接，鼓勵陌生人社交，而圓形本身的強聚焦屬性可以幫助用戶快速聚焦到頭像以激發社交興趣。

另一方面，與按鈕一樣，圓形本身的親和感也可以引導用戶更好得破冰，更放心得交友；因此，并非只有QQ這樣年輕、富有活力的產品才適用圓形頭像，凡是鼓勵陌生人進行交流的產品都適合用圓形。

比如知乎、知識星球和各類招聘軟件，即便產品本身定位偏向成熟，但是由于產品本身鼓勵陌生人相互交流，因此它們的頭像依舊是圓形。

相對應的，微信主打的則是熟人社交，更加注重隱私，因此它在設計上更為克制和冷靜得使用了圓角矩形；而支付寶的朋友頁面，近乎直角的圓角矩形頭像也在時刻提醒用戶謹慎得進行金錢交易。

有意思的是，我發現在支付寶的生活號業務中，評論模塊中的所有用戶并不存在金錢這類敏感交易，但是卻全部設置成了圓角矩形；而且評論區中的用戶并不像朋友動態與朋友界面有前后關聯的關系，因此一致性這個原因也無法站穩腳跟。

我基于圓形頭像鼓勵陌生人交流的特性，推測可能是由于除文章作者可以回復評論外，用戶之間是無法相互評論的；因此才用圓角矩形這個不近人情的形狀來避免用戶激發社交興趣，降低用戶出現圓形頭像中“可以相互回復”心理預期的可能性，而這個推測在微信公眾號評論中也得到了證實。

而支付寶的基金討論區中，由于用戶之間并不僅僅像生活號那樣僅僅有點贊功能，還可以相互評論互動，因此便用了平易近人的圓形來調動用戶的社交興趣。

五、卡片篇

卡片作為承載內容的容器，通常上需要用戶能夠更快注意到容器內的內容、引發用戶興趣。

比如支付寶在最新的改版升級中，便將首頁的所有的通欄直角卡片改為了圓角卡片，就是為了去引導用戶更多得注意到下方的各類生活服務，以實現由過去傳統的支付工具向生活服務數字平臺的轉型。

而支付寶交互專家——Bob大佬在之前的直播分享中，談到了有關改進后的理財標簽頁，這個標簽頁也存在著大量一級頁面即可操作的的圓角卡片；卡片中配以全圓角CTA按鈕來迅速吸引、引導用戶進行點擊行為，從而降低了漏斗損失，大幅度提升了業務轉化。

其他同樣用到圓角卡片的還有彈窗、商品位等等，再次不一一列舉。

當然，通欄直角卡片也并非不好，相比圓角卡片，它們往往可以節省更多寶貴的有限空間，并有效增加頁面的沉浸感——這一點在feed流中得到了廣泛的運用。

六、最后

圓角對于ui的意義至關重要，但是，我們設計師也需要根據業務需求、產品本身的調性以及用戶使用場景等多個因素去衡量圓角的使用，而不是濫用圓角！

但愿我今天的分享對你能有所幫助，下期見。

作者：Andrewchen；微信公眾號：轉行人的設計筆記

本文由 @Andrewchen 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。