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

相关文章

来自专栏互联网杂技

UX 设计之——商品详情页

现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能...

3136
来自专栏BestSDK

如何为App图标挑选合适的颜色

image.png 在之前我已经研究过了从app描述、截图、名称到国家/地区的所有东西。最能勾起我兴趣的是app的图标,但苦于不知如何去对此进行有效的研究。 ...

2739
来自专栏企鹅号快讯

web前端开发工程师养成记

前端开发工程师 不仅要把握根本的Web前端开发技术,网站功能优化、SEO和服务器端的根底常识,并且要学会运用各种东西进行辅佐开发以及理论层面的常识,包含代码的可...

4485
来自专栏无原型不设计

技巧分享: 如何快速搭建一致统一的设计系统

以下内容由摹客(https://www.mockplus.cn)团队翻译整理,仅供学习交流,摹客设计系统是国内独家设计规范制作平台。

1272
来自专栏儿童编程

“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例

“心中有剑,落叶飞花,皆是兵器”是武侠世界中武功的超高境界。这句话用来形容Python动画也是非常合适的。从最原始的手工动画到现在的好莱坞动画大片,动画原理都一...

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

活动#1 秀出你的前端技能吧

我们会选出2位获奖者。1位是前端技能文章获得喜欢数最多的。另1位是前端管理小组选出写的最用心的。

991
来自专栏HTML5学堂

1分钟读懂HTML5技术

HTML5学堂:如何来理解HTML5技术是什么呢?我们从几个角度进行阐述,分别是狭义上的HTML5(就技术来讨论技术)、广义上的HTML5(平时技术会议、聊天时...

3598
来自专栏韩东吉的Unity杂货铺

零基础入门 44:使用图片字体第一步,制作字体

Hello,大家好,我是Jimin韩东吉,今天要给大家分享的是关于如何在项目中使用图片字体。

976
来自专栏数据小魔方

图表案例|关于全球可穿戴设备用户调查(麦肯锡)

今天要跟大家分享的是一个图表案例——麦肯锡关于全球可穿戴设备的用户调查! 原图表做的很精致,是麦肯锡一贯的蓝灰风格暗调调,在图表布局排版、图标使用等方面都有很多...

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

前端学习

前端主要包括 HTML,CSS,JavaScript。开始的时候,可以看熟悉下基本概念

1014

扫码关注云+社区

领取腾讯云代金券