编辑导语：圆角设计在生活中是比较常见的，在手机、网页端等等我们都能看到各种圆角设计，特别是苹果手机的软件设计都为圆角；为什么设计师喜欢用圆角？本文作者对此做出了详细的介绍，我们一起来看一下。
圆角无处不在，不论是banner中的按钮、彰显身份的头像，还是承载内容的卡片。
但是，圆角的背后到底是什么样的逻辑？或者直白点说，为什么这里是圆形头像，那里是矩形？这里出现了全圆角按钮，那里却不是？
如果你和我有一样的困惑，希望我的这篇文章能帮到你。
一、圆角的历史
其实，互联网中的圆角矩形最早源自于年的Macintosh。
乔布斯希望这种美好的形状能够出现在正在研发的苹果系统中，他用生活中带圆角的桌椅、甚至是街头带圆角的标志牌成功说服了工程师比尔·阿金斯特实现了圆角矩形的绘制技术，并为其命名为RoundRects；之后，这个美妙的形状便被沿用到了苹果所有的用户界面当中。
值得一提的是，自那个彻底转型扁平的ios7开始，所有的圆角矩形得到了特殊意义上的优化。
在7代之前，图标的圆角曲率并非连续的，每个圆角与边缘的衔接处都会带有明显的切边；苹果受工业设计的启发，将工业中的曲线连续概念应用在了ui中，以连续、渐变式的曲率来将让圆角矩形变得更加圆润、平滑；同时，这种更新也与同一时间发布的iphone5c的边角工艺设计达成了统一。
苹果对圆角的执着并不仅仅停留于此。
到了年，圆角甚至被直接运用到了手机屏幕当中；当手机机身、屏幕、dock和图标，每一处的圆角以近乎于等比数列的形式依次追随时，就形成了一种充满魅力的秩序感、和谐感；而这种被称为全面屏的工艺也被各大厂商们竞相效仿。
既然谈到苹果，就不得不谈到苹果的老对头——微软。
其实早在远古的XP时代就出现了圆角界面设计，乃至后面的vista和win7；但是到了WP时代，微软为了与苹果做出风格差异，以完完全全的直角来作为触屏端的设计语言，而这个语言也成为了微软最具代表性的特有风格——metro（modernUI）。
在metro下，所有的图标彻底得脱离了拟物的范畴，它们全被一巴掌拍扁，变为了地铁标志牌一样的直角矩形色块；向来追随苹果脚步的微软思想超前得引入扁平化的概念，这也加快了拟物时代向扁平时代的过渡的进程（虽然当时的win8由于忽略了占据绝对比例的非触屏设备用户的体验，而被喷得体无完肤。）
这种另类的风格一开始并没有被大众认可，直至后面得到显著优化的win10以及17年推出的FluentDesign，这种风格才算是真正得被用户们接受；不过，由于直角本身过于方正锐利，导致这种风格犹如“钢铁直男”一样缺乏细节和美感，因此喜欢这种风格的用户依然是少数。
值得一提的是，在去年20H1版本的win10界面中罕见得回归了久违的圆角，这也意味着微软彻底放弃了自己坚守近10年的直角阵营，正式向主流的圆角风格妥协。
那为什么相比直角，圆角自自诞生以来便被产品广泛运用，成为了经久不衰的设计趋势？究其原因还得从圆角本身的特性讲起。
二、圆角的特性
关于圆角本身的特性大致可以分为以下三个：
1.亲和感
从远古时代开始，人类便意识到形状的尖锐程度所带来的实际意义；人类在木棍上绑上磨尖的兽骨、岩石作为武器以刺穿猛兽；但是相对应的，他们又畏惧猛兽的利齿、亦或是拿着同样武器的敌方部落刺穿他们的身躯。
人类对这类尖锐物体本能的警惕感一直传承至今，即便在现实世界中，绝大多数物件的制造都会为了避免尖角割伤用户的手指，而为其注入圆角的工艺，让尖角变得圆润平滑；因此带有圆角的矩形往往会给予用户足够的亲和感、安全感。
2.辨识
我们对圆角的认知除了源自远古时代趋利避害的本能，人眼本身也同样更偏爱圆角。
VisualPerception一书的作者，JürgNnni曾经研究并提出观点：人的视网膜对于正圆形的处理速度要显著高于对边角的处理速度。
这是由于人类的视网膜中存在一块视觉最敏锐的区域——中央凹，它处理圆形的速度最快，而处理边缘则需要用到大脑中更多的“神经影像工具”。
而圆角矩形在视觉上比直角矩形更接近圆形，因此人眼处理圆角时则更加容易、更快得辨识。
3.视觉引导
回到形状本身，它们也自带了“视觉引导”的属性，拿圆形直角矩形、圆角矩形和圆形举例：
圆形以及圆角矩形不存在任何的尖角，没有任何突出的焦点，圆周以及圆角矩形的四个圆角会产生一个向中心过渡的趋势，引导视线集中到形状每部。
但是，矩形的四个顶角则形成了四个视觉焦点，人眼看矩形时，他们的视线其实倾向于发散而非聚焦（当然，易于发散的缺点也同样导致了矩形在视觉上更加难以辨识）。
因此，直角矩形本身倾向的发散感和疏远感，使得大多数的产品更乐于采用圆角矩形甚至全圆角矩形来作为ui的主要形状；接下来，我从按钮、头像以及卡片这三类常见的元素来讲解圆角的应用及原因。
三、按钮篇
1.全圆角
按钮作为UI中的核心交互组件，它的任何细节都对用户及商业价值起着至关重要的作用。
而在按钮中存在着一种名为CTA（CallToAction，行为召唤）的按钮，它存在的主要意义就是诱导用户采取某种行动，比如购买、
