文章来源:公众号:印迹拾光

作者: 印迹

前面两篇我们了解了图标的尺寸和keyline线，知道了图标的底层规范。这篇开始着重于图标本身，拆解图标设计中那些细节点。

在绘制图标的时候，你是否经常有这样的疑问：图标该用直角还是圆角？多大的圆角度比较合适？本篇从图标的细节处着手，来聊聊图标的拐角那些事。

为了“统一口径”，以48px图标大小为例，示例中提的各种圆角值当然只是建议，并非标准。

图标的拐角分为圆角和非圆角两种，而圆角拐角又分为「直角拐角」和「非直角拐角」。

直角拐角：当基础图形为正方形时，建议使用3X圆角，当基础图形为宽矩形时，建议使用2X圆角。当基础图形为较小（小于1/2宽高）矩形时，建议使用1X圆角。

所以，是要根据形状单独考虑，而不是全部一个圆角值。

下图示例：左侧图标拐角过小，略显呆板。

非直角拐角：根据图标场景，通常情况下无论角度多大，默认均为1X圆角；特殊弧度的曲线“拐角”情况除外，根据图标设计需要单独考虑。

下图左侧图标拐角的圆角都过大，和直角图标放一起就会视觉不平衡。

曲率是带有圆角图形的边角度数，它分为外曲和内曲。

除非有必要，一般不会单独设置图标的内曲率，而且内曲的曲率应比外曲小，视觉上要协调，避免图标显得臃肿。

Material Design中建议，在图标的外形轮廓上使用 2dp 的圆角半径（24dp尺寸下）。不要把描边的拐角也做成圆角（宽度小于等于 2dp 的形状）。
拐角的内部应该是方形，不要把内部拐角也做成圆角。

了解了图标拐角的基本属性，接下来看看圆角和直角图标在实际设计中的应用。

圆角图标

圆角图标给人安全、亲和力、年轻的感觉，也有柔软的一面。在各类社交、电商、儿童、医疗等行业很常见。

直角图标

直角图标给人严谨、正式、果断利落的感觉，也有冷酷的一面。一般出现在各类投资理财的金融产品中，暗示理财有风险，投资需冷静。

斜角图标

其实斜角图标不算是单独的一种，跟断线图标一样更符合图标风格这一类。设计时需要考虑的是一致的斜角长度、以及倾斜角度的一致。

图标拐角影响着图标的气质，一致的圆角半径是统一整个系统图标家族的关键。亲和力较差的有方形和三角形，而圆形亲和力最强，自带交互属性。但这不意味着图标都采用圆角，也不是圆角越大越好。当然要结合产品的定位来考虑，商务、科技、高端的行业产品更适合用棱角分明的直角图标，传达可靠值得信赖的气质。而面向大众的社交、婴幼儿、女性类等产品更适合用圆角图标，以彰显其亲和力。

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：印迹拾光！