- 设计评审上冒出的一句话
- 二十六个字母与十个元素
- 排名本身就是信息
- 做新控件时实际丢掉的东西
- 破坏契约的四种常见方式
- 窗口与指针为什么被排除在清单外
- 有依据的规则长什么样
- 这周能做的事 —— 给组件清单贴上字母
- 小结与出处
设计评审上冒出的一句话
新页面的设计稿里有一个谁都没见过的操作单元。长得像卡片，点一下会选中，选中后描边，还能多选。问做的人这是什么，答案通常是这样：选择卡片。
这时候该冒出来的问题不是好不好看，而是这个。它是复选框，还是标签页，还是别的什么东西？ 这个问题为什么有用，就是本文的内容。
二十六个字母与十个元素
雅各布·尼尔森在 2026 年 7 月 29 日发表的关于 GUI 元素的文章，开头就是一个比喻。就像有了二十六个字母就能写出所有英文单词一样，有十来个元素就能拼出迄今为止几乎所有的用户界面。然后他把这十个连同 86 条基于证据的指南一起整理了出来。
清单是这样的。按钮，输入框与表单，菜单，链接，对话框，通知与错误信息，图标，复选框与单选按钮，标签页，搜索。
第一眼看上去很平淡。之所以平淡，是因为你从没做过清单之外的东西。可要是把自家设计系统的组件清单拿出来数一数，通常会数到四十到八十个。你得能解释：一篇用十个字母的字母表写成的文章，为什么需要八十个字母。
排名本身就是信息
尼尔森没有把这十个随便罗列，而是排了顺序。标准是用户的日常交互有多少压在各自身上。所以第一名是按钮，第十名是搜索。
这个顺序在实务里可以当优先级表用。团队的时间是有限的，而且通常会往新组件上倾斜。可用户一天里摸得最多的，永远是按钮和输入框。按钮的状态表达、禁用原因的说明、触控区域大小、表单错误信息的位置，这些才是对应排名第一第二的工作。
反过来说就是：当你花三天打磨那个新做的卡片式选择控件时，如果产品里哪儿都没写清楚按钮为什么是禁用状态，那三天就花在了排名表的下半截。
做新控件时实际丢掉的东西
新控件的成本不是实现时间。实现通常一天就完事。真正的成本是丢掉用户早已学会的那份契约。
复选框身上挂着一份用户已经学完的契约。可以多选，再按一次会取消，点标签也能切换，用键盘 Tab 移过去再按空格能打开，屏幕阅读器会读出选中状态。这份契约不是我们制定的，而是几十年来上千个产品用同一种方式工作所形成的。
新做一个卡片式选择控件，这份契约就被整个清零。再按一次会不会取消，用户不知道。能不能用键盘访问，得我们另外做。不做，它就悄无声息地不存在。也就是说，新控件的成本不是一天的实现，而是把丢掉的那份契约亲手重建一遍的全部代价。
所以前面那个问题很重要。如果它就是复选框，那就用复选框来实现，只把外观换成卡片。契约原封不动地留着。
破坏契约的四种常见方式
即便确定了它是这十个字母里的哪一个，把那个字母的契约破坏一半的事情还是经常发生。常见的形态是这几种。
- 长得像链接却是按钮：想把带下划线的蓝字用中键点开到新标签页，结果什么都没发生。链接和按钮的区别不在外形，而在于是跳转还是执行。
- 长得像按钮却是单选：并排三个按钮，按下其中一个，其余的就灭了。这是单选按钮的行为，而期待「按下去会执行点什么」的用户会愣一拍。
- 明明是标签页却换了页面：标签页是在同一语境内切换可见面的装置。按了标签页却堆起了后退历史，用户的心智模型就碎了。
- 明明是通知却要求操作：通知是可以放过去的东西，对话框是必须回应的东西。如果撤销按钮只存在于几秒后就消失的 toast 里，那个撤销更接近于「为了被错过而做的」。
这四种有共同的结构：用外观承诺一件事，用行为给出另一件事。而用户相信的是外观。
窗口与指针为什么被排除在清单外
尼尔森没有把窗口和指针放进正文的十个里，而是作为附加内容单独处理。他说明的理由是，这两者如今大体上已经归操作系统管了。
这个区分在实务里有用，是因为它告诉我们什么东西不该做。在 Web 应用里自己实现窗口管理的那一刻，这个窗口就开始跟操作系统的窗口表现不一致。没有最小化，或者拖拽区域不一样，或者叠放顺序不一样。而用户是拿操作系统那一侧的契约当基准来期待的。
指针也一样。改变光标形状是传达状态的有力手段，但把光标本身换成一张图的那一刻，延迟就看得见了。要重做平台已经承担的那一层，就得赢过那一层已有的全部契约。
有依据的规则长什么样
尼尔森说自己的文章基于证据，那个证据是什么样的，我们看一个例子。文章引用的东西之一是 1954 年的费茨定律：指向某个目标所需的时间，由到该目标的距离和目标的大小决定。越远越慢，越大越快。
所以「把按钮画大一点」不是口味问题，而是被测量出来的事实的推论。从这里还能推出一条实务上更好用的结论。屏幕的角落和边缘表现得像无限大的目标，因为鼠标再怎么用力甩也甩不出屏幕。把常用操作贴到边缘，同样大小也能更快够到。
这篇文章还引用了另一类依据。大约每 12 位男性中就有 1 位存在红绿色觉异常，这个数字就是其一。仅靠颜色区分状态的界面为什么危险，答案就在这儿。文章还介绍了一个案例：只是去掉了表单里的一个字段，就带来了年规模 1200 万美元级别的改善。这个案例我没有追到原始资料，写在这里是作为尼尔森文章所转述的内容。
这周能做的事 —— 给组件清单贴上字母
有一项一个小时就能做完的工作。
- 把设计系统的组件清单原样搬进一张表。
- 在每一项旁边写上它是十个字母中的哪一个。按钮、输入、菜单、链接、对话框、通知、图标、复选框与单选、标签页、搜索。
- 给写不出字母的项目做个标记。
- 对每个被标记的项目用一行回答：它新造了一份什么样的契约，而这份契约在文档和无障碍实现上是否真的兑现了。
大多数团队在第 3 步会剩下两三个。那两三个通常确实是真需要的，其余的都是既有字母换了身衣服。把「只是换了衣服」这个事实反映到代码里的那一刻，无障碍和键盘操作就免费跟着来了。
小结与出处
清单的价值不在于告诉你该做什么。而在于告诉你：如果新做出来的是字母表里没有的字母，那这个字母你得从头教起。
- 10 GUI Design Elements Build Every User Interface —— 雅各布·尼尔森，2026 年 7 月 29 日。十个元素的清单与排名标准、86 条指南、窗口与指针被单独处理的原因、费茨定律与色觉异常的数字、表单字段的案例，全都出自这篇文章。
- 十个元素的顺序与排名标准、字母表比喻、指南条数，都是在上文中直接确认的。正文里破坏契约的四个例子和组件贴标签的做法不是这篇文章提出的，而是我把它的视角搬到实务里试出来的。
현재 단락 (1/33)
新页面的设计稿里有一个谁都没见过的操作单元。长得像卡片，点一下会选中，选中后描边，还能多选。问做的人这是什么，答案通常是这样：选择卡片。