Button是交互设计中的一个常见元素,虽然它们可能看起来非常简单,但仍是很需要去着重设计的内容。
在今天的文章中,将会覆盖所有你需要知道的内容,如何去创建高效的控制来提升用户体验。
让Button看起来像Button
用户如何理解一个页面元素是Button?答案很简单,视觉线索帮助人们确定可点击性。在可点击的元素上,运用恰当的视觉符号可以让它们看起来像Button。
形状
将Button做成长方形或带上圆角是一个安全的设计,这取决于你的网站或者应用的风格。矩形Button很早就已经在数字产品中使用,用户对他们非常熟悉。
你当然可以更有创意地去使用其他的形状,(圆、三角形、或自定义形状),但是你需要记住的是这其中会潜在风险。你需要确保人们可以很容易地识别每个不同形状的Button。
无论你选择什么形状,一定要保持UI控件的一致性,这样用户将能够分辨并识别所有的Button UI元素。
为什么一致性这么重要?因为用户会记住细节,不论有无意识。例如:用户会将关联特定元素的形状识别为Button。因此,一致性可能并不会带来一个美观的设计,但是它能够给用户带来更熟悉的操作体验。
下图说明了这一点。在你的应用中某一部分使用三种不同的形状,这会让用户感到困惑,这并不是正确的设计实践。
阴影和高光
阴影是有价值的线索,能够告诉用户它们正在寻找的UI控件。阴影使元素从背景中凸显出来,更容易被识别为可以tap或click的元素,作为操作对象它们可以被按下或者点击,使用扁平的Button表现出这一点,还有更多的微妙暗示。
清晰的Button标签
避免界面元素没有明确的意义。因此,每个Button都应该有一个适当的标签或者icon。这是一个不错的观点,基于最小讶异原则:如果一个必要的Button有一个标签或者icon存在很高的歧义,那么可能需要去修改标签或者icon了。
清晰明确的标签
界面上可交互元素的标签,例如Button,应该从它将为用户做什么出发来考虑。用户会感到更加舒适,当他们理解操作Button之后会发生什么动作。模糊的标签例如“提交”或抽象的标签,并不能提供足够的信息。
Button操作应该明确任务是什么,这样用户能够了解单击Button后会发生哪些事情。尽量使用动词来描述Button。例如,如果一个用户注册了一个账户,“创建账户”告诉用户按下后会发生什么,有清晰和特定的任务。这样明确的标签做到及时帮助,让用户选择正确的行动信心。
将Button放置在用户可以找到的地方
不要让用户去搜寻Buttons,将Buttons放在用户可以很容易看见并获取的地方。
位置和顺序
如果你设计一款本地应用,你应该遵循平台的GUI规范,在合适的位置选择恰当的Button。为什么?因为应用与平台的一致性设计符合用户的预期,节约人们的时间。
如果你的应用是基于web实现,你应该考虑真正适合用户的位置,正确的方法就是通过测试来确定。
如果你设计移动端导航,这需要去关注Button摆放位置的实践。这篇文章(the-golden-rules-of-mobile-navigation-design)涵盖了这一个主题。
让用户与Button交互更加方便
Button的尺寸和视觉反馈,在帮助用户交互的过程中扮演了重要的角色。
尺寸和填充
你应该通过与页面上的其他元素来考虑一个Button应该有多大。与此同时,你需要确保你设计的Button有足够的大小让用户去发生交互行为。
当tap作为你的应用或网站的主要交互方式,你可以依据MIT Touch Lab的研究来选择一个合适的尺寸。研究发现,指身之间的平均大小是10-14mm,指尖是8-10mm,10mm是最小接触目标的大小。当一个鼠标和键盘是只要输入方式时,通过测量Button来减少UI上的操作密度。
10mm是一个合适的接触尺寸,图片来源:uxmag
你应该考虑Button元素的大小,可点击元素之间的填充内容,这样可以给用户提供出足够的呼吸区。
提供视觉反馈
这个需求不是用户Button最初的样子,而是元素的交互体验。通常,一个Button不是一个状态对象。多态,向用户提供视觉反馈来指示当前状态英国是最高优先级的任务。这个有用的插图能够从Material Design来清楚的传达出不同的Button状态:
视觉上突出最重要的Button
确保设计强调出重要和优先的行动。使用颜色对比让用户专注于行动,将Button放在用户可能注意到的突出位置。
文字动作Button
这是一类重要的Button,为了用户直接执行你希望他们执行的动作。创建一个有效的文字动作Button,抓住用户的注意力,吸引他们前来点击,你应该使用高对比度的颜色和背景来指引动作路径。
如果我们看看Gmail的界面,界面非常简单,几乎都是单色,除了“发送”Button,一旦用户写完了一个消息,他们马上就会注意到这个漂亮的蓝色Button。
同样的规则在web设计上也适用,如果你看一看Behance的例子,这第一件事情就是你会被“注册”的Button吸引,它的颜色和摆放位置,会比文本内容更重要一些。
视觉区分主要和次要的Button
你可以通过Button找到另外一种抓住用户注意力的方法。在区分主次行为时,通过视觉进行区分是一种有效的方法,帮助人们作出高效的选择:
一个Button如果是主动并且积极的,那么它需要更强的视觉重量。它应该是视觉上占主导的地位。
次要操作,例如“返回”和“取消”,应该是最弱的视觉重量,因为减少视觉辅助能够最小化犯错误的风险,并进一步的引导人们走向一个成功的结果。
Button设计清单
每一个设计都是独一无二的,每一个设计之间也有共同之处。这就会有一个设计自查表,确保你的Button适应你的用户,你需要问这几个问题:
用户能够将元素识别为一个Button吗?思考如何设计可供性。让一个Button看起来像Button(大小,形状,阴影,颜色都可以完善这个目的)。
一个Button的标签提供了一个明确的信息,点击后会发生什么?一个好的标签会更好的阐述动作。
用户可以很轻松地找到这个Button吗?你页面上的Button所处位置与它们的形状,颜色,标签一样重要,考虑用户在页面间跳转的路径,通过Button可以很容易地达到他们的期望。
如果你有两个或两个以上的Button,是否与主要的Button有足够强的视觉重量?明确两个选项之间的差异,通过使用不同的视觉重量来实现。
结语
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