我的前端规范系列-图标工程化[好用的图标]

shengguo 发布于2019-08-02 16:10 / 3522人阅读

摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。

为什么要有图标规范

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

建议使用svg和iconfont png vs svn vs iconfont

格式	优势	劣势
png	渲染快	存在适配问题需要制作各种x图,程序不可控，适配后体积大
svg	支持多带带和整合打包,支持多色彩,矢量,颜色大小可控,有成熟的管理工具	渲染比图片慢
iconfont	矢量，颜色大小可控,有成熟的管理工具	不支持多色彩,字体文件大,低像素屏有锯齿

那么简单得出svg和iconfont的特点

设计只需出一次图,图标集中处理,程序可批量改色改大小且不失真

可以直接获取别人的svg或 iconfont进行修改

工具管理示例

阿里UX矢量图标库

小结

如果设计不介意频繁改图片颜色，制作各种大小状态。使用png也是可以的，但基于以后项目换肤的要求还是建议svg和iconfont里二选一。

图标设计规范 图标要有重心

根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。
请将所有图标在 1024×1024（16×16 的 64 倍）的画板中制作。
权重不一的图标会破坏视觉平衡

图标尺寸规范 规范

应该与字体搭配时和字体的尺寸保持一致尽量不要标新立异,因为只有和字体大小一致时并排时才能保持水平对齐[一下为@1x时的情况]。

劲量不要切入阴影，由于阴影的深度，如果没有切取得当，经常拿到阴影截断的图标,致使反复修改

图标切图规范 规范

不管图标是扁的还是长的方的都应该一致切成方的需要按设计图标时的容器轮廓线切图，因为程序设计时如果每个图标都要特定定义一个特别的容器来装的话，工作量和可维护性都会出现很大问题。

云服务器 GPU云服务器 win10我的电脑图标图标的创建java 编程语言的图标 html ul的图标

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54802.html

我的前端规范系列-图标工程化[好用的图标]

摘要：能快速修改和得到想要的图标图标命名规范化后编程人员可以很快配合找到想要的图标。图标设计规范图标要有重心根据不同的图标形状类型使用不同的轮廓线，可以使图标之间保持一致的视觉效果。为什么要有图标规范 1.文字和图标能更好的搭配使用图标是具有指代意义的图形，也是一种标识，即文字的一种延展，实际应用中也常与文字一起配合使用,按字体标准规范化设计的图标更容易对齐。2.图标适配变得更简单，图标风...

KunMinX 2019-08-23 16:43 评论0 收藏0
我的前端规范系列--前言

摘要：前言程序开发变是常态不变是非常态只有定好不变的规范并做得足够好才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。前言程序开发变是常态,不变是非常态只有定好不变的规范,并做得足够好,才能更好的应付变化。该系列文章会把平时工作中常遇到的问题场景抛出并提供解决方案，主要来自自己的学习和整理。现主要涉及如下:图标工程化[好用的图标...

史占广 2019-08-23 16:43 评论0 收藏0
前端学习资源

摘要：掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容，技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接，供大家参考与学习。【掘金日报】第四期使用Sublime？怎么能不知道这些 Sublime 插件合集！掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。前端...

xzavier 2019-08-30 13:57 评论0 收藏0