从苹果的天才程序员比尔·阿特金森在界面中画出圆角开始，到现在圆角在产品中的使用越来越广泛，在儿童产品的界面中，圆角更是被广泛使用融于产品的各个部分，成为不可或缺的元素，为产品增彩，可以说圆角与儿童产品有着天然的契和。

那么为什么会是圆角？它究竟有什么样的优势和魅力？今天就让我们从什么是圆角，为什么使用圆角，圆角的应用以及圆角的样式与绘制四个方面来分析一下圆角在儿童产品中的使用。

 一、什么是圆角

圆角是用一段与角的两边相切的圆弧替换原来的角，圆角的大小用圆弧的半径表示。

现今的界面中圆角可以说是随处可见，而它最早的出现则是要回到1981年，发生在斯蒂芬·乔布斯和比尔·阿特金森之间的故事。阿特金森向团队展示完他快速画出的圆和椭圆之后，乔布斯问他是否能画出带圆角的四边形，他回答很难做到，也不认为需要圆角四边形。于是乔布斯带着阿特金森出去，看可以碰到多少圆角四边形，最后阿特金森被说服，第二天下午拿出了满意的结果，从此圆角开始在界面中使用。

 二、为什么使用圆角

圆角的使用并非巧合，至少有三大因素的影响让我们在产品设计中选择圆角，下面就分别从审美因素，身理因素和心理因素来分析一下圆角的优势，为什么要使用圆角。

 1.审美因素-人类的弧形偏好

形状知觉，形状是视知觉最基本的信息之一。马萨诸塞州综合医院认知神经科学实验室主任莫西·巴尔，带领团队做了一系列实验，证实相比棱角分明，人们更喜欢弧形的物体。

随后埃德·康纳和巴拉昌德在神经造影实验室中，又进一步证明人类在观察弧度较大、圆润的图形时，大脑皮层视觉中枢的活动会更加活跃。

人们喜欢弧形，而且圆角弧度的增大其亲和力也随之增加，更容易让人放松，圆润的弧度更具可爱的感觉，所以圆角的使用更加符合儿童产品的定位。

 2.身理因素-人眼更容易处理圆角

人眼球的构造决定了我们更容易接受圆角，视网膜中最敏感区域的中央凹在处理圆形的时候最快速。

巴罗神经学研究所关于 “角” 的科学研究也发现了， 锐利凸显的角会对视觉过程产生影响，需要涉及大脑中更多的“神经影像工具”，加大人眼处理信息的复杂度。而圆角让矩形更加平滑更加接近于圆形，所以更容易被人眼处理。

儿童的注意力相对成人来说更难以集中且集中时间更短，圆角的易识别，可以有效减少孩子获取信息的耗时，降低处理信息的难度，对于孩子来说更加友好。

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

我们依靠视觉感觉产品具体的形状，在使用过程中，通过观察可以让人们清楚形状的行动象征意义和使用含义。比如杯子的形状可以让我们想到喝水、把手可以让我们想到怎么端杯子。

生活中不少警示和危险物品都和尖锐的形状有关，比如警示牌、刀、桌角等，都容易造成身体伤害，而用圆角和平滑的面代替尖锐的边缘则可以有效避免意外情况的发生。面对一把刀，我们会去握平滑的刀柄，避开尖锐的刀锋。所以工业设计中大量采用圆角的设计以增加产品的安全性和舒适性，儿童实体产品中尤为明显。

当人们在使用这些产品的时候，视觉信息传输到大脑中枢，大脑分析接收的信息并做出判断和行为决策，灌输“这些产品是安全的”心理信号，潜移默化的也让圆角逐渐形成了安全的心理暗示。随着互联网的普及这种暗示也从实体产品延伸到了虚拟产品，自然而然出现在了APP的界面中。

知道了为什要使用圆角、圆角的优势，下面就来看看圆角在界面中的应用吧。

 三、圆角的应用

圆角在儿童产品中的使用场景非常多，总的来说可以分为6个方面，分别是：按钮、图标、卡片、图形、文字和卡通形象。

 1.按钮

按钮的主流形状主要有直角矩形、圆角矩形和全圆角。

这三种形状在儿童产品中使用更多的为全圆角，它最大限度的保持弧度，更加圆润可爱，提升亲和力。

此外，特殊的微变形全圆角在儿童产品中也经常出现，这种按钮在全圆角的基础上进行了进一步的调整变形，使整体造型更加活泼有趣，可以形成品牌特色，但也由于这种不规则的变形，让它不能像其他三种规则形状一样使用代码实现，而是需要依靠切图来完成。

 2.图标 

图标从广义上来说是指具有指代意义的图形符号，主要用途是传递并帮助用户理解信息。孩子的文字阅读能力比成人弱，所以在儿童产品中，图标和语音需要承担起更多信息传达的功能，因此图标也显得更为重要。

由于上述分析的人类的弧形偏好、人眼结构等因素，平滑可爱的圆角图标在儿童产品的页面中是主流，产品中较少出现锐利边缘的图标。如36氪的图标，可以看到它的转角是直角或极小的圆角，整体风格偏硬朗符合其本身较商务的风格。而少儿流利说的图标，转角全部采用大圆角的处理方式，让其更加可爱有亲和力。

好的图标都需要具备识别性、一致性和视觉的舒适性。所以不管是线性图标还是面性图标，在设置图标圆角时，我们要注意平衡这三点，选择适合的圆角大小。

 3.卡片

卡片按角度大小的不同，可以分为直角、小圆角和大圆角。直角卡片在儿童产品中应用较少，主要使用的还是小圆角和大圆角两种。另外，特殊绘制的圆角也经常使用，可以说是儿童产品中的一个特色 。

小圆角:在所有产品中都适用，是比较常规的值，圆角半径2px-50px，常用的数值有8px、10px、16PX、20px、30px、40px等。

大圆角:圆角半径60px以上的圆角，这类数值的圆角在成人向产品中的运用相对来说会少一些，但在儿童产品中并不少见。不过也需要注意一点，圆角数值越大可利用的有效面积会越少，信息的呈现会受到一定影响会受到一定影响，所以不适合过多的文字信息，图片的话也需要注意关键信息不会被圆角裁切掉。

特殊圆角:和按钮一样，除了常规的圆角矩形，绘制的特殊圆角卡片也是儿童产品中经常使用的，不仅丰富了卡片的样式，使得卡片造型更加活泼多变，也可以形成产品特色，成为品牌的一个视觉语言。在第四部分的内容，还会具体介绍特殊圆角的绘制方法。

几何图形的使用自然也延展到了界面中，一是可以作为启蒙的环境背景，加大图形的曝光率，以这种“润物细无声”的方式进行数学启蒙。二也是作为装饰元素带来更加丰富的视觉效果，如六边形、三角形、矩形、星型等，在页面中时常出现。

如下图所示，几何图形的使用大多数情况下会做圆角的处理，让其原本锐利的边缘更加柔和，视觉上更易于接受。当然，如形状识别题等，有较为严格的形状标准属于特殊情况就另当别论了。

 5.文字 

文字作为页面的重要组成部分，其表现力也是不可低估的。不同于成人向产品的系统字体，不少儿童产品放弃较为刚正的系统字体，选择了更加柔和带圆角的定制字体，为页面营造更加整体的气氛。

除了默认字体，绘制的装饰性字体中，圆角也是保留节目。

 6.IP形象 

人类大脑分为“左右脑”通俗的说法是把右脑称为“情绪脑”，左脑则称为“理智脑”，学龄前和多数低年级的孩子都是右脑偏好型。也就是说孩子的学习很大程度上受情绪影响，所以在孩子的学习过程中，首先需要投其所好。与孩子建立联系，成为朋友，再引导孩子使用左脑的“理智脑”展开学习才会更加顺利。

为了让学习过程更有趣味性，建立陪伴感，不少儿童产品都选择了建立IP形象来完成“情绪脑”对“理智脑”的引导。比如ABCmouse 、VIPkid、有道数学、作业盒子等。如下图可以看出在这些IP形象中，不仅大量使用圆形，方形也尽量加入圆角处理，以保证形象的亲合力，达到最佳的视觉效果，建立陪伴感，感染孩子们的情绪，带动其学习热情。

 四、圆角的样式与绘制

现在我们知道了圆角的使用场景，具体应该怎么设置圆角的数值呢？下面再来说说圆角的常用参数及画法。

 1.常规圆角

常规圆角通过调整矩形的Radius corner数值来得到，全圆角的数值大小是图形高度的1/2。其他大小可以根据项目情况取4的倍数或是10的倍数。需要注意的是，一般需给定大中小三种数值，以满足不同控件的需要。

 2.特殊圆角

除了常规圆角，儿童产品中也经常用到特殊圆角，下面就为介绍两种特殊圆角的画法。

方形辅助：借助方形通过调节圆形的锚点来得到圆角。

不同大小的方形可以得到不同的圆角，我分别列出了整数值的圆角效果，60%的时候已经趋近与圆形。大家也可以多尝试，找到最完美的角度。

调节锚点：得到圆角后还可以通过调节锚点，让圆角有更丰富的变化。可以直接拉升整个形状来改变宽度，这样图形的四边都会是弯曲的弧度；也可以增加锚点再分别移动两端锚点，这样得到的图形，长边可以调整至水平直线；锚点的加长和缩短，可以得到不同弧度的圆角，使图形更加活泼。

常规圆角不论大小都可以用代码实现，而特殊圆角则主要依靠切图，如何选择需要根据具体的情况来评估。无论选择哪种圆角，尽量保持相同控件的圆角样式的统一，如ABCmouse的按钮、弹窗、卡片和几何图形都用了相同是圆角样式，形成品牌的视觉特色以区分于竞品。

 划重点

· 审美因素-人类的弧形偏好；身理因素-人眼更容易处理圆角；心理因素-圆角的安全暗示，这三大因素让人们更容易接受圆角。

· 圆角在儿童产品中的应用可分为：按钮、图标、卡片、几何图形、文字和IP形象六个方面。

· 通过方形辅助和调节锚点得到的特殊圆角可以让圆角形状更加活泼富有变化，形成品牌的视觉特色已区分于竞品。

参考引文

《设计师要懂心理学2》

《图解设计心理学》

《儿童心理学》

《打造儿童超级大脑》

关于卡片圆角的思考 http://t.cn/EoF1mil

浅析圆角特征在产品设计中的应用 http://t.cn/EoFBVip

图标 http://t.cn/EoFBlwz

Powered by Froala Editor