2023年關(guān)于按鈕圓角的困惑這篇文章全部給你答案

關(guān)于按鈕圓角的困惑，這篇文章全部給你答案之前的干貨共享了CTA按鈕的位置和尺寸屬性，很快樂看到一些伴侶的正向反饋。

今日，我們來連續(xù)共享CTA按鈕的圓角屬性。

提起CTA按鈕的外形，我們印象中基本能想到三類：矩形、圓角矩形和全圓角矩形。這三類按鈕外形本質(zhì)的區(qū)分就在于圓角的不同。

那么問題來了，CTA按鈕為何會有圓角的差異？圓角背后有哪些特性和適用狀況？

別急，且讓我們先從圓角的歷史說起。

一、關(guān)于圓角的一些歷史

互聯(lián)網(wǎng)中的圓角矩形最早源自于1981年的Macintosh。喬幫主盼望這種美妙的外形能夠消失在正在研發(fā)的蘋果系統(tǒng)中，他勸說了工程師比爾·阿金斯特實現(xiàn)了圓角矩形的繪制技術(shù)，并為其命名為RoundRects。之后，這個奇妙的外形便被沿用到了蘋果全部的用戶界面當中。

值得一提的是，在iOS7代之前，圖標的圓角曲率并非連續(xù)的，每個圓角與邊緣的連接處都會帶有明顯的切邊。

蘋果受工業(yè)設(shè)計的啟發(fā)，將工業(yè)中的曲線連續(xù)概念應(yīng)用在了ui中，以連續(xù)、漸變式的曲率來將讓圓角矩形變得更加圓潤、平滑。同時，這種更新也與同一時間發(fā)布的iphone5c的邊角工藝設(shè)計達成了統(tǒng)一。

你以為蘋果對圓角的執(zhí)著止步于此了嗎？并沒有~

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

到了去年的6月份，蘋果將自己對圓角的執(zhí)念帶到了BigsurOS的系統(tǒng)中。Bigsur的設(shè)計語言里，幾乎全部的系統(tǒng)圖標都變?yōu)榱藞A角矩形，呈現(xiàn)出了特別高度的全都性。

并且，原本的小圓角全部放大處理。比如dock欄、按鈕、窗口圓角、甚至是文件夾的圖標，他們圓角全部得到了放大。總之，macOS整體的設(shè)計風格越來越像iOS靠攏。

相比完全扁平化的iOS圖標，macOS的圖標也多出許多的擬物細節(jié)，比如反光、高光、投影、以及郵箱圖標上的一行生怕被你看到的超小文字“APPLEPARKCALIFORNIA95014”，這是ApplePark的地址。當然這些不在此篇爭論范圍內(nèi)。

既然提到蘋果，就不得不提到蘋果的死對頭——蓋茨兄的微軟。

其實早在遠古時代的XP，就消失了圓角設(shè)計，乃至后面的vista和win7。

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

在metro下，全部的圖標徹底得脫離了擬物的范疇，它們?nèi)灰话驼婆谋猓優(yōu)榱说罔F標志牌一樣的完完全全的直角矩形色塊。

直至后面得到顯著優(yōu)化的win10以及17年推出的FluentDesign，這種風格才算是真正得被用戶們認可和接受。不過，由于直角本身過于方正鋒利，導(dǎo)致這種風格如同”鋼鐵直男“一樣缺乏細節(jié)和美感，因此喜愛這種風格的用戶依舊是少數(shù)。

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

為什么相比直角，圓角自誕生以來便被廣泛運用，成為了經(jīng)久不衰的設(shè)計趨勢？究其緣由還得從圓角本身的特性講起。并且也正是出于這些內(nèi)在特性影響了CTA按鈕不同的外形使用。

二、圓角的內(nèi)在特性

關(guān)于圓角本身的特性大致可以分為以下三個。

1.親和感

從遠古時代開頭，人類便意識到外形的尖銳程度所帶來的影響。

人類在木棍上綁上磨尖的獸骨、巖石作為武器以刺穿猛獸，但是相對應(yīng)的，他們又畏懼猛獸的利齒、亦或是拿著同樣武器的敵方部落刺穿他們的身軀。

人類對這類尖銳物體本能的警惕感始終傳承至今。

在現(xiàn)實世界中，絕大多數(shù)物件的制造都會為了避開尖角割傷用戶的手指，而為其注入圓角的工藝，讓尖角變得圓潤平滑。

圓角代表了平安，直角代表了危急。這個心智模型（敲黑板?。∵@個模型很重要??！不知道的童鞋可以翻看我之前的文章~）根深蒂固得駐扎在我們的大腦中。因此帶有圓角的矩形往往會賜予用戶足夠的親和感、平安感。

比如之前設(shè)計圈熱議的小米更新logo大事，盡管超橢圓的外形和圓角矩形還是有些區(qū)分的，但是這種圓潤的外形讓整個調(diào)性變得更加接地氣了，說專業(yè)點兒，叫alive了。

2.辨識度

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

VisualPerception一書的，JürgN?nni曾經(jīng)討論并提出觀點：

人的視網(wǎng)膜對于正圓形的處理速度要顯著高于對邊角的處理速度。

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

而圓角矩形在視覺上比直角矩形更接近圓形，因此人眼處理帶圓角的外形時更易辨識。

3.視覺聚焦

外形本身也自帶了“視覺引導(dǎo)”的屬性。拿圓形直角矩形、圓角矩形和圓形舉例：

圓形以及圓角矩形不存在任何的尖角，沒有任何突出的焦點，圓周以及圓角矩形的四個圓角會產(chǎn)生一個向中心過渡的趨勢，引導(dǎo)視線聚焦到外形內(nèi)部。其中以圓形聚焦性最強；

但是，矩形的四個頂角則形成了四個視覺焦點，人眼看矩形時，他們的視線其實傾向于發(fā)散而非聚焦（當然，易于發(fā)散的缺點也同樣導(dǎo)致了矩形在視覺上辨識速率更慢）。

因此，直角矩形本身傾向的發(fā)散感和疏遠感，使得大多數(shù)的產(chǎn)品更樂于采納圓角矩形甚至全圓角矩形來作為CTA按鈕的外形。

三、CTA按鈕的外形

1.全圓角按鈕

由于圓形本身最強的聚焦性和辨識性，許多CTA按鈕會傾向于使用全圓角的外形。

最典型的就是線上營銷互動和各類付費業(yè)務(wù)的行動按鈕，大多會采納全圓角按鈕的外形來快速抓取并聚焦用戶的留意力，提升用戶實行點擊行為的可能性，繼而提升轉(zhuǎn)化的可能。

即便是那些偏理性、冷靜、高端調(diào)性的產(chǎn)品，在必要的時候也會嘗試使用全圓角的外形來呼吁用戶點擊。比如寺庫、支付寶、知乎。

2.按鈕圓角與用戶行為

可能許多小伙伴會由于設(shè)計的全都性而陷入一個錯誤認知：產(chǎn)品中全部的按鈕圓角必需保持全都。

我之前也是這樣，認為既然是按鈕，那就必需形成規(guī)范，不然界面會變得混亂不統(tǒng)一。

?但其實，并無需死守這個框架。

比如上面所列舉的那些營銷活動和付費業(yè)務(wù)，不論是什么樣的產(chǎn)品可以通用全圓角。連寺庫這種直角語言的高冷產(chǎn)品都妥協(xié)了。究竟產(chǎn)品又不能用愛發(fā)電，變現(xiàn)才是王道。

另一方面，就跟用戶場景掛鉤了。我們需要結(jié)合用戶所處的場景、當前的任務(wù)目標去調(diào)整設(shè)計策略。

舉個?。

知乎關(guān)注答主的CTA按鈕，在答案詳情頁圓角較小的圓角矩形，但是到了答主個人頁卻變成了全圓角按鈕。

這就是由于，在答案詳情頁這個情景下，用戶的行為是掃瞄答案，動機是獵取信息。因此使用了非全圓角按鈕來弱化干擾，以此維護用戶的留意力，沉醉于內(nèi)容當中。（上劃至肯定高度，關(guān)注按鈕直接吸頂弱化成link文字按鈕，目的同樣是實現(xiàn)沉醉式閱讀）

而用戶點擊進入答主個人頁的這個行為，可以預(yù)判用戶的動機是基于答案產(chǎn)生了足夠的愛好，ta想了解答主的更多信息。所以，按鈕的外形采納了更加聚焦的全圓角，目的是以此觸發(fā)用戶的點擊行為，進而促進關(guān)系鏈的沉淀。

關(guān)系鏈沉淀了，那用戶就有了更多不能輕易離開產(chǎn)品的理由。

另外，聯(lián)合強對比的反白手段和icon引導(dǎo)可以更完善得誘發(fā)用戶的點擊欲望，當然，這些不在本篇爭論范圍內(nèi)。

3.按鈕圓角與產(chǎn)品調(diào)性

通過圓角體現(xiàn)調(diào)性的設(shè)計可以直接參考注冊登錄頁的CTA按鈕。

作為用戶開啟主線任務(wù)的第一個環(huán)節(jié)，登錄注冊頁的圓角傾向可以快速傳達給用戶深刻的第一印象。這在心理學(xué)上對應(yīng)著一個很有意思的效應(yīng)——首因效應(yīng)。說的是首次見面的行為舉止能夠快速而深刻得給別人留下先入為主的印象。

受圓角親和感特性的影響，擁有活潑、童趣、熱忱、接地氣這類調(diào)性的產(chǎn)品往往比那些偏向冷靜、成熟、嚴厲?、高端類的產(chǎn)品更適合全圓角風格。

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

而知乎、微信和支付寶這類偏嚴厲?、冷靜、成熟調(diào)性的產(chǎn)品統(tǒng)一采納了圓角矩形。

與調(diào)性掛鉤的外形也被廣泛運用在偏功能類的CTA按鈕上。比如表單提交的按鈕、彈窗浮層