2024年4月17日发(作者：)

设计一个按钮的12条经验教训

这里有12条经验教训，是作者在设计多种按钮，包括主按钮、次要按钮，以及在一个新兴系

统中的使用的大量其他按钮时所总结出来的。值得一读。

我超爱按钮。通过按钮我能做很多事。比方说，进行下一步、确定、以及完成等操作。有了按钮，

交互一下就焕发了生机。

这就是为何按钮大概是一个系统设计中最重要的组成部分。理由非常简单，按钮提供了一个样式简

单的标签供人在界定区域内点击。也就是说，按钮是你应用设计语言基本属性的方式，这种方式以

后还会应用在更加复杂的组件当中。

这里有12条我在设计多种按钮，包括主按钮、次要按钮，以及在一个新兴系统中的使用的大量其他

按钮时，所总结出来的经验教训。

类别一：主按钮

1. 设定系统的风格基调

按钮是系统在视觉风格上最纯粹的表达方式。它把颜色、字体和图像这“三大”属性紧密地结合起来

，形成了一个不可分割的原子单位。按钮也同时引起了关于留白的讨论：内部填充（特别是，标签

的左右）和外部边距（毗邻其他元素）。最终，按钮可以体现更多只有内行才懂的属性，例如圆角

边框（通过调整border-radius）或上升（通过调整图层阴影效果属性box-shadow）。

打包贴士：

要把按钮当作系统风格的主导代表元素。加分做法是，把按钮的定义和一整套快速发展的标记变量

统一，这些标记变量规定了颜色，尺寸，空白和其他细节。

按钮看起来很简单，其实包含了各式各样的属性

2. 同样要设定文本的风格基调

幸好，过去“点击这里”是存在的。但我们依然需要回答：按钮标签可以有多长。标签是采用祈使

语气，即命令式、强制性的语气吗（例如，“保存”或者“关闭”）？我应该在动词后面加上宾语吗（在“

保存”后面加上“文档”）？关于常见操作有惯用的标签吗？要加注品牌标语……还是不要呢？

打包贴士：

在可以找到全部按钮的标签指南处引入前后一致的用词。当然，用词列表和深度编辑标准可以

在Voice和Tone等指南内找到。不管怎样，按钮指南是开始把指南桥接在一起的好地方。

3. 当背景较复杂时，按钮用反色

在纯白背景下大多数样式的按钮还行得通，但如果你把按钮搁在照片背景上呢？或者是一个更深的

不同颜色的背景？更伤脑筋的是，你的按钮也可以放在浅色中性色的背景上吗？按钮可以用在（包

括但不限于上面所提到的）任何情况下吗？主按钮的颜色可以随意改变吗？

打包贴士：

把主按钮放在不同的背景上进行演示，然后制定一个相反的替代方案——白色？不同颜色？或者半

透明？——当背景变深时应用上述方案。做文档时，把亮色和暗色等方案展示在一系列常见背景上

，这样可以把问题讲清楚