B 端设计组件：按钮
导读：按钮是界面中最基础的元素之一，一个个按钮承载着一个个操作指令，响应用户各类操作行为，传达用户的种种业务诉求。B 端业务庞大而复杂，不同的场景使用的按钮不同，同一流程不同状态下的按钮也不同，甚至同一模块在不同显示设备上按钮也有所差异。下面是在实际工作中的关于按钮的一些总结和思考，也希望能够给读者带来一些新的思考。
依据按钮呈现的视觉重量差异，我们可以通过改变样式将按钮分为主按钮、次按钮、虚线按钮、文字按钮、图标按钮 5 类。
1.1 主按钮
在日常场景中，主按钮是页面中按钮区最为核心的操作按钮，通过使用主题色填充容器吸引用户视线聚焦，引导用户去关注、操作主流程，强调性较高。
常见有纯文字、图标 + 文字两种类型，5 种不同状态
次按钮是在日常场景中运用最广泛的的一种按钮，由此也被称为默认按钮，视觉呈现上相较于主按钮较 " 弱 "。通常有描边和文字组成的字线型、背景填充（中性色或较浅的主题色）和文字组成的字面型两种，用于按钮区没有主次之分的平级按钮，强调性中等。
虚线按钮在日常场景中属于低频操作按钮，容器内只有简单的虚线边框，视觉上弱于次按钮，常用于场景中的添加操作，强调性较低。
文字按钮在日常场景中的使用频次也较高，文字按钮常见也分为两种：一种是各种状态下容器边界都是隐藏的，一种是在 hover、press、active 状态下容器有背景色填充（较浅中性色）的。不管哪一种形式视觉感受都较弱，通常用于不太明显的操作，强调性较低。
在我们的团队项目中，文字按钮和链接也做了不同的定义，链接在 hover、press、active 状态下都有显示下划线，来告知用户这是一个外部的链接；文字按钮则在 hover、press、active 状态下容器都会填充背景色。
图标按钮在日常场景中的使用频次较高、也颇为高效，图标按钮默认状态下容器在不可见，视觉感受也较弱，由于没有文字，一些语义性不强的图标容易导致用户理解的偏差，一般用在图标 hover 状态下会出现 Tooltip 提示来解决此问题，图标按钮的强调性也较低。
常见只有图标，5 种不同状态
在我们团队的实际项目中，依据按钮视觉重量的不同，将按钮分为一级按钮（主按钮）、二级按钮（次按钮、虚线按钮）、三级按钮（文字按钮）、四级按钮（图标按钮），在强调属性的重要程度上随级别增加递减。在实际的项目场景中，根据不同需求的强调程度去选择相应级别的按钮，有了这个准则作为指导参考，大大降低了团队在选择按钮时的时间成本。
二、按钮应用细节
2.1 按钮拆解
通过对一个按钮的拆解，可以将按钮分为容器、背景、图标、文本、描边、圆角等基本元素，每种元素的视觉呈现都会反过来影响按钮的外观。不同风格、不同气质的产品，需要相应的处理的影响按钮视觉呈现的各个元素。
上一篇：隆基股份又创新高了，组件为何能在光伏行业中异军突起？| A股2021中期投资策略⑨
下一篇：离心滤油机七大要点