編輯導讀:生活中圓角的設計隨處可見,爲什麼相比直角,圓角自誕生以來便被廣泛運用,成爲了經久不衰的設計趨勢?本文作者對此發表了自己的看法,與你分享。


之前的乾貨分享了CTA按鈕的位置和尺寸屬性,很開心看到一些朋友的正向反饋。
今天,我們來繼續分享CTA按鈕的圓角屬性。
提起CTA按鈕的形狀,我們印象中基本能想到三類:矩形、圓角矩形和全圓角矩形。這三類按鈕形狀本質的區別就在於圓角的不同。
那麼問題來了,CTA按鈕爲何會有圓角的差異?圓角背後有哪些特性和適用情況?
別急,且讓我們先從圓角的歷史說起。
一、關於圓角的一些歷史
互聯網中的圓角矩形最早源自於1981年的Macintosh。喬幫主希望這種美好的形狀能夠出現在正在研發的蘋果系統中,他說服了工程師比爾·阿金斯特實現了圓角矩形的繪製技術,併爲其命名爲RoundRects。之後,這個美妙的形狀便被沿用到了蘋果所有的用戶界面當中。

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

你以爲蘋果對圓角的執着止步於此了嗎?並沒有~
到了2017年,圓角甚至被直接運用到了手機屏幕本身。當手機機身、屏幕、dock和圖標,每一處的圓角以近乎於等比數列的形式依次追隨時,就形成了一種充滿魅力的秩序感、和諧感。而這種被稱爲全面屏的工藝也被各大廠商們競相效仿。

到了去年的6月份,蘋果將自己對圓角的執念帶到了Bigsur OS的系統中。Bigsur的設計語言裏,幾乎所有的系統圖標都變爲了圓角矩形,呈現出了非常高度的一致性。
並且,原本的小圓角全部放大處理。比如dock欄、按鈕、窗口圓角、甚至是文件夾的圖標,他們圓角全部得到了放大。總之,macOS整體的設計風格越來越像iOS靠攏。

相比完全扁平化的iOS圖標,macOS的圖標也多出很多的擬物細節,比如反光、高光、投影、以及郵箱圖標上的一行生怕被你看到的超小文字“APPLE PARK CALIFORNIA 95014”,這是Apple Park的地址。當然這些不在此篇討論範圍內。
既然提到蘋果,就不得不提到蘋果的死對頭——蓋茨兄的微軟。
其實早在遠古時代的XP,就出現了圓角設計,乃至後面的vista和win7。

但是到了WP時代,微軟爲了與蘋果做出風格差異,以完完全全的直角來融入到觸屏端的設計語言,而這個語言也成爲了微軟最具代表性的特有風格——metro(modern UI)。

在metro下,所有的圖標徹底得脫離了擬物的範疇,它們全被一巴掌拍扁,變爲了地鐵標誌牌一樣的完完全全的直角矩形色塊。
直至後面得到顯著優化的win10以及17年推出的Fluent Design,這種風格纔算是真正得被用戶們認可和接受。不過,由於直角本身過於方正銳利,導致這種風格猶如”鋼鐵直男“一樣缺乏細節和美感,因此喜歡這種風格的用戶依然是少數。
有意思的是,在前年20H1版本的win10界面中罕見得迴歸了久違的圓角,這也意味着微軟徹底放棄了自己堅守近10年的直角陣營,正式向主流的圓角風格妥協。

爲什麼相比直角,圓角自誕生以來便被廣泛運用,成爲了經久不衰的設計趨勢?究其原因還得從圓角本身的特性講起。並且也正是出於這些內在特性影響了CTA按鈕不同的形狀使用。
二、圓角的內在特性
關於圓角本身的特性大致可以分爲以下三個。
1. 親和感
從遠古時代開始,人類便意識到形狀的尖銳程度所帶來的影響。
人類在木棍上綁上磨尖的獸骨、岩石作爲武器以刺穿猛獸,但是相對應的,他們又畏懼猛獸的利齒、亦或是拿着同樣武器的敵方部落刺穿他們的身軀。
人類對這類尖銳物體本能的警惕感一直傳承至今。

在現實世界中,絕大多數物件的製造都會爲了避免尖角割傷用戶的手指,而爲其注入圓角的工藝,讓尖角變得圓潤平滑。
圓角代表了安全,直角代表了危險。這個心智模型(敲黑板!!這個模型很重要!!不知道的童鞋可以翻看我之前的文章~)根深蒂固得駐紮在我們的大腦中。因此帶有圓角的矩形往往會給予用戶足夠的親和感、安全感。

比如之前設計圈熱議的小米更新logo事件,儘管超橢圓的形狀和圓角矩形還是有些區別的,但是這種圓潤的形狀讓整個調性變得更加接地氣了,說專業點兒,叫alive了。

2. 辨識度
我們對圓角的認知除了源自遠古時代趨利避害的本能,人眼本身也同樣更偏愛圓角。
Visual Perception一書的作者,Jürg Nnni曾經研究並提出觀點:
人的視網膜對於正圓形的處理速度要顯著高於對邊角的處理速度。
這是由於人類的視網膜中存在一塊視覺最敏銳的區域——中央凹,它處理圓形的速度最快,而處理邊緣則需要用到大腦中更多的”神經影像工具“。
而圓角矩形在視覺上比直角矩形更接近圓形,因此人眼處理帶圓角的形狀時更易辨識。
3. 視覺聚焦
形狀本身也自帶了“視覺引導”的屬性。拿圓形直角矩形、圓角矩形和圓形舉例:

圓形以及圓角矩形不存在任何的尖角,沒有任何突出的焦點,圓周以及圓角矩形的四個圓角會產生一個向中心過渡的趨勢,引導視線聚焦到形狀內部。其中以圓形聚焦性最強;
但是,矩形的四個頂角則形成了四個視覺焦點,人眼看矩形時,他們的視線其實傾向於發散而非聚焦(當然,易於發散的缺點也同樣導致了矩形在視覺上辨識速率更慢)。
因此,直角矩形本身傾向的發散感和疏遠感,使得大多數的產品更樂於採用圓角矩形甚至全圓角矩形來作爲CTA按鈕的形狀。
三、CTA按鈕的形狀
1. 全圓角按鈕
由於圓形本身最強的聚焦性和辨識性,很多CTA按鈕會傾向於使用全圓角的形狀。
最典型的就是線上營銷互動和各類付費業務的行動按鈕,大多會採用全圓角按鈕的形狀來迅速抓取並聚焦用戶的注意力,提升用戶採取點擊行爲的可能性,繼而提升轉化的可能。

即便是那些偏理性、冷靜、高端調性的產品,在必要的時候也會嘗試使用全圓角的形狀來呼籲用戶點擊。比如寺庫、支付寶、知乎。

2. 按鈕圓角與用戶行爲
可能很多小夥伴會因爲設計的一致性而陷入一個錯誤認知:產品中所有的按鈕圓角必須保持一致。
我之前也是這樣,認爲既然是按鈕,那就必須形成規範,不然界面會變得混亂不統一。
但其實,並無需死守這個框架。
比如上面所列舉的那些營銷活動和付費業務,不論是什麼樣的產品可以通用全圓角。連寺庫這種直角語言的高冷產品都妥協了。畢竟產品又不能用愛發電,變現纔是王道。
另一方面,就跟用戶場景掛鉤了。我們需要結合用戶所處的場景、當前的任務目標去調整設計策略。
舉個。
知乎關注答主的CTA按鈕,在答案詳情頁圓角較小的圓角矩形,但是到了答主個人頁卻變成了全圓角按鈕。

這就是因爲,在答案詳情頁這個情景下,用戶的行爲是瀏覽答案,動機是獲取信息。因此使用了非全圓角按鈕來弱化干擾,以此維護用戶的注意力,沉浸於內容當中。(上劃至一定高度,關注按鈕直接吸頂弱化成link文字按鈕,目的同樣是實現沉浸式閱讀)
而用戶點擊進入答主個人頁的這個行爲,可以預判用戶的動機是基於答案產生了足夠的興趣,ta想了解答主的更多信息。所以,按鈕的形狀採用了更加聚焦的全圓角,目的是以此觸發用戶的點擊行爲,進而促進關係鏈的沉澱。
關係鏈沉澱了,那用戶就有了更多不能輕易離開產品的理由。
另外,聯合強對比的反白手段和icon引導可以更完美得誘發用戶的點擊慾望,當然,這些不在本篇討論範圍內。
3. 按鈕圓角與產品調性
通過圓角體現調性的設計可以直接參考註冊登錄頁的CTA按鈕。
作爲用戶開啓主線任務的第一個環節,登錄註冊頁的圓角傾向可以迅速傳達給用戶深刻的第一印象。這在心理學上對應着一個很有意思的效應——首因效應。說的是首次見面的行爲舉止能夠迅速而深刻得給別人留下先入爲主的印象。
受圓角親和感特性的影響,擁有活潑、童趣、熱情、接地氣這類調性的產品往往比那些偏向冷靜、成熟、嚴肅、高端類的產品更適合全圓角風格。
比如淘寶、微博的登錄按鈕全部使用了全圓角按鈕,而QQ更加極端得省略掉矩形的邊緣特徵,直接以圓形作爲登錄按鈕來凸顯年輕的定位。
而知乎、微信和支付寶這類偏嚴肅、冷靜、成熟調性的產品統一採用了圓角矩形。


與調性掛鉤的形狀也被廣泛運用在偏功能類的CTA按鈕上。比如表單提交的按鈕、彈窗浮層等組件的按鈕等等。這些行動點的業務屬性普遍較弱,因此不會去強制全圓角化。
四、最後
CTA按鈕的圓角章節到此結束~簡單小結一下
圓角本身具備親和感、辨識性和視覺引導的特性,因此我們可以通過控制按鈕的圓角來實現不同的設計目的;產品中的圓角無需嚴格保持一致,多去結合用戶當前的場景行爲!圓角和產品調性也有關聯。希望這篇文章能夠給予你一些啓發。期待你的收穫和反饋。

本文由 @Andrewchen 原創發佈於人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基於CC0協議。

相關文章