编者按：一个合格的UI按钮需要具备什么样的素质？在很多设计师看来，这似乎不是什么大问题，但在实际设计中，UI按钮却有很多细节处理不当的情况。资深设计师TarasBakusevych的这篇文章《Button Design — UI component series》详细拆解了一个设计良好的UI按钮应该具备的“修养”。为了更好地设计界面，有时我们需要回顾一下历史。如果我们要设计一个按钮，或许我们不必回到整个UI界面的发展历史，但至少要回到数字界面诞生的时候看一看。按钮很重要。按钮很棒。在没有图形界面的时代，按钮被用来实现复杂的命令，算法和功能隐藏在一个按钮后面，使电器、汽车或??系统工作。在《Power Button》中，RachelPlotnick追溯了当今整个按钮文化的起源，认为按钮推动了数字技术，使我们生活中流行的复杂命令变得简单、方便和万无一失。“您只需按下按钮，剩下的交给我们。”-柯达相机通过这个醒目的标语吸引潜在消费者。即使在今天，方便的按钮设计也是吸引用户的原因。就像iPhone上的主页按钮。通过简单的触摸和按下来完成任务，人们享受着强烈的即时满足感。虽然数以千计的数码产品和家电开始加入触摸屏，但实体按键并没有消失，虚拟按键才是交互的基础设施。物理按钮在过去一个世纪塑造的体验和感知根深蒂固，它塑造的习惯、感知和文化塑造了设计的直观性和易用性。按钮和链接的区别按钮传达给用户直接可执行的操作，它们通常存在于整个UI界面系统中，从各种对话框、窗口到工具栏。按钮和链接在某些功能体验上很相似，但两者的区别很重要：导航到另一个位置时使用链接。例如，“查看全部”页面、用户“RogerWright”的个人资料等。执行特定操作时的按钮。如“上传”、“新建”、“合并”等。按钮会告诉用户它的状态需要使用正确的样式来创建按钮，而用于指示按钮状态的不同样式设计是按钮设计过程中不可避免的任务。每个状态都必须有明确的“可供性”，以便与其他元素和布局区分开来。然而，差异化设计不会造成分散注意力的效果和产生视觉噪音。正常状态-表示按钮是交互的和可用的。focusedstate-通过高亮告诉用户它已经被键盘或其他方式选中——表示用户按下了按钮（并且还没有按下完按钮）Loadingstate——表示操作正在加载，组件isreflecting,buttheoperationhasnotbeencompletedDisabledstate——表示当前组件处于非交互状态，但在Buttons可以被启用后，会出现各种颜色、形状和大小。圆角矩形按钮是最常见的按钮。这些按钮放在输入框旁边，非常容易识别，特别常见。但是，按钮的样式和大小可以有很大差异。使用哪种风格取决于你想做什么、你使用的平台以及你需要遵循的规范。以下是一些最常用和流行的样式：样式可用于显示按钮的重要性样式优先级用于区分按钮和操作的重要性。通过样式可以区分代表背后的操作的重要程度，从而引导用户做出各种选择。通常，最重要的按钮可以使用最高优先级的样式，通常是“主按钮”，有几个次优先级按钮，而其他的很少使用，优先级低，不推荐使用。按钮，使用三级样式。有时按钮没有“默认状态”通常，我们会为用户最常使用的按钮使用“默认”状态，也就是通常所说的聚焦状态，或者主样式，可以帮助用户完成任务更快地引导他们朝着正确的方向前进。但也有例外，比如当所有选项都相等或等价时，或者当所有操作都存在潜在风险时，这时候，你可能会使用两个子优先级按钮样式来渲染所有按钮。“Don'tmakemethink”“Don'tMakeMeThink”是可用性大师SteveKrug的经典设计入门书中提到的一种设计精神。它涉及的点很多，但核心思想是让设计显而易见，不要混淆用户。这是基于多年在多种设备和各种产品设计中积累的经验。我们对按钮的功能和体验都有期待和基本的了解，与我们平时看到的按钮差别太大，会让人一头雾水。避免对交互元素和非交互元素使用相同的颜色，否则用户很难确定点击的位置。一致性设计可以提高交互的准确性和效率“一致性是一个非常强大的可用性原则：当事物的表现和反馈一致时，用户就不会担心出现意外。”-JakobNielsen一致性提高了用户交互的速度和准确性，有助于避免错误。这在很大程度上使设计具有可预测性，并且用户知道他们可以做什么。当你创作三种不同层次的风格时，请尽量使用相对一致和连续的设计。该按钮在整个系统内高度一致，并考虑到可能使用它的其他平台。使按钮足够大以确保交互可靠性。按下按钮应该是一个简单的任务。如果用户在操作过程中无法成功点击按钮或旁边的元素，则会造成负面体验并浪费时间。对于大多数平台，尽量让按钮尺寸保持在48×48dp以上（最早的iOS上按钮的最小尺寸是44×44dp）。无论屏幕尺寸如何，触摸按钮控件的物理触摸尺寸至少应为9毫米。在触摸屏上，按钮控件的可见尺寸应在7到10毫米的范围内。对于图标按钮，尽量使其触摸尺寸大于其可见尺寸。这不仅适用于移动触摸屏，也适用于普通的Web和桌面UI。无障碍设计应为每个组件保持足够的可达性。严格来说，是遵循WCAG标准，在颜色、排版等细节上，保证有视觉障碍的用户也能轻松使用。有大量在线工具可以帮助您测试设计的可访问性并确保可访问性。设计人员应与开发人员密切合作，确保按钮与屏幕阅读器一起工作，在代码中添加role=“button”，确保元素调用屏幕阅读器控件，并让视障用户可以访问所有内容。记得将手势考虑在内手势交互现在是触摸交互的基础。滑动、双击、长按等交互方式已经被用户广泛接受，每天使用频率很高。但对于普通用户来说，还是不是很明显，因为手势默认是“隐形”的。我建议提供对手势交互的支持，但不是唯一的交互方式，仍然基于显式按钮交互。好的按钮标签可以推动用户操作按钮上的标签文本与其视觉外观一样重要。使用错误的标签文本可能会造成混淆、浪费时间并导致问题。这就是为什么微文案的重要性在今天被反复提及的原因。好的按钮文字也是经过精心设计的。最好使用动词来提供趋势指导，并表明其实际功能。就像按钮询问用户“你想添加（到）购物车吗？”或“（你想）确认订单吗？”避免使用可能含糊不清的简单文本，例如“是”和“否”。“取消/确认”还是“确认/取消”？你能决定哪一个在左边，哪个在右边吗？一些设计师可能会花费数小时来努力和确认。先说“确认”。如果我们知道“确认”可能是大多数情况下的选择，而且这样的放置可以节省用户交互时间，那么就可以这样放置。将“确认”放在末尾。有人认为把“Confirm”放在最后可以鼓励用户点击。通常情况下，将其放在这样的位置可能会鼓励用户衡量并考虑是否点击。在苹果的设计中，“确认”往往放在最后。事实上，这两种使用方式都有很好的论据，而且这两种选择都不会造成灾难性的后果。我个人倾向于将“确认”放在最后（可能是因为我是Mac用户）。禁用按钮令人抓狂。每个人都曾一度被卡在一个页面上一段时间，试图找出阻止他们前进的表格出了什么问题。禁用状态下的按钮让人抓狂，虽然如果正确触发之后还可以启用，但眼下就惨了。结合信息引导和错误描述，让按钮保持正常状态，让“可点击”状态出现，会让用户更舒服。我建议尽可能避免按钮的禁用状态。结语按钮的使用技巧有很多，这里只介绍最常用和容易被忽视的技巧。在UI控件的设计和使用上，这些年逐渐完善成一套“设计礼仪”，在设计时更需要注意。
