不了解演化史，怎能优雅的使用icon？

2018-03-26 本文已影响96人 KurokoZ

《Chandelier》Sia
I'm gonna swing from the chandelier, from the chandelier
I'm gonna live like tomorrow doesn't exist

ICON - 图形标志，是上世纪九十年代伴随IT 产业出现的一个技术词汇，原指计算机软件编程中为使人机界面更加易于操作和人性化而设计出的标识特定功能的图形标志。广义的icon可以引申至生活中各类常见的图形化标志元素，如交通指示标、车标、公共场所的引导图形等。

本文讨论的icon，是狭义的icon，仅指代软件界面上的各类图标。

伴随着软件系统的升级，icon也发生了相当巨大的变化。

早期软件图标

windows98上的图标

拟物化图标

iPhone4上的半拟物水晶图标

半立体投影类图标

扁平化图标

极简线条图标

MBE风格图标

icon的设计风格长期以来发生了巨大的变化，但其设计意图我认为始终没变，概括为三点：

指导引导作用
通过更加直观的视觉表达，让观者更快的理解相关上下文所要表达的含义，虽然对图示所表达的含义需要一定的学习过程，将其和对应的文本关联起来，但一旦理解其含义，看图比看文字能更快的理解并作出反应。如：

安全出口指示
视觉提升
不可否认，图形比文字更具有表现力，一个恰当的icon点缀，能使页面具有层次感，更加丰富、饱满；

icon配图
情感关怀
优秀的Icon是有生命的，能够传达喜怒哀乐，给人以情感上的充实；

~干杯~

单张png/gif图片
大部分Icon的使用场景都会配合相应的背景，所以需要使用支持透明度的图片格式，如png、gif，通过icon自身背景的透明，才能和场景背景产生很好的融合效果。举个简单的例子：下图中，左侧是jpg格式icon，带白色背景，右侧是png格式icon，背景可透明，和背景的融合效果，一目了然。

左：jpg，右：png
雪碧图
雪碧图是指将多张png格式的icon图片，拼合到一起，形成一张图片，然后再通过定位的方式，进行单个Icon的使用，主要作用是为了减少网络请求，降低服务器压力，这里不展开细说。
svg矢量图
前面提到的两种图片类型，png/gif（雪碧图是一种形式，格式还是png/gif）都是位图，位图为因为尺寸的缩放变化，影响图片质量，导致模糊，从而降低整体界面的视觉体验。
为了能够在不同尺寸的界面上复用同一张Icon图片，可以采用svg格式的矢量图片，特点是不会因为缩放而导致图片模糊，即使缩放100倍，依然是清晰的。
同时，使用svg格式icon还有一个好处，就可以实时着色，这和svg格式本质有关，这里也不展开。

font awesome是一个非常经典的矢量图标库，有着非常广泛的用户，该库基本能满足大部分项目对于icon的需求

iconfont近几年发展起来的国内原创icon库，最早先收录的是阿里巴巴相关项目的图标，如淘宝，天猫等，经过几年的发展，很多icon设计师入驻，贡献了相当多的原创icon，收录量已经相当丰富。而且iconfont的产品设计非常符合国内用户的使用习惯，也是我自己的专用icon库。

icons8也是一个十分经典的icon库，发展时间也比较长，刚看到的时候已经支持中文，其特点是收录了大量的系统图标，如win10系统的图标；同时除了浏览器端，也有客户端可以离线使用。

背景：B2B SaaS产品 创业公司；
人设：产品转岗的运营人；
目标：完善B2B SaaS产品运营体系，完成全年引流1000+Leads的目标；
地点：浙江 · 杭州；
时间：2018年3月26日；