一次搞懂 IconFont 是什么

原创文章 分类: 经验/观点 版权:
27024 436 303 38
2016-04-18
158.4
首页推荐

IconFont 是什么?怎么设计?怎么使用?怎么维护?

现在说起 IconFont,其实已经算比较晚的了,本来还挺纠结要不要写,但是群里的一些朋友还是觉得有意义,于是乎就写吧 ;P


IconFont在今天已经是比较成熟的技术了,不管是公开的素材 Font-Awesome ,还是现在本人追崇的 Material Design(要翻墙),还有国内的 阿里妈妈MUX,还有其他很多,在此就不一一列举了。


既然已经有这么多前提,本人这篇文章主要对这项技术以 UI设计师 的角度作一次总结性质的归纳。


Image title


IconFont 是什么?


IconFont拆开来看,就是 Icon 和 Font,这样估计大家应该都能理解是什么,那两者结合是什么呢?没错!就是 IconFont !Image title别丢砖,难得我卖萌一下,哈哈~


OK,严肃!简单说,就是我们平时用的字体,不再是我们传统认知上的“文字”,而是一个个的图标,请看下图:

Image title

大家可以看到右边那里我们熟悉的文字已经不见了,变成了可爱的小图标们~好奇的小伙伴们不要急,后面我就会讲清楚怎么做~


IconFont 怎么制作?


其实有很多方法,这里我只说自己的方法,第一步,还是得老老实实把图标设计好,怎么设计且听我慢慢道来~ 嘿嘿 ;P


No.1

由于我已经是 Material Design 的忠实粉丝,所以制作方法也是基于此来考虑,首先使用的软件是 AI ,有一个标准的参考线

Image title

依据参考线制作图标,保证整体视觉的统一性,这个在 IconFont 来说是尤其重要的


Image title

如上图所示,在24*24的画布下,图标的常规尺寸为20*20,周边为基础间距,当然一些特殊性的图标也可以溢出,这个就看实际的视觉统一性来考虑了。

Image title

以上是Material Design 的示例规范,有兴趣的童鞋可以 看这里 -直接拉下去看 系统图标,前面的 产品图标 请忽略


"

图标的统一性和规范制作方法是烧脑的设计,统一的角度,统一的线条,统一的造型等等,还要让团队的各位设计师都能共同参与设计,都需要有强大的图形塑造系统性思维,共勉~

-By Hengry         "


设计完后,就输出成SVG,到此第一步完成,请看下图:

Image title



No.2

在这里隆重再次介绍 Icomoon 的出场,https://icomoon.io/,右上角可以注册,详细的操作按钮也在旁边,请看下图

Image title



进去之后,点击 左上角的汉堡包新建一个 New projects,然后再点击很明显的 Import Icons 按钮,把刚刚导出的SVG文件丢进去,或者你直接从文件夹拖过去也行,然后很神奇地你就会看到图标已经在里面了

Image title


Image title

大家先选 Edit ,再点击图标就会出现上面这张图,可以看到图标的属性,其中Tags 可以自己定义,方便搜索,Nams 就不能那么随便了,因为WEB主要引用的就是这个代号,补充好这个后,最后的输出字体,点击右下角 的 Generate Font 



Image title

这里也能再次修正Names 属性,然后还有下面的 Code (e900)是Icomoon 自己生成的,APP主要用 Code ,比较严谨一点一般都有自己的命名规则,在此就不细说了,最后,点击 右下角的 Download 就能下载自己专属的IconFont 了~

另外按钮旁边有个设置按钮,有一些关于图标命名的设定


Image title


Demo 是 IconFont的预览,然后字体都在 fonts 文件夹,自行安装字体即可,这个不用我说了吧~


到此,怎么制作自己的 IconFont 就结束了,有疑问的童鞋可以留言。



IconFont 怎么使用?


在这里就不从技术角度去说使用的问题了,这个交给开发GG去考虑即可,对于设计师而言,平时工作中又能起到怎样的便利作用呢?


主要针对 2 个常用软件来说明,分别是  AI  和  PS 

AI2014 : 文字 > 字形

PS2015: 文字 > 面板 > 字形面板


打开面板之后,找到自己的字体,就可以看到自己的图标都在里面了,使用也很简单,和输入文字一样,直接在面板里面双击即可


而在设计方法的严谨角度上,因为我用的PS,建议大家每次使用的时候都新建一层形状图层命名如 iconsize ,用来绝对定位图标的位置,如下图

Image title


以上的做法不仅是为了视觉效果,同样也是在技术实现的角度检验图标的实现效果。


IconFont 的使用就是这么简单,某种程度上能提升一些工作效率,在保证项目图标使用的统一后,后续的维护工作也是要兼顾到的,接下来就是这个收尾工作了。



IconFont 怎么维护?


首先,用IconFont 的好处是什么?

最浅而易见的对设计师而言,就是同一个 Icon 图形,各种大小、颜色都不用专门去输出图片了,技术上直接在代码调整数值就完事,这个简直就爽歪歪了,至于其它的,大家百度一下也有很多文章在说,我就不啰嗦囖~ 当然好处有了,坏处当然也有,维护就是其中之一,下面简单阐述一下个人的维护方法。


首先,作为设计Leader 的你要准备好几件事情:

  1. 设定 Icon 图形的制作规范,并给出对应的模版文件;
  2. 编写关于图标的命名分类及其命名的规范,还有对应 Code 的编写规则;
  3. 专门安排一名设计师负责维护 Icomoon 的添加与字体生成,对应的 Names 和 Code 的编写,还有对设计文件的归类及整理;
  4. 给团队的每位设计师讲解流程工作,并开通自己的 Icomoon 帐号,便于检查自己设计的图标;


准备好之后,就是日常平时的需求新增图标的工作流程了,我的方法是:


1. 设计师根据图标的设计规范设计图标,然后输出对应的SVG,打包设计文件交与负责维护的设计师


2. 负责维护的设计师添加图标后下载当前 Projects 的 json文件保存归档,同时传送 json 文件给对应的设计师检查图标,最后确定没问题了就输出字体;


3. 最后把输出的文件归档,并上传到设计管理共享文件夹,让每位设计师更新 IconFont;


4. 最后的最后,还要通知各个项目的开发GG更新 IconFont 文件,进行最后的检查;


5. 确定没问题后就完事了;


不知道这样纯文字的表达大家会不会晕头转向,但确实就是有这么些繁琐




童鞋们要注意一个点,就是 IconFont 都是单色图标,不能多种颜色,大家自己根据情况评估喔~


下面规范文档会贡献出来,其实就是Material Design 的~ 哈哈~


最后,其实对于实际操作过程还是有不少点要注意的,不过不同项目可能要求也不一样,总之有疑问的童鞋可以留言,有空我都会解答


HeNgrY

博学之,审问之,慎思之,明辨之,笃行之

1424粉丝/116关注

话唠原创小生小小收藏家
IconFont-1PX不对齐引发的'血案'Origami教程10-列表视差动画+TAB动画
2
JaminWoo

很好的教程。jason文件改成json文件。以上。

精彩!

HeNgrY

HeNgrY

博学之,审问之,慎思之,明辨之,笃行之

话唠原创小生小小收藏家

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN