网页设计中的“按钮”组件要如何设计？

按钮其实也是从现实生活中延续到屏幕上来的，一般情况下，点击之后会做出相应反应的都可称作是按钮。它在界面中出现的频率非常高，导致我在之前就觉得对于这个元素足够熟悉，而忽略了它的一些设计细节。

以下从按钮的类型、状态、设计要点等几点开始展开分析。

按钮类型

由于web后端需要操作的步骤很多，而每个步骤中需要突出和强调的点不同，因此我们要根据场景做不同类型的按钮。大致可以分为以下几种：

主按钮、次按钮、图标按钮、文字按钮。

主按钮

主按钮通常是界面中比较重要的一个功能入口，比如说新建、编辑、保存等一些正向的操作。让用户很快就可以看到这个界面的核心功能以及该要如何操作。或者是引导用户点击时可以使用主按钮。

其中主按钮有常见的面性形式和图文结合形式两种。图文结合形式标对主按钮的含义进行解释，从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调，那便可使用在按钮中添加图标，这样既能够强化图标的含义，同时也加深了用户对于按钮的印象。

设计时要注意文字边框的间距，左右间距要大于上下边距。通常左右边距设置为16px，上下间距6-8px，保持舒适的呼吸感。

关于圆角

直角按钮显得严肃、专业，轻圆角按钮显得中性，而全圆角就会比较活泼、亲切。因此在web后台的界面中，通常使用直接图标与轻度圆角的按钮。

次按钮

次按钮有三种形式：低透明度的面性形式，线框形式，以及图文形式。

次按钮在页面中出现的比较多，毕竟一个界面中不能都是主按钮，但是可以都是次按钮。有的界面多个按钮层级一致时，就没有必要硬要拿出来一个做主按钮，可以把他们都当作次按钮来对待。这样才会让页面比较和谐舒适。

文字按钮

文字按钮的表现形式相对比较低调，通常在表单中出现，它的优先级较低，但是可能会频繁出现，不过即便是很多也不会使界面显得很杂乱。比如在列表中，每一行都会有多个操作按钮，使用文字按钮比较合适，也可以加入小图标使功能更直观。

文字按钮的颜色通常是产品的品牌色，或者是蓝色，因为蓝色在用户的认知中通常是可点击的。

图标按钮

图标按钮通常是指由一个图标来代表入口，它能够直观的表达功能状态。但是没有了文字的解释，就要注意图标的设计要通用、常见、易于理解，降低用户的认知成本。最好在悬浮状态能够显示图标释义的文字。

由于按钮的种类与场景都比较多，在使用的时候要注意保持各个层级的区别，并且同一层级使用相同类型的图标，避免出现混乱。

按钮状态

用户在操作时的流程通常是：鼠标对焦（悬浮）-点击-触发-反馈。因此按钮的状态也就可分为这几种：常规状态（Normal）、悬浮状态（Hover）、点击状态（Click）、加载状态（Loading）、不可点击状态（Disabled）。

按钮状态，可以让用户知道这个按钮当前是在进行哪一种操作，方便帮助用户进行判断。

通常情况下，主按钮可选择符合产品调性的按钮色，而悬浮状态和点击状态也需要视觉上给予反馈，否则在点击过程中会显得过于生硬，给用户造成反馈比较迟钝的感觉。这里悬浮状态可以覆盖15%的白色透明层，点击状态覆盖15%的黑色透明层来区分。而不可点击状态通常选择用灰色块，也就是我们所说的置灰。

划重点

由于按钮的场景与类型众多，因此在界面中要区分好按钮层级，相同功能等级的按钮前后要保持统一，避免出现多个页面不一致的情况。

不要忽视按钮状态，如果没有悬浮和点击状态，用户在操作时会觉得流程很生硬；若没有加载状态，在页面反应大于1s时用户会不知所措 。因此即时的视觉反馈有助于提高用户的体验。