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

相关文章

来自专栏MixLab科技+设计实验室

谈设计与技术,以WEB布局为例

本文基于“跨界”思维,以 WEB 布局为例,从3个方面,谈谈设计与技术的关系: 1 自适应布局与响应式布局 2 CSS 的布局特性演进 3 设计语言与 W...

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

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

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

826
来自专栏IT大咖说

手淘互动动效的探索

摘要 现在的营销活动,用一张简单的图片去吸引消费者已经远远不够,必须要有能给消费者带来视觉冲击的东西,或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从...

4458
来自专栏儿童编程

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

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

2172
来自专栏星流全栈

五分钟开发Uber应用主界面

1183
来自专栏企鹅号快讯

web前端开发工程师养成记

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

4305
来自专栏无原型不设计

网页设计排版中哪些元素最重要?

有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。在我看来,内容质量的好坏确实是能...

3284
来自专栏Web 开发

原生OR模拟

早期我们做PC端网页开发,就已经讨论过一次模拟控件(表单)和原生控件(表单),当初各种各样的理由,我们很推崇原生控件(标准化、语义化、渐进增强)

1000
来自专栏数据小魔方

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

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

3184
来自专栏理论坞

干货 | 字体组合十法则

设计或者艺术的世界,是没有什么一成不变的法则的。了解了基本的规则之后,我们就可以加入自己的想法,自由的去打破规则。今天就来看看现任设计师正在实践的10个字体组合...

854

扫码关注云+社区