從蘋果的天才程序員比爾·阿特金森在界面中畫出圓角開始叁执，到現(xiàn)在圓角在產(chǎn)品中的使用越來越廣泛汞舱，在兒童產(chǎn)品的界面中唐瀑，圓角更是被廣泛使用融于產(chǎn)品的各個(gè)部分团南，成為不可或缺的元素噪沙，為產(chǎn)品增彩，可以說圓角與兒童產(chǎn)品有著天然的契和吐根。

那么為什么會是圓角正歼？它究竟有什么樣的優(yōu)勢和魅力？今天就讓我們從什么是圓角拷橘，為什么使用圓角局义，圓角的應(yīng)用以及圓角的樣式與繪制四個(gè)方面來分析一下圓角在兒童產(chǎn)品中的使用。

一冗疮、什么是圓角

圓角是用一段與角的兩邊相切的圓弧替換原來的角萄唇，圓角的大小用圓弧的半徑表示。

現(xiàn)今的界面中圓角可以說是隨處可見术幔，而它最早的出現(xiàn)則是要回到1981年另萤，發(fā)生在斯蒂芬·喬布斯和比爾·阿特金森之間的故事。阿特金森向團(tuán)隊(duì)展示完他快速畫出的圓和橢圓之后特愿，喬布斯問他是否能畫出帶圓角的四邊形仲墨，他回答很難做到，也不認(rèn)為需要圓角四邊形。于是喬布斯帶著阿特金森出去，看可以碰到多少圓角四邊形煮仇，最后阿特金森被說服，第二天下午拿出了滿意的結(jié)果癌蚁，從此圓角開始在界面中使用幻梯。

二、為什么使用圓角

圓角的使用并非巧合努释，至少有三大因素的影響讓我們在產(chǎn)品設(shè)計(jì)中選擇圓角碘梢，下面就分別從審美因素，身理因素和心理因素來分析一下圓角的優(yōu)勢伐蒂，為什么要使用圓角煞躬。

1.審美因素-人類的弧形偏好

形狀知覺，形狀是視知覺最基本的信息之一逸邦。馬薩諸塞州綜合醫(yī)院認(rèn)知神經(jīng)科學(xué)實(shí)驗(yàn)室主任莫西·巴爾恩沛，帶領(lǐng)團(tuán)隊(duì)做了一系列實(shí)驗(yàn)，證實(shí)相比棱角分明缕减，人們更喜歡弧形的物體雷客。

隨后埃德·康納和巴拉昌德在神經(jīng)造影實(shí)驗(yàn)室中，又進(jìn)一步證明人類在觀察弧度較大桥狡、圓潤的圖形時(shí)搅裙，大腦皮層視覺中樞的活動(dòng)會更加活躍。

人們喜歡弧形裹芝，而且圓角弧度的增大其親和力也隨之增加部逮，更容易讓人放松，圓潤的弧度更具可愛的感覺嫂易，所以圓角的使用更加符合兒童產(chǎn)品的定位甥啄。

2.身理因素-人眼更容易處理圓角

人眼球的構(gòu)造決定了我們更容易接受圓角，視網(wǎng)膜中最敏感區(qū)域的中央凹在處理圓形的時(shí)候最快速炬搭。

巴羅神經(jīng)學(xué)研究所關(guān)于 “角” 的科學(xué)研究也發(fā)現(xiàn)了， 銳利凸顯的角會對視覺過程產(chǎn)生影響穆桂，需要涉及大腦中更多的“神經(jīng)影像工具”宫盔，加大人眼處理信息的復(fù)雜度。而圓角讓矩形更加平滑更加接近于圓形享完，所以更容易被人眼處理灼芭。

兒童的注意力相對成人來說更難以集中且集中時(shí)間更短，圓角的易識別般又，可以有效減少孩子獲取信息的耗時(shí)彼绷，降低處理信息的難度，對于孩子來說更加友好茴迁。

3.心理因素-圓角的安全暗示

我們依靠視覺感覺產(chǎn)品具體的形狀寄悯，在使用過程中，通過觀察可以讓人們清楚形狀的行動(dòng)象征意義和使用含義堕义。比如杯子的形狀可以讓我們想到喝水猜旬、把手可以讓我們想到怎么端杯子。

生活中不少警示和危險(xiǎn)物品都和尖銳的形狀有關(guān)，比如警示牌洒擦、刀椿争、桌角等，都容易造成身體傷害熟嫩，而用圓角和平滑的面代替尖銳的邊緣則可以有效避免意外情況的發(fā)生秦踪。面對一把刀，我們會去握平滑的刀柄掸茅，避開尖銳的刀鋒椅邓。所以工業(yè)設(shè)計(jì)中大量采用圓角的設(shè)計(jì)以增加產(chǎn)品的安全性和舒適性，兒童實(shí)體產(chǎn)品中尤為明顯倦蚪。

當(dāng)人們在使用這些產(chǎn)品的時(shí)候希坚，視覺信息傳輸?shù)酱竽X中樞，大腦分析接收的信息并做出判斷和行為決策陵且，灌輸“這些產(chǎn)品是安全的”心理信號裁僧，潛移默化的也讓圓角逐漸形成了安全的心理暗示。隨著互聯(lián)網(wǎng)的普及這種暗示也從實(shí)體產(chǎn)品延伸到了虛擬產(chǎn)品慕购，自然而然出現(xiàn)在了APP的界面中聊疲。

知道了為什要使用圓角、圓角的優(yōu)勢沪悲，下面就來看看圓角在界面中的應(yīng)用吧获洲。

三、圓角的應(yīng)用

圓角在兒童產(chǎn)品中的使用場景非常多殿如，總的來說可以分為6個(gè)方面贡珊，分別是：按鈕、圖標(biāo)涉馁、卡片门岔、圖形、文字和卡通形象烤送。

1.按鈕

按鈕的主流形狀主要有直角矩形寒随、圓角矩形和全圓角。

這三種形狀在兒童產(chǎn)品中使用更多的為全圓角帮坚，它最大限度的保持弧度妻往，更加圓潤可愛，提升親和力试和。

此外讯泣，特殊的微變形全圓角在兒童產(chǎn)品中也經(jīng)常出現(xiàn)，這種按鈕在全圓角的基礎(chǔ)上進(jìn)行了進(jìn)一步的調(diào)整變形灰署，使整體造型更加活潑有趣判帮，可以形成品牌特色局嘁，但也由于這種不規(guī)則的變形，讓它不能像其他三種規(guī)則形狀一樣使用代碼實(shí)現(xiàn)晦墙，而是需要依靠切圖來完成悦昵。

2.圖標(biāo)

圖標(biāo)從廣義上來說是指具有指代意義的圖形符號，主要用途是傳遞并幫助用戶理解信息晌畅。孩子的文字閱讀能力比成人弱但指，所以在兒童產(chǎn)品中，圖標(biāo)和語音需要承擔(dān)起更多信息傳達(dá)的功能抗楔，因此圖標(biāo)也顯得更為重要棋凳。

由于上述分析的人類的弧形偏好、人眼結(jié)構(gòu)等因素连躏，平滑可愛的圓角圖標(biāo)在兒童產(chǎn)品的頁面中是主流剩岳，產(chǎn)品中較少出現(xiàn)銳利邊緣的圖標(biāo)。如36氪的圖標(biāo)入热，可以看到它的轉(zhuǎn)角是直角或極小的圓角拍棕，整體風(fēng)格偏硬朗符合其本身較商務(wù)的風(fēng)格。而少兒流利說的圖標(biāo)勺良，轉(zhuǎn)角全部采用大圓角的處理方式绰播，讓其更加可愛有親和力。

好的圖標(biāo)都需要具備識別性尚困、一致性和視覺的舒適性蠢箩。所以不管是線性圖標(biāo)還是面性圖標(biāo)，在設(shè)置圖標(biāo)圓角時(shí)事甜，我們要注意平衡這三點(diǎn)谬泌，選擇適合的圓角大小。

3.卡片

卡片按角度大小的不同逻谦，可以分為直角呵萨、小圓角和大圓角。直角卡片在兒童產(chǎn)品中應(yīng)用較少跨跨，主要使用的還是小圓角和大圓角兩種。另外囱皿，特殊繪制的圓角也經(jīng)常使用勇婴，可以說是兒童產(chǎn)品中的一個(gè)特色 。

小圓角:在所有產(chǎn)品中都適用嘱腥，是比較常規(guī)的值耕渴，圓角半徑2px-50px，常用的數(shù)值有8px齿兔、10px橱脸、16PX础米、20px、30px添诉、40px等屁桑。

大圓角:圓角半徑60px以上的圓角，這類數(shù)值的圓角在成人向產(chǎn)品中的運(yùn)用相對來說會少一些栏赴，但在兒童產(chǎn)品中并不少見蘑斧。不過也需要注意一點(diǎn)，圓角數(shù)值越大可利用的有效面積會越少须眷，信息的呈現(xiàn)會受到一定影響會受到一定影響竖瘾，所以不適合過多的文字信息，圖片的話也需要注意關(guān)鍵信息不會被圓角裁切掉花颗。

特殊圓角:和按鈕一樣捕传，除了常規(guī)的圓角矩形，繪制的特殊圓角卡片也是兒童產(chǎn)品中經(jīng)常使用的扩劝，不僅豐富了卡片的樣式庸论，使得卡片造型更加活潑多變，也可以形成產(chǎn)品特色今野，成為品牌的一個(gè)視覺語言葡公。在第四部分的內(nèi)容，還會具體介紹特殊圓角的繪制方法条霜。

4.幾何圖形

幾何是對孩子進(jìn)行數(shù)學(xué)啟蒙的一大方面催什，對于孩子數(shù)學(xué)概念的建立和思維模式的培養(yǎng)都很重要。

孩子在三歲左右應(yīng)該要可以識別出基本的形狀宰睡，如正方形蒲凶、長方形、圓形拆内、三角形等旋圆，所以在實(shí)體的兒童玩具中幾何圖形是一個(gè)重要角色。

幾何圖形的使用自然也延展到了界面中麸恍，一是可以作為啟蒙的環(huán)境背景灵巧，加大圖形的曝光率，以這種“潤物細(xì)無聲”的方式進(jìn)行數(shù)學(xué)啟蒙抹沪。二也是作為裝飾元素帶來更加豐富的視覺效果刻肄，如六邊形、三角形融欧、矩形敏弃、星型等，在頁面中時(shí)常出現(xiàn)噪馏。

如下圖所示麦到，幾何圖形的使用大多數(shù)情況下會做圓角的處理绿饵，讓其原本銳利的邊緣更加柔和，視覺上更易于接受瓶颠。當(dāng)然拟赊，如形狀識別題等，有較為嚴(yán)格的形狀標(biāo)準(zhǔn)屬于特殊情況就另當(dāng)別論了步清。

5.文字

文字作為頁面的重要組成部分要门，其表現(xiàn)力也是不可低估的。不同于成人向產(chǎn)品的系統(tǒng)字體廓啊，不少兒童產(chǎn)品放棄較為剛正的系統(tǒng)字體欢搜，選擇了更加柔和帶圓角的定制字體，為頁面營造更加整體的氣氛谴轮。

兒童產(chǎn)品中常用的中文字體有：方正粗圓體炒瘟、方正準(zhǔn)圓體、方正少兒簡體第步、圓體等疮装，英文字體則有Arial Rounded MT Bold、Report等粘都，不過在選擇字體的同時(shí)廓推，切記不要忘了版權(quán)問題哦~

除了默認(rèn)字體，繪制的裝飾性字體中翩隧，圓角也是保留節(jié)目樊展。

6.IP形象

人類大腦分為“左右腦”通俗的說法是把右腦稱為“情緒腦”，左腦則稱為“理智腦”堆生，學(xué)齡前和多數(shù)低年級的孩子都是右腦偏好型专缠。也就是說孩子的學(xué)習(xí)很大程度上受情緒影響，所以在孩子的學(xué)習(xí)過程中淑仆，首先需要投其所好涝婉。與孩子建立聯(lián)系，成為朋友蔗怠，再引導(dǎo)孩子使用左腦的“理智腦”展開學(xué)習(xí)才會更加順利墩弯。

為了讓學(xué)習(xí)過程更有趣味性，建立陪伴感寞射，不少兒童產(chǎn)品都選擇了建立IP形象來完成“情緒腦”對“理智腦”的引導(dǎo)最住。比如ABCmouse 、VIPkid怠惶、有道數(shù)學(xué)、作業(yè)盒子等轧粟。如下圖可以看出在這些IP形象中策治，不僅大量使用圓形脓魏，方形也盡量加入圓角處理，以保證形象的親合力通惫，達(dá)到最佳的視覺效果茂翔，建立陪伴感，感染孩子們的情緒履腋，帶動(dòng)其學(xué)習(xí)熱情珊燎。

四、圓角的樣式與繪制

現(xiàn)在我們知道了圓角的使用場景遵湖，具體應(yīng)該怎么設(shè)置圓角的數(shù)值呢悔政？下面再來說說圓角的常用參數(shù)及畫法。

1.常規(guī)圓角

常規(guī)圓角通過調(diào)整矩形的Radius corner數(shù)值來得到延旧，全圓角的數(shù)值大小是圖形高度的1/2谋国。其他大小可以根據(jù)項(xiàng)目情況取4的倍數(shù)或是10的倍數(shù)。需要注意的是迁沫，一般需給定大中小三種數(shù)值芦瘾，以滿足不同控件的需要。

2.特殊圓角

除了常規(guī)圓角集畅，兒童產(chǎn)品中也經(jīng)常用到特殊圓角近弟，下面就為介紹兩種特殊圓角的畫法。

方形輔助：借助方形通過調(diào)節(jié)圓形的錨點(diǎn)來得到圓角挺智。

不同大小的方形可以得到不同的圓角祷愉，我分別列出了整數(shù)值的圓角效果，60%的時(shí)候已經(jīng)趨近與圓形逃贝。大家也可以多嘗試谣辞，找到最完美的角度。

調(diào)節(jié)錨點(diǎn)：得到圓角后還可以通過調(diào)節(jié)錨點(diǎn)沐扳，讓圓角有更豐富的變化泥从。可以直接拉升整個(gè)形狀來改變寬度沪摄，這樣圖形的四邊都會是彎曲的弧度躯嫉；也可以增加錨點(diǎn)再分別移動(dòng)兩端錨點(diǎn)，這樣得到的圖形杨拐，長邊可以調(diào)整至水平直線祈餐；錨點(diǎn)的加長和縮短，可以得到不同弧度的圓角哄陶，使圖形更加活潑帆阳。

常規(guī)圓角不論大小都可以用代碼實(shí)現(xiàn)，而特殊圓角則主要依靠切圖屋吨，如何選擇需要根據(jù)具體的情況來評估蜒谤。無論選擇哪種圓角山宾，盡量保持相同控件的圓角樣式的統(tǒng)一，如ABCmouse的按鈕鳍徽、彈窗资锰、卡片和幾何圖形都用了相同是圓角樣式，形成品牌的視覺特色以區(qū)分于競品阶祭。

劃重點(diǎn)

· 審美因素-人類的弧形偏好绷杜；身理因素-人眼更容易處理圓角；心理因素-圓角的安全暗示濒募，這三大因素讓人們更容易接受圓角鞭盟。

· 圓角在兒童產(chǎn)品中的應(yīng)用可分為：按鈕、圖標(biāo)萨咳、卡片懊缺、幾何圖形、文字和IP形象六個(gè)方面培他。

· 通過方形輔助和調(diào)節(jié)錨點(diǎn)得到的特殊圓角可以讓圓角形狀更加活潑富有變化鹃两，形成品牌的視覺特色已區(qū)分于競品。

細(xì)節(jié)篇：兒童APP中的圓角設(shè)計(jì)|平面-UI|觀點(diǎn)|焱小玖 - 原創(chuàng)文章 - 站酷 (ZCOOL)

參考引文

《設(shè)計(jì)師要懂心理學(xué)2》

《圖解設(shè)計(jì)心理學(xué)》

《兒童心理學(xué)》

《打造兒童超級大腦》

關(guān)于卡片圓角的思考 http://t.cn/EoF1mil

淺析圓角特征在產(chǎn)品設(shè)計(jì)中的應(yīng)用 http://t.cn/EoFBVip

圖標(biāo) http://t.cn/EoFBlwz