介绍了按钮设计的七个基本原则，包括:加强按钮、突出按钮位置、突出重要按钮、合理排列按钮、为按钮匹配解释标签、如果用户不想做任何事情就不排列按钮、弱化负面按钮。

这项研究没有什么革命性。

其实从HTML4开始，按钮的创建并不是特别困难；尽管如此，在各种产品中还是很容易发现一些体验不好的按钮设置，所以我们在本专栏做了深入的研究。

首先，加强按钮

如图1所示:加强按钮的边缘或者在按钮下添加阴影，使按钮更具视觉增强，将按钮与背景分开；而且好像是吸引人点击的(想象一下物理按钮是怎么吸引用户点击的)。

图二:如果单词周围没有形状和阴影，就没有办法感知它是一个按钮；而且，一个词没有办法给出足够的视觉线索来吸引用户点击；

图3:如果你把一个按钮设计得太大，它将不再看起来像一个按钮。图中有四个按钮，一个主按钮和三个辅助按钮，但是主按钮太大了，看起来不像按钮。

图3中的按钮太大，需要调整这个交互模式。然后我们可以看到图4中减少按钮的结果，这使得用户很容易区分主按钮和辅助按钮。

虽然在我看来:按钮还是要保留按钮的基本属性。

但我们也知道，很多网站设计师担心一个凌乱的老按钮会破坏他们整体的设计风格。

当然，他们可能是对的:我们希望主操作按钮设计得好，包含基本的按钮属性；对于用户来说，这是最重要的地方，所以我们需要让用户感受到具有按钮属性的视觉快感。

第二，突出按钮位置

用户体验中最有争议的一个问题是:“确定按钮是在取消按钮的左边还是右边？”。

关于按钮的组合也有同样激烈的争论，比如研究上一个按钮和下一个按钮的组合设计。你在很多地方都能找到这样的论点，观点也往往不一样。

以我的经验，我没有设计过只包含确认和取消按钮组合的对话框或弹出窗口。同时我也没见过只有两个按钮的页面，上一个按钮和下一个按钮。在网页中，总是有其他元素，如文本、图像或其他元素。

用户在找到最重要的操作按钮之前都在看什么？是什么促使他们取消或返回？

一般来说，在一个网页上，设计师会安排特定的内容来吸引用户的注意力，并触发他们采取行动。您必须使用文本或图像来指导用户操作，并在那里放置相应的按钮。

在表单中，用户只需选择或单击一个区域，因此请将主操作按钮“下一步”、“确定”或“发送”放在表单最后一个字段的左端附近。

所以你要问我为什么。图6我们可以看到隐藏在各种奇怪地方的按钮。

下一个按钮隐藏在页脚，还有一个下一个按钮隐藏在页面的横幅上，靠近标志。

第三，突出重要按钮

在现有的产品中，我们经常会在界面上看到一堆类似的按钮，供用户选择。这个过程相当困难，需要消耗用户的认知成本。

为什么不给用户一个提示让主按钮突出呢？

让它变大或者看起来更重要，为用户创造一个更大的点击目标。

或者尝试一种更传统的方法:使用更亮的颜色作为主动作按钮，使主按钮可见。

第四，将按钮按合理的顺序排列

如果主按钮需要放在用户的下一个查看位置，其他按钮应该放在哪里？

显然，您应该隐藏其他按钮，以便用户无法轻松找到它们。

虽然这是一个很好的建议，但是如果不考虑其他设计因素，可能会出现如图9所示的错误布局。

对于从左向右阅读的语言，上一个按钮应该总是在下一个按钮的左侧，所以我们给出的解决方案是重新排列字段和按钮，如图10所示。

另一种方法是增加页面的左边距，并在其中放置上一个按钮。

5.将按钮与解释标签匹配

几天前，我正焦急地试图将我的演示文稿上传到我的Dropbox帐户。

弹出图11所示的消息:给我一个标签按钮“真棒”！

那是什么意思？按钮应该怎么用？我怎样才能实现我的目标，让文件存到我需要的存放的地方？

这种交互模式违背了最佳体验设计的原则:在按钮上放置解读标签。

相信我们大部分人都经历过类似的冷门消息类弹出框，告诉我们一些严重而可怕的错误，希望大家可以点击OK。

这个体验不好。收到这样的坏消息我也不想点OK。当然，我们不能保证用户会看到按钮上的标签。

在我的演讲中，我提到了三项研究，它们表明:

如果你在告警提示时放置了错误的按钮，一些用户不会阅读按钮的标签，而是会单击按钮；一些用户则会阅读这些标签，因此可以通过编写每个按钮释义标签来帮助用户快速理解；如果你发现自己陷入了一个争论中，比如说，取消操作应该在一个对话框中，记住你需要用它的功能性意思来标记按钮。

6.如果用户不想做任何事情，请不要排列按钮

我浏览了很多表单，想找一个合适的用例。

为了测试是否适用，我试着填了一下，但是我实在不想注册网站，也不想申请贷款或者其他用途的表格，所以这个时候有一个重置或者取消按钮比较方便。

我曾经写过一篇文章，题目是《重置:HTML的一部分是为我发明的。文章中提到

“如果您为从事表单设计的客户进行设计，请确保包含重置按钮。如果是为别人设计的，问问自己，他们是不是真的想知道所有填好的内容。”

写这篇文章的时候，我意识到我已经很久没有看到表单上的重置按钮了，甚至到了今年年底，取消按钮越来越少了。

我截取了最近遇到的所有表格和我2012年的案例库。没有重置按钮，只有大约10%的表单有取消按钮。但是对于大约一半的表单，我认为用户需要取消它们。

我也看到很多按钮只是重复同样的操作，所以用户在填表的时候会觉得没有任何进展。比如我最近开始办理信用卡，如图13所示，显示了前三步的主要操作按钮，然后没有一步给我提供需要填写的表格，所以很快就不耐烦了，以至于连一个问题都没填就放弃了申请。

当然，你可能会认为这是一个微不足道的问题。你还记得关于“价值3亿美元的纽扣”的研究吗？在这个过程中，用户会遇到两种选择:“登录”按钮和“注册”按钮，但他们要么不记得自己的登录凭据，要么不想注册，所以这两者都不是用户的选择。用户想做的是改变注册继续进行，从而实现销量的大幅增长。

七、削弱消极按钮

虽然我反对放置用户不想操作的按钮，但有时候还是需要提供否定按钮，比如取消订单。

这似乎是我在案例库中找到的一个合理的“取消”按钮。截图来自一个网站。该网站的目标用户是非熟练用户，他们将进行相当大的购买并支付长期月付款，因为这些用户不知道他们可以通过单击关闭窗口的关闭按钮来取消交易。

如果真的需要放置负面按钮，我们的建议是让它们比主动作按钮更难找到，比如让它们看起来不那么像按钮或者更小，甚至变成链接。

如果用户想取消或者执行其他负面操作，需要先找到这些按钮，这些按钮与主操作按钮是分层的，这样那些愿意继续执行任务的用户就不会陷入可怕的错误。

八.摘要

在我们的书《有效的形式:为可用性设计网络形式》中，格里·加夫尼和我将形式分为三个层次:关系、对话和外观。

在她的《放下文字:有用的网络内容》一书中，建议我们把网页看作是用户和网页之间的对话过程。按钮在人与网页的对话中起着至关重要的作用。

当用户第一次跳转到包含表单的页面时，一个合适且容易识别的主操作按钮有助于显示他的任务范围——一个带有即时按钮组合的短表单是极好的；如果折叠处没有按钮，长表单可能不太好。当然要看关系，也就是看用户的目标和问题。

点击一个按钮意味着我的回合结束，这是任何成功对话的关键因素。流畅的互动可以让对话顺利进行。如果出现一些小问题，比如要求用户寻找按钮，这会导致对话中断，但最坏的情况是失败。

从对话的角度来看:在主操作按钮上标注“提交”是否有助于提升体验，可能就像在按钮上标注“发送”和“提交”来说明它们的功能。

对于精通技术的高手，明白数据会被快速发送给处理器处理；对于其他人来讲，可能和ESC按钮的释义一样；对于少数敏感的人来说，标签似乎在谈话中制造一种不愉快的语气，因此会中断对话。