京东设计师这一期放大招,给大家毫无保留的分享图标设计指南
一、标签栏图标规范
1、5种图标样式总结:
标签栏图标最近流行五种样式,线型+面型 、线型+线型、线型+线面、面型+面型、无图标+无图标。在线性图标中,描边都在1pt-2pt。
如图效果:
2、图标视觉大小
图标可分为圆形图标(50*50px)、方形图标(46*46px)、宽形图标(62px)、条形图标(56px)不同的图标形状为了看上去一致,图标尺寸大小要不同,比如50px×50px 的正方形比 50px×50px 的圆形面积更大,所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小,正方形要做适当的面积收缩处理。(矩形同理)
如图做收缩处理:
那么如何在做图标的时候就让图标大小统一呢,这里要用到辅助网格系统。
以上的网格规范建议尺寸只是参考,还要根据实际情况进行微调修正。
3、图标输出尺寸
iOS 规定标签栏图标的输出尺寸统一为 31pt×28pt;Material Design 规定标签栏图标的输出尺寸统一为 24dp×24dp。但是
由于图标形状的不同,每个图标大小还是要进行微调的,微调也有讲究的,有个安全边距,我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素,正好也帮助我们规避了图标落地后,切图边缘像素可能被截断的现象发生。安全边距的间距统一是2dp。
如图效果:
二、静态图标
标签栏的图标一般分为静态图标和动态图标两种。这里重点讲一下静态图标,动态图标下期在做重点来讲。
静态图标又分为两种位图.png格式文件、矢量图标.svg 格式文件
1、位图
位图不同项目切图套数是不同的如
iOS切图需要 @1x/@2x/@3x 三种倍率的切图文件;
Android切图需要@1.5x/@2x/@3x/@4x 四种倍率的切图文件(@0.75x 和 @1x 切图层分别用于 ldpi 和 mdpi 分辨率设备,但这些设备现在几乎已退出市场,所以可不考虑,但最终视项目真实需求确定。);
web 项目的切图@2x
2、矢量图
矢量图最大的好处是不失真,无论图标如何放大缩小都不会失真。
svg 不支持渐变颜色填充;
svg 不支持描边,请将所有的描边轮廓化。Sketch 中可通过「图层-轮廓化」;AI 中可通过「对象-路径-轮廓化描边」;
要确保一组图标的文件尺寸一致,需在图标下方增加一个透明方形,和图标一同导出。
总结:制作图标的指南都总结在这了,大家要注意的重点是图标的规范位图矢量图的规范。