UX笔记＃01 ｜按钮用图标还是文字？

UX笔记是什么？

我的关于体验设计的个人心得，每次只解决一个体验设计上的小问题。文章长了相信你也没心思看完，我也没心思写完。

Problem：

在设计按钮时，经常会纠结是用文字还是图标，还是文字＋图标？

苹果的系统APP也是同一个界面文字和图标混用的，那究竟是他们是怎样想的呢？带着问题，于是我又翻查了下苹果的人机界面指南。我发现，指南里并没有一个明确的规则去指引什么时候用图标什么时候用文字，只是在不同的地方隐约提到一些设计思想，于是我试图把这些只言片语收集起来，总结出规则来。

“To help you decide whether to use text or icons in the navigation bar or toolbar in your app, consider how many icons are visible onscreen at one time.Too many icons on a screen can make an app seem difficult to decode.”

就是说，在同一个界面里避免同时出现多个图标，否则会给用户难用的感觉，因为图标一般比文字难以解读。（死理性的处女座会问：多少个算多？我只能说，根本没必要纠结，并不是所有东西都能量化的）

“Use icons if you need to put more than three items in a toolbar.Because text-titled buttons typically use more space than icons, it can be difficult to keep the titles from running together.”

在工具栏（如上图界面下部的条）里，超过三个按钮则使用图标，否则可用文字。理由是文字一般比较长，靠的太近就会首尾相接，虽然iOS是可以自动缩小字号来避免工具栏或导航栏上的文字首尾相接，但如果超过3个按钮，就很有可能怎么都排不下了。

“iOS provides a lot of small icons—representing common tasks and types of content—for use in tab bars, toolbars, navigation bars, and Home screen quick actions. It’s a good idea to use the built-in icons as much as possible because users already know what they mean.”

这些iOS自带的图标，能用则用，因为大部分用户已经熟知他们的意思。（死理性的处女座这时又会跳出来问：这种标准icon风格和我的设计根本不搭啊？！我只能说，根本没必要纠结，视觉风格是可以改变的，只要图形意义一样，谁会注意你的垃圾桶icon是长的还是扁的，只要像个垃圾桶就行）

“Embrace borderless buttons.By default, all bar buttons are borderless. In content areas, a borderless button uses context, color, and a call-to-action title to indicate interactivity. And when it makes sense, a content-area button can display a thin border or tinted background that makes it distinctive.”

在内容区域（就是不在导航栏和工具栏）添加文字按钮时，要注意可交互性Interactivity，就是按钮看起来是可以点的，否则会和内容文字混淆，区分方法有三个：

一是上下文场景，一个按钮放在电话号码旁边很可能就是拨打电话的按钮；

二是颜色区分，和正文使用不同的颜色，通常是APP的主色调；

三是命名，采用动作本身来命名按钮；（很多人喜欢用状态来命名按钮，这很容易产出混淆的，如果当前界面不能看到按钮的结果，这样的设计几乎一定会被误解）

四，虽然不推荐，但如果真上面三种方式都行不通，就加一个边框或背景表明它是一个按钮。

安卓系统还有第五种方法，采用字幕全大写来表明是一个按钮，死理性的处女座肯定会问：中文怎么弄？确实没法弄了...

最后补充一条指南里没有提到的考虑因素，文字虽然能准确表达避免歧义，但在识别效率上不及图标。因为人识别图形比文字要快，因为文字的视觉差异要比图标要小。当然，也有些时候是用简短的文字也是难以表达准确的，不过总体来说文字的表达比图标表达还是更准确表达的，毕竟日常交流人类都使用通用的语言系统，但通用的视觉图标系统没有那么常用。再往下挖因该要到语义学和符号学的范围了。

以上就是指南里面全部相关内容，那回到我们最初的问题，“用文字还是图标？”，考虑的因素大致有以下3个：

1. 图标是否能准确表达？

能用图标，不能用文字

2. 空间是否紧张？

紧张用图标，不紧张用文字或文字加图标。空间紧张程度其实并不一定指界面面积的大小，而是根据界面对信息密度的要求，例如有些界面要求信息密度很低（如驾车导航页面不能显示很多信息），即使有很大的界面面积但是空间仍然是紧张的。

3. 是否需要快速识别？

需要使用图标或图标加文字，不需要的话可用纯文字。

使用图标加文字时，图标和文字的大小比例也是可以调整的，可以以图标为主，如Tab bar上面的大图标小文字，也可以以文字为主，如系统设置里小图标大文字。

OK, Problem solved! 死理性的处女座可以安心睡觉去了～