如何设计一个更好的图标?这7点很容易忽略

2021-05-07 10:14:47 浏览数 (2)

静电说:不少小伙伴在设计图标的时候通常会有这样的反馈,就是在做单个图标的时候感觉很好,但是一旦要完成一套图标,那么问题就来了,这些图标看起来不统一,完全不像一套图标的样子。今天静电为大家分享的这篇文章,里边有7个可以做好图标的窍门,一起来看看吧。

技巧1-设置网格

做图标的第一步,一定,必须是设置网格,这些网格中包含了安全区域,关键的辅助线,以及外围的空白区域。如下图:

技巧2-保持一致性

在设计图标的时候,请使用一致的线条粗细,圆角半径和填充样式。这样看起来你的图标会显得统一并易于识别。

例如,下方的图标,线条的粗细为2px,拐角的半径是3px。

技巧3-保持精简

图标中的细节通常不能太多,甚至越少越好。比如一个icon,当它包含了太多细节,那么缩小的情况下用户会无法分辨,只需要设计出关键点的隐喻即可。

技巧4-使用相同的间距

在图标元素中使用相同的间距,留白空间,可以让你的设计看起来更和谐。你可以通过在Figma,Sketch,XD中按住ALT键来计算矢量线之间的距离。

技巧5-注意视觉平衡(矫正)

有时候软件的数据会给人错觉,比如同样大小的圆形和方形,你会觉得方形更大一些,圆形稍小。这就是视觉所产生的误差。作为设计师,我们要以视觉正确为第一要义。比如下方的两个图,看起来在作图软件中,三角形已经居中在圆中了(左图),但是人眼角度来观察,并没有。我们需要对这个三角形作出位置的调整,如右图所示。

技巧6-填补空间

如果一个图标非常“瘦”,那么不妨对其进行旋转,提高空间利用率,并辅以其它装饰元素,让画面显得更加均衡。如下图的两个图标。右图明显是更好的解决方案。

技巧7-结合样式

使用填充和轮廓样式来描述图标的当前态,一般来说,在菜单中,当前选中的状态,会从线性图标转换为面性图标,这样用户识别度更高。

原文:https://blog.prototypr.io/how-to-design-better-icons

另外,我的新书《Figma UI设计技法与思维全解析》已经由清华大学出版社出版发行啦,可以在京东或者当当直接购买。

PS.静电的UI设计教室春期课程已经开放招生,5月初开课。跟着静电一起提升核心竞争力,快速进阶吧。目前开课在即,早鸟价只限本周。赶紧加静电老师微信:hixulei咨询报名。

0 人点赞