写给新手设计师的 - 实用圆角知识

圆角并不是自图形界面诞生就有的，之前都是直角的天下。圆角发扬光大还要归功于apple，而圆角由间断的边缘变成平缓连续的边缘要感谢在乔布斯推动下诞生的圆角矩形绘制技术：RoundRects，具体的历史已经有很多大佬的文章有详细写过了，这里不再详细描述，详见文末链接。我在这里把我对圆角这个部分的专题阅读笔记分享出来，对各个文章中提到的一些关键点做了整理，方便像和我一样的小白设计师学习参考。 第一次写这类型文章，欢迎大家一起探讨或指正～

目录：

一. 为什么要用圆角？

1. 处理信息

2. 视觉引导

3. 辨识度

4. 安全、亲和力

5. 品牌识别

6. 软硬件视觉统一

二. 怎么用圆角？

1. 圆角遵循大小规律

2. 全圆角的使用：重要的CTA按钮

3. 圆角与全圆角的互换

4. 设计头像时候圆角的使用

5. 圆角曲率

一. 为什么要用圆角？

自从用户图形界面诞生起一直都是直角的天下，为什么后来圆角渐渐流行起来，为什么要用圆角呢？圆角比起直角有什么好?

1. 处理信息更优：

直角的“拐弯”会一定程度上打断视线，而圆角的平滑过渡则会让视线更为流畅。

2. 较好的视觉引导作用：

圆角相比直角更能引导视线集中到形状内部。 直角：比较尖锐，有多个拐点产生多点，视觉较为发散； 圆角：朝向中心引导，视觉聚焦更能够引导注意力到中心区域。

为什么朝向中心引导就是好呢？这里需要引出《认知与设计》里提到的概念“中央凹”，人眼视野中样的视觉分辨率最高，向外逐渐递减。边界视觉的重要作用之一也是引导中央凹发现重要信息。

3. 辨识度好，更容易辨认：

大脑处理圆形的速度最快，而边缘区域则需要用到神经影像功能，效率和速度会相对降低。

4. 安全不锋利，更有亲和力：

圆角的圆润相对于直角的锋利尖锐更能带给人安全的感觉，使用在系统中时也能带来亲和感而非疏远的距离感。

5. 品牌识别：
直角、大圆角、小圆角对应的品牌识别各不相同 - 大圆角对应的品牌风格：一般较为幼龄、亲近、配合色彩材质等更容易营造清新、女性化的氛围。

小圆角：能够营造通用、普适性好、大众的感觉，应用范围也最为广泛。

直角：：硬朗、硬挺、严肃、商务，在一些相对严肃的B端场景会使用到。

6. 软硬件视觉统一：

近些年来手机的工业设计基本上已经抛弃了直角全面拥抱圆角了，与之对应软件的界面也配合流行起了圆角。例如iPhone手机边缘的圆角，软件部分使用圆角可以让整个产品看起来更和谐，营造更完美更统一的产品视觉体验。

二. 怎么用圆角？

圆角在系统中的使用有什么注意事项？不同大小的圆角都应该怎么用？

1. 圆角大小遵循一定的规则 - 让它们更有序

系统内使用的圆角，可以按照形状的大小进行分类，越大的形状对应的圆角应当越大。并且当两个形状重叠在一起时，内部的形状圆角应小于外部形状。并且当系统元素较多时，可设定固定的几种圆角大小模版，并规定多大的形状对应多大的圆角，以维持系统内圆角的一致性保证品牌调性的稳定一致。

2. 适合的圆角大小 - 需要考虑是什么终端

在整个系统设计圆角时，可以根据物体大小使用固定圆角的值，比如设定好2px、4px、8px、12px等等 也可根据物体相对于屏幕的比例规定好所用圆角比例。比如：1、1/2、1/3、1/4等等

3. 全圆角的使用：重要的CTA按钮（call to action）

圆角在吸引注意力方面的重要性也可以体现在CTA按钮的使用上。CTA按键翻译自Call to action，就是“快来关注我”按键的意思。在许多支付场景都会有的“购买”按键就是CTA按键。有大有小，甚至有的会几乎占满页面的所有长度。

一般我们的印象中儿童类产品会更多使用大圆角和全员叫，但有一些本身定位和圆润毫不相关的软件也会在这里使用全圆角，这是为什么？其实就是因为在CTA按键这么重要的部分全圆角能够在色彩等元素使用得当的基础上最大化吸引用户注意力。

关于CTA圆角的细节大佬Andrew有一篇文章写的非常详细，有兴趣的童鞋可以读一下这一篇。https://www.zcool.com.cn/article/ZMTI3MzkzMg==.html

4. 圆角与全圆角的互换：

-浏览页面vs个人主页的关注按钮。适当弱化与强化处理 圆角与全圆角的切换以按键为例，上一个部分说到全圆角的CTA按键能够最大化吸引注意力，但并不是所有的场景都需要用户放那么大注意力在按键上，以及当每个部分都做强化时，其实相当于是弱化了整体，因为当最应该强化的部分出现时，注意力可能已经有点疲惫了反倒不一定达到很好的效果。

Andrew用了两个非常好理解的例子：在App Store里获取的OTA按键在用户使用流程中的不同阶段表现形式并不相同。在推荐页面用户更加注重浏览、快速了解概况和选择，这个时候下载就不是优先级最高的任务所以使用了不太显眼的按键视觉。而在进入应用的详情页之后，此时便可以“顺理成章”的吸引用户获取app

知乎的CTA按键设置也是同理，在用户浏览内容的页面CTA按键使用较弱的，而在用户对内容感兴趣点进作者个人主页的时候使用较强的CTA按键，让整个阅读体验不被打扰，在合适的时候“抛出”关注按键，适当的时候引导用户关注作者。

补充一个同页面的例子，网易云音乐的乐队主页，对于乐队的关注按键和团队成员的按键也是做了层级上的区分。避免出现所有地方都在抢占用户注意力的情况.

5. 设计头像时候圆角的使用：

除了CTA按键以外,圆角的使用还有一个比较特殊的场景，就是头像的使用。在这里要主要考虑不同的圆角大小带给人的感受。

• 直角或者棱角尖锐的直角矩形**会给人：专业、商务、沉着、冷静、拘谨、冰冷；
• 圆形给人的感觉会有：亲和、灵动、均衡、平滑、优美的感觉；
• 圆角矩形：正好中和了这两者的气质；

所以在头像的使用时，很少会使用纯直角，更多见到的是使用亲和的圆形,和圆角矩形。因为头像本身的使用就是为了让用户产生亲切的感觉，看到头像背后代表的人的含义，这时候使用冰冷的形状就会和这个目标不相符。

8. 圆角的曲率

另外还有一个需要注意的就是圆角的曲率，这里有一篇文章讲的非常详细，直接推荐阅读https://www.hi-id.com/?p=3445

另外，平滑圆角功能在sketch里也可以选择了，大家在做设计的时候也可以多尝试一下。

推荐文章：

[圆角矩形知识](https://www.zcool.com.cn/article/ZMTE0NDk2MA==.html)

[界面中的那些圆角](https://www.zcool.com.cn/article/ZMTEwMTE4NA==.html)

[圆角矩形为什么能成为设计趋势？](https://www.uisdc.com/rounded-rectangle-to-design-trends)

[产品设计 | 圆角为何应用那么广泛？](https://www.woshipm.com/pd/2364466.html)

[圆角有哪些优势？为什么我们使用圆角？如何使用？（圆角与形状大小的关系）](https://zhuanlan.zhihu.com/p/262333931)

[从圆角到圆角 （圆角曲率）](https://www.hi-id.com/?p=3445)

[CTA按钮（按钮圆角）](https://www.zcool.com.cn/article/ZMTI3MzkzMg==.html)