控件与组件的区别_[翻译]丨关于按钮设计的那些事——UI组件系列

按钮是构建用户界面的主要模块之一

为何按钮无处不在？

为了设计正确的交互，我们需要追溯一下物理按钮的历史和起源，它是UI组件的前身，在当今所有数字产品中被广泛使用。

用户不需要了解基本的机制或算法，他们只需要用手指触碰一下，即可使家用电器、汽车或系统运作。

在《电源按钮》一书中，Rachel Plotnick追溯了当今按钮文化的起源，并描述了按钮实现数字化命令的过程，这种方法实现了轻松、慎重和简明的操作。

“你只需要按下按钮，剩下的交给我们” ——柯达相机通过引人注目的标语吸引了潜在的消费者

即使在今天，这也是吸引用户的原因：轻松触摸即可使事情发生带来即时的满足感。 

尽管有成千上万的新家用电器和其他设备开始使用触摸屏控件，但物理按钮并不会这么快就消失，由它们形成的行为习惯会影响按钮设计的直观性和易用性。

按钮VS链接

按钮展示了用户可以执行的操作，它们遍布整个UI中，例如：对话框，窗体，工具栏等。

一定要注意按钮和链接之间的区别。

当您导航到另一个地方时，将使用链接，例如“查看全部”页面，用户的个人资料等。在执行操作时则使用按钮，例如：“提交”，“合并”，“创建新的”，“上传”等。

按钮样式需显示其状态

为按钮创建正确的交互和样式是设计中非常重要的步骤。 

每个状态都必须有明确的形式，以使其在整体布局中能被轻易识别，也能与其他状态做明显区分。但不应彻底改变组件的样式或产生大量视觉噪声。

Normal 普通	表示该组件是可以交互的，并已启用
Focus 焦点	突显用户使用了键盘或其他输入设备选择了当前的元素
Hover 悬停	用户把光标置于交互式元素上方时的状态
Active / Pressed  激活 / 按下	表示用户已按下按钮
Progress / Loading 进度 / 加载	在未立即执行操作并通知组件正在完成操作的进度时使用
Diasbled / 禁用	表示该组件当前不可以进行交互，但未来可以启用

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

最常见的是圆角矩形按钮，这些按钮易于识别，且与输入框搭配起来视觉效果不错。选择哪种样式应取决于使用目的，设备平台和规范。 

以下是一些最受欢迎的样式：

按钮样式展现出行为优先级

样式主要用于区分主要行为和次要行为。创建多种行为层级，可以引导用户进行多种选择。 

一般情况下有一个突出的按钮，其样式一般被称为“Primary 首要”，以及几个展示“Secondary 次要”和“Tertiary 第三”的样式。

有时候没有“默认状态”

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

但是当所有的选项都一样时，或者当这项操作指向危险需要被警示时，你应该让用户能更准确地使用按钮。

不要让我思考

《不要让我思考》是可用性工程师Steve Krug的一本非常著名的书。书中涉及的诸多要点之一——对用户来说，界面应该显而易见，而不能让他们产生迷惑。 

由于我们有多年使用各种设备和其他产品的经验，所以我们对按钮的外观和功能是有一定的期望的，如果与这种“标准”产生较大偏差则会给用户带来延迟和困惑感。

尽量避免对交互式和非交互式元素使用相同的颜色，如果它们颜色相同，用户就很难辨别哪个是可以点击的。

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

一致性是最强大的可用性原则之一：当事物始终表现相同时，用户不必担心会发生什么。

——Jakob Nielsen

一致性提高了使用速度和准确性，有助于避免错误。建立可预测性，可以帮助用户在使用你的产品时能够有足够的掌控感，并能准确实现其目标。 

当你创建主要，次要和第三样式时，试着使用共同的元素，例如颜色、形状等。不仅要在设计系统内部，也要在各种设备中保持一致。

让按钮足够大确保交互的可靠性

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

对于大多数设备，触摸目标至少面积为48 x 48 dp。无论屏幕大小如何，该尺寸的触摸目标的物理尺寸约为9mm x 9mm，一般推荐触摸屏的控件元素至少为7–10mm。

对于图标按钮，请确保可触摸区域超出了元素的可视范围。这不仅适用于智能手机和平板电脑，同样建议用于网页端即使用鼠标的设备。

无障碍设计

每个组件都应该要注意到这一点。执行区域大小是影响可访问性的因素之一，然后是字体大小、颜色和对比度。有很多工具可以帮助你对你的组件设计进行检查。

设计应与开发紧密合作，以确保按钮与屏幕能协作。按钮的用途是，当用户产生一个点击的行为时，它可以触发一个响应。为元素添加按钮的角色(role=“button”)，将使它们变成可被用户操作的控件。

手势被广泛采用

手势使用户可以通过触摸的方式与应用程序进行交互。触摸作为另一种操作方式可以节省时间并提供触觉控制。

尽管某些手势，例如滑动以显示上下文，双击或长按，被逐渐广泛使用，但在普通用户中还不常见。所以我建议把它们作为高级用户进行执行操作的替代方式。

好的按钮能鼓励用户进行操作

按钮上的文本与它的外观一样重要。使用错误的文本可能会使用户感到困惑、浪费时间，并可能导致一些严重后果。

一个好的按钮会鼓励用户进行点击。文本中最好使用动词，并在按钮上对其实际功能进行标注。就像按钮在问用户——您要(添加购物车)吗？” 或“您要(确认订单)吗？”。

尽量避免使用“是”，“否”或过于通用的词语，而应该使用例如“提交”、“允许”这类明确的词语。

确定在前，还是取消在前？

答案是都可以，当然作为设计师，你可以花上好几个小时来讨论自己的偏好。

把“确定”按钮放在首位，是顺应自然阅读的顺序。当我们知道用户更大程度会选择该选项时，把它放在前面则可能替用户节省时间。Windows系统把“确定”放在前面。

把“确定”放在后面则可以改善操作流程。把它放在后面，会帮助用户在进行操作之前对所有选项进行评估，从而避免做出错误或仓促的决策。苹果系统把“确定”放在后面。

任何一种选择都有其好处，并且也不会对可用性产生严重影响。

我个人通常将“确定”放在对话框之类的操作列表的最后(也许是因为我主要是Mac用户。)

禁用的按钮很烂

每个人应该都遇到过这种情况——被卡在屏幕上几秒钟或几分钟，试图找出为什么当前进度被禁用的按钮阻止，以及需要怎样才能使操作恢复。

禁用的控件用于指示该组件当前处于非交互状态，但将来可以启用。使用禁用的按钮是因为，如果将其从之前的位置上删除，又在之后显示出来，会使用户感到困惑。

我建议尽量避免使用禁用的按钮。最好可以一直启用它，如果用户未提供某些必需的信息，则只需要高亮突显空白区域或进行提醒。

---

原文作者：Taras Bakusevych

翻译&校对：渡河的鱼

排版：Alex

---

在看点这里