如何正确使用“按钮“这个控件

转自X·People.design

在实际工作中,按钮是一个必不可少的基本元素,它在人机交互过程中扮演着一个很重要的角色。但是它也经常被错用。

以下说明下怎么正确使用“按钮”这一控件。

1.使的按钮看起来像一个按钮

在用户与界面进行互动时,用户需要在非常短暂的时间中知道什么是“可点击的”,什么是“不可点击的”。在使用过程中,每个地方都需要用户进行理解。通常情况下,用户理解界面所需的时间越长,这就说明当前界面的可用性越差。

用户在理解某个元素是否可进行交互的时候,通常都是使用以前的经验和视觉装饰来理解这个元素的含义。这就是为什么使用适当的视觉装饰(例如:大小,形状,颜色,阴影等)可以使得元素看起来更像一个按钮是一件非常重要的手段的原因。

不过,在具体使用场景中,设计者设计出的按钮,其指示性很弱,导致他们不易被发现。

如果确实清晰的指示,并且用户在疑惑“可点击”和“不可点击”的状态,那么这不是一个好的设计方案。

对于移动设备用户来说,指示不明确更是一个很严重的问题。为了了解单个元素是否可进行交互,桌面用户可以在元素上移动光标并检查光标是否更改了齐状态。但是移动设备用户就没有这种机会了,因为要了解某个元素是否可进行交互,通常情况下用户就需要对其进行点击操作。

还有一种场景:你以为用户和你看到的是一样的

在这种场景下,设计人员有意不将按钮进行特殊标识,因为他们觉得这个交互元素对用户是显而易见的。在设计按钮时,需要明白一个规则:

你眼中的可点击性和用户的理解不同,因为你在设计这个元素的时候就知道每个元素能完成什么,而你的用户不知道这个。

当然,在按钮的设计上,你需要使用熟悉的按钮设计,这样可以减少用户的认知成本(毕竟你的用户在其它应用那里接受了“调教”)

以下是大多数用户熟悉的按钮事例:

1. 带有方形边框的填充按钮

2.  圆角填充按钮

3.  带有阴影的填充按钮

4.  线框按钮


在所有这些示例中,“带有阴影的填充按钮”设计对于用户来说是最清晰的。当用户看到物体的同时,他们立即知道可以按下物体。

对了,还有一种使用场景:忘记给按钮留白

不仅仅是按钮本身的视觉标识很重要。按钮附近的空白也使得用户更容易(或更难)理解它是否是一个可互动的元素。如下图,有些用户会将按钮识别成突出显示,而非一个可互动的元素。


作为用户,你无法分辨他是一个突出显示的内容盒子还是一个按钮。--X·People

2.将按钮放在用户希望找到它们的位置

按钮应该位于用户可以轻松找到或者用户心理预期存在的地方。如果让用户寻找按钮,那么他将忽略它的存在。当然,如果为了达到某种目的,是可以适当的弱化按钮(毕竟你本来就不想用户对其点击)

当然,要让用户能迅速找到按钮的位置,有一个很可靠的做法。

尽可能使用传统布局以及标准的UI模式

常规的按钮放置可提高发现性。使用标准布局或者众所周知的规范(比如:ios规范,安卓规范等;毕竟用户已经被这些规范调教过了,用户就不需要太多的学习成本),用户可以轻松理解每个元素的作用用途,即使它没有很抢眼的视觉元素。将标准布局与干净的视觉设计和充足的空白相结合,可使得布局更易于理解。

不要与您的用户一起玩寻宝游戏

3.标记出按钮的功能

具有通用标签或误导性标签的按钮可能会使得您的用户感到十分的沮丧。*写下按钮标签,清楚说明每个按钮的功能。*理想情况下,按钮的标签应清楚地描述其动作是什么。

用户应该清楚地了解单击按钮时会发生什么。让我举一个简单的例子。想象一下,您不小心触发了删除操作,现在您看到以下错误的设计。


含糊不清的标签“确定”并没有过多说明的操作按钮。

就这个窗口来说,尚不清楚“确定”和“取消”在此对话框中代表什么。大多数用户会问自己“当我点击‘取消’时会发生什么”毕竟步骤不可逆转。

永远不要设计仅由“确定”和“取消”两个按钮组成的对话框或表单。

与其使用“确定”标签,不如使用“删除”。这将使该按钮对用户的作用变得清晰。另外,如果“删除”操作有潜在危险,您可以使用醒目色“红色”说明这一事实。



“删除”可清楚说明按钮对用户的作用


该界面中有潜在危险的操作“确定取消”用醒目色显示。图片来源:Ios-app“12306”

4.适当调整按钮大小

按钮大小应反映此元素在屏幕上的优先级。大按钮表示更重要的动作。

优先按钮

使重要的按钮看起来像是最重视的按钮。始终尝试使主要操作按钮更加突出。增大其大小(通过增大按钮的大小,使其对用户而言显得更为重要),并使用对比色吸引用户的注意力。

腾讯柠檬使用尺寸和颜色对比将用户的注意力集中在“立即下载”CTA按钮上。图片来源:腾讯柠檬


使按钮对移动用户友好

在许多移动应用中,按钮太小。这通常会导致用户输入错误的情况。

左:适当大小的按钮。右:按钮太小。图片:苹果

麻省理工学院触摸实验室的研究发现,指垫的平均值在10-14mm之间,指尖的平均值在8-10mm之间。这使得10mm x 10mm成为最小的触摸目标尺寸。

图片来源:uxmag

5.注意顺序

按钮的顺序应反映用户与系统之间对话的性质。问问自己,用户期望在此屏幕上拥有什么顺序并进行相应的设计。

用户界面是和用户对话的方式

例如,如何在分页中对“上一个/下一个”按钮进行排序?逻辑上,使您向前移动的按钮应位于右侧,而使您向后移动的按钮应位于左侧。

 6.避免使用太多按钮

这是许多应用程序和网站的常见问题。当您提供太多选项时,您的用户最终会放弃选择。在您的应用或网站中设计页面时,请考虑您要用户采取的最重要的操作。

按钮太多


7.提供互动的视觉或听觉反馈

当用户单击或点击按钮时,他们期望用户界面将响应并提供适当的反馈。根据操作类型,这可能是视觉或音频反馈。当用户没有任何反馈时,他们可能会认为系统未收到其命令,因此将重复执行该操作。这种行为通常会导致多个不必要的操作。

为什么会这样呢?作为人类,我们在与物体互动后会期望得到一些反馈。它可能是视觉,听觉或触觉反馈,任何能被感知到的事实。

用户界面提供印刷机已注册的视觉反馈。图片:瓦迪姆·格罗莫夫(Vadim Gromov)

对于某些操作,例如下载,不仅值得确认用户输入,而且还需要显示进程的当前状态。

此按钮变换为进度指示器,以演示操作的当前状态。图片:科林·加文(Colin Garven)

结论

尽管按钮是交互设计的普通元素,但还是值得关注很多,以使此元素尽可能地好。按钮UX设计应始终围绕识别性和清晰度。

译与修改:X·People

这篇文章原文来自Nick Babich的《7 Basic Rules for Button Design》

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容