[自译]Button设计快速指南

Button是交互设计中的一个常见元素,虽然它们可能看起来非常简单,但仍是很需要去着重设计的内容。

在今天的文章中,将会覆盖所有你需要知道的内容,如何去创建高效的控制来提升用户体验。

让Button看起来像Button

用户如何理解一个页面元素是Button?答案很简单,视觉线索帮助人们确定可点击性。在可点击的元素上,运用恰当的视觉符号可以让它们看起来像Button。

形状

将Button做成长方形或带上圆角是一个安全的设计,这取决于你的网站或者应用的风格。矩形Button很早就已经在数字产品中使用,用户对他们非常熟悉。

Windows 95首先运用:注意每一个Button,包括著名的“开始”Button,都有一个长方形的形状。图片来源:Wikipedia

你当然可以更有创意地去使用其他的形状,(圆、三角形、或自定义形状),但是你需要记住的是这其中会潜在风险。你需要确保人们可以很容易地识别每个不同形状的Button。

这里浮动操作Button(FAB),在Android应用中代表一个主要的动作,形状是一个圆形

无论你选择什么形状,一定要保持UI控件的一致性,这样用户将能够分辨并识别所有的Button UI元素。

为什么一致性这么重要?因为用户会记住细节,不论有无意识。例如:用户会将关联特定元素的形状识别为Button。因此,一致性可能并不会带来一个美观的设计,但是它能够给用户带来更熟悉的操作体验。

下图说明了这一点。在你的应用中某一部分使用三种不同的形状,这会让用户感到困惑,这并不是正确的设计实践。

创造和尝试新的设计并没有错,但请保持一致性

阴影和高光

阴影是有价值的线索,能够告诉用户它们正在寻找的UI控件。阴影使元素从背景中凸显出来,更容易被识别为可以tap或click的元素,作为操作对象它们可以被按下或者点击,使用扁平的Button表现出这一点,还有更多的微妙暗示。

如果一个Button投射了一个微弱的阴影,用户会倾向于认为这个元素可以产生互动

清晰的Button标签

避免界面元素没有明确的意义。因此,每个Button都应该有一个适当的标签或者icon。这是一个不错的观点,基于最小讶异原则:如果一个必要的Button有一个标签或者icon存在很高的歧义,那么可能需要去修改标签或者icon了。

清晰明确的标签

界面上可交互元素的标签,例如Button,应该从它将为用户做什么出发来考虑。用户会感到更加舒适,当他们理解操作Button之后会发生什么动作。模糊的标签例如“提交”或抽象的标签,并不能提供足够的信息。

避免设计元素让用户对他们所做的事情疑惑,图片来源:uxmatters

Button操作应该明确任务是什么,这样用户能够了解单击Button后会发生哪些事情。尽量使用动词来描述Button。例如,如果一个用户注册了一个账户,“创建账户”告诉用户按下后会发生什么,有清晰和特定的任务。这样明确的标签做到及时帮助,让用户选择正确的行动信心。

一个Button标签应该准确的告诉用户操作后会发生什么,图片来源:Amazon

将Button放置在用户可以找到的地方

不要让用户去搜寻Buttons,将Buttons放在用户可以很容易看见并获取的地方。

位置和顺序

如果你设计一款本地应用,你应该遵循平台的GUI规范,在合适的位置选择恰当的Button。为什么?因为应用与平台的一致性设计符合用户的预期,节约人们的时间。

图片来源:Apple

如果你的应用是基于web实现,你应该考虑真正适合用户的位置,正确的方法就是通过测试来确定。

如果你设计移动端导航,这需要去关注Button摆放位置的实践。这篇文章(the-golden-rules-of-mobile-navigation-design)涵盖了这一个主题。

让用户与Button交互更加方便

Button的尺寸和视觉反馈,在帮助用户交互的过程中扮演了重要的角色。

尺寸和填充

你应该通过与页面上的其他元素来考虑一个Button应该有多大。与此同时,你需要确保你设计的Button有足够的大小让用户去发生交互行为。

较小的接触目标会让用户操作困难,图片来源:Apple

当tap作为你的应用或网站的主要交互方式,你可以依据MIT Touch Lab的研究来选择一个合适的尺寸。研究发现,指身之间的平均大小是10-14mm,指尖是8-10mm,10mm是最小接触目标的大小。当一个鼠标和键盘是只要输入方式时,通过测量Button来减少UI上的操作密度。

10mm是一个合适的接触尺寸,图片来源:uxmag

你应该考虑Button元素的大小,可点击元素之间的填充内容,这样可以给用户提供出足够的呼吸区。

这是一个填充间隔的示例,图片来源:Material Design

提供视觉反馈

这个需求不是用户Button最初的样子,而是元素的交互体验。通常,一个Button不是一个状态对象。多态,向用户提供视觉反馈来指示当前状态英国是最高优先级的任务。这个有用的插图能够从Material Design来清楚的传达出不同的Button状态:

请确认你考虑清楚了hover,tap,active states状态,图片来源:Material Design


这个动画展现了Button交互中的行为,图片来源:Behance

视觉上突出最重要的Button

确保设计强调出重要和优先的行动。使用颜色对比让用户专注于行动,将Button放在用户可能注意到的突出位置。

文字动作Button

这是一类重要的Button,为了用户直接执行你希望他们执行的动作。创建一个有效的文字动作Button,抓住用户的注意力,吸引他们前来点击,你应该使用高对比度的颜色和背景来指引动作路径。

如果我们看看Gmail的界面,界面非常简单,几乎都是单色,除了“发送”Button,一旦用户写完了一个消息,他们马上就会注意到这个漂亮的蓝色Button。

在灰度UI上添加一个颜色能够简单有效的吸引眼球。

同样的规则在web设计上也适用,如果你看一看Behance的例子,这第一件事情就是你会被“注册”的Button吸引,它的颜色和摆放位置,会比文本内容更重要一些。

最重要的文字动作Button会和背景区分开来

视觉区分主要和次要的Button

你可以通过Button找到另外一种抓住用户注意力的方法。在区分主次行为时,通过视觉进行区分是一种有效的方法,帮助人们作出高效的选择:

一个Button如果是主动并且积极的,那么它需要更强的视觉重量。它应该是视觉上占主导的地位。

次要操作,例如“返回”和“取消”,应该是最弱的视觉重量,因为减少视觉辅助能够最小化犯错误的风险,并进一步的引导人们走向一个成功的结果。

注意主要操作在颜色和内容上更加强烈,图片来源:Apple

Button设计清单

每一个设计都是独一无二的,每一个设计之间也有共同之处。这就会有一个设计自查表,确保你的Button适应你的用户,你需要问这几个问题:

用户能够将元素识别为一个Button吗?思考如何设计可供性。让一个Button看起来像Button(大小,形状,阴影,颜色都可以完善这个目的)。

一个Button的标签提供了一个明确的信息,点击后会发生什么?一个好的标签会更好的阐述动作。

用户可以很轻松地找到这个Button吗?你页面上的Button所处位置与它们的形状,颜色,标签一样重要,考虑用户在页面间跳转的路径,通过Button可以很容易地达到他们的期望。

如果你有两个或两个以上的Button,是否与主要的Button有足够强的视觉重量?明确两个选项之间的差异,通过使用不同的视觉重量来实现。

看起来区别“提交”和“取消”,它必须在视觉上相对其他Button占主导地位,图片来源:Lukew

结语

Button是一个至关重要的元素,帮助创建平滑的用户体验,所以值得去关注它们的最佳实践,快速回顾:

让Button看起来像Button。

为用户添加标签让他们了解所做的事情。

将Button放在用户预期的位置上。

让用户方便与Button交互。

重要的Button清晰易于辨识。

当你设计你自己的Button时,从最重要的开始。记住,Button的设计总是围绕辨识和清晰。


扩展阅读

7 basic best practices for buttons,” UXmatters

the evolution of buttons in ux design,” Adobe

how button placement conventions reinforce user habits,” UX Movement

visual weight of primary and secondary action buttons,” UX Movement

the golden rules of mobile navigation design,” Smashing Magazine

11 characteristics of persuasive call to action buttons,” UserTesting

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

推荐阅读更多精彩内容