編輯導(dǎo)讀：生活中圓角的設(shè)計(jì)隨處可見，為什么相比直角，圓角自誕生以來便被廣泛運(yùn)用，成為了經(jīng)久不衰的設(shè)計(jì)趨勢(shì)？本文作者對(duì)此發(fā)表了自己的看法，與你分享。
之前的干貨分享了CTA按鈕的位置和尺寸屬性，很開心看到一些朋友的正向反饋。
今天，我們來繼續(xù)分享CTA按鈕的圓角屬性。
提起CTA按鈕的形狀，我們印象中基本能想到三類：矩形、圓角矩形和全圓角矩形。這三類按鈕形狀本質(zhì)的區(qū)別就在于圓角的不同。
那么問題來了，CTA按鈕為何會(huì)有圓角的差異？圓角背后有哪些特性和適用情況？
別急，且讓我們先從圓角的歷史說起。
互聯(lián)網(wǎng)中的圓角矩形最早源自于1981年的Macintosh。喬幫主希望這種美好的形狀能夠出現(xiàn)在正在研發(fā)的蘋果系統(tǒng)中，他說服了工程師比爾·阿金斯特實(shí)現(xiàn)了圓角矩形的繪制技術(shù)，并為其命名為RoundRects。之后，這個(gè)美妙的形狀便被沿用到了蘋果所有的用戶界面當(dāng)中。
值得一提的是，在iOS 7代之前，圖標(biāo)的圓角曲率并非連續(xù)的，每個(gè)圓角與邊緣的銜接處都會(huì)帶有明顯的切邊。
蘋果受工業(yè)設(shè)計(jì)的啟發(fā)，將工業(yè)中的曲線連續(xù)概念應(yīng)用在了ui中，以連續(xù)、漸變式的曲率來將讓圓角矩形變得更加圓潤(rùn)、平滑。同時(shí)，這種更新也與同一時(shí)間發(fā)布的iphone5c的邊角工藝設(shè)計(jì)達(dá)成了統(tǒng)一。
你以為蘋果對(duì)圓角的執(zhí)著止步于此了嗎？并沒有~
到了2017年，圓角甚至被直接運(yùn)用到了手機(jī)屏幕本身。當(dāng)手機(jī)機(jī)身、屏幕、dock和圖標(biāo)，每一處的圓角以近乎于等比數(shù)列的形式依次追隨時(shí)，就形成了一種充滿魅力的秩序感、和諧感。而這種被稱為全面屏的工藝也被各大廠商們競(jìng)相效仿。
到了去年的6月份，蘋果將自己對(duì)圓角的執(zhí)念帶到了Bigsur OS的系統(tǒng)中。Bigsur的設(shè)計(jì)語(yǔ)言里，幾乎所有的系統(tǒng)圖標(biāo)都變?yōu)榱藞A角矩形，呈現(xiàn)出了非常高度的一致性。
并且，原本的小圓角全部放大處理。比如dock欄、按鈕、窗口圓角、甚至是文件夾的圖標(biāo)，他們圓角全部得到了放大?？傊?，macOS整體的設(shè)計(jì)風(fēng)格越來越像iOS靠攏。
相比完全扁平化的iOS圖標(biāo)，macOS的圖標(biāo)也多出很多的擬物細(xì)節(jié)，比如反光、高光、投影、以及郵箱圖標(biāo)上的一行生怕被你看到的超小文字“APPLE PARK CALIFORNIA 95014”，這是Apple Park的地址。當(dāng)然這些不在此篇討論范圍內(nèi)。
既然提到蘋果，就不得不提到蘋果的死對(duì)頭——蓋茨兄的微軟。
其實(shí)早在遠(yuǎn)古時(shí)代的XP，就出現(xiàn)了圓角設(shè)計(jì)，乃至后面的vista和win7。
但是到了WP時(shí)代，微軟為了與蘋果做出風(fēng)格差異，以完完全全的直角來融入到觸屏端的設(shè)計(jì)語(yǔ)言，而這個(gè)語(yǔ)言也成為了微軟最具代表性的特有風(fēng)格——metro（modern UI）。
在metro下，所有的圖標(biāo)徹底得脫離了擬物的范疇，它們?nèi)灰话驼婆谋猓?strong>變?yōu)榱说罔F標(biāo)志牌一樣的完完全全的直角矩形色塊。
直至后面得到顯著優(yōu)化的win10以及17年推出的Fluent Design，這種風(fēng)格才算是真正得被用戶們認(rèn)可和接受。不過，由于直角本身過于方正銳利，導(dǎo)致這種風(fēng)格猶如”鋼鐵直男“一樣缺乏細(xì)節(jié)和美感，因此喜歡這種風(fēng)格的用戶依然是少數(shù)。
有意思的是，在前年20H1版本的win10界面中罕見得回歸了久違的圓角，這也意味著微軟徹底放棄了自己堅(jiān)守近10年的直角陣營(yíng)，正式向主流的圓角風(fēng)格妥協(xié)。
為什么相比直角，圓角自誕生以來便被廣泛運(yùn)用，成為了經(jīng)久不衰的設(shè)計(jì)趨勢(shì)？究其原因還得從圓角本身的特性講起。并且也正是出于這些內(nèi)在特性影響了CTA按鈕不同的形狀使用。
關(guān)于圓角本身的特性大致可以分為以下三個(gè)。
從遠(yuǎn)古時(shí)代開始，人類便意識(shí)到形狀的尖銳程度所帶來的影響。
人類在木棍上綁上磨尖的獸骨、巖石作為武器以刺穿猛獸，但是相對(duì)應(yīng)的，他們又畏懼猛獸的利齒、亦或是拿著同樣武器的敵方部落刺穿他們的身軀。
人類對(duì)這類尖銳物體本能的警惕感一直傳承至今。
在現(xiàn)實(shí)世界中，絕大多數(shù)物件的制造都會(huì)為了避免尖角割傷用戶的手指，而為其注入圓角的工藝，讓尖角變得圓潤(rùn)平滑。
圓角代表了安全，直角代表了危險(xiǎn)。這個(gè)心智模型（敲黑板！！這個(gè)模型很重要！！不知道的童鞋可以翻看我之前的文章~）根深蒂固得駐扎在我們的大腦中。因此帶有圓角的矩形往往會(huì)給予用戶足夠的親和感、安全感。
比如之前設(shè)計(jì)圈熱議的小米更新logo事件，盡管超橢圓的形狀和圓角矩形還是有些區(qū)別的，但是這種圓潤(rùn)的形狀讓整個(gè)調(diào)性變得更加接地氣了，說專業(yè)點(diǎn)兒，叫alive了。
我們對(duì)圓角的認(rèn)知除了源自遠(yuǎn)古時(shí)代趨利避害的本能，人眼本身也同樣更偏愛圓角。
Visual Perception一書的作者，Jürg N?nni曾經(jīng)研究并提出觀點(diǎn)：
人的視網(wǎng)膜對(duì)于正圓形的處理速度要顯著高于對(duì)邊角的處理速度。
這是由于人類的視網(wǎng)膜中存在一塊視覺最敏銳的區(qū)域——中央凹，它處理圓形的速度最快，而處理邊緣則需要用到大腦中更多的”神經(jīng)影像工具“。
而圓角矩形在視覺上比直角矩形更接近圓形，因此人眼處理帶圓角的形狀時(shí)更易辨識(shí)。
形狀本身也自帶了“視覺引導(dǎo)”的屬性。拿圓形直角矩形、圓角矩形和圓形舉例：
圓形以及圓角矩形不存在任何的尖角，沒有任何突出的焦點(diǎn)，圓周以及圓角矩形的四個(gè)圓角會(huì)產(chǎn)生一個(gè)向中心過渡的趨勢(shì)，引導(dǎo)視線聚焦到形狀內(nèi)部。其中以圓形聚焦性最強(qiáng)；
但是，矩形的四個(gè)頂角則形成了四個(gè)視覺焦點(diǎn)，人眼看矩形時(shí)，他們的視線其實(shí)傾向于發(fā)散而非聚焦（當(dāng)然，易于發(fā)散的缺點(diǎn)也同樣導(dǎo)致了矩形在視覺上辨識(shí)速率更慢）。
因此，直角矩形本身傾向的發(fā)散感和疏遠(yuǎn)感，使得大多數(shù)的產(chǎn)品更樂于采用圓角矩形甚至全圓角矩形來作為CTA按鈕的形狀。
由于圓形本身最強(qiáng)的聚焦性和辨識(shí)性，很多CTA按鈕會(huì)傾向于使用全圓角的形狀。
最典型的就是線上營(yíng)銷互動(dòng)和各類付費(fèi)業(yè)務(wù)的行動(dòng)按鈕，大多會(huì)采用全圓角按鈕的形狀來迅速抓取并聚焦用戶的注意力，提升用戶采取點(diǎn)擊行為的可能性，繼而提升轉(zhuǎn)化的可能。
即便是那些偏理性、冷靜、高端調(diào)性的產(chǎn)品，在必要的時(shí)候也會(huì)嘗試使用全圓角的形狀來呼吁用戶點(diǎn)擊。比如寺庫(kù)、支付寶、知乎。
可能很多小伙伴會(huì)因?yàn)樵O(shè)計(jì)的一致性而陷入一個(gè)錯(cuò)誤認(rèn)知：產(chǎn)品中所有的按鈕圓角必須保持一致。
我之前也是這樣，認(rèn)為既然是按鈕，那就必須形成規(guī)范，不然界面會(huì)變得混亂不統(tǒng)一。