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