UI设计组件-按钮

• 文字按钮（text button）
• 线框按钮（outlined button）
• 实心按钮（contained button）
• 可切换按钮（toggle button）

组成按钮的3元素：容器、文本、图标（icon）

1.文字按钮

存在感很弱，视觉重量最轻；由于文字按钮没有容器，容易和正文混淆，所以，纯英文的文字按钮需要所有字母大写，中文字（方块字）需要用字体加粗、变色等特征来区别于正文；文字按钮多出现在卡片和对话框中。

2.线框按钮

又叫幽灵按钮，它的容器没有填充色（如果填充白色那是实心按钮）；它的存在感较强但不是页面中最重要按钮，其文本的要求和上方文字按钮一致；由于没有填充所以请注意在不同背景上的易读性。

3.实心按钮

最为醒目，常常是页面中的最重要按钮；（目前流行的风格是）没有描边；英文文本可以是首字母大写。

4.可切换按钮

这是以组合形式出现的按钮，几个icon共用一个容器；同时只能选中、激活一个icon。最常见于文字编辑器中，但可切换按钮的形式并不止这么单一，能代表单选的icon也算是可切换按钮的一种：

图片源：Material Design

请注意：所有按钮中的文字不可以换行。

状态

以上的按钮属性都是默认情况下的，在交互中，组件的状态会随用户的操作而变化，如下图，本来无填充的线框按钮在悬停状态下出现了填充色：

图片来源：Material Design

组件在常见的终端（移动端、网页和电视）中一共有哪些状态呢？

tips：

由于悬停和聚焦不会同时存在，所以两者样式可以近似，但理论上，聚焦比悬停需要更醒目，因为它没有光标的辅助指引。

文字按钮、线框按钮、填充按钮的所有状态示意：

可切换按钮的所有状态示意：

tips：

文字按钮的悬停状态为半透明填充，按下状态填充加深，始终没有描边；

线框按钮的悬停状态为半透明填充，按下状态填充加深，但描边一直不变；

实心按钮的悬停和按下可以有两种方式：

• 1. 悬停比默认填充浅，因为有抬起（raised）的效果，而按下比默认更深因为是按下去（距眼睛更远）；那按下状态到底变的多深呢？一个简单的方法：把默认的填充色明度降低15（和加15%黑色蒙版效果一致），并加深饱和度。不要忽略加深饱和度的操作，没有这一步的话，颜色会看上去死灰死灰的；
• 2. 悬停状态比默认状态填充浅且阴影加深，按下则更浅且阴影更深，同时，给按下瞬间加上涟漪渐渐覆盖的动效。这也是Madteial Design的规则，因为他们的界面有海拔高度的概念，每个组件的每个状态都有固定的高度，来个栗子：

图片来源：Material Design

禁用状态可以试试直接把默认按钮整个变成45%不透明；

往往禁用按钮的辨识度不是那么高，看上去可以是识别度很低的一坨；

对所有非禁用状态的按钮一定要在不同背景上展示效果保证辨识度。

这里有加载状态的更多样式：https://coreui.io/docs/components/loading-buttons/

尺寸

按钮的长度和宽度尽量为网格基数的整数倍（网格基数参考：4px、8px等），且长度尽量是宽的整数倍，内边距也可以多利用到网格基数。诸如ps的很多设计软件都自带网格工具，可使用它们来帮助设计。

不同终端的按钮有几类常见高度，以下数据不是绝对的，仅供参考：

曲率

指按钮的角参数，有四种类型：

• 直角：严肃、专业、力量、高端（奢侈品、健身、金融）；
• 曲率圆角：通用、中性、用户范围广（社交）；
• 全圆角：年轻、活泼、亲切（儿童、娱乐、购物）；
• 多边形（六边形八边形）：少见、个性、科技感、文艺；

角越圆，越柔和。在一套UI规范中，曲率应随着按钮尺寸而变化，如果所有圆角曲率一致，那是不对的，视觉上也不会和谐。

常用的圆角曲率：

web端：

微信：