脱水版

1、矩形按钮是用户非常熟悉的按钮形状。使用其他形状的按钮，要注意保持一致性。阴影能使按钮凸显，容易被用户识别。

2、按钮上的文字应该意义明确，能够告诉用户这个按钮能做什么，或者点击后会发生什么。

3、APP按钮的位置最好符合平台的GUI指导书。web端产品按钮的位置最好通过测试来确定。

4、触摸屏按钮最小10mmX10mm，再小手指很难按准确。鼠标操作的按钮，尺寸可以减小。按钮之间的间距也要控制好。按钮用该有不同的状态：正常、获取焦点、按下、不可点击，以及动画效果。

5、使用颜色和对比让用户的注意力集中到最重要按钮上。当需要用户在主要和次要按钮之间进行选择的时候，主要按钮应该有更重的视觉重量。

6、按钮设计检查表：用户能否正确识别这个元素是按钮？按钮标签是否信息明确？用户是否可以轻松地找到这个按钮？有2个及以上按钮，主按钮是否有最强的视觉重量。

正文

按钮是交互设计的常见元素。 虽然他们可能看起来像一个非常简单的UI元素，它们仍然是最重要的一个元素。

在今天的文章中，我们将介绍设计高效提升用户体验控件的关键因素。 如果你想在原型设计和线框设计有点不同，你可以免费下载和测试Adobe XD（http://www.adobe.com/products/experience-design.html?scid=social66570666&adbid=1192390774137587&adbpl=fb&adbpr=341657335877606看起来还不错的样子，又喜新厌旧了）。

1使按钮看起来像按钮

用户如何知道一个元素是按钮？ 答案很简单。 视觉提示帮助人们了解这个元素是可点击的。 在可点击元素上使用适当的视觉符号，使它们看起来像按钮这点很重要。

1.1形状

使用正方形或圆角矩形的形状是比较保险的选择。 很久以前，矩形按钮就被引入数字世界了，所以用户对矩形按钮非常熟悉。

Windows 95开机页：注意每个按钮，包括著名的“开始”按钮，都是矩形的按钮。 图片来源：维基百科。

当然，你可以更有创意，使用其他形状（比如 圆，三角形，甚至自定义形状），但要注意，特殊的形状可能会有点冒险。 你需要确保用户可以轻松地识别特殊形状的按钮。

Android应用程序中浮动操作按钮（FAB）的形状就是带图标的圆圈。

无论选择什么形状，请确保在整个界面控件中保持一致性，以便用户能够识别所有UI元素并将其识别为按钮。

为什么要保持一致性？ 因为无论用户是否意识到，他们会记得细节。 例如，用户会将特定元素的形状关联为“按钮”。因此，一致性不仅有助于创建出色的设计，还能为用户提供更为熟悉的体验。

下面的图片完美地说明了这一点。 在app的一部分（例如系统工具中）中使用三种不同的形状，不仅让使用者感到困惑，而且设计上也不正确。

创造和实验设计方案没什么问题，但要保持设计的一致性。

1.2阴影和高光

阴影是有价值的线索，阴影可以告诉用户他们在哪个UI元素。 阴影使按钮从背景中凸显出来，容易被用户识别为可点击的元素，因为按钮凸起了，看起来好像可以按下去的样子。 即使有平面的按钮，仍然有这些微妙的线索的地方。

如果一个按钮投射出一个微妙的阴影，用户往往会明白这个元素是可以交互的。

2清晰地表达按钮的含义

用户会避免和界面中意义不明确的元素进行交互。 因此，界面中的每个按钮都应该有正确的文字或图标。 这个选择基于减少惊讶的原则：如果一个按钮让用户点击后产生高度的惊讶，那么可能需要改变文字或图标了。

可操作元素上的文字，例如按钮上的文字，应该总是告诉用户这个按钮将为用户做什么。 当用户预先知道按钮可以进行的操作时，用户会感觉更舒适。 诸如“提交”或类似于以下示例中的文字无法提供有关操作的足够信息。

避免设计让用户不知道界面能做什么的元素。 图片来源：uxmatters

行为按钮必须确认主要目的是什么，使得用户可以明确的知道当他们点击按钮之后会发生什么事情。这就使得按钮用什么动作行为去表明变得狠重要。例如：如果一个用户去登陆账号，一个按钮显示，“创建账号” 告诉他们按了按钮后的结果是什么。这是一个清晰且特殊的任务。这样明确的标签就像是一个即时帮助，给用户信心去选择正确的行为。

一个按钮的标签应该明确的说明用户按下后将发生什么。 图片出处：Amazon

3把按钮放在用户可以找到的地方

不要让用户去找按钮，把按钮放在用户可以轻松找到或者他们期望看到的地方。

位置和顺序

如果你设计一个APP，当你为按钮选择一个适当的位置和顺序的时候你应该遵循平台的GUI 的指导书。为什么？因为同样的设计符合用户的期望，节约了人们的时间。

图片出处：Apple

在基于web的应用程序的情况下,你应该考虑真正适合用户的位置。正确的方式是通过测试来确定的。

如果你在设计移动导航 这最需要注意按钮的最佳位置。这个文章The Golden Rules Of Bottom Navigation Design包含了这个话题。

4方便用户交互按钮

按钮的大小和视觉反馈在用户交互中起到至关重要的作用。

4.1大小和内边距

你应该考虑多大的一个按钮是和其他页面上的元素有关联的。同时，你需要确保你设计的按钮要足大到可以够人们进行交互。

小的触摸对象比大的更难点击：图片来源：Apple

当点击成为一个在你的应用或者页面里的主要输入方法，你可以依赖于麻省理工学院联系实验室研究按钮选择一个适当的大小。这个研究表明平均的手指垫点击的大小从10-14mm，指尖点击是8-10mm，设计一个10mm x 10mm 是一个最小的尺寸。当一个鼠标或者键盘作为主要输入方法的时候，按钮的尺寸可以稍微的减少，以容纳更多的UI。

10mm x 10mm 是一个最小的合适的触摸对象的尺寸。图片来源：uxmag

你应该考录按钮元素的大小，还有元素和元素之间的内间距，内间距帮助分开控制并且给予用户足够的交互空间。

这是一个内间距的例子。图片来源：Material Design.

4.2提供视觉反馈

这个需求不是关于按钮在用户看来是怎么样的；这是关于UI元素的交互体验的。通常来说，一个按钮不是一个状态，他是有复合的状态，并提供了当前状态下的最高优先级的一个可视性的反馈。这个有用的插图来自于Material Design，清晰的反应了按钮的不同状态：

确保你考虑了悬停、点击和活跃状态下的按钮。图片来源:Material Design.

这个动画显示按钮的行为。图片来源:Behance公司。

5在视觉上突出最重要的按钮

确保设计强调主要或最突出的行动。使用颜色和对比来让用户集中注意，把按钮放在突出位置,让用户最有可能注意到。

5.1Call-to-Action 按钮

重要的按钮（例如CTAs）意味着直接让用户去做你想让他们做的行动，创建一个有效的call to action 按钮，抓住用户的注意力让他们去点击，你应该用强烈对比的颜色。

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

添加一个颜色灰度UI简单而有效地吸引眼球

同样的规则适用于网站。如果你在下面的例子Behance公司看一看,吸引你的注意的第一件事是注册文字-动作按钮。颜色和位置,在这种情况下,比文字更重要。

最重要的CTA按钮在背景下脱颖而出

5.2视觉区分主要和次要按钮

你可以找到另一个抓住用户的注意力与按钮和对话形式的例子。当在主要和次要动作之间进行选择时，视觉的区别是一个有用的方法，帮助人们做出可靠的选择：

一个带有主要积极行动的按钮需要有更强的视觉重量。它应该是视觉占主导地位的按钮。

次要操作，（例如，像“取消”或者“回去”）应该有最弱的视觉重量，因为减少了视觉辅助行动的重要程度，最小化的避免了潜在的错误风险。进一步引导用户走向成功的结果。

注意的主要行动是在颜色和对比。图像来源：Apple

6按钮设计检查表

在每一个设计来说都是独一无二的,每一个设计也有一组共同之处。有一个好的设计检查表。确保你的按钮设计适合你的用户,你需要问几个问题：

1. 用户识别您的元素作为一个按钮吗? 思考如何设计让一个按钮看起来像一个按钮(使用大小、形状、阴影和颜色这一目的)。

2. 一个按钮的标签提供了一个明确的信息,点击后会发生什么? 这个经常比命名一个按钮要好,解释它干什么用，然后使用一个通用的标签，(如OK)。

3. 用户可以轻松地找到这个按钮吗? 你的按钮在哪里和因为它的形状,颜色和标签一样重要。考虑到用户的路径,把按钮放在用户可以很容易地找到它们或期望他们在的地方。

4.如果在你看来，你有两个或两个以上的按钮，(如对话框)。 与主操作按钮有最强的视觉重量? 明确两个选项之间的差别,通过使用不同的视觉重量为每个按钮。

看着提交按钮的视觉效果，它应该是视觉占主导地位。图片来源:Lukew

总结

按钮是创建一个平滑的用户体验的一个至关重要的元素，所以值得花精力去做最好的实践，一个快速回顾：

1.让按钮看上去像按钮

2.标签按钮为用户做了什么

3.把按钮放在用户可以找到或者他们期望的位置

4.使得每个按钮可以让用户很容易的交互

5.使得最重要的按钮清晰明确

当你设计你自己的按钮，从最重要的开始，并记住，按钮设计总是关于识别和清晰。

“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 Bottom Navigation Design“, Smashing Magazine

“11 Characteristics Of Persuasive Call-To-Action Buttons“, UserTesting

原文作者：Nick Babich

原文地址：https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/

更多文章请关注http://www.youjiaohu.com，或者关注微信公众账号友交互：

每篇文章都有脱水版总结，让你的阅读更高效。

关键字：产品经理, 产品设计, 按钮

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！