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

图标比例保持体量统一

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

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

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

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

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

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

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

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

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

如果图标较饱满的情况下,可使用微缩,来保证整体一致的视觉体量感。我们文中案例之所以出现这种情况,是因为没有定义出图形体量大小具体的绘制规则,所以导致图形过于饱满,看起来会显得视觉重量不一致。

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

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

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

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

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

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

图标尺寸比例怎么定?

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

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

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

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

列出来后,我们根据你 APP 设计的最小单元的倍数来定义图标风格,比如支付宝最小单元是 4,所有间距都是 4 的倍数,那么在图标这里,也是同样的原则,全部的图标尺寸,我们根据 4 的倍数去定义几种大小,比如 24X24,32X32,44X44,56X56,72X72 等等,如果页面中不够用,同样的在 4 的倍数基础上进行新增。

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

我相信大家都有这种情况,一组图标在使用时候,会出现在各个场景,这个时候需要放大,甚至缩小,但是不知道放大后图标粗细该如何确定,直接放大,直接缩小会出现图标的细节粗细有问题,那么这种时候该如何处理?

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

直接放大缩小,图标粗细没有任何说法,而且会显得比例非常奇怪,如何去解决这个问题?

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

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

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

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

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

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

最后

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

欢迎加微信交流:

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

点赞 35
收藏 155

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。

收藏