苹果1980年设计规则如何定义禁用按钮的灰色状态

1980年苹果的界面规则对灰色命令是怎么说的

很多人每天都会遇到禁用按钮，但这条规则最早并不是为按钮写的。

在很多聊天应用里，只要消息框里没输入内容，发送按钮就会一直是灰色的。点它没有任何反应，按 Tab 键也会直接跳过它。

这就是禁用按钮。在 HTML 里，它只需要一个属性 disabled，几乎所有设计系统都把它作为按钮组件的标准状态之一。

下面比较了八个广泛使用的设计系统：Google 的 Material、IBM 的 Carbon、Shopify 的 Polaris、GitHub 的 Primer、Atlassian 的设计系统、Adobe 通过其 React Aria 库实现的 Spectrum、英国政府的 GOV.UK Design System，以及 shadcn/ui。这八个系统的按钮都有禁用状态。Primer、Atlassian 和 GOV.UK 还写了书面指南，建议团队避免使用禁用状态。

这八个系统绘制禁用按钮的方式各不相同。对比度是 Web Content Accessibility Guidelines（WCAG）用来衡量可读性的指标，从两种相同颜色的 1:1 到黑白对比的 21:1，正文通常以 4.5:1 为最低要求。在这些系统里，禁用状态的标签与其按钮之间的对比度在 1.36:1 到 3.35:1 之间。在全部八个系统中，禁用按钮都无法点击，也无法通过 Tab 键到达。

八个设计系统的主按钮在各自浅色主题下的启用与禁用状态。禁用标签的对比度从 1.36:1 到 3.35:1 不等。

把 disabled 加在 fieldset 上，会一次性禁用其中的所有控件，因此表单的整个区域可以只用一个属性就变灰。把 disabled 加在 fieldset 上，会一次性禁用其中的所有控件，因此表单的整个区域可以只用一个属性就变灰。

禁用控件不能被选中的规则，最初并不是为按钮写的。已知最早的书面版本是针对菜单的，出现在苹果 Lisa 的界面规则中——Lisa 是苹果在 Macintosh 之前开发的办公电脑。和后来的 Mac 一样，Lisa 把“剪切”“拷贝”“存储”等命令放在屏幕顶部的菜单里。按钮后来继承了这条规则，而那时规则已经变了。

Lisa 团队在 1980 年 9 月写下了它的界面规则，比这台电脑发布还早两年多。《Lisa User Interface Standards》是一份内部文档，由项目负责人 Bill Atkinson 签署，他后来写了 MacPaint。今天网上的扫描件来自 Lisa 历史研究者 David T. Craig 的收藏。其中关于窗口、菜单、选择和编辑命令的编号章节，编排方式很像今天设计系统的指南。

第 26 节的标题是“不起作用的菜单项”。它允许应用在知道某个命令不会产生效果时，把该命令在菜单中变暗。下一句写道：“如果用户愿意，这样的项目仍然可以被调用。”所以变暗的菜单项仍然可以被选中，只是那一刻不会做任何有用的事。

标准中的例子是“剪切”，它删除选中的文本。没有选中任何内容时，“剪切”没有东西可删，所以菜单项变暗。对于开关某个设置的命令，比如“加粗”或“打开打印机”，变暗的高亮同时也表示该设置是否开启。

Bill Atkinson 还编写了在屏幕上绘制一切内容的图形代码，包括变暗的菜单项。在 Lisa 上它叫 LisaGraf，到了 Mac 上改名为 QuickDraw。Bill Atkinson 还编写了在屏幕上绘制一切内容的图形代码，包括变暗的菜单项。在 Lisa 上它叫 LisaGraf，到了 Mac 上改名为 QuickDraw。

苹果在 1983 年 1 月发布了 Lisa。它的软件附带教程手册，其中绘图程序 LisaDraw 的那本从“从 File/Print 菜单打开硬盘”这一课开始。在 A9 页该菜单的截图下方有一行注释：“注意：当菜单项变暗时，你无法选择它”（扫描件）。

从 1980 年的标准到实际发售的机器之间，变暗的含义从“这不会做任何事”变成了“这不能被选中”。苹果还在 1983 年写了 Lisa 指南，但唯一被扫描下来的部分只有引言，讲的是窗口，没有提到菜单。1997 年，Lisa 的三位设计师 Rod Perkins、Dan Keller 和 Frank Ludolph 发表了关于其界面如何开发的详细记述《Inventing the Lisa User Interface》，其中也没有提到变暗。

今天可获得的 Lisa 文档中，没有任何一份说明这条规则是何时改变的、以及为什么改变。

Lisa 的屏幕是黑白的，没有灰色可用，所以在手册的截图里，变暗的命令（比如 Set Aside 和 Save & Put Away）用断续的点阵字体绘制，每个字母都有像素被挖掉。像 Duplicate 这样启用的命令则以实心字体排在旁边。今天的菜单仍然遵循 1983 年的规则。变灰的菜单项不能被选中，改变的只是它的绘制方式。

同一个变暗菜单项的两种画法，放大到相同尺寸。1983 年 Lisa 上，变暗菜单项的字母每隔一个像素被去掉，因为屏幕只能显示黑或白。在今天 Material 3 的菜单里，禁用项的标签以 38% 的不透明度绘制。两者都无法被选中。

Lisa 的屏幕是 720×364 像素，像素高大于宽。一年后 Mac 的像素则是正方形的。Lisa 的屏幕是 720×364 像素，像素高大于宽。一年后 Mac 的像素则是正方形的。

（原文较长，此处译出前 6000 字，完整内容请点「打开原文」。）