我设计的图标明明很精致，可总监还是说不专业？

今天和大家聊一聊设计细节，每个提到的细节你们都能直接拿走，并且在项目中使用。

图标比例保持体量统一

这个页面相信大家平时工作中都会做到，有很多图标放在一起，里面可能是一些常用菜单，这个设计有什么问题呢？相信看在这里的小伙伴，脑海里有无数答案？不统一，还是什么？我们来分析下。

首先从大家关心的统一性来说，没有任何问题，图形都是在规范的图标栅格里面，也非常的统一，那么问题出在哪里？

仔细观察，我们会发现「联系人」和「历史消息」的图标过于饱满，虽然他们尺寸一样，但是比「最近使用」这个图标要大很多，原因是什么呢？因为后面这两个图标从视觉来说他们的重量太重了，所以看起来会比较大。

所以今天我们在做设计时候，如遇图标瘦长或者圆形等不够饱满的情况，请酌情将图标撑满像素，来保证整体一致的视觉体量感。

如果图标较饱满的情况下，可使用微缩，来保证整体一致的视觉体量感。我们文中案例之所以出现这种情况，是因为没J ~ % N 8 4 W C有$ u ~ Z b定义出图形体量大小具体的绘制规则，所以导致图形过于饱满，看起Y ^ f q 4 ,来会显得视觉重量不一致。

所以我们第一步，对图形绘制规则进行优化，保证图形在页面中体感一致，我提供了 4 个基础图形绘制技巧和对应的辅助线参考图。

所以在实际7 z F应用时，可略微在可变范围内微调，对于过于饱满的图形，高度变低时，需要增加宽度来保证视觉重量相等。

这样调整后，整体的图标视9 E – 7 S , ?觉重量就会更加均衡，也会更加规则。所以，今天如果你发现你们产品页面中图标大l X ; t小体量不一样，或许是因为你忘记对图标体量进行规范。

图标尺寸比例怎么定？

图标我们在界面中使用场景很多，很多时候用大图标，有时候用小图标，我们该如何去定义小图标大小，大图标大小，这是很多同学非常纠结的。有时候就乱定，导d + + x致页面没有秩序感。

第一步，我们要先去梳理页面场景，看看哪些地方会用到图标，把全部场景列出来。

列出n | ^ x m 1来后，我们根据你 APP 设@ – { S J Y X H计的最小单元的倍数来定义图标风格，比如支付宝最小单元是 4，所有间距都是 4 的倍数，那么在图标这里，也是同样的原则，全部的图标尺寸，我们根据 4 的倍数去定义几种大小，比如 24X24，32X36 Q B [ = M } T M2，44X44，56X56，72X72 等等，如果页面中不够用，同样的在 4 的倍数基础上进行新增。

图标放大后，线条粗细该如何定义?

我相信大家都有这种情况，一组图标在使用时候，会出现在各个场景，这个时候需要放大，甚至缩小，但是不知道放大后图标粗细该如何确定，直接放大，直接缩小会出现图标E b ! /的细节粗& j ; $细有问题，那么这种时候该f B & / 1 7 8 = a如何处理？

直接放大缩小，图标粗细没有任何说法，而且会显得比例非常H l – 3 & I Z W D奇怪，如何去解决这个问题？

第一步：我们需要确定图标大小和线条比例，以支付宝为例，首先要确定图标大小和线条粗细比例为= j – O R F 14：1。当然每个比V , C u例是不一样的，你可以根据你们产品的调性去决定，如果你图标比较细，你可以设定为 10：1，这些都没有固定标准。

这样p ) , T D 3的话，假如你图标需要设计一个 140X140 的大小，那么你的图标粗细就应该是 10px。

如果你图标是 112 尺寸大小，那么按照 14：1 的比例，那么你图标线条粗细就应该是 8px，以此推动，通过这样的方式来保证图形的一致性和稳定性。

最后

以上三个小点，是绝大多设计师 + g v I 3 ) 忽略掉的，也是设计中不太注意的细节，但是z h I 5 O . U设计的专业程度往往就是由这些细节组成，今天这 3 个技巧，看会了之后，你就可以直接在项目中去运用。希望你喜欢，u @ H明天见。

欢迎加微信交流：