ui设计规范标准/系统图标的细节问题

宁波/UI设计师/4年前/337浏览

版权

ui设计规范标准/系统图标的细节问题

上年写了一篇UI设计规范标准（回顾），今年这篇写图标设计中经常遇到的问题

前言

今天讲一下系统图标的图标绘制细节。
大家搜图标规范，还是可以搜到很多很详细的文章的，今天这一章我们就不写规范了，讲一下系统图标的图标绘制细节以及绘制过程中经常会遇到哪些问题？怎么去解决这些问题？上年我有写过设计规范，有兴趣的同学可以点击右边回顾→_→-UI设计规范标准

问题：几何图形比如圆形、矩形、三角形他们的高度一致，为什么看上去大小不一致呢？
答：几何图形具有视觉上的欺骗性，矩形看上去会显得更大一些，为了保证视觉上大小的统一，这个时候需要放大圆形和三角形才使得它们看上去大小一致。

问题：那不同形状的图标看起来一样大，但是实际不是不同吗，开发需要统一的尺寸，那这个图标大小不一致，怎么解决呢？
答：可以为图标添加相同尺寸的透明背景就能实现每个图标相同的尺寸。

问题：栅格的作用很重要，可以辅助我们规范的画出图标，那绘制栅格的具体方法是什么呢？

答：方法主要有图标绘制模板、安全区、输出范围这3个步骤。

问题：新手宝宝经常不知道如何下手，图标的风格、粗细、棱角不一，很不专业，那要怎么画出可识别又统一性的图标呢？
答：可以尝试了解图标的结构。

问题：图标都画好了，为什么无法传到项目组内？

答：检查是否没有闭合？是否轮廓化？如果有两个以上图形，有没有扩展并且合并？

问题：等比例放大图标后，图标过于纤细？

答：不同尺寸的图标，你的line值不变，那越放大，就会越细。可以遵循图标Line值进行+1原则，就是线的粗细根据图标放大倍数（可以根据整体界面风格去测试，定义大小。）

问题：图标的尺寸有要求吗？最小的尺寸是多少？
答：只能说常用的尺寸里最小的是12*12px，建议所有的尺寸都以4的倍数导出。

问题：在图标完成绘制后交付给前端同事，交付的格式？
答：一般情况下有JPG、PNG、GIF、SVG四种交付格式。前三种为位图，SVG为矢量格式，两者的区别是后者更灵活，可以缩放，改变颜色等。

问题：一组图标里有一个极窄的图标，等比放大还是视觉不平衡，有什么其他办法吗？
答：对于一些极窄的图标，可以将其旋转45度然后缩放，倾斜可以增加其视觉重量。

结语

图标设计是一个非常庞大的版块，每个分支都有自己的一套设计法则，我们需要在不断的学习与创新中获得更多经验。本篇文章如若有错，欢迎指正，大家可以相互探讨一起进步。

最后推荐大家几个图标网站：
Iconfont

https://www.iconfont.cn/
设计师可以将图标上传到iconfont平台，其他用户可以自定义下载AI、SVG、PNG多种格式的图标，平台也可以将图标转为字体，便于前端工程师自由调整与调用。

IconPark
https://iconpark.oceanengine.com/home
IconPark是字节跳动旗下的图标平台，提供复制SVG code、复制React 组件、复制Vue组件、下载PNG、下载SVG。

Iconduck
https://iconduck.com/
118,894个免费的开源图标和插图，可直接下载试用。

Ikonate
https://ikonate.com/
可在左边直接调节图标的大小、线条粗细、节点、颜色等。

参考资料