恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反??!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何制作图标字体|总结
39.0°
昨天 | 原创文章 / 教程 / | 举报 | 7030 82 88 3


前言:根据我的调查随着电脑和手机屏幕分辨率越来越高,icon导出的切图也越来越大,为了适应不同的屏幕分辨率,甚至要切除多套组图,但无论导出PNG还是JPG,都会遇到不能无限放大,并且前端代码对图片的渲染会有一点时间,而且有时APP内置图片安装包太大,Web进行加载时,在网络不好的情况下,对用户的体验会很不好,所以我们可以使用更灵活的图标交接形式:图标字体,你可能现在还不知道图标字体是什么,还有图标字体是如何制作的,那么请别慌,只要看完我总结的这一篇小文章你就知道了。


首先在文章的开头我先为大家介绍一下当下设计输出图标资源主要会涉及那些格式:

PDF/SVG:矢量格式有PDF和SVG,在使用PDF时也可做到矢量,无限放大与缩小并不会影响图像的清晰度,但PDF是根据不同设备的分辨率,去自动生成对应的资源,以此来达到矢量的目的,所以PDF实际上会增大我们应用的体积与资源的消耗。SVG对应的就是我们今天要介绍的图标字体。


PNG/JPG:PNG与JPG格式大家都很熟悉了,即传统意义上的切片,每次切完之后,还需压缩一遍切片大小,甚至需要修改切片的命名,例如与开发同步命名规则,不是设计师改,就是开发改命名,相对比较麻烦。例如Android,现在全面屏等高清屏的分辨率都很高,以往一些旧的资源使用@2x的切图,在高分辨率的屏幕上会出现模糊的情况,我们需要再去替换掉模糊的切片,费时费力。


GIF/APNG/WebP:GIF也是大家都很熟悉的动图格式,GIF的一大缺点是显示质量不高,仅支持8位色,显示的色彩效果不甚理想,图片甚至有锯齿。APNG是逐步兴起的一种动图格式,在后文会简单介绍一下。WebP也是一种正在慢慢流行起来的新图像格式,但iOS上的Safari浏览器并不能很好地支持。

介绍完这些格式,那么接下来我们再来介绍一下今天的主角:图标字体


你以为的字体只是文字? 它也可能是一张图!

简单的说,图标字体就是把我们的图标,从图片格式转换成了字体格式,从而赋予它像字体一样的属性。

而且图标字体资源小,能够为App瘦包,方便管理,可以解决不同显示设备下图标图形清晰度的问题,不用再为不同设备适配不同尺寸的图像资源,节省了可观的工作量。同时前端也能从矢量技术中获得效率上的提升。


那么赋予它字体属性后,有什么好处呢?


加载快:

一个图标字体比一系列的图像资源在数据尺寸上小不少,一旦图标字体加载之后,图标就会马上渲染出来,不需要载入图像资源??梢约跎僭怂闱肭?,还可以配合HTML5离线存储做性能优化。简单来说对性能优化甚至有小帮助。

灵活性比较高:

字体比较灵活好控制并能全局管理,它可以被定制大小、颜色、阴影以及任何可采用的CSS样式,可在任何背景下显示。而使用位图必须得为每个不同大小与不同效果的图像输出不同的图像资源。

改变大小时比较方便:

原来:14px,20px,需要各切图一张  现在:前端将删除字段的 font-size:14px 改为 font-size:20px就ok了

改变颜色/hover状态:

原来:黑色,蓝色删除icon需要各切图一张   现在:前端将删除字段color : #333333  改为color : #0086ff 就ok了

改变透明度:

原来,透明度50%,80%需要各切图一张  现在:前端将删除字段 color:rgb(100 100 100 / 0.5)改为 color:rgb(100 100 100 / 0.8) 就ok了

兼容性:

图标字体支持所有现代浏览器,包括低版本的IE浏览器。移动端方面,iOS和安卓也都能完善地支持。

互联网趋势:

目前UI行业偏工程化,所以我们尽量让设计和开发产生更多的联动。



一、制作前基础知识普及|设计图标和导出SVG图标时需要注意的事项


我们可以到AI和Sketch里面或者在其他程序里将图标导出为SVG格式,在导出图标时一定要保证图标是转过轮廓化,因为SVG格式识别不到描边,在图标的规范上我们要注意:1.视觉大小要统一 2.差异性要明显 3.圆角统一 4.重心协调,像素对齐。


1)sketch里制作图标


2)导出前的6个注意事项

有两种以上色值的图标保留原有填充色,开发不能对其修改颜色。


3)在设计源文件中,图层区分好中英文命名、Grid、切片大小区域,画布区域按功能??槿デ?,在一份设计源文件中把图标的相关信息整理好,然后在导出SVG。(更详细的图标标注参考这篇文章:https://zhuanlan.zhihu.com/p/266293890)


二、将导出的SVG格式的图标导入到指定的网站里


1):https://icomoon.io/app/#/select 在这个网站点击左上方按钮(网站没有限制你也可以用阿里巴巴图标库只不过这个网站要比其他网站更加的方便。)

对于属性较多的图标(如渐变、透明度...),网站不易识别无法上传、或自动调整属性导致与实际样式不符,在导出图标字体后直接交付给开发即可。


2)选择并导入你标注好的SVG图标


3)导入完成之后记得检查一下图标有没有出现bug(就是上面所描述的哪些注意事项只要做到位就不会出现什么bug)


4)只要没有出现bug,然后就可以选择你要转化成字体的图标,点击右下角生成字体。


5)跳转到已经生成字体的页面后,在这里会有一些图标的代码,在右下角我们可以下载图标字体,下载后它会默认是一个压缩包。


6)下载好图标字体压缩包后我们打开压缩包内的demo文件


7)然后在demo文件的下面输入之前制定好的编码来确认图标字体真的没有出现bug和其他问题。


8)然后确认没有问题后我们就可以在生成完毕图标字体后,下载图标字体压缩包,然后把这个压缩包给开发,到时候开发直接调取压缩包中的CSS代码即可。(这样更容易后期我们进行迭代)

有些公司会把这种东西托管在云端,然后设计师只需要把图标上传到云端然后前端代码直接在云端调取即可,但是我在这里提醒一点一般公司不会把这种东西进行云端托管,基本都会放到自己公司内部的服务器上,因为一旦云端托管服务器出现问题你图标没缓存就完犊子了!

在这里我只做演示,因为在工作中的推进步骤是很麻烦的,因为你们的项目组可能之前就没用到过这种方法,所以我们在推进这个方法的过程中,一定会遇到开发不配合的情况,这时候你就应该考虑一下如何给开发有效的沟通,我们是不是可以在部门内部开会进行商讨这个事情,讨论一下你所推的这个方法的优点,尽可能的去说服你的同事和领导。

还有如果你已经在工作中推进成功了这个图标字体,一定记得将你们每次迭代的图标字体版本都标记好版本号,比如刚开始的版本是0.1第二个版本就必须是0.2,这样方便你平时进行筛选不容易混乱,还方便将来你离职时交接给下一位设计师。



我讲的可能还不够全面,请各位大神指正!

另外,我会陆续把自己总结的设计方法、心得感受写成文章,分享给大家,若感兴趣,可以关注我!

Powered by Froala Editor

创建于:2022-03-07

收藏

82人已收藏

评分:

完整度:5星

启发性:5星

勤奋性:5星

排版布局:4星

推荐:
篇幅不长,但内容很完整,没有弯弯绕绕。 内容清晰易懂。

锁好帅

披风七幺三

  • 4

    作品

  • 63

    粉丝

  • 96

    关注

  • 永中优云 I Design Competition
  • 听律律师端项目总结
  • 一次练习项目总结

    猜你喜欢

      昨天 | 原创文章 / 教程 / | 举报 | 7030 82 88 3

      如何制作图标字体|总结

      39.0°

      你确定要举报如何制作图标字体|总结?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年03月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      88
      82
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录

      可云端编辑的专业级UI设计工具

      立即体验
      全网福利资源合集搜索处解压码