编辑导语：圆角设计在生活中是比较常见的，在手机、网页端等等我们都能看到各种圆角设计，特别是苹果手机的软件设计都为圆角；为什么设计师喜欢用圆角？本文作者对此做出了详细的介绍，我们一起来看一下。

圆角无处不在，不论是banner中的按钮、彰显身份的头像，还是承载内容的卡片。

但是，圆角的背后到底是什么样的逻辑？或者直白点说，为什么这里是圆形头像，那里是矩形？这里出现了全圆角按钮，那里却不是？

如果你和我有一样的困惑，希望我的这篇文章能帮到你。

一、圆角的历史

其实，互联网中的圆角矩形最早源自于1981年的Macintosh。

乔布斯希望这种美好的形状能够出现在正在研发的苹果系统中，他用生活中带圆角的桌椅、甚至是街头带圆角的标志牌成功说服了工程师比尔·阿金斯特实现了圆角矩形的绘制技术，并为其命名为RoundRects；之后，这个美妙的形状便被沿用到了苹果所有的用户界面当中。

值得一提的是，自那个彻底转型扁平的ios7开始，所有的圆角矩形得到了特殊意义上的优化。

在7代之前，图标的圆角曲率并非连续的，每个圆角与边缘的衔接处都会带有明显的切边；苹果受工业设计的启发，将工业中的曲线连续概念应用在了ui中，以连续、渐变式的曲率来将让圆角矩形变得更加圆润、平滑；同时，这种更新也与同一时间发布的iphone5c的边角工艺设计达成了统一。

苹果对圆角的执着并不仅仅停留于此。

到了2017年，圆角甚至被直接运用到了手机屏幕当中；当手机机身、屏幕、dock和图标，每一处的圆角以近乎于等比数列的形式依次追随时，就形成了一种充满魅力的秩序感、和谐感；而这种被称为全面屏的工艺也被各大厂商们竞相效仿。

既然谈到苹果，就不得不谈到苹果的老对头——微软。

其实早在远古的XP时代就出现了圆角界面设计，乃至后面的vista和win7；但是到了WP时代，微软为了与苹果做出风格差异，以完完全全的直角来作为触屏端的设计语言，而这个语言也成为了微软最具代表性的特有风格——metro（modern UI）。

在metro下，所有的图标彻底得脱离了拟物的范畴，它们全被一巴掌拍扁，变为了地铁标志牌一样的直角矩形色块；向来追随苹果脚步的微软思想超前得引入扁平化的概念，这也加快了拟物时代向扁平时代的过渡的进程（虽然当时的win8由于忽略了占据绝对比例的非触屏设备用户的体验，而被喷得体无完肤。）

这种另类的风格一开始并没有被大众认可，直至后面得到显著优化的win10以及17年推出的Fluent Design，这种风格才算是真正得被用户们接受；不过，由于直角本身过于方正锐利，导致这种风格犹如“钢铁直男”一样缺乏细节和美感，因此喜欢这种风格的用户依然是少数。

值得一提的是，在去年20H1版本的win10界面中罕见得回归了久违的圆角，这也意味着微软彻底放弃了自己坚守近10年的直角阵营，正式向主流的圆角风格妥协。

那为什么相比直角，圆角自自诞生以来便被产品广泛运用，成为了经久不衰的设计趋势？究其原因还得从圆角本身的特性讲起。

二、圆角的特性

关于圆角本身的特性大致可以分为以下三个：

1. 亲和感

从远古时代开始，人类便意识到形状的尖锐程度所带来的实际意义；人类在木棍上绑上磨尖的兽骨、岩石作为武器以刺穿猛兽；但是相对应的，他们又畏惧猛兽的利齿、亦或是拿着同样武器的敌方部落刺穿他们的身躯。

人类对这类尖锐物体本能的警惕感一直传承至今，即便在现实世界中，绝大多数物件的制造都会为了避免尖角割伤用户的手指，而为其注入圆角的工艺，让尖角变得圆润平滑；因此带有圆角的矩形往往会给予用户足够的亲和感、安全感。

2. 辨识

我们对圆角的认知除了源自远古时代趋利避害的本能，人眼本身也同样更偏爱圆角。

Visual Perception一书的作者，Jürg N?nni曾经研究并提出观点：人的视网膜对于正圆形的处理速度要显著高于对边角的处理速度。

这是由于人类的视网膜中存在一块视觉最敏锐的区域——中央凹，它处理圆形的速度最快，而处理边缘则需要用到大脑中更多的“神经影像工具”。

而圆角矩形在视觉上比直角矩形更接近圆形，因此人眼处理圆角时则更加容易、更快得辨识。

3. 视觉引导

回到形状本身，它们也自带了“视觉引导”的属性，拿圆形直角矩形、圆角矩形和圆形举例：

圆形以及圆角矩形不存在任何的尖角，没有任何突出的焦点，圆周以及圆角矩形的四个圆角会产生一个向中心过渡的趋势，引导视线集中到形状每部。

但是，矩形的四个顶角则形成了四个视觉焦点，人眼看矩形时，他们的视线其实倾向于发散而非聚焦（当然，易于发散的缺点也同样导致了矩形在视觉上更加难以辨识）。

因此，直角矩形本身倾向的发散感和疏远感，使得大多数的产品更乐于采用圆角矩形甚至全圆角矩形来作为ui的主要形状；接下来，我从按钮、头像以及卡片这三类常见的元素来讲解圆角的应用及原因。

三、按钮篇1. 全圆角

按钮作为UI中的核心交互组件，它的任何细节都对用户及商业价值起着至关重要的作用。

而在按钮中存在着一种名为CTA（Call To Action，行为召唤）的按钮，它存在的主要意义就是诱导用户采取某种行动，比如购买、关注、订阅等。

大多数的CTA按钮采用了全圆角的形状，就是为了通过全圆角的强聚焦特性来引导用户快速注意并聚焦到按钮中的文字，提高他们执行点击行为的可能性；比如各大电商平台的banner，就经常用到全圆角的按钮。

另外，一些页面中的引流入口也会借助全圆角按钮；常见的如第三方平台的知乎、简书和知识星球。

不过相比知识星球，知乎和简书引流的做法相对就更加明智，它们的CTA按钮直接做成了悬停，不论用户滑到哪儿都可以随时注意到并进行点击（知识星球则将“下一篇”这个功能做成了悬停，但是这个功能仅仅在web网页中存在，确实有点匪夷所思）。

值得注意的是，京东的引流按钮仅仅以直角的形式嵌入到了Noticebar，而且跟随滑动而非悬停；更夸张的是，美团和Airbnb直接去掉了引流按钮，甚至连唤起功能都没加入。

究其原因，可能是由于这类产品主要靠线上订单实现盈利，因此从选品到下单所有的操作在网页上即可完成。

除了平日特有的运营活动，它们对于引流的需求并不高；引流按钮是可以加，只是不会像其他类型产品那么强调；因为一旦用户去进行下载，往往由于交互步骤的繁多而增加订单损失的风险，这对于以线上盈利为主的产品往往是非常不值的。

2. 圆角与全圆角的相互转换

大多数时候，全圆角和圆角可以同时存在，甚至可以根据用户使用场景的不同而发生相互转换。

比如，知乎在进行查看回答的行为时，“关注”这个功能是圆角按钮，而当点开答主的个人主页后，“关注”则由圆角按钮变为了视重更重的全圆角按钮。

这就是由于在答案页面时，用户专注的是内容而不是人，如果”关注“变为全圆角则会相当于将聚焦用错了场景，反而对用户产生干扰；而当用户进行了点击答主头像这个行为后，意味着用户对其产生了特定的兴趣，用户专注的是人而非内容；因此才有了形状、颜色的变化，促使关注行为的发生，这就是用对了场景。

值得一提的是，App store商品列表页和详情页的按钮仅仅是和知乎一样的样式上的改变，但是形状均为全圆角。

这可能是由于App store的列表和详情页中，用户所关注的对象均为商品，不论是哪个页面，获取商品都是最终的用户诉求。

只是列表页的使用场景也包含着搜寻，因此仅在按钮视重上做出差异化；而知乎不光光是使用场景的差异，回答和个人主页分别对应着获取答案信息和关注用户两种不同类型的最终诉求，所以按钮在样式改变的同时也调整了形状。

3. 圆角与产品的调性

当一些按钮不具备行为召唤属性时（比如表单提交按钮），按钮的圆角一定程度上与产品本身的调性有关；受圆角亲和感特性的影响，拥有活泼、童趣、热情这类暖系调性的产品往往比那些偏向冷静、成熟、严肃类的产品更适合全圆角风格。

比如淘宝和微博的登录按钮全部使用了全圆角按钮，而QQ更加极端得省略掉矩形的边缘特征，直接以圆形作为登录按钮来凸显年轻的定位。

而知乎、微信和支付宝这类冷系调性的产品统一采用了圆角矩形。

全圆角依然有边缘的存在，Google在Meterial Design中甚至创造了一种全新的按钮——FAB悬浮球，配合高饱和度的颜色可以迅速引导用户的注意力并进行点击。

四、头像篇

头像作为用户身份的彰显，在ui中也存在不同的圆角差异。

拿鹅厂最典型的两个社交产品来举例，为什么微信的头像是圆角矩形，而qq的头像却全部是圆形？

一方面与产品本身的定位有关：qq更针对的是陌生人之间的连接，鼓励陌生人社交，而圆形本身的强聚焦属性可以帮助用户快速聚焦到头像以激发社交兴趣。

另一方面，与按钮一样，圆形本身的亲和感也可以引导用户更好得破冰，更放心得交友；因此，并非只有QQ这样年轻、富有活力的产品才适用圆形头像，凡是鼓励陌生人进行交流的产品都适合用圆形。

比如知乎、知识星球和各类招聘软件，即便产品本身定位偏向成熟，但是由于产品本身鼓励陌生人相互交流，因此它们的头像依旧是圆形。

相对应的，微信主打的则是熟人社交，更加注重隐私，因此它在设计上更为克制和冷静得使用了圆角矩形；而支付宝的朋友页面，近乎直角的圆角矩形头像也在时刻提醒用户谨慎得进行金钱交易。

有意思的是，我发现在支付宝的生活号业务中，评论模块中的所有用户并不存在金钱这类敏感交易，但是却全部设置成了圆角矩形；而且评论区中的用户并不像朋友动态与朋友界面有前后关联的关系，因此一致性这个原因也无法站稳脚跟。

我基于圆形头像鼓励陌生人交流的特性，推测可能是由于除文章作者可以回复评论外，用户之间是无法相互评论的；因此才用圆角矩形这个不近人情的形状来避免用户激发社交兴趣，降低用户出现圆形头像中“可以相互回复”心理预期的可能性，而这个推测在微信公众号评论中也得到了证实。

而支付宝的基金讨论区中，由于用户之间并不仅仅像生活号那样仅仅有点赞功能，还可以相互评论互动，因此便用了平易近人的圆形来调动用户的社交兴趣。

五、卡片篇

卡片作为承载内容的容器，通常上需要用户能够更快注意到容器内的内容、引发用户兴趣。

比如支付宝在最新的改版升级中，便将首页的所有的通栏直角卡片改为了圆角卡片，就是为了去引导用户更多得注意到下方的各类生活服务，以实现由过去传统的支付工具向生活服务数字平台的转型。

而支付宝交互专家——Bob大佬在之前的直播分享中，谈到了有关改进后的理财标签页，这个标签页也存在着大量一级页面即可操作的的圆角卡片；卡片中配以全圆角CTA按钮来迅速吸引、引导用户进行点击行为，从而降低了漏斗损失，大幅度提升了业务转化。

其他同样用到圆角卡片的还有弹窗、商品位等等，再次不一一列举。

当然，通栏直角卡片也并非不好，相比圆角卡片，它们往往可以节省更多宝贵的有限空间，并有效增加页面的沉浸感——这一点在feed流中得到了广泛的运用。

六、最后

圆角对于ui的意义至关重要，但是，我们设计师也需要根据业务需求、产品本身的调性以及用户使用场景等多个因素去衡量圆角的使用，而不是滥用圆角！

但愿我今天的分享对你能有所帮助，下期见。

作者：Andrewchen；微信公众号：转行人的设计笔记

本文由 @Andrewchen 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。

隔热门窗品牌

高端断桥铝门窗

高端隔热门窗

隔热门窗品牌