软件ui设计：UI中的按钮设计技巧

   物理按钮是UI组件的直接前身，因此在当今所有数字产品中都大量使用，即使用户不了解基本的机制或算法，只要触摸一下手指，即可使家用电器，汽车或系统处于运动状态。在“电源按钮”中，雷切尔·普洛特尼克（Rachel Plotnick）追溯了当今按钮文化的起源，并描述了按钮成为命令手段的方式。

   即使在今天，尽管有成千上万的新家用电器和其他设备迁移到触摸屏控件，但物理按钮并不会很快消失，由它们形成的行为习惯会持续影响按钮设计的直观性和易用性。

   按钮传达用户可以执行的操作。它们通常在您的整套UI中出现，例如：对话框（dialogs），格式（forms），工具栏(toolbars)等。

1、按钮可以直观呈现任务进行的状态

   为按钮创建正确的交互和样式是设计过程中最重要内容之一。我们可以看下图的示例：不同样式的按钮代表了任务的实时进程。

• 正常（Normal）—表示该交互式组件已启用。

• 焦点（focus）—使用键盘或其他输入法传达用户已突出显示元素的信息

• 悬停(hover)—当用户将光标置于交互式元素上方时

• 活动(active)—用户已轻按按钮。

• 进度/加载（progress/loading）—正在加载中

• 已禁用（disabled—表示该组件当前处于非交互状态

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

   最常见的是带有圆角的矩形按钮，这些按钮十分易于识别。我们需要依据产品的整体设计准则设计合适的按钮样式。以下是一些最受欢迎的按钮样式：

3、按钮样式可以区分任务的重要性

   按钮的不同样式主要用于区分较重要的动作和较不重要的动作。通常，您可以有一个突出的按钮（该样式通常称为“主要”按钮），以及几个中等的“次要”和不太重要的“第三”操作。

4、有时没有“默认”选项

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

然而，当所有选择都具有相等的重要性时，您希望用户明确地选择按钮，这是我们希望按钮的样式是同步且均等的。

5、避免给用户造成困惑

   尽量使按钮的设计贴近常规样式。因为与“标准”的较大偏差会给用户带来行为上的困惑。

   避免对交互式和非交互式元素使用相同的颜色。如果互动元素和非互动元素的颜色相同，人们就很难知道在哪里完成点击任务。

6、保持设计风格的一致性

   我们需要设计系统内部保持一致。当您创建主要，次要和第三种样式的按钮时，请尝试在整套UI设计中查找一些常见元素，例如颜色，形状等。

7、使按钮足够大

   按下按钮应该是一个简单的任务，如果用户无法成功地轻按按钮或在过程中错误地轻按相邻元素，将会导致负面体验。对于大多数平台，请考虑使触摸目标至少达到48 x 48 dp。无论屏幕大小如何，此尺寸的触摸目标的物理尺寸约为9mm。触摸屏按钮的建议尺寸至少为7–10mm。

8、无障碍设计

   目标区域大小是影响可访问性的因素之一。其他是字体大小，颜色和对比度。有大量工具可以帮助您轻松检查组件设计的性能。

   设计人员应与开发团队紧密合作，以确保按钮与屏幕阅读器配合使用。按钮角色应用于当用户激活时触发响应的可单击元素。

8、手势被广泛采用

手势使用户可以通过触摸与应用程序进行交互。相较于点击，将触摸用作执行任务的另一种方法可以节省用户的操作时间。例如滑动以滚动上下文，双击来表示喜欢。

9、引导用户采取行动

   可以尝试使用第一人称的询问方式，加强用户的参与感。例如：在按钮上用文字“您是否要（确认订单）吗？”来替代简单的“是”或“否”，可以极大地优化用户体验。

   以上就是上海ui设计公司【艾艺】分享给大家UI中按钮设计的小技巧。如果您需要UI设计服务，欢迎随时咨询艾艺：17702199087（同微信）。