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的主色调;

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

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

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

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

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

1. 图标是否能准确表达?能用图标,不能用文字

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

3. 是否需要快速识别?需要使用图标或图标加文字,不需要的话可用纯文字。

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

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

原文发布于微信公众号 - Alan的UX笔记(AlanUX)

原文发表时间:2015-11-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 一个 Android 开发者的小程序开发之旅

我是一名 Android 开发程序员,以前没有接触过前端开发,直到接手了公司的小程序项目,才开始逐渐接触前端领域。

842
来自专栏腾讯社交用户体验设计

浅议内滚动布局 - 腾讯ISUX

983
来自专栏逍遥剑客的游戏开发

基于Unity的编辑器开发(一): GUI框架技术

用Unity开发的游戏, 需要做个关卡编辑器. 如果只是内部用用, 其实直接扩展Unity就够了; 但问题是需要发布给外部的用户使用, 那么总不能把全套资源和U...

4938
来自专栏各种机器学习基础算法

关于Web语义化的意义

随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

2716
来自专栏令仔很忙

table合并单元格colspan和rowspan

最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,...

871
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 学习资源精选仓库

React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

3817
来自专栏CDA数据分析师

【图表大师一】如何让Excel图表更具“商务气质”?

如何让Excel图表更具“商务气质”? 文/ExcelPro的图表博客 这是去年底的时候,应《电脑爱好者》杂志约稿写的一篇小文,内容大致是《图表之道》第1章的略...

2138
来自专栏九彩拼盘的叨叨叨

前端学习资源精选

看视频学技术的缺点是学习效率比较低,优点是对初学者更友好。前端入门后,不推荐看视频。

1042
来自专栏HTML5学堂

HBuilder的基本介绍

工具 - HBuilder 起因 HTML最开始其实不是一个编程语言,确实用不着什么ide。 但是发展到现在,7w多个语法,js越来越庞大,真开发一个达到原生水...

54510
来自专栏知晓程序

开发 | 谁说 LBS 小程序开发难?前端女王大人手把手教会你

利用它,你可以在小程序中调用一个功能完整的地图,让小程序里所展示的地点更直观、更精确。

682

扫码关注云+社区