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

新知榜官方账号

2023-07-05 06:58:42

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

珞小土关注2022-03-079评论7509浏览19收藏11分钟

B端产品经理要负责对目标行业和市场进行深入的分析和调研，了解客户的需求、痛点、期望和行为，找到产品的价值主张。

“为了更好的传递信息，是采用文字还是图标作为按钮呢？”本文从这一条准则：“用户是否容易理解”出发，分析多个层面的设计，一起来看看。

一、通过现象看本质

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

那么什么样的信息，更容易被用户所理解接受？我们在判断时，应该遵循什么样的标准么？

熟悉人脑对于单个图标、字词的认知过程，是一个对比对照的过程。需要认知的信息是实验组，而存储在人脑长时记忆区中的已有信息则是对照组。通过试验组与对照组的比较，大脑就会对于当前的信息作出判断，一般判断的结果会有三种:忽视、替代、补足。
忽视大脑在比较之后，发现长时记忆区中，没有与之相匹配或相类似的信息。面对这种情况，大脑就会很自然的忽视掉该信息，自动选择跳过。
替代大脑在比较之后，发现长时记忆区中有与之相同的信息。这时人脑就会直接将二者进行关联替换，替换完毕后我们就有了对于该信息的认识。
补足大脑在对比后，发现该信息只是一种“类似”的信息，没有办法直接进行替换。这时大脑就会启用长时记忆区中已有的图式，对于这一“类似”信息中模糊的地方进行补足。

根据人脑对于信息的处理过程，我们很容易看出信息的同步率越高，人脑所花费的认知精力就越少，信息也就越容易被理解。所以，在设计按钮时，为了可以让用户更容易的理解我们所想要传达的信息，我们应该尽可能保证所要认知的信息与人脑中已有信息之间的高度匹配。

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

二、具体问题具体分析

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

图标：图标作为现在使用较多的信息表现方式，具有以下几个特点：
1. 节约空间同等空间下，图标所传递的信息量会更大。而移动设备的屏幕大小，本身就存在着限制。所以同等空间下，为了信息传递的准确性，可以优先考虑图标这种信息传递方式。
2. 快速定位图标图像更容易吸引用户的目光，让用户可以在短时间内定位到图标所在的位置。
3. 易理解大脑更容易处理图像信息，更符合人的认知规律。
文字：
1. 准确性：文字相较于图标，其最大的特点，就是信息传递的准确性高。
2. 缺少美感：文字相对于图案来说，传递的信息量少。如果过多的使用文字，就会显得相对比较死板，缺少一定的美感。
3. 不具有普遍性：各个地方因文化的不同，文字也会有所不同。所以在做出海产品时，对于文字的使用要谨慎，需要做好本地化的迭代。
文字+图标：在实际的设计中，可以将图标与文字进行结合。用图标更生动的传递信息，用文字对于图标进行解释说明。

参考文献：

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

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

本页网址：https://www.xinzhibang.net/article_detail-5679.html

寻求报道，请

关键词

分享至微信：

相关工具

美图推出的AI海报设计工具，一键生成海报宣传图

Appicons AI

AI生成精美App图标

Poly

AI生成3D材质

Khroma

AI调色盘生成工具

Illustroke

AI SVG矢量插画生成工具

ColorMagic

AI调色板生成工具

金丝兰慕美发推出98元人工AI调色染发

金丝兰慕美发推出98元人工AI调色染发除了餐饮行业比较卷以外，我觉得美发行业也特别的卷。在红塔大道这一家金丝兰慕美发推出了一个98块钱的人工AI调色染发，它的价格非常划算，而且在这种调色情况下颜色是非常准的，不容易脱色。调色大概的意思就是很多朋友现在去染发，因为染发是属于人工调，人工会存在一个问题，

分类标签美发调色染发人工AI

12-09 00:11

免费实用的视频翻译工具MyHeyGen

MyHeyGen介绍近期，一款名为“视频翻译”的工具引起了广泛关注。这不是一个简单的网页应用，而是一个可以免费部署在个人电脑或服务器上的实用程序。它的强大之处在于能够翻译任意时长的视频内容。所谓的视频翻译，实际上是指同声传译。虽然这类工具并非近期才问世，市场上已有多款成熟产品，例如我之前提到的hey

分类标签视频翻译同声传译免费工具

11-28 08:58

如何提升产品经理的需求分析能力？

如何提升产品经理的需求分析能力？作为产品经理，提升需求分析能力是非常重要的。以下是一些方法和工具可以帮助产品经理进行需求分析：参与用户调研：通过参加用户调研，产品经理可以更好地了解用户需求，从而更准确地分析需求，设计产品功能。在用户调研中，可以采用用户访谈、问卷调查、竞品分析等方式收集用户需求信息。

分类标签产品经理需求分析用户调研

11-26 02:13

UI设计师分享常用软件

UI设计师分享常用软件我是一位有着丰富经验的UI设计师。在多年的工作中，我总结了一些我认为比较好用的设计软件，这些软件基本上都是我在工作中常用到或者和人对接中需要了解学习的一些软件。以下是我分享的干货：1.PixsoPixso是国内开发，服务器在国内的一款设计软件。它的整体界面和Figma很像，因此

分类标签 UI设计软件PixsoFigma即时设计墨刀

11-26 02:12

AI里如何制作微标

AI里如何制作微标微标是一种常见的设计元素，本文将介绍在AI中如何制作微标。制作步骤新建文件，在文件中画一个椭圆。用锚点工具在上下锚点，单击按照ctrl键复制一个旋转方向，单击右键镜像复制一个，再选择下面两个形状，按着ctrl键向下复制，按着ctrl加d重复复制。画一根直线，单击宽度工具调整线的底部

分类标签 AI微标制作

10-28 22:18

Illustrator2024：一款强大的图形设计软件

Illustrator2024：一款强大的图形设计软件Illustrator2024是一款功能强大的矢量图形编辑软件，提供多种绘图工具、路径操作、色彩管理和文字处理等功能，适用于创建和编辑各种矢量图形和插图。通过其先进的功能，用户可以轻松创建精美的矢量图形、插图和各种设计作品。同时，它还提供了智能化

分类标签 Illustrator2024矢量图形编辑色彩管理

10-22 02:52

怎么免费设计logo图标？

免费设计logo图标的方法想要免费设计logo图案的精致与美观，适合产品宣传与推广的需要吗？通过使用一键logo设计工具，填写公司名称、口号和所从事的行业，即可AI一键智能生成logo，方便快捷！现在我们随便去网上找一找，就可以发现有很多的logo设计工具，但是这里面不排除有些是针对专业的设计人士的

分类标签免费设计logo图标一键logo设计

10-22 02:50

制作富士微单X-E2S相机的图案填充与渐变工具教程

制作富士微单X-E2S相机的图案填充与渐变工具教程富士微单X-E2S相机是一款优秀的相机，本教程将通过制作该相机来学习图案填充、渐变工具等内容。首先，我们需要准备好相机的外壳图案。可以在网上搜索富士微单X-E2S相机的外壳图案，并下载到本地。接下来，我们将使用图案填充工具来填充相机的外壳。选择图案填

分类标签富士微单X-E2S相机图案填充渐变工具

10-22 02:48

AI头像品牌艺术字二维码logo生成器作用与使用教程

AI头像品牌艺术字二维码logo生成器作用与使用教程AI艺术二维码艺术字生成是一种便捷、高效创新、实用的文字设计工具，通过最先进的人工智能技术，用户可以轻松地将文字转化为独特、美观的艺术字体。一般可以用光隐艺术字小程序千星创作艺术字工具生成支持多种输出格式，如图片、文字、GIF等，用户可以将生成的文

分类标签 AI艺术字生成二维码生成器Logo设计教程

10-22 02:46

人工智能图标设计与配音的现状与发展

人工智能在图标设计和配音领域的应用人工智能在图标设计和配音领域的应用已经取得了一定的成果。在图标设计领域，人工智能可以使用机器学习和深度学习算法来自动生成设计，减轻设计师的工作负担，提高图标的质量。在配音领域，AI语音合成模型可以模仿某些著名演员的声音和音调，但仍无法完全模拟出人类的情感和语气。

分类标签人工智能图标设计配音AI机器学习深度学习

10-22 02:28

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway