为了设计正确的交互功能，我们需要回顾一下物理按钮的历史和起源，物理按钮是UI按钮组件的前身，在如今的所有数字产品中都大量使用。按钮很棒。即使用户不了解基本的机制或算法，手指的触摸也会使电器，汽车或系统处于运动状态。在《电源按钮》中，雷切尔·普洛特尼克（Rachel Plotnick）追溯了当今按钮文化的起源，并描述了按钮推动成为数字命令手段的方式，这种方法保证了轻松，谨慎和可靠的控制。

“您按一下按钮，我们做剩下的事情。” —柯达相机通过醒目的直接标语吸引了潜在的消费者。

即使在今天，这也是吸引用户的原因。轻松触摸即可使事情立即发生。尽管有成千上万的新家用电器和其他设备迁移到触摸屏控件，但物理按钮并不会很快消失，由它们形成的行为习惯会影响按钮设计的直观性和易用性。

按钮与链接

按钮传达用户可以执行的操作。它们通常放置在整个UI中，例如：对话框，窗体，工具栏等。按钮和链接之间的区别很重要：

• 导航到另一个位置时使用链接，例如：“查看全部”页面，“ Roger Wright”个人资料等。

• 执行动作时使用按钮，例如：“提交”，“合并”，“创建新的”，“上传”等。

按钮应当将其不同状态传达给用户

为按钮创建正确的交互和样式是该过程中最重要的部分之一。每个按钮的状态都必须有明确的视觉表达，以使其与其他状态的按钮和周围的布局区分开来，但不得彻底改变组件或产生大量视觉噪声。

正常-表示该组件是交互式的且已启用。

焦点-使用键盘或其他输入法传达用户已突出显示元素的信息。

悬停—当用户将光标置于交互式元素上方时进行通信。

活动-或按下状态表示用户已轻按按钮。

进度/加载-在不立即执行操作并通知组件正在完成操作的过程中使用。

已禁用-表示该组件当前处于非交互状态，但将来可以启用。

按钮有不同的颜色和形状、大小

不同风格的图标所传达重要性不同

样式主要用于区分较重要的动作和较不重要的动作。创建动作层次结构，该层次结构将指导用户进行多种选择。通常，你可以有一个突出的按钮（该样式通常称为“主要”按钮），以及几个中等的“次要”和低重点“第三次”操作。

有时没有常规按钮

通常，您希望将最常用的按钮设置为主色的常规按钮并将其置于焦点状态。这可以帮助大多数用户更快地完成任务，并为他们指明正确的方向。

唯一的例外是，当所有选择都相等时，或者操作特别危险，在这种情况下，您希望用户通过自己的判断来选择按钮，而不是刻意强调的引导方式。

不要用户疑惑

“不要让我思考”是可用性工程师史蒂夫·克鲁格（Steve Krug）撰写的书的标题。它涉及的许多要点中非常重要的其中一个就是，界面中的重点内容对用户显而易见，而不是引起困惑。基于多年使用各种设备和其他产品的经验，用户对按钮的外观和功能有了一定的期望。若“标准”的按钮有较大偏差会给用户带来延迟和困惑。

避免对交互式和非交互式元素使用相同的颜色。如果交互式和非交互式元素具有相同的颜色，则人们很难知道在哪里点击。

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

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

一致性提高了速度和准确性，有助于避免错误。创建可预测性，以帮助用户掌控自己并能够在产品中实现其目标。在创建主要，次要和第三种样式时，请尝试查找一些常见的元素，例如颜色，形状等。不仅要在设计系统内部保持一致，而且要意识到要为其设计的平台。

使按钮足够大以实现可靠的交互

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

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

对于图标按钮，请确保触摸目标超出了元素的可视范围。这不仅适用于移动设备或平板电脑，而且相同大小的建议也适用于网络鼠标等指针设备。

无障碍设计

不管是任何设计组件都应该遵循这条原则。目标区域大小是影响可访问性的因素之一。其他是字体大小，颜色的对比度。有大量工具可以帮助您轻松检查组件设计的性能。

手势被广泛采用

手势使用户可以通过触摸与应用程序进行交互。使用触摸作为执行任务的另一种方法可以节省时间并提供触觉控制。随着某些手势（例如滑动以触发上下文动作，双击以喜欢或长按）每天都在广泛使用，它们对于普通用户而言仍然不是很明显。我建议使用它们作为对高级用户执行操作的替代方法。

好的按钮文案可以更成功的让用户采取行动

您的按钮所说的话与外观一样重要。使用错误的文案可能会导致用户感到困惑，浪费时间，并可能造成一些重大错误。

良好的按钮文案会让用户采取行动。最好使用动词，并在按钮上标记其实际功能。就像按钮在问用户—“您要（添加到购物篮中）吗？” 或“您要（确认订单）吗？”。
避免使用Yes ，No或过于通用的标签，可以使用例如“提交”。

确定/取消还是取消/确定？都可以

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

• 有确定行动第一支持自然阅读顺序。如果我们知道这很可能会选择用途，则可能会节省一些时间。弹窗放确认第一

• 最后列出确认可以推进流程。有人可能会认为“确定”是因为下一个按钮将使用户继续后面的步骤。帮助用户评估所有选项，然后再采取行动，并帮助避免错误和仓促决策。苹果建议确认放在最后。

任何一种选择都有其良好的论据，并且任何选择都不会造成可用性灾难。我个人通常将“确定”放在对话列表窗口等操作列表的最后（也许是因为我主要是Mac用户。）

禁用的按钮很不友好

也许很多有都会遇到这种情况，被困在某个页面屏幕上几秒钟或几分钟，试图找出为什么当前页面的按钮不可点，以及您需要做些什么才能使按钮可以操作。禁用的按钮用于指示组件当前处于不可操作状态，但将来可以启用。使用禁用的按钮是因为将按钮从其原始位置删除并在以后的上下文中显示可能会使用户感到困惑。

我建议尽可能避免禁用按钮。最好始终启用它，如果用户未提供某些必需信息，则只需突出显示空白字段或显示提示信息告知用户如何操作即可。

感谢大家的观看，如果你在这篇文章中有得到帮助，请为我点个赞吧谢谢。

祝设计愉快，愉快设计！ღ( ´･ᴗ･` )~