摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
为什么要有图标规范
1.文字和图标能更好的搭配使用
图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。
2.图标适配变得更简单，图标风格更统一,大小统一
矢量化后的图标，由于程序对颜色大小可控,且不失真的特点,更利于适配实现图标的72变。另外由于切图大小统一，不用把时间花费在调整图片容器上。
3.能快速修改和得到想要的图标
图标命名规范化后,编程人员可以很快配合ide找到想要的图标。 不用把时间浪费在找图上。
1.图标规格统一
2.图标命名规范
3.图标切取统一
4.图标管理
[图标名]-[状态?]-[形状?]-[描线?]-[方向?]@[1,2,3]x.png 带?号为可选
图标名 公用图标名举例:[图标名]
举例:button
释义:按钮
举例:[模块]-[类别]-[功能]
举例:nav-button-search
释义:导航-按钮-搜索
这里我们简单分三种情况,一种被方框包围-square，一种被圆圈包围-circle
是否实心这里我们使用修饰符-o表示描边型，不带-o为实心型
常用状态svg和iconfont可以不需要常用状态
激活 actived
禁用 disabled
悬停 hover
带圈圈的加号非实心且激活
png：plus-actived-circle-o
svg/iconfont: plus-circle-o
| 格式 | 优势 | 劣势 |
|---|---|---|
| png | 渲染快 | 存在适配问题需要制作各种x图,程序不可控，适配后体积大 |
| svg | 支持多带带和整合打包,支持多色彩,矢量,颜色大小可控,有成熟的管理工具 | 渲染比图片慢 |
| iconfont | 矢量，颜色大小可控,有成熟的管理工具 | 不支持多色彩,字体文件大,低像素屏有锯齿 |
那么简单得出svg和iconfont的特点
设计只需出一次图,图标集中处理,程序可批量改色改大小且不失真
可以直接获取别人的svg或 iconfont进行修改
工具管理示例阿里UX矢量图标库
小结如果设计不介意频繁改图片颜色，制作各种大小状态。使用png也是可以的，但基于以后项目换肤的要求还是建议svg和iconfont里二选一。
图标设计规范 图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
权重不一的图标会破坏视觉平衡
应该与字体搭配时和字体的尺寸保持一致尽量不要标新立异,因为只有和字体大小一致时并排时才能保持水平对齐[一下为@1x时的情况]。
劲量不要切入阴影，由于阴影的深度，如果没有切取得当，经常拿到阴影截断的图标,致使反复修改
图标切图规范 规范不管图标是扁的 还是长的方的 都应该一致切成方的需要按设计图标时的容器轮廓线切图，因为程序设计时如果每个图标都要特定定义一个特别的容器来装的话，工作量和可维护性都会出现很大问题。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/59115.html
摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。 为什么要有图标规范 1.文字和图标能更好的搭配使用图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。2.图标适配变得更简单，图标风...
摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。 为什么要有图标规范 1.文字和图标能更好的搭配使用图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。2.图标适配变得更简单，图标风...
摘要：前言程序开发变是常态不变是非常态只有定好不变的规范并做得足够好才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。 前言 程序开发变是常态,不变是非常态只有定好不变的规范,并做得足够好,才能更好的应付变化。 该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。 现主要涉及如下:图标工程化[好用的图标...
摘要：前言程序开发变是常态不变是非常态只有定好不变的规范并做得足够好才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。 前言 程序开发变是常态,不变是非常态只有定好不变的规范,并做得足够好,才能更好的应付变化。 该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。 现主要涉及如下:图标工程化[好用的图标...
阅读 3485·2021-10-09 09:58
阅读 400·2021-09-27 13:35
阅读 946·2021-09-22 15:20
阅读 2309·2019-08-30 15:54
阅读 3365·2019-08-30 14:08
阅读 742·2019-08-30 13:06
阅读 1695·2019-08-26 12:16
阅读 2535·2019-08-26 12:11
