学ui网.|图标的意义：可识别，易理解

北京联盟_本文原题：图标的意义：可识别，易理解

本文插图

原文地址：呆呆有理（公众号）
作者：呆呆本人
设计师聊图标，一般就是从视觉角度切入，很少会从逻辑、识别、理解等角度去考虑图标的意义。
但我们都知道，聊图标不能只谈审美，还包括很多，譬如我之前写的《空心图标与实心图标的差异》，就是从识别与记忆的角度，聊用户理解不同图标的差异。
有一种说法是，画图标是考验 UI 设计师视觉功底的一项技能，从颜色、线条、形状到各个细节，相同意义的图标，不同设计师设计出来的就会不一样，甚至会有独具设计师个人特色的图标形式出现。
但似乎很少人会去探讨图标造型背后的意义，包括图标与图标之间的组合关系。设计师们并没有从符号学角度来阐述图标的字面意思，以及与用户行为之间的关系，而只是从装饰的角度去看待。
1
图标固然重要，无论是设计师还是某款产品的用户，见到产品中的图标应该都能理解其含义，否则就失去了该图标存在于产品中的意义。
在界面设计中，图标的作用有这么几种：动作引导（点赞），内容区分（标签栏图标），以及状态提示（成功或失败）。

本文插图

从识别与理解的角度来说，动作引导和状态提示类图标，相对会更容易理解，譬如知道「大拇指」是点赞的意思，或「勾」是成功的意思。
而内容区分，则相对更抽象，比如标签栏中的图标。
但是一些设计师似乎认为「相对抽象」的意思，就是可以完全从视觉角度考虑，于是就出现了下图中标签栏的这些图标 —— 文字与图标似乎毫无关系。感觉用我搭配的文案更合适？

本文插图

标签栏图标的作用是：

扩展点击区域：比如文字太小，配一个图标，点击区域更大，用户操作更方便；
定位/导航：让用户知道自己目前处于什么位置；
节省空间：有些内容两三个字表达不了意思，通过图标来简化文字信息。

但同样不能少了「便于理解」这层逻辑。
而如今从审美角度设计的图标，仅存作用也就是「扩展点击区域」了。
复杂文案有了新造的词语来概括，用图标节省界面空间的作用也就消失了；而只要通过给新词加选中状态也能解决定位的问题。
那图标的存在还有意义么？似乎这类图标用文字表述也未尝不可？比如下图。

本文插图

这样看起来，确实能说的，也就只有不好看了。
甚至，市面上有许多产品的动作引导类图标与状态提示类图标也因为设计师极度追求视觉效果而导致逐渐变得难以识别。
于是，设计师到底应该如何理解图标的含义，设计出一份符合产品功能特性的图标呢？
2
之前看到一则资料，说的是东巴文的来龙去脉。
东巴文是一种图画象形文字，纳西人通过对大自然的观察，以模仿的方式，结合当地的宗教信仰与生活习惯，用符合当地人民认知的图形来表达大自然中各种事物的形态。
甚至连图形的颜色也是取自于人们生活中接触最多的那些。
这种图形区别于一般的图画，是通过以图代字的方式用来交流与传递信息用的，所以每个图形都代表了某个具体的事物。
但是，随着时间的流逝，事物的更替，认知的提升，人们需要创造更多图形来记录更复杂的信息。于是他们通过各种图形的组合，来代表新的事物。