专注中英响应式外贸网站建设!自适应IPAD+手机微信+电脑,网站访问速度快

建站优化电话:138 2557 5516 关于智唯 | 联系智唯
网站建设News
公司网站建设

前端不止:请告诉我,你要什么样的图标

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
11Jan
2018
有一个英语成语叫做一画胜千言(A picture is worth a thousand words),不知道大家有没有听过?它是指的是一张静态的图片就可表达一个复杂的概念或者与一个主题相关的图片有时比起详细的解释

  有一个英语成语叫做一画胜千言(A picture is worth a thousand words),不知道大家有没有听过?它是指的是一张静态的图片就可表达一个复杂的概念或者与一个主题相关的图片有时比起详细的解释,能够更有效的描述有关主题。

  如果我们要用一句话来说明图标的作用,没有比这个成语更适合的词了。本篇文章,我们就来聊聊关于图标的一些事情。

  一个图标的生命周期(工作流程)

  关于图标的生命周期,在我个人所经历的开发项目中,有以下两种:

  第一种方式:图标库(选择阶段) -> 图标使用(开发阶段)

  

图标库(选择阶段) -> 图标使用(开发阶段)

 

  第二种方式:图标设计(设计阶段) -> 图标导出(沟通阶段) -> 图标使用(开发阶段)

  

图标设计(设计阶段) -> 图标导出(沟通阶段) -> 图标使用(开发阶段)

 

  一般来说,小公司或者独立开发者会采用第一种工作流程。而大型组织或公司因为拥有更完善的团队和资源,一般会采取第二种方式,能够获得更多自主权和建立企业VI(Visual Identity,企业视觉识别)的能力。

  但无论哪种方式,都包括两个角色:设计师和Web开发。只是在第一种工作方式中,设计师是不可见的。

  图标的设计和使用

  设计阶段通常是由不了解Web开发的设计师们来完成的,他们会根据产品的需要,,绘出满足需求的图标,然后交给Web开发人员使用。

  

ThoughtWorks官网“Contact with us”图标

 

  (ThoughtWorks官网“Contact with us”图标)

  为什么要先介绍图标的使用,而一笔跳过导出过程呢?原因很简单,因为我们需要先知道服务的对象是谁,才知道如何正确的为它服务。

  常见的三种图标的使用方式

  1. 使用图片

  直接将设计师画好的图标,以PNG格式的图片一个个分离导出,这是最直观的图标打包方式。

  

FlatIcon图标

 

  (FlatIcon图标)

  它的优点是:

  能够使用彩色的图标

  能够支持大部分浏览器

  缺点是:

  图标大小是固定的(不能根据场景自由缩放)

  Retina屏幕需要两倍图

  开发人员拿到这样的图标,通常需要先将其合成为一张图片,以方便制作雪碧图,这个过程可以由开发人员自己完成,也可以由设计师来做(设计师可以根据源文件中心导出一张包含所有图标的PNG文件制作)。

  制作雪碧图的工具有很多,我比较常用的在线雪碧图工具是:Sprite Cow,或者是NodeJS平台下的构建工具插件,如:webpack-spritesmith。

  2. 直接使用svg

  使用SVG(可缩放矢量图形),W3C标准是最被看好的Web端图形解决方案。它能提供如裁剪路径、Alpha通道、滤镜效果等复杂渲染能力,具备传统图片没有的矢量功能,还可以被记事本等阅读器、搜索引擎访问。

  设计师可以轻松的在设计绘图软件(AI,PS)的帮助下导出SVG格式的图标/图片。

  但目前,国内svg还没有被非常广泛的使用,原因在于兼容性不足,不能够很好的兼容旧的IE版本和一些Android原生浏览器。

  

Can I use svg?

 

  (Can I use svg?)

  

百度对2017年前三个月的浏览器使用进行的统计

 

  上图为百度对2017年前三个月的浏览器使用进行的统计,目前国内还有超过20%的用户仍在使用IE8,9甚至是IE7。

  3. IconFont

  IconFont是目前最为流行的图标解决方案,顾名思义,它就是字体文件,你可以用任何一个字体编辑工具打开它,如果你打开某一个查看,就会发现它就是一些路径,这些路径可以用AI,PS,Sketch等软件来绘制。

  

IconFont

 

  IconFont的优点在于能够用CSS控制样式,无限缩放而不失真,支持IE7+,兼顾屏幕阅读器,不过缺点是不能支持彩色图标(拥有多种颜色的图标)。获得IconFont的方式也很简单,设计师将图标通过AI/PS转成SVG文件,然后由开发人员通过工具(在线或者本地)转换为IconFont,比如:国外的icomoon.io,国内的iconfont.cn,开源构建工具插件有gulp-iconfont等等。

  产生适合Web开发的图标

  “产生适合Web开发的图标”是我们本篇文章要关注的重点。

  1. 使用图片的方式

  如果开发人员直接使用图片,则相对简单,设计师只需要针对普通屏幕和Retina屏幕准备两套图(单倍图和两倍图)。

  以国内某著名的中文小说阅读网站为例,会针对不同的设备使用不同倍数的logo图片,以保证在如Retina屏幕下的清晰度。

  .logo-wrap .logo a {

  display: block;

  width: 219px;

  height: 52px;

  background: url(/qd/images/logo.dbed5.png) no-repeat;

  }

  @media not all, not all, (-webkit-min-device-pixel-ratio: 1.3), not all, (min-resolution: 1.3dppx) {

  .logo-wrap .logo a {

  background: url(/qd/images/logo3x.fd980.png) no-repeat;

  background-repeat: no-repeat;background-size: 217px;

  }

  }

  )

  2. 使用SVG