一个UI按钮的自我修养

编者按：一个合格的 UI 按钮到需要具备么样的素质？在很多设计师眼里似乎并是一个太大的问题的，但是在实际设计的时候，UI 按钮的细节处到位的情况却皆是。来自资深设计师 Taras Bakusevych 的这篇章《Button Design — UI component series》 ，详细拆解了一个设计良好的 UI 按钮，应该有哪些「自我修养」。

为更地设计互界面，有的时，我们需要重新回顾一下历史。想要设计一个按钮，也许我们不用完整地回溯整个 UI 界面的展历史，但是至少要回到数字界面诞生之前看一看。

按钮重要。按钮棒。

在没有图形化界年代，使用按钮来实现复杂命令，将算法和功能隐藏在个按钮背后，让电、或者系统发挥作用。在《Power Button》书，Rachel Plotnick 回溯了如今个按钮文化起，在书，他认为是按钮动了数技术，让复杂命令以以轻松、便捷防呆，在我们生活普及。

「你需要按下按钮，剩下交我们。」——柯相过这醒目Slogan吸引潜在消费者。

即使在今，足够便捷的按钮设计，也是吸引用户的原因。比 iPhone 的 home 键。通简单的触摸、按下来完成任务，让人享受到强烈的即时满感。尽管成千上万的数字产品和家电开始加上触摸屏，但是物理按钮还没有消失，而虚拟的按钮更是互的基础设施。按钮在去一个世纪里所塑造的验和认根深蒂固，它所塑造的习惯、认和文化影响着设计的直观和易用。

按钮和链接的差别

按钮传达给用户的是直接的执行的操，它们通常存在整个 UI 界面系当中，从各种对框、窗口到工具栏。按钮和链接在某功能验上很接近，但是两者之间的区别是很重要的：

• 导航到另外一个位置的时候使链接。如「查看全」页面，户「Roger Wright」的个人资，等。
• 执行特定操的时的按钮。比「上传」、「新建」、「合并」等等。

按钮会将它的状态告诉用户

创按钮需要使用正确样，而用来昭示按钮状态不样设计，是按钮设计过程绕不过工作。状态都必须有明确「可供性」，这样才能让它和其他元素、布局区分开来。是，异化设计又不能造成喧宾夺主效，制造视觉噪音。

• 正常状态——表示按钮是互的，并且用的。
• 聚焦状——通过高亮的形式告诉用户，它已经被键盘或者其的方式所选中
• 悬状态——用户使用标或者其他元素，于其上时候，显示这样状态
• 激活状态——表示用户已按下按钮（且还未结束按按钮的动作）
• 载状态——表示操作正在载中，组件正在反映，但是操作还未成
• 禁用状态——表示当前组件处非互状态，但是之以被启用

按钮有各种不同的色彩、形状和大小

圆角矩形的按钮常见的按钮，这些按钮被置于输入框旁，非常易于识别，特别常见。但按钮的样式、小变化范畴非常，使用什么样的样式，取决于什么，所用的平台，以及需遵循的规范。下面一些常用的、受欢迎的样式：

样式可以用来呈现按钮的重要性

样优先级是用来区分按钮和操作要性。过样，可以区分出代表背后操作要性层级，从而指引用户进多选择。常，你可以让最要按钮使用优先级最高样，这按钮常是「主按钮」，时搭配几个优先级按钮，而其他很少使用、优先级不高、不荐使用按钮，则使用第三级样。

有时按钮没有「默认状态」

通常，会将用户最常用的按钮使用「默认」状，也就是常说的聚焦状，或者是主式，这可以帮助用户更快完成任，指引正确的方向。但是也有例外的情况，比如所有选择都是、对等的情况下，或者说所有的操作都是有潜在风险的情况下，这个候，你可能会使用个次优先的按钮式来呈现所有按钮。

「不要让我思考」

「Don’t Make Me Think」 是用大师 Steve Krug 经典的设计门书中所提到的一种设计精神，它涉及到许要点，但是核心思想是要让设计显而易见，不要让用户感到迷惑。是基年横跨设备、各种产品设计之沉淀下来的经验。我们对按钮的功能和验是有期望和基础认的，与我们通常所见的按钮差别太大，让人感到困惑。

避免对互式和非互式的元素使用相同的颜，否则用户很难判断到底哪里以被点击。

一致性设计可以提高交互准确度和效率

「一致性是非强大的可性原则：当事物的表现和反馈保持一致的时候，户会担心会有意外发生。」——Jakob Nielsen

一致性了户交互的速和准确性，有助于避免错误。这在很大程上设计具备了可预测性，户够清楚自己够做到么。当你创建种同层级的样式的时候，请尽量使相对一致、具有延续性的设计，按钮在整套体系是一致的，并且要兼顾到他可会到它的平台。

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

按下按钮应该一简单的任务，如果用户无法功轻点按钮，或者操作过程中无从旁的元素，这会负面的体验，并且浪费时间。

对于绝多数平台，请尽让按钮的小 48×48 dp 以（早 iOS 按钮的小尺寸 44×44 dp）。无论屏幕小如何，触摸按钮控件的理触摸尺寸应该至少 9 mm ，触摸屏幕，按钮控件的可视尺寸应该 7~10 mm 这范畴内。

对于图标按钮，尽量它的触摸尺寸大于它的可视尺寸，这仅适于移端触摸屏，对于普通的页和桌面端 UI 是一样。

无障碍设计

对于每个组件，都应该保持足够的可访问性，严格意义上来说，就是遵循 WCAG 的标准，在色彩、布等细节上，确保有视觉障碍的户可轻松地使他们。有大量的在线的工具可帮你测试设计的可访问性，确保无障碍。

设计师应当和开发者紧密合作，确保按钮可和屏幕阅读器可配合使，添 role = “button” 到代码当中，确保元素可调屏幕阅读控件，视障户可使这一切。

记得兼顾手势操作

手势交互如今已经是触摸交互的基础了。诸如滑、双击、长按这样的交互已经被户广泛接受，并且每天都在频地使。但是对于普通户而言，它们依然是很明显，因为手势是默认「隐形」的。我建议对于手势交互供支持，但是作为唯一的交互方式，依然显性的按钮交互作为基础。

优秀的按钮标签能够促进用户操作

按钮的标签文本它的视觉外观一样重。使用错误的标签文本会让人感到困惑，会浪费时间，会问题。

这也什么微文案的重性如今被一再提高。好的按钮文本同样被精设出的。好使用动词提供趋势引导，并且标注出它的实际功能。就按钮问用户「您（将商品）添加购车吗？」或者「（您）确认订单吗？」

避免使「是」和「否」这样可会存在歧义的、简单的本。

「取消/确认」还是「确认/取消」？都可以

「确认」和「取消」到哪个在左，哪个在右？有的设计师可会好几个小时来纠结和确认。

• 将「确认」置于首。如果我们知道「确认」可能多数况下的选择，并且这样的置能够节省用户交互时间，那么可以这么。
• 将「确认」置于末位。有人认为将「确认」置于末位够促进户点击。更多的时候，置于这样的位置可会促进户衡量和思考是否要点击。苹果的设计当中，「确认」被置于末位。

其实哪使用都有良好论据支撑，并任何选择都不会是灾难性。我个倾于将「确认」于末位（这可能是为我是个 Mac 用户）。

禁用按钮令人抓狂

个都或多或少会碰到这样情况，被卡在页上好阵子，想搞楚到底表单哪里填了导致法进。禁用状态下按钮令抓狂，虽然后续如正确触发可以启用，是此刻是让糟心。结合信息引导和误说明，让按钮保持正常状态，让「可击」状态呈现出来，会让用户更舒适。

我议尽量避免使用按钮禁用状态。

结语

按钮使用有很多技巧，是这里是最常用也最容易忽略部分。在 UI 控件设计和使用上，这么些年已经逐步地完善成为了套成型「设计礼仪」，在设计时候需要多加注意。