UI设计规范之圆角有哪些优势？为什么我们使用圆角？如何使用？

圆角趋势

1、移动硬件设备的趋势

设备趋势

以目前主流硬件设备为例，像Apple，小米，vivo，OPPO和华为的硬件设备都趋向于更加圆润的工业设计，由外而内的圆角趋势。

屏幕趋势

屏幕更大，全面屏圆角更大，甚至弧面屏 内容超出直角 视觉障碍更大。

2、UI界面的设计趋势

拿iOS和MIUI为例，系统UI趋于更大圆角和卡片，国内主流厂商系统UI也都趋于圆角化。

圆角优势

1，容易识别

在信息识别方面，圆角相对于直角更加容易识别。

拿iOS系统界面为例，圆角信息更容易被识别，信息浏览更流畅，在页面中更容易阅读。

2，减少视觉影响

锐角比钝角产生更强的虚幻的突显性，也就是锐角会对用户造成视觉影响，没有钝角更加聚焦于内容。

3，安全感

尖锐物具有警惕性，圆角则带有柔软温和性。

以视频播放按钮为例，圆角弧度大些的会给用户亲切安全的感觉。

4，引导性

圆角有弧度的卡片具有聚焦内容的隐形感知，可隐形引导用户将视觉往中部聚焦；曲线可预知临近的方向，具有安全可预知的作用。

为什么我们使用圆角？

1，提升视觉舒适度，聚焦内容

在组件中使用圆角卡片更容易让用户聚焦内容，平滑的圆角浏览起来更加舒适。

2，提升品牌识别度，品牌一致性

检查应用模块或组件控件细节中是否使用圆角，统一的圆角有助于提升品牌识别度，品牌一致性。

3，趋于移动设备系统UI方向，跟随流行趋势

减少应用与设备及系统的差异性，趋于流行设备及系统，贴合流行设计原则。

如何使用圆角？

圆角和平滑圆角

在iOS7之后iOS圆角使用了曲率圆角，将工业设计中的曲率概念运用在了系统界面中，曲率的过度更加平滑舒适。详细的介绍可见这篇文章《从圆角到圆角》。

最大圆角

寻找应用中所用到最大的卡片圆角，以最大卡片为基数从上至下设定不同尺寸模块圆角大小。例如48px、40px、32px、24px、16px、12px、8px。

卡片比例

或者，可以根据卡片所占屏幕横向比例来设定圆角大小。例如 1倍，1/2倍，1/3倍。

设计细节

特别注意，圆角中的圆角，当卡片使用了圆角时，角标圆角不可大于卡片圆角。为使卡片载体更具包含性，视觉间距更和谐，角标的圆角应小于卡片圆角。