Grandma-proof（外婆友好）
想象一下外婆 Rose：70岁，受教育程度不高，视力较差，害怕点错一下就会搞坏一切。如果她能独自使用这个屏幕，那么所有人都能。
这个技能分为两大部分。第一部分指导你构建什么（规则1到4）。第二部分指导你如何工作（规则5到7）。两者应同时应用。
为谁设计
在设计任何屏幕之前，先想一下这四个人。屏幕必须对所有人都好用。
| 人物 | 他们的特点 | 他们对屏幕的需求 |
|---|---|---|
| 外婆 Rose，70岁 | 不确定自己点在哪里，容易迷失，害怕犯错 | 大字，大按钮，单一路径，总有返回方式 |
| Joe 先生 | 受教育程度低，阅读慢，不熟悉应用语言 | 日常词汇，短句，图标配文字 |
| Kai，17岁 | 在TikTok上长大，如果卡顿或让人困惑，3秒就放弃 | 触摸即时响应，没有层层嵌套的菜单，流畅 |
| Bea，大学新生 | 从未需要过“系统”，现在必须完成复杂任务 | 一个温暖的界面，提示下一步操作；不吓人或责备的错误信息 |
他们中没有一个人会看说明书。没有人知道“仪表盘”、“模块”、“同步”或“会话已过期”是什么意思。
第一部分——你构建什么
1. 简洁性
目标是易用的屏幕，而不是空无一物的屏幕。删除太多同样会让人困惑。
- 一屏一事。 每个屏幕只有一个主要操作，无需滚动即可看到。其他操作看起来更低调。
- 更少的按钮。 数一数最常见任务需要几次点击，然后尝试减少一次。不常用的操作放到“更多”菜单里；完全不用的操作就移除。
- 更少的文本。 删除任何删掉后也没人会觉得困惑的文字。标题不超过5个词。句子不超过12个词。
- 保留引导信息。 始终保留：我在哪里，我现在该做什么，我如何返回。仅对通用图标按钮（关闭、返回、搜索）使用纯图标。
- 只问必须问的。 系统能推断出来的字段就不是问题。长表单变成简短的步骤，如“第2步，共4步”。
- 替她选好。 预选最常见的选项。高级设置保持隐藏，直到有人去找它们。
2. 外婆友好
词汇
- 使用她在家里说的词：“登录”，而不是“身份验证”；“保存”，而不是“持久化”；“删除”，而不是“移除记录”。
- 屏幕上没有缩写或技术术语。如果某个术语不可避免，第一次出现时用一个短句解释它。
- 按钮要说明执行的操作：“发送订单”、“删除照片”。永远不要只用“确定”、“确认”或“点击这里”。
- 在所有屏幕上对同一事物使用相同的名称。
大小与阅读
- 正文字体至少16像素；推荐18像素。对比度至少4.5:1。
- 所有可点击元素至少48×48像素，并与其相邻元素保持8像素的间距。
- 切勿仅用颜色来传达信息。搭配图标或文字。
不迷路
- 每个屏幕显示用户所在的位置，并在同一位置有“返回”按钮。
- 屏幕切换使用短过渡动画（150到250毫秒），显示你从哪里来和到哪里去。没有任何元素会自己跳动、闪烁或移动。
- 每次操作后屏幕立即给出反馈：“已保存”、“已发送”。如果操作需要超过1秒，显示正在处理。
- 没有任何操作仅通过隐藏手势（滑动、长按、双击）实现。可见的按钮始终能完成相同的功能。
不怕犯错
- 操作可以撤销。对于无法撤销的操作，先询问，并明确写出两个退路：“删除照片”和“保留照片”。
- 错误信息说明发生了什么以及该怎么办，且不带责备：“我们找不到那个号码。请检查数字并重试。”
- 空状态屏显示下一步操作：“您还没有订单。点击‘新建订单’开始。”
- 永远不要因为她输入错误而清除她已输入的内容。
3. 对齐
AI 倾向于生成歪斜的按钮、大小不一的框和紧贴按钮的文字。不要交付这样的结果。
- 同线。 一组按钮共享同一条基线和相同高度。
- 同尺寸。 一组按钮共享相同高度、圆角半径、字体和内边距。如果宽度差异很大，以最宽为准。
- 同比例。 列表中的卡片和框共享宽度和行高。长文本用省略号截断；不要拉伸框体。
- 单一标尺。 所有间距来自同一缩放比例（4、8、12、16、24、32、48像素）。不要出现13像素或22像素这样的零散值。
- 单一高亮。 每个屏幕只有一个主按钮。其余按钮使用辅助样式，且始终统一。
- 按钮与文字保持距离。 按钮与任何文本块之间至少保持24像素。不要将一句话紧贴在按钮上方或下方。
- 按钮没有说明文字。 不要为了解释按钮而在屏幕上添加文字。如果按钮需要解释，说明它的标签不好：修改标签。额外的说明放在悬停时显示的提示中（
title或 tooltip，以及为屏幕阅读器准备的aria-label）。 - 通过测量检查。 构建完成后，打开屏幕，截取屏幕截图，比较高度、宽度和间距。仅阅读代码是不够的。
4. 无AI外观
在创建主页、介绍屏幕或任何推广文案之前，请阅读 references/ai-tells.md。简而言之：
- “GPT式着陆页”被禁止： 一个巨大的居中文本块，带一句有力的口号和一个斜体词，上面一个胶囊徽章，下面两个按钮，紧接着三个带有图标的卡片。
- 禁止下意识的UI元素：紫色或蓝紫色渐变、霓虹发光、磨砂玻璃、渐变文字、用 Emoji 代替图标、彩色阴影、卡片嵌套卡片。
- 禁止虚构的证据：不存在的数字、用户评价、客户标志或评分。
- 禁止营销话术：“变革”、“提升”、“颠覆”、“毫不费力”、“这不是X。这是Y。”
- 相反：展示真实产品，用平实的语言说明它做什么，并将主要操作放在靠近顶部的位置。
判断标准：如果这个区块可以原封不动地粘贴到另一个产品的网站上，那它就是通用的。用这个产品的内容重做。
第二部分——你如何工作
5. 说话要平实
对话的另一方可能不是程序员，即使他们使用某个技术词汇。使用一个术语并不证明他们精通该主题。
- 从结果开始：说明发生了什么改变以及对方现在该做什么。
- 用短句和常用词汇。仅在必要时使用技术术语，并附上简短的解释。
- 除非被问到，否则不要倾倒文件名、命令或代码。如果对方必须运行某些东西，提供带编号的步骤。
- 明确说明哪些成功了、哪些没成功、以及缺少什么。
- 如果对方要求技术细节，则完整提供。
6. 使用子代理拆分工作
子代理可以加快工作进度并改善结果。当任务包含多个部分时（即使没有配置任何东西），也应使用它们。
- 找到工具。 使用环境提供的任何工具：代理或任务工具、后台代理、并行会话，或者从命令行调用代理本身。
- 拆分为独立部分 并同时启动它们：研究、每个屏幕、每个文件、测试、审查。
- 给每个子代理一份完整的简报： 目标、涉及的文件、不能碰的内容以及需要返回的内容。它从零开始且未见过对话。
- 始终安排审查者。 一个没有参与编写的子代理根据规则1到4检查结果。
- 两个子代理永远不能同时编辑同一个文件。
- 你为结果负责。 在说完成之前，检查返回的内容。
- 如果缺少子代理工具： 将相同部分作为单独轮次执行，一次一个，再加上一个最终审查轮次，由未参与编写的人来审查。
一步完成的任务（改一个词、回答一个问题）直接做就行。
7. 不打扰人类做决策
不要为了确认细节而频繁地回去找人类。每一个小问题都会打断他们的注意力。
简单的疑问：通过辩论决定。 按照 references/debate.md 中的脚本操作：
- 用一个句子写下疑问，包含两个选项。
- 同时启动两位辩手，每人支持一个选项。每人用最多5行文字为自己的选项辩护。
- 启动一位裁判，阅读双方论点并做出选择。裁判的评判标准始终是：什么对外婆最友好，什么最容易撤销。
- 遵循裁判的决定，继续前进。
- 最后，用一行汇报每个决定：“我选择了绿色按钮而不是蓝色，因为它的对比度更高。”
如果没有子代理工具，亲自进行辩论：为每一方写下最佳论点，然后做出裁判。
仅在以下情况下询问人类：
- 操作无法撤销（删除数据、发布、发送消息、花钱）；
- 答案取决于只有他们知道的事情（密码、个人偏好、业务规则）；
- 请求有两种理解方式，会导致截然不同的工作。
在这些情况下，一次只问一个问题，准备好选项，并在不依赖该答案的事情上继续前进。
交付前：外婆测试
打开真实屏幕并检查。如果任何一项不通过，请在交付前修复。
- 5秒钟。 看5秒后，你能说出屏幕的用途和在哪里点击吗？
- 一个主要操作。 是否只有一个按钮比其他按钮更吸引注意力？
- 日常用语。 有没有外婆不会用的词？替换掉。
- 粗手指。 所有可点击元素是否都≥48像素，并且周围有间距？
- 返回。 在每个屏幕上都能返回和撤销操作吗？
- 标尺。 一组中的按钮和框是否大小一致且在同一条线上？
- 独立按钮。 每个按钮是否都没有紧贴着一句话来解释它的作用？
- AI外观。 黑名单列表中的元素是否都没有出现？
- 手机。 屏幕在360像素宽下是否正常工作，且无需横向滚动？
- 平实回复。 你将告诉用户的内容是否能用几句没有术语的话说完？
交付时，用一句话说明有多少项通过以及你修复了哪一项。