按钮设计-UI组件系列

时间：2023-10-01 16:42:01 | 来源：网站运营

时间：2023-10-01 16:42:01 来源：网站运营

按钮设计-UI组件系列：

​为什么按钮无处不在？

为了设计正确的交互，我们需要回顾物理按钮的历史和起源，它是如今所有数字产品中大量使用的UI组件的直接前身。按钮是惊人的。手指触摸正在运行的设备、汽车或系统，即使用户不理解底层的机制或算法。在《Power Button》一书中，雷切尔•普罗尼克追溯了当今按键文化的起源，并描述了按键如何成为数字指令的一种方式，这种方式承诺了轻松、谨慎和万无一失的控制。

“你按下按钮，我们来做其余的事，”——柯达相机通过一个朗朗上口的直接标语来吸引潜在的消费者。




即使在今天，这也是令用户着迷的地方。用一个简单的触摸让事情发生的瞬间满足。尽管有大量的新家用电器和其他设备转向了触摸屏控制，但物理按钮不会很快消失，它们所形成的行为习惯会影响按钮设计的直观性和易用性。

按钮和链接

按钮传达用户可以采取的行动。它们通常放置在整个UI中，比如对话框、表单、工具栏等位置。按钮和链接的区别很重要:

• 链接是用来当你导航到另一个地方，如:“查看所有”页面，“罗杰赖特”个人资料等。
  
• 按钮是用来执行一个动作，如:“提交”，“合并”，“创建新”，“上传”等。
  

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

为按钮创建正确的交互和样式是这个过程中最重要的部分之一。每个状态必须具有清晰的启示，将其与其他状态和周围的布局区分开来，但不应该彻底改变组件或创建大量的视觉干扰。

• 正常——将该组件交互并启用。
• 聚焦——用户使用键盘或其他输入法突出显示了一个元素。
• 悬停—当用户将光标置于交互元素之上时进行通信。
• 激活——按下状态表示用户已激活按钮。
• 进度/加载——当没有立即执行操作并告知组件正在完成操作时使用。
• 禁用——表示组件当前是非交互的，但将来可以启用。

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

最常见的是带有圆角的矩形按钮，它们很容易识别，并且在输入字段旁边看起来很好。为按钮选择正确的样式将取决于用途、平台和指南。以下是一些最流行的风格变化

风格传达了一个动作的重要性

风格主要用于区分更重要的动作和不太重要的动作。创建一个操作层次结构，在有大量选择的地方指导用户。通常，你可以有一个突出的按钮(该样式通常被称为“主”)和几个中等的“次”和低强调的“第三”动作。

有时不存在“默认”

通常，你希望将最常选择的按钮设置为“默认”(使用主样式)，并将其置于聚焦状态。这有助于大多数用户更快地完成他们的任务，并为他们指出正确的方向。

例外情况是，当所有的选择都是相同的，或者操作特别危险时，在这些情况下，你希望用户明确地选择按钮，而不是意外地选择按钮。

不要让我思考

不要让我思考，这是可用性工程师Steve Krug的一本书的标题。它所触及的许多要点之一是，让界面对用户来说是多么重要，而不是制造谜题或迷宫。基于多年来对各种设备和其他产品的使用，我们对按钮的外观和功能形成了一定的期待。一个大的偏离被认为是“标准”将会给用户造成延迟和混乱。

避免使用同一颜色的互动和非互动的元素。如果交互元素和非交互元素有相同的颜色，人们就很难知道该点击哪里。

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

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

一致性提高了速度和准确性，有助于避免错误。创建可预测性，帮助用户感觉在控制和有能力实现他们的目标在使用的产品时。当你创建主要的、次要的和第三的样式时，试着找到一些共同的元素，如颜色、形状等。不仅要在你的设计系统中保持一致，还要注意你设计的平台。

使按钮足够大，以保证可靠的交互

按下一个按钮应该是一个简单的任务，如果用户不能成功地按下一个按钮或在过程中不小心按下了相邻的元素，将会导致一个负面的体验和时间的损失。

对于大多数平台，考虑使触摸目标至少48×48 dp。这样大小的触摸目标，无论屏幕大小，其物理大小都在9mm左右。触摸屏的推荐尺寸至少是7-10mm。

对于图标按钮，确保触发区域超出了元素的可视范围。这不仅适用于移动设备或平板电脑，同样大小的推荐也适用于web上的指针设备(如鼠标)。

设计的可访问性

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

设计人员应该与开发团队紧密合作，以确保按钮能够与屏幕阅读器协同工作。按钮角色应该用于在用户激活时触发响应的可单击元素。添加role= " button "将使元素作为按钮控件出现在屏幕阅读器中。

手势被广泛采用

手势允许用户使用触摸与应用程序进行交互。使用触摸作为执行任务的另一种方式可以节省时间，并给予触觉控制。有些手势，如滑动来触发上下文动作、双击来点赞或长按，每天都在被广泛使用，但对于普通用户来说，它们仍然不是很明显。我建议使用它们作为执行高级用户操作的另一种方法。

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

你的按钮说了什么和它们的外观一样重要。使用错误的标签可能会导致用户的困惑，浪费时间，甚至可能导致一些重大错误。

一个好的按钮标签会让用户采取行动。最好使用动词，并将按钮的实际功能标记出来。这就像按钮在询问用户——“你想要(添加到购物篮中)吗?”或“您想(确认订单)吗?”

避免使用“是”、“否”或过于通用的标签，如“提交”。

好的/取消或取消好吗?不是很好

两者都只是选择，设计师可以就自己的喜好争论几个小时。

• 拥有OK动作首先支持自然的阅读顺序。如果我们知道这是最有可能选择的用途，这可能有助于节省一些时间。Windows将OK放在首位；
• 最后列出OK改进了流程。有些人可能会说Ok，因为下一个按钮会让用户向前移动。把OK放在最后，帮助用户在采取行动之前评估所有选项，并帮助避免错误和匆忙的决定。苹果把OK放在最后；

任何一种选择都有其有利的论据，没有一种选择可能会导致可用性灾难。我个人通常把OK放在动作列表的最后，比如对话框窗口(可能因为我主要是Mac用户)。

禁用按钮

以前每个人都是这样。在屏幕上停留几秒钟或几分钟，试图找出为什么你的进程会被一个禁用的按钮阻塞，以及你需要做什么才能让这个东西恢复正常)。禁用的控件用于指示组件当前是非交互的，但在将来可以启用。之所以使用禁用按钮，是因为将按钮从其原始位置移除并在以后的上下文中显示它会使用户感到困惑。

我建议尽量避免禁用按钮。最好总是启用它，如果用户没有提供一些必需的信息，只需突出显示空字段，或调出通知。