按钮设计：图标还是文字？

编辑导语：人类文明的进程，从图像过渡到文字，现如今又存在符号代替文字的趋势。图标与文字，该作何选择，值得深思。本文从这一条准则：“用户是否容易理解”出发，分析多个层面的设计，一起来看看。

“为了更好的传递信息，是采用文字还是图标作为按钮呢？”

关于这一问题，无论是在知乎还是人人，所给出答案绝大部分都是偏向于选择“图标”，并且理由也十分的统一：生动、易理解、易传播……

虽然，图标在具体使用的过程中，确实有很多的优点，但因为图标的这些优点，就将文字忽视，就显得有些许的片面。

无论是文字还是图标，其都有自身的特点。至于到底应该如何选择，我们只需要遵循一条准则即可： “用户是否容易理解”， 而这一准则在具体应用时，需要我们从不同的层面进行更为全面的思考。

一、通过现象看本质——信息

从本质层来看，文字与图标的本质是相同的，都是“信息”，而当我们对于“用户是否容易理解”这一准则，进行本质性判断时，所要关注的重点 不在于具体表达方式的选择，而是需要对于不同表达方式背后的“信息”做出判断。

那么什么样的信息，更容易被用户所理解接受？

我们在判断时，应该遵循什么样的标准么？

1. 熟悉

人脑对于单个图标、字词的认知过程，是一个对比对照的过程。需要认知的信息是实验组，而存储在人脑长时记忆区中的已有信息则是对照组。通过试验组与对照组的比较，大脑就会对于当前的信息作出判断，一般判断的结果会有三种:忽视、替代、补足。

2. 忽视

大脑在比较之后，发现长时记忆区中，没有与之相匹配或相类似的信息。面对这种情况，大脑就会很自然的忽视掉该信息，自动选择跳过。

3. 替代

大脑在比较之后，发现长时记忆区中有与之相同的信息。这时人脑就会直接将二者进行关联替换，替换完毕后我们就有了对于该信息的认识。

4. 补足

大脑在对比后，发现该信息只是一种“类似”的信息，没有办法直接进行替换。

这时大脑就会启用长时记忆区中已有的图式，对于这一“类似”信息中模糊的地方进行补足。

根据人脑对于信息的处理过程，我们很容易看出信息的同步率越高，人脑所花费的认知精力就越少，信息也就越容易被理解。

所以，在设计按钮时，为了可以让用户更容易的理解我们所想要传达的信息，我们应该尽可能保证所要认知的信息与人脑中已有信息之间的高度匹配。

5. 准确、无歧义

在对于信息进行评判时，最基本的就是要保证信息传递的准确性，保证用户在接收到该信息时，在认知上不会产生歧义。

如以下三个图标：

三个图标所想要传达的信息，都为点击之后回到主页。前两个图标，可以让用户很容易get到所要传达的信息点，而第三个图标，虽然在表现样式上很简洁，但所传达的信息不够清晰准确。

用户需要调用脑中已有的图式，对该信息进行加工处理，而最终经过加工处理的信息，很可能与最初所要传递的信息不一样，造成用户理解上的歧义。

这个是“起点读书”书库页的顶部菜单。如果只单纯顶部菜单，没有与之相对应的页面。对于“胶囊”这一按钮，大家是否能理解其所要传达的信息点？那如果按钮与对应页面结合起来呢？

虽然说该页面的主要功能，是短篇小说、短篇故事的展示，但是用“胶囊”这一概念来对短篇小说、故事进行抽象性概括。这已经超出了用户对于“胶囊”这一概念的一般性认知，所以用户需要花更多的精力，去调用脑中已有的图式去补全“胶囊”与短篇故事、小说之间的关系，徒增了用户的理解成本。

二、具体问题具体分析——图标与文字

从现象层来看，图标与信息就是信息的两种不同表现方式。两个表现方式都各自有各自的特点，所以在设计过程中，应根据具体的场景去选择合适的表现方式。

1. 图标

图标作为现在使用较多的信息表现方式，具有以下几个特点：

1）节约空间

同等空间下，图标所传递的信息量会更大。而移动设备的屏幕大小，本身就存在着限制。所以同等空间下，为了信息传递的准确性，可以优先考虑图标这种信息传递方式。

2）快速定位

图标图像更容易吸引用户的目光，让用户可以在短时间内定位到图标所在的位置。

3）易理解

大脑更容易处理图像信息，更符合人的认知规律。

注意事项：

①是否有普遍的共识

图标需要是用户有普遍共识的图标。不同国家、不同文化背景，用户对于同样的图标的认知可能会有所不同，而通过对于用户常年累月的使用习惯训练，有些图标已经在一定范围内的用户心中产生了共识。

如以下几个图标：

以上几个图标在文字输入这一场景下，在用户心中已经形成了共识，所以在设计的时候，就可以直接选择对应的图标进行使用，不用担心用户是否能够理解。

②图标清晰准确——防止信息缺失

在普遍共识的基础上，还需要保证图标所传递信息的准确性，防止因信息缺失造成的用户理解歧义的产生。

③图标简洁——防止信息冗余

充斥大量信息的图标，不一定就可以保证信息传递的准确性。冗余出来的信息，很可能导致用户的过度理解，从而产生歧义。

单纯的定位图标其实已经可以传达出“定位”这一含义，而徒增一个地点信息图标，不仅不易于用户理解，反而可能增加用户的理解成本，让用户在理解过程中，进行多余的发挥。

2. 文字

1）准确性

文字相较于图标，其最大的特点，就是信息传递的准确性高。

人脑在认知文字时，首先会将其转化为脑中与之对应的图案，然后再进行理解记忆。

虽然每个个体脑中的图案可能存在差别，但这些图案本身对于个体来说，却是唯一的，这种唯一的确定性，就保证了文字信息传递的准确性。

2）缺少美感

文字相对于图案来说，传递的信息量少。如果过多的使用文字，就会显得相对比较死板，缺少一定的美感。

3）不具有普遍性

各个地方因文化的不同，文字也会有所不同。

不同文化背景的用户，在短时间内并不能理解其他文化背景下的文字。

所以在做出海产品时，对于文字的使用要谨慎，需要做好本地化的迭代。

3. 文字+图标

在设计按钮时，最理想的状态，就是使用单纯的图标或文字，就可以将信息清晰明了的传递给用户，但在实际情况下，往往很难达到。

所以在实际的设计中，可以将图标与文字进行结合。用图标更生动的传递信息，用文字对于图标进行解释说明。

参考文献：

1. 如何强化图标设计的细节？我总结了12个关键点！
2. 我该使用图标还是文字？
3. 文字信息在界面设计中的运用

 

本文由 @珞小土 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议