UI组件系列之按钮设计

为了设计正确的交互，我们需要回顾一下物理按钮的历史和起源，物理按钮是UI组件的直接前身，因此在当今所有数字产品中都大量使用。按钮设计很棒，即使用户不了解基本的机制或算法，手指的触摸也会使电器，汽车或系统处于运动状态。在《电源按钮》中，雷切尔·普洛特尼克（Rachel Plotnick）追溯了当今按钮文化的起源，并描述了按钮推动成为数字命令手段的方式，这种方法保证了轻松、周全和防错的控制。

“您按一下按钮，我们做剩下的事情。” —柯达相机通过醒目的直接标语吸引了潜在的消费者。

这句是我至今作为一名着迷用户的原因。轻松触摸即可使事情发生的即时满足感。尽管有成千上万的新家用电器和其他设备迁移到触摸屏控件，但物理按钮并不会很快消失，由它们形成的行为习惯会影响按钮设计的直观性和易用性。

按钮与链接

按钮传达用户可以执行的操作。它们通常放置在您的整个界面设计中，例如：对话框，表单，工具栏等。按钮和链接之间的区别很重要：

• 当您导航到另一个地方时，将使用链接，例如：“查看全部”页面，“ Roger Wright”个人资料等。

• 在执行动作时使用按钮，例如：“提交”，“合并”，“创建新的”，“上传”等。

  
  

按钮可以把它的状态传达给用户

为按钮创建正确的交互和样式是该过程中最重要的部分之一。虽然不同平台上的按钮不完全一致，但是也不会有很大的差别。

常规--表示该组件是交互式的且已启用。

聚焦--使用键盘或其他输入法传达用户已突出显示元素的信息。

悬停--当用户将光标置于交互式元素上方时的状态。

激活/点击--表示用户已轻按按钮。
进度/加载--在不立即执行操作并通知用户正在完成操作的过程中使用。

已禁用--表示该组件当前处于非交互状态，但将来可以启用。

按钮有各种颜色，形状和大小

最常见的是带有圆角的矩形按钮，这些按钮易于识别并且在输入字段旁边看起来不错。为按钮选择正确的样式将取决于设计目的、平台和准则。以下是一些最受欢迎的样式：

按钮的样式传达出操作的重要性

样式主要用于区分较重要的操作和不重要的操作。创建操作层次结构，该层次结构将指导用户进行多种选择。通常，您可以有一个突出的按钮（该样式通常称为“主要”按钮），以及几个中等的“次要”和“第三级”操作。

有时没有“默认”按钮

通常，您希望将最常用的按钮设置为“默认”（使用主要样式）并将其置于焦点状态。这可以帮助大多数用户更快地完成任务，并为他们指明正确的方向。

唯一的例外是，当所有选择都相等时或者操作特别危险时，在这种情况下，您希望用户能够明确地作出选择。

不要让我思考

“不要让我思考”是可用性工程师史蒂夫·克鲁格（Steve Krug）撰写的书的标题。它涉及的许多要点之一是，使界面对用户显而易见而不是引起困惑是多么重要。基于多年使用各种设备和其他产品的经验，我们对按钮的外观和功能有了一定的期望。与“标准”的较大偏差会给用户带来操作的延迟和困惑。

避免对可交互和不可交互的元素使用相同的颜色。如果可交互和不可交互的元素具有相同的颜色，则人们很难知道在哪里点击。

一致性提高了速度和准确性

“一致性是最强大的可用性原则之一：当事物始终表现相同时，用户不必担心会发生什么。” —雅各布·尼尔森（Jakob Nielsen）

一致性提高了速度和准确性，有助于避免错误。创建可预测性，以帮助用户掌控自己，并能够在产品中实现其目标。当您创建主要，次要和第三级按钮的样式时，请尝试查找一些常见元素，例如颜色，形状等。不仅要在设计系统内部保持一致，而且要考虑到要设计的平台的一致性。

使按钮足够大以实现可靠的交互

按下按钮应该是一个简单的任务，如果用户无法成功地轻按按钮或在过程中错误地轻按相邻元素，将会导致负面的体验并浪费时间。

对于大多数平台，请考虑使触摸目标至少达到48 x 48 dp。无论屏幕大小如何，此尺寸的触摸目标的物理尺寸约为9mm。触摸屏元件的建议目标尺寸至少为7–10mm。

对于图标按钮，请确保触摸目标超出了元素的可视范围。这不仅适用于移动设备或平板电脑，而且相同大小的建议也适用于网络上的指针设备（如鼠标）。

无障碍设计

对于每个组件都应重复此建议。目标区域大小是影响可访问性的因素之一。其他是字体大小，颜色和对比度。有大量工具可以帮助您轻松检查组件设计的性能。

设计人员应与开发团队紧密合作，以确保按钮与屏幕阅读器配合使用。按钮角色应用于当用户激活时触发响应的可单击元素。添加role =“ button”将使元素显示为屏幕阅读器的按钮控件。

手势被广泛采用

手势使用户可以通过触摸与应用程序进行交互。使用触摸作为执行任务的另一种方法可以节省时间，并提供触觉控制。虽然某些手势（例如滑动以触发上下文动作，双击点赞或长按）每天都在广泛使用，但是对于普通用户而言，手势的应用仍然不是很明显。我建议使用它们作为对高级用户执行操作的替代方法。

恰当的按钮文案会引导用户采取行动

按钮上的文案与外观一样重要。使用错误的文案可能会导致用户感到困惑，浪费时间，甚至可能导致一些大错误。

恰当的文案会引导用户采取行动。最好使用动词，并在按钮上标记其实际功能。比如，问用户—“您要（添加到购物篮中）吗？” 或“您要（确认订单）吗？”。
避免使用Yes ，No或过于通用的文案，例如提交。

确定/取消还是取消/确定？都可以

两者都是可用的选择，设计师们可以花几个小时来讨论自己的偏好。

• 把确定按钮放第一的设计师是遵循了自然阅读顺序。如果大部分这是用户最可能使用的选择，那么这样的顺序可能会节省一些时间。Windows把确定按钮放第一的位置。

• 确定按钮放在最后的位置可以改善操作流程。有人可能会认为“确定”是代表“下一步操作”的按钮将推动用户向前进行。把确定按钮放在最后，也是帮助用户在采取行动前评估所有选项，并帮助用户避免错误和仓促决策。Mac推出确定按钮放在最后。

  
  

任何一种选择都有其良好的论据，并且任何选择都不会造成可用性灾难。我个人通常将“确定”放在对话列表窗口等操作列表的最后（也许是因为我主要是Mac用户。）

禁用的按钮很糟糕

每个人都遇到过这种情况，被困在屏幕上几秒钟或几分钟，试图找出为什么提交按钮被禁用，以及需要做什么才能使按钮恢复可用。禁用的控件用于指示组件当前处于非交互状态，但将来可以启用。使用禁用的按钮是因为将按钮从其原始位置删除并在以后的上下文中显示可能会使用户感到困惑。

我建议尽量避免使用禁用按钮，尤其在b端产品的长表单的填写中。最好始终启用它，如果用户未提供某些必需信息，则只需突出显示该字段或给出提示即可。