后台产品设计之按钮

这是《后台产品设计指南》系列文章的第9篇内容，更多精彩可以点击下方链接查看。

后台产品设计指南

按钮是我们使用产品过程中必须可少的元素，本文会和大家一起了解下按钮在产品设计过程中需要注意的事项。

什么是按钮

按钮是网页上的一个常用组件，用于触发某种特定的操作。它有6种状态，分别是默认、鼠标悬浮、点击激活、聚焦、加载、禁用。

默认状态表示组件处于活动状态，但是当前并未使用。

鼠标悬浮状态表示光标在按钮上悬浮显示手型。

点击激活状态表示按钮当前被选中使用的状态。

聚焦状态不太容易理解，它是指电脑光标当前所处的位置，使用tab或者方向键可以快速切换选中的内容。

加载状态是在用户操作没有立刻执行成功需要等待一定时间时使用的交互状态，比如登录按钮在登录过程中显示加载状态。

禁用状态表示按钮当前无法使用，不能进行操作。

按钮类型

主按钮和次要按钮

主按钮是指页面上的核心操作，往往只有一个，一般都是填充样式，比如客户列表页面的新增客户按钮、新增客户弹窗中的保存按钮。如果页面上没有特别核心的操作，主按钮并不是必须存在的。

次要按钮是指页面上的非核心操作，一般都是轮廓样式，相对主按钮会弱化许多，比如页面上的批量上架、批量下架、删除按钮等等。

文字按钮

文字按钮基本上等同于链接，可以多次使用。文字按钮比较容易理解，一般不会存在歧义。

图标按钮

图标按钮是指用图片展现功能的按钮，一般都使用约定俗成的图片，比如消息，保存等。图标按钮可以增加悬浮提示信息，这个提示信息不是必须的。

下面是知乎首页的截图，其中提问是主按钮，赞同是次要按钮；推荐是文字按钮，消息中心和私信是图标按钮，这里的图标按钮就没有悬浮提示。

按钮设计注意事项

1.从视觉层面上看，主按钮、次要按钮、文字按钮和图标按钮的重要程度是一直在下降的。

2.通过合理的组合，可以引导用户用户在完成平台期望用户完成的操作，比如强化某一种操作或者弱化某一种操作。

3.按钮要放在合适的位置，放在用户能最快操作的位置。比如下面的截图中，搜索按钮应该在重置左侧，紧挨着搜索条件，而不是相反的设计。这是因为在这个页面用户选择搜索条件后最常用的操作是搜索，设计上应该帮助用户快速实现搜索操作。

4.按钮的圆角、颜色、尺寸、文字、阴影一定程度上能影响用户的感知，在设计的时候一定要注意规范。

比如圆角的辨识度更高，传达了简单、乐观和开放的态度，这一点是通过大量的调研数据总结出来的。

按钮是后台使用非常频繁的组件，根据使用场景结合设计规范才能设计出来符合使用习惯，简单易用的后台页面。同时这些规范可能是在动态变化的，这就需要产品岗位能主动学习，主动接触新鲜的事物。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。