B端按钮设计看这篇就够了

按钮是UI设计中常见的控件，基本存在于每一个界面设计中。按钮是用户与系统之间沟通的桥梁，是用户的主要行动点，引导用户进行一系列操作，在交互中承担重要的作用。

1. 按钮的功能

触发操作

按钮出现在界面中，强调页面操作重点，触发用户进行操作。

下一步指引

用户触发按钮，指引用户进行下一步操作。

2. 按钮的类型

主按钮：承载当前页面的核心功能，引导用户关注页面主流程，强调性高，通常一个按钮区最多使用一个主按钮。

次按钮：在页面中运用的最广泛，视觉上次于主按钮。当不确定选择哪一按钮时，次按钮永远不出错。

虚线按钮： 在页面中属于低频按钮，常用于“添加”按钮。

文字按钮：文字按钮更轻量化，多用于表格中。

链接按钮：链接按钮与文字按钮类似，多用于触发外链行动。

图标按钮：图标按钮由于体积小，灵活性高，在页面中使用的频率高。它不同于其他的按钮，是用图标来展现不同的样式。图标按钮的设计要符合整体页面的风格和样式，语义应明确。

3. 特殊按钮的类型

危险按钮：警告提示操作存在风险，一般用红色表示，符合用户常规认知。

加载按钮：页面正在加载，给用户反馈，避免等待过程中产生焦虑心理。

幽灵按钮：一般存在于复杂的背景中，避免破坏页面整体性。

开关按钮：开关按钮是由手机端衍生出来的，更符合用户的操作认知。

4. 按钮的状态

正常状态：按钮在页面的正常显示状态，是按钮的常规状态。

悬浮状态：鼠标划过按钮，页面会给用户一个反馈；当鼠标移走，反馈消失。

点击状态：单机鼠标左键，按钮发生变化，并触发下一步操作。

禁用状态：按钮的不可用状态

5. 按钮的尺寸

B端产品中，按钮通常有3种尺寸。大按钮主要用在全局性操作的界面上；中按钮通常为界面标准按钮；小按钮一般用于下拉或其他空间较小位置。

计算标准按钮高度的方法（仅供参考），文字字号的 2.2倍，取偶数；按钮的宽度（padding）一般为4的倍数。

6. 按钮的细节

常见的按钮类型一般为长方形（以主按钮为例），根据四个角圆角的大小可以分为：无圆角按钮、小圆角按钮和大圆角按钮。

无圆角：无圆角按钮棱角分明，给人严肃、严谨、威严等感觉，多用于法院、政府等企业网站。

小圆角：大部分页面都是采用小圆角按钮，这种按钮简单中又不失细节。

大圆角：大圆角按钮不好把控全局，需要彰显产品独特风格时才可使用，一般情况下少用。

渐变

为了让按钮不单调，还会加上渐变投影，渐变角度要统一。

弥散投影

弥散投影也可以增加按钮的细节。使用弥散投影时，投影颜色要柔和，不能盖过主按钮颜色。

小结

细节决定设计成败，按钮是UI设计中非常小的元素。越是小的细节，越能看出设计师的功底。在做设计的时候，应该注意每一处细节，这样整体的设计才更精致。

文章参考：https://www.woshipm.com/pd/5430015.html/comment-page-1

文章参考：https://www.zcool.com.cn/article/ZMTIxOTU0MA==.html