【第2612期】UI组件系列 - 按钮设计

前言

有了各种开源UI系统之后，前端有了更多DIY的权限。今日前端早读课文章由@弗兰翻译授权分享。

正文从这开始~~

为了设计出正确的交互，我们需要回顾物理按钮的历史和起源，它是当前所有数字产品中大量使用的界面组件的前身。按钮非常神奇，一个手指的接触就能设置一个应用，一辆车，或者是运动中的系统，甚至用户都没明白潜在的机制和算法。在《Power Button》中，Rachel Plotnick追溯了当今按钮文化的起源，并描述了按下按钮成为数字指令的方式。

“你按下按钮，我们处理剩余的事。”柯达相机通过吸引人和直接的标语吸引了潜在客户。

即使到今天，这也是吸引用户的地方。一个简单的触摸让事情产生及时满足感。尽管有大量新的家用电器和设备迁移到触摸屏控制，但是物理按钮还不会很很快消失，它所形成的行为习惯会影响你按钮设计的直观性和易用性。

按钮VS链接

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

• 链接是当你导航到另一个位置时使用，比如：“浏览全部”页面，“某人”个人资料等等。

• 按钮时当你执行一个操作时使用，比如：“提交”，“合并”，“建新”，“上传”等等。

按钮状态将其状态传达给用户

为按钮创建正常的交互和样式是该过程中非常重要的部分之一。每一个状态必须清晰的启示。以区别其他的状态和周边的布局，但是不应该大幅度的更改组件或制造更多的视觉噪音。

默认 — 表示该组件是可交互的并已启用。

聚焦 — 表示用户已经使用键盘或其他输入方式高亮（突出）了一个元素。

悬置 — 当用户把光标放置在了一个可交互的元素上，就会进行交流。

激活 — 或按下状态表示用户已点击了按钮。

加载中 — 当操作不是立刻执行时使用，表示该组件正在完成操作。

禁用 — 表示组件当前是不可交互的，但是之后可能启用。

按钮有各种颜色，形状以及尺寸

最常见的是圆角矩形按钮，它很容易辨认，在输入栏旁边看起来也很好。为按钮选择正确的样式将依靠其目的，平台，以及指南。以下是一些最受欢迎的样式：

• 带图标的填充按钮

• 填充按钮

• 描边按钮（幽灵按钮）

• 文字按钮

• 图标按钮

• 悬浮行为按钮（来源于MD）

• 切换按钮

• 多选按钮

• 展开按钮

样式传达行为的重要性

样式主要用于区分更重要的行为和和次要行为。创建一个行为等级，在有众多选中的地方指引用户。通常，你可以有一个突出的按钮（主要按钮），以及几个次要按钮（二级按钮）和弱强调的三级按钮。

有时不存在“默认”

一般来说，你想将最最常选择的按钮设为“默认”（使用主样式），并将其置为聚焦状态。这能帮助大多数用户更快完成任务，并为他们指明正确的方向。

例外的情况是所有的选择是平等的，或者行为是特别的危险。在这些情况下，你希望用户明确地选择该按钮，而不是意外地选择。

不要让我思考

“不要让我思考”是可用性工程师史蒂夫·克鲁格（Steve Krug）撰写的书的标题。它所涉及的许多要点之一是：使界面对用户是显而易见是非常重要的，而不是制造困惑和迷宫。基于多年使用各类设备和不同产品的经验，我们对按钮的外观和功能形成了一定的期待。当与被认为的“标准”偏差太大时，会给用户带来延迟和混乱。

避免为可交互和不可交互的元素使用一样的颜色，否则，用户很难知道哪里可以点击。

一致性提升速度和准确度

”一致性是最重要的可用性原则之一，当事情总是一样时，用户不用担心发生什么。“ — Jakob Nielsen

一致性提升速度和准确度，帮助避免错误，建立可预测性，以帮助用户感到可控并且能在产品中实现其目标。当创建主要，次要，以及三级样式时，尝试找到一些共同的元素，如颜色，形状等。不要仅仅在你的设计系统中保持一致，而是要为你设计的所有平台有清晰的认识。

确保按钮足够的大，以便进行可靠的交互

按下按钮应该是一个简单的任务，如果一个用户不能成功地点击按钮或者在这个过程中错误地点击旁边的元素，这会导致消极的体验以及时间的损失。

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

对于图标按钮，确保触摸目标超出元素的视觉范围。这不仅仅适用于手机或平板电脑，而且同样尺寸建议也适用于网页上的指针式设备，如鼠标。

无障碍设计

对于每个组件都应该重复此建议，目标区域尺寸是影响可达性因素之一。其他的有字号，颜色和对比度。有很多工具可以帮助你轻松地检查组件设计的执行情况。

设计师应该和开发团队紧密合作，以确保按钮与屏幕阅读器的配合使用。按钮角色应该用于可点击的元素，这些元素在被用户激活时触发响应。

手势变得相当普遍

手势可以让用户通过触摸和应用进行交互，使用触摸作为另一种执行任务的方式可以节省时间以及提供触觉控制。由于一些手势，比如滑动触发上下文操作，双击点赞或者长按，每天都被更广泛地使用，它们对普通用户来说仍然不是很明显。我建议用它们作为一种替代方式，为更高级的用户执行操作

好的按钮标签邀请用户采取行动

你的按钮所表达的内容与它们的外观一样重要。使用一个错误的标签能导致用户感到困惑，浪费时间，以及可能导致一些重大错误。

一个好的按钮标签会邀请用户采取行动。最好使用动词，并在按钮上标明它的实际作用。看起来像是按钮在问用户”你愿意（添加到购物车）吗？“或者”你想（确定订单）吗？“

避免使用是，否或者太通用的标签 — 比如提交。

确定/取消或者取消/确定？都可以

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

• 将”ok“行为放在前面，能支持自然阅读顺序。它能帮助我们节约时间，如果我们知道这是最有可能的选择。（Windows电脑）

• 将”ok“放在后面，可以改善流程。有人可能会说，”ok”作为下一步按钮会让用户向前走。将“ok‘放在最后，帮助用户在执行操作之前评估所有的选项，以及帮助避免犯错和冲动决定。（苹果电脑）

无论哪种选择都有很好的论据支持，而任何选都不可能导致可用性的灾难。我个人大多把”ok“放在执行清单的最后，在类似对话窗口的地方（可能因为我主要是Mac用户）。

禁用按钮不好

每个人都曾经遇到过这种情况。被困在屏幕上几秒或几分钟，尝试弄清楚为什么你的进度被一个禁用的按钮所阻挡，以及你需要做些什么能使它恢复可用。禁用控制被用于表明组件当前不可交互，但是在未来能启用。使用禁止按钮是因为将按钮从它的原生位置移除并在以后的环境中显示出来可能会使用户感到困惑。

我建议如果可以的话，避免使用禁用按钮。如果yon最好它一直是启用的，如果用户没有提供必要的信息，只需突出显示这个空的输入框，或者发出通知。

关于本文
译者：@弗兰
译文：https://zhuanlan.zhihu.com/p/373030909
作者：@Taras Bakusevych
原文：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

相关阅读，欢迎自荐投稿，前端早读课等你来。