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 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

windows程序设计-第四章 system1.c

/*---------------------------------------------------- SYSMETS1.C -- System M...

23010
来自专栏海说

Java应用中常见的JDBC连接字符串(SQLite、MySQL、Oracle、Sybase、SQLServer、DB2)

Java应用中常见的JDBC连接字符串 Java应用中连接数据库是不可或缺的,于是便整理一些可能用到的JDBC的jar包及其相匹配的URL,以备日后查阅。 1)...

2700
来自专栏成长道路

JDBC动态SQL语句连接orcale数据库的工具类

import java.sql.Connection; import java.sql.DriverManager; import java.sql.P...

2440
来自专栏菩提树下的杨过

MSDN官方的ASP.Net异步页面的经典示例代码

示例1.演示异步获取一个网址的内容,处理后显示在OutPut这一Label上 using System; using System.Web; using S...

1975
来自专栏吴小龙同學

时间工具类TimeUtil

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30...

3036
来自专栏积累沉淀

Hive2.0.0操作HBase 1.2.1报错解决

首先看错  org.apache.hive.service.cli.HiveSQLException: Failed to open new session: ...

2319
来自专栏码匠的流水账

聊聊spring cloud的AbstractLoadBalancingClient

本文主要研究一下spring cloud的AbstractLoadBalancingClient

812
来自专栏菩提树下的杨过

winform中linkLabel的用法(示例)

private void Form1_Load(object sender, EventArgs e)         {             this...

1915
来自专栏闻道于事

商城项目整理(三)JDBC增删改查

商品表的增加,修改,删除,订单表的增加,确认,用户表的查看,日志表的增加,查看 商品表建表语句: 1 create table TEST.GOODS_TABL...

5425
来自专栏c#开发者

C# : row-clickable GridView and get and set gridview rows using JavaScript

Complete C# code: ---------------- using System; using System.ComponentModel; ...

2986

扫码关注云+社区