B端按钮设计看这篇就够了！按钮控件细节设计

设计夹的第171篇文章分享

Halo，这里是设计夹，今天分享的是「B端按钮设计」。

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

按钮的功能

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

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

按钮的类型

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

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

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

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

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

图标按钮：图标按钮由于体积小，灵活性高，在页面中使用的频率高，不同于其他的按钮，是用图标来展现不同的样式。

图标按钮的设计要符合整体页面的风格和样式，语义应明确。

特殊按钮的类型

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

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

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

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

按钮的状态

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

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

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

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

按钮的尺寸

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

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

按钮的细节

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

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

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

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

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

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

最后

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

接下来会继续分享更多「B端设计」文章，感兴趣的同学记得星标关注推送～

另外推荐去「做设计的cici」主页查看更多内容:zcool.com.cn/u/14507308

---

为了帮大家更快掌握AI绘画，设计夹推出一本150页的《AI绘画关键词教程》，包含12类AI绘画方向，图词一体方便快速预览/复制，内容持续更新中…

⬇️点击查看详情⬇️

慢慢来比较快，如觉得有帮助，

请点个赞&在看，谢谢！