圆角

圆角在卡片、按钮、功能入口中大量使用,是产品中构建视觉语言的重要组成元素。

作用

视觉聚焦

圆角因其平滑的四边,将用户的视线过渡到图形中心。而直角因边缘尖锐,导致用户注意力在图形识别上容易发散。

层级感知

在信息流卡片场景中,圆角的使用在相同页面间距的布局中留白更多,区块感更强,有利于提高用户对信息层级的识别效率。

绘制建议

平滑圆角

在sketch中勾选平滑圆角的选项。平滑圆角减少了曲面转折时所产生的锯齿,让圆角过渡更为平滑柔和。

圆角曲率

当使用相同的曲率时,不同元素大小的圆角视觉感知不一,影响页面统一性。请根据元素大小选择适宜曲率。同时在一个页面内,曲率的选择建议控制在2~3种。