polish

精细打磨

精细打磨不是添东西，而是列出那些早已存在、却还没人留意的问题。按顺序从头到尾检查，发现问题就全部修复；不要因为问题看起来很小就跳过。细节正是关键。

文档与元数据

• 每个页面都有专属的 <title>：「设置 — App」，而不是「App」。客户端导航时更新标题。
• 标题在适用时反映当前状态：未读数量、未保存标记（「• 未命名」）。
• 网站图标：使用 SVG，并在 SVG 内通过 prefers-color-scheme 提供深色模式版本；另提供 32px PNG 备用图标和 180px apple-touch-icon。
• Open Graph 和 Twitter 图片均已提供，尺寸为 1200×630，并以网站的字体样式显示页面标题，而不是使用通用徽标。
• 为两种配色方案设置 theme-color 元标签，使浏览器界面与主题一致。
• 在 <html> 上设置 lang。在根元素上设置 color-scheme。
• 设置规范 URL；避免 /page 和 /page/ 出现重复内容。
• 404 页面应使用应用的页面框架，并提供返回方式；如果应用有搜索功能，也应提供搜索。

文本

• 所有按钮、标签、标题和菜单项均使用句首字母大写格式。
• 标题中没有孤行词：使用 text-wrap: balance。
• 所有列、计数器、价格、时间戳和快捷键中的数字均使用等宽数字。
• 使用正确的撇号和引号（’ “ ”）、范围使用短破折号，省略号使用省略号字符，而不是三个点。
• 空状态、错误消息和加载文案均应撰写完整，不得使用占位文本。
• 不得出现「Lorem」、TODO，生产环境中不得出现 console.log。
• 日期应按区域设置格式化；近期日期应使用相对时间（「4 分钟前」），悬停时显示绝对时间。

颜色与表面

• 设置与调色板匹配的 ::selection。
• 为滚动条设置主题：scrollbar-width: thin; scrollbar-color。
• 每种表面上的焦点环都清晰可见：在最深和最浅的背景上进行测试。
• 检查每个屏幕的两种主题。不得在 #000 上使用 #fff 文本。
• 加载时不得闪现错误的主题。
• 表单控件、<select> 弹出菜单和日期选择器应与主题一致（color-scheme）。
• 禁用状态应明显呈现为禁用状态，同时仍清晰可读。

布局

• 加载时没有任何元素位移：图片设置尺寸，字体设置度量回退，骨架屏与内容匹配。
• 为锚点和焦点目标应用粘性页眉偏移（scroll-margin-top）。
• 在 375px 宽度下没有水平滚动。
• 手机端两侧留白为 16px，绝不能为 0。
• 固定底部元素应避开安全区域。
• 测试长内容：最长名称、最长错误消息、0 项和 10,000 项。
• 对话框锁定滚动时，应补偿滚动条槽位，避免出现 15px 的跳动。

交互

• 每个按钮都有 :active 反馈。
• 悬停效果仅在 @media (hover: hover) 下启用。
• 每个仅含图标的控件都有 aria-label 和工具提示。
• 在显眼位置展示键盘快捷键：工具提示、菜单项或页脚提示。
• 复制操作应以内联方式确认（切换图标），并处理剪贴板失败的情况。
• 外部链接应在新标签页打开，带箭头标记，并设置 rel="noopener"。
• 链接设置 cursor: pointer；拖动手柄设置 grab。
• Escape 关闭最上层；焦点返回触发控件。
• 防止重复提交。
• 悬停时以及标签页隐藏时，Toast 通知暂停计时。

动效

• 全局处理 prefers-reduced-motion，且不得将内容隐藏在可能永不执行的动画后面。
• 不得使用 transition: all。
• 入场动画使用缓出效果；退场动画时长更短。
• 不得在每次重新渲染时都触发动画（检查列表筛选、标签切换和排序）。
• 页面加载动画只在首次绘制时播放一次，返回导航时不得重复播放。
• 键盘触发的操作不得播放动画。

图标和图像

• 使用一套图标、一种描边宽度和 currentColor。
• 图标与文本在视觉上对齐（通常上移 1px）。
• 装饰性图标设置 aria-hidden。
• 图像：填写 alt，首屏以下的图像设置 loading="lazy"，使用现代格式，并为视网膜屏幕提供 srcset。
• 头像提供后备样式（中性背景上的姓名首字母），且尺寸完全一致。
• 外部项目的站点图标取自其网站声明的图标；无法获取时，使用字母方块作为后备。

感受得到的性能

• 预加载字体（首屏以上使用的两种字重），设置 font-display: swap 并覆盖字体度量。
• 路由切换时不闪白；画面保持持续显示。
• 在限速 CPU 上，主要操作的交互到下一次绘制时间低于 100ms。
• 对大型列表进行虚拟化；滚动时不在主线程上解码大图像。
• 为首屏以下的长篇内容区段设置 content-visibility: auto。
• 不要在循环中测量布局，以免反复触发布局计算。

供机器读取

• 标题构成清晰的大纲（一个 h1，然后是 h2……）。
• 设置地标：header、nav、main、footer；同类地标不止一个时，使用 aria-label 加以区分。
• 添加跳转到主要内容的链接。
• 如果内容属于列表、文章或产品，则添加结构化数据。
• 设置 robots、sitemap；如果网站是资源，则添加 llms.txt。

无 JavaScript 和慢速网络检查

• HTML 中包含所有文字和链接。关闭 JavaScript，阅读页面。
• 为展示动画而隐藏的元素，在没有 JS 时也应可见（html:not(.js) [data-reveal] { opacity: 1 }）。
• 将网络限速为 Slow 3G 并观察加载顺序。关键内容不能最后才加载。

发布门槛

满足以下条件时，界面才算完成：

1. 无需鼠标即可用 Tab 浏览每个屏幕。
2. 可单手拇指操作 375px 宽的屏幕。
3. 每个屏幕都能切换主题，且显示正常。
4. 开启减少动态效果后，没有内容缺失。
5. 可以查看每种状态：加载中、空、错误、完成。
6. 找不到任何未使用令牌的值：颜色、间距、缓动、时长、圆角。

来自目录的推荐

• 让界面体验更好的细节 — 体现了这份清单的理念。
• HTML 能做到这些 — 无需 JS，HTML 就能实现并随内容一起交付的行为。
• web.dev — Core Web Vitals 及衡量“速度感”的指标。
• Favicon 和 OG 工具 — 生成并检查资源文件。
• Lighthouse、axe 和各项检查 — 发布前运行。
• 更多内容请访问 stealth.pm/tools。