宋脸小
？ 
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
2019年（三年前-_-||）上传了一篇使用AI绘制图标上传iconfont的文章，时隔很久，在最近设计规范搭建的过程中输出了一套适用于公司内部的图标库，索性把一点小心得再写一下。
1.图标库的搭建
关于图标的绘制不再过多阐述，重点放在上传iconfont上。但还是写一下一些规范的要求吧。
- 图标设计规范只规定通用类图标的组件库，业务类在日常工作中逐渐补充。
- 通用类图标又分为编辑类（增删改查，上传，下载，方向指示、交互操作等）、反馈类（成功、失败、错误、提醒等）和系统类（报警信息、系统设置、数据分析、首页、看板展示、任务、设备、视频等）
- 图标的颜色和尺寸不做规定，在实际设计和开发的过程中使用SVG等比例放大不会失真，颜色可以随意更改。
- 图标类型分为线性和面性，根据不同业务场景选择不同图标。
- 图标的端点类型和拐角选用圆角。
2.图标画板的命名与导出
画板的命名以/为界限，sketch默认为文件夹的分层。由于sketch绘制的图标需要扩展后再上传，而改变画板命名会影响整个组件库的层级。但是导出的切图只保留最后一个末端的名字，例如，画板命名为icon/方向类/双线/上，而导出的SVG为在一个一个文件夹的层级中最后显示为"上.svg"。这样除了上传时没办法一键全选中，再者层级过深时，下钻的过程也很痛苦。我们需要把"/"全部替换成"_"，保留切图的完整命名。这里推荐大家一个批量给切图命名的sketch插件——automate。用法见下图
3.其他tips
在导出的过程中也遇到里两个小问题：
- 选中全部切图后导出svg但导出预览时都是模糊的PNG，更改只作用到了最后一张图上。这时候点两下修剪透明像素，就可以啦。虽然是不值得一提的小操作，但在当时焦急的状态下还是有一种拨开迷雾的畅快。
- 关于图层命名的时候层级如果错了，不用一个一个改，可以在sketch的左上角插件那里拖动，拖到相应的分组里画板的名字也跟着变了，太棒了。
这个时候就可以一键全部上传到iconfont并且符合标准，命名规范了。
Powered by Froala Editor
全部评论：5条
更多作品
发表评论