按钮UI设计中的三大设计原则和方法

今天我们给大家介绍再按钮设计中的的三大设计原则和方法。

1. 可识别性
首先必须优先考虑到移动端用户的体验，因为全球超过 48% 的页面浏览量是通过移动设备进行的。您的按钮对于移动用户应该是触摸友好的，对于桌面用户应该是可点击的。 与桌面用户不同，移动用户没有机会将鼠标悬停在元素上以检查交互性，因此，请确保您的按钮对用户而言是交互式的。

尺寸
据某触控实验室的一项研究表明，由于指尖的平均尺寸，10mm x 10mm 是按钮的最佳最小尺寸。 在下面的示例中，我们可以看到用户与较大的按钮进行交互是多么容易。所以，按钮的触摸目标必须至少为 38 像素 x 38 像素。

形状
最受欢迎的按钮形状是方形或带圆角的方形。圆角似乎比方角更有优势。研究表明，圆角通过将我们的注意力吸引到元素的内容上，使信息更容易处理。

2. 可聚焦性
按钮应易于让用户更容易发现，UX设计师同意你不应该让用户寻找按钮。 在您的网站或应用程序中与按钮放置保持一致也很重要。如果一个表单的主要号召性用语在右侧，另一个在左侧，它将使用户感到困惑。

3.状态清晰
按钮操作和状态应该清晰，以便用户知道并了解他们在您的网站上采取了哪些操作。以下是一些有助于此过程的设计提示和技巧方法：
颜色
某些颜色具有用户习惯看到的特殊含义。例如，红色通常用于表示不法行为或破坏性行为。另一方面，绿色通常表示成功的行动。使用这样的约定可以让用户更容易理解按钮的操作和状态。

等级制度
按钮不仅需要与页面上的其他元素区分开来，而且还需要相互区分，因为多个按钮通常组合在一起。例如，主要操作按钮应该比次要或第三操作按钮更具视觉优势。在下面的示例中，“添加更多”和“号召性用语”按钮的样式相似并且靠得很近。这可能会使用户感到困惑并导致他们选择错误的按钮，因为它们在视觉上彼此之间的差异不够大。

类型
按钮类型有助于表明它们的重要性和功能。一些示例包括 text、ghost、toggle 和 floating。

命令
按钮的顺序对于实现视觉层次很重要。在做出订购决定时，重要的是要注意大多数用户希望首先列出的内容具有高优先级，而最后列出的内容具有低优先级。

状态
按钮是多状态元素。让用户清楚地知道这个状态是很重要的。我们可以通过遵守符合用户期望的约定来做到这一点，例如禁用按钮显示为灰色，焦点元素包含蓝色圆环。

反馈
在单击或点击按钮后，用户期望以视觉或音频反馈的形式得到响应，具体取决于操作。反馈包括从上面显示的状态变化到进度或错误动画等行为的所有内容。

希望以上文章对您有帮助，在团队UI项目中可以找到创建按钮的设计灵感。