UI设计中的那些圆角

版权申明：本教程出自“七七的设计手札”原创，感谢“七七的设计手札”的原创教程分享！

乔布斯曾经说过：“我们的周围具有圆角的矩形到处都是！”，苹果产品在之后的设计也无从不在的运用这个设计元素。在后面的实践中，我们也逐渐体验到了圆角的魅力。

为什么我们要使用圆角

1.  圆角更容易处理信息

直角尖锐的角会让我们产生视线的中断，当路线改变的时候，会出现停顿。圆角的弧度却可以引导着我们的视线继续往下走。

2.  圆角更容易辨认

圆角带来的流畅视线引导，使我们在视觉处理减轻了负担。巴罗神经学研究所在对圆角进行的科学研究中也证实了：角的感知与角的角度呈线性关系，角越容易感知，其识别性越弱。

3.  圆角更安全、具有亲和力

根据我们在生活中的经验，尖锐的东西总会带来危险，圆角的东西则会让我们觉得可以规避掉这些危险。因此圆角带来的是更安全和亲和的感受。

4.  硬件和软件上的视觉统一

近几年，手机外形对圆角也显得愈发的青睐，很多的手机厂商都采用了圆角的设计，追求无边框设计的风潮也使得屏幕自然而然的采用了圆角。为了更好的视觉体验，在ui设计师们上也尽量使用圆角来实现于硬件上的视觉统一。

如何使用圆角

1.  分隔区域时使用

很多时候圆角矩形会作为一个大的容器，来装同类型的信息。和通栏分隔相比较，圆角矩形会使视线更加聚焦到里面的信息。

以淘宝改版前后为例，改版前的个人中心采用通栏设计，沉浸式体验更好，模块间分隔不是突出 。改版后模块间留白变多，界面更显透气，模块之间的区分也更显明显。

2.  圆角的大小

浏览追波和behance会发现圆角卡片的设计越来越多，圆角的角度也越来越大，但界面中圆角卡片的圆角大小都没有超过最外层画板圆角的大小（即屏幕自身圆角的弧度）。

如果容器内部的矩形圆角过大会产生什么样的结果呢？应该就会像下图一样，在视觉上产生突兀的感觉。

下图依次模拟了10-120px（@2情况下）不同圆角大小,在iPhonex的屏幕下的情况；

一般使用  30-80px 作为圆角卡片的弧度最为合适；

10px、20px圆角显示不是很明显，100px以上开始出现圆角弧度过大带来的突兀感。

（ 想自己尝试实验一下的同学可以在文末获得样机哟~）

淘宝的个人中心页的卡片圆角则使用的是40px

3.  让圆角更加自然

从ios7后，苹果公司对其圆角启动图标做了一些改变，图标的圆角部分过渡得更加自然了。

按照我们常用的做圆角的方式，直接对矩形赋一个圆角值，就是下图a的样子，圆角到直线的部分是一个骤变的过程，圆角弧度稍微大一点，就会有矩形的四周有稍稍向里凹陷的错觉。使用连续曲率圆角，如图b，则让圆角过渡显得更加的自然，也减少了向内凹陷的感觉，图形显得更加饱满。

网易出品的蜗牛读书就是采用了这种特殊的圆角哟~

4.  让圆角更加可爱一点

在关于儿童方面的app中，使用圆角似乎显得更加理所当然了，大弧度的圆角完全符合儿童萌萌的感觉。在一些app中为了更突显这一特性，还会对页面中的圆角矩形的四边向外拓展一部分，让圆角矩形显得更加饱满可爱。

关注公众号“七七的设计手札”，回复【样机】，即可获取iPhone x 样机

END ...

更多分享，欢迎关注公众号：七七的设计手札

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/