前言：大家好，这是我在UI中国的第一篇设计文章，工作3年以来，一直从事的是UI设计这个职位，我也一直关注各大设计网站，对设计有了比较多的想法，之前一直是输入别人的设计想法，现在我想是时候输出自己的设计想法了。

这期主要讲的是UI元素。

UI元素：分为图标，动效，引导页和缺省页。

今天的文章主要讲图标。

图标

图标的定义：

图标是具有高度概括性的、用于视觉信息传达的小尺寸图像。图标常常可以传达出丰富的信息，并且常常和词汇、文本搭配相互搭配使用，两者互相支撑，或隐晦或直白地共同传递出其中所包含的意义、特征、内容和信息。在数字设计领域，图标作为网页或者UI界面中的象形图和表意文字而存在，是确保界面可用性的基础设施，也是达成人机交互这一目标的有效途径。

1.图标的分类：

图标可以从两方面分类：基于功能划分和基于视觉特征划分

1.1基于功能划分

－装饰和娱乐用图标：这类图标常见于APP的首页首屏处，像淘宝天猫等电商类APP尤其多，这里的图标可以根据季节和活动来进行设计，这类图标最能凸显APP的特点，有很多可以思考的地方。

－交互图标：交互图标，顾名思义就是能进行操作的图标，有些是独立的图标，还有一些常与文字结合出现。常见的有APP底部的tab按钮。还有个人中心里面的一些操作按钮图标也属于交互图标，交互图标可以与企业或者APP基因结合进行设计，具有很强的专业性。

－应用图标：应用图标是不同APP产品在各个操作系统平台上的入口和品牌展示用的标识。在绝大多数的情况下，它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计，其实是结合市场调研和品牌设计的组合，它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。

－Favicon：也被成为 URL 图标，它是网页在网页的标签中显示的识别性小图标，它同样代表着网页，是用户在网页和浏览器当中快速定位的视觉识别标识。Favicon 同样是身份识别用的图标，并且在网页的宣传和推广以及视觉识别上都有重要的意义。

1.2基于视觉特征划分

－扁平和半扁平图标：扁平化的图标设计增加了色彩和其他元素。扁平化的图标清晰而直观的视觉信息传达，为用户提供一目了然的视觉内容。扁平化的图标设计最突出的功能也就在此，在二位的平面上，不借助复杂的纹理和阴影来明了地、视觉化地传达信息，和拟物化图标正好相对。扁平化图标可以分为线性图标和非线性图标。半扁平化图标可以在图标上加点阴影以达到类似扁平的效果，却比扁平图标更有视觉冲击力。

－拟物化图标：拟物化图标是扁平化图标的对立面，正如同当初拟物化图标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh 的诞生和进化一步一步走过来，走到极致，然后从UI设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。所以设计领域和时尚领域一样，流行趋势周而复始，隔一个周期就又会流行起来。

－立体图标：在越来越多的APP中，千篇一律的图标难免会视觉疲劳，所以设计师们想到了立体图标，现在C4D这个软件是我们通常会用到的软件，被我们用来做立体图标再适合不过了。立体图标还没有被广泛应用，毕竟用户习惯需要一点点去改变。但是在平面设计领域内立体的设计已经被广泛运用了。

2.什么是一个好图标

－清晰：图标的意义应该是可理解的，可供受众吸收的

－有意义：传递出有意义的信息

－可识别：图标中所包含的视觉符号应该能够被正确地识别和呈现

－简单：图标中仅仅包含必要的元素，便于被快速的感知，不会让用户感到费劲

－吸引人：图标设计要比其他的视觉元素更突出，直觉而引人瞩目

－灵活可拓展：图标应该可缩放，并且不论大小都能被人所理解，完整而易读

－不冒犯人：它应该没有隐含意义，也不会有被误读的可能

－一致：图标应该和应用保持一致的风格

下期让我们再一起看看动效，引导页和缺省页。