Web 界面指南检查清单（针对 LLMs 与 vibe coders）
发布: (2026年1月17日 GMT+8 02:40)
7 min read
原文: Dev.to
Source: Dev.to
Interaction
- 键盘在所有地方都能使用（WAI‑ARIA 模式）
- 清除聚焦环（
:focus-visible） - 管理焦点（捕获、移动、返回）
- 匹配视觉和点击目标（桌面 ≥ 24 px，移动 ≥ 44 px）
- 移动端输入字体 ≥ 16 px
- 永不禁用缩放
- 水合安全的输入框
- 永不阻止粘贴
- 加载按钮显示指示器 + 原始标签
- 最小加载时长（延迟 150‑300 ms，最少 300‑500 ms）
- 将 URL 作为状态（可分享、可刷新）
- 乐观更新并可回滚
- 省略号用于进一步输入和加载状态
- 确认破坏性操作
- 控件上使用
touch-action: manipulation - 设置
-webkit-tap-highlight-color - 充足的点击目标，可预测的交互
- 首个工具提示延迟，同行元素无延迟
- 在模态框/抽屉中使用
overscroll-behavior: contain - 返回/前进时保持滚动位置
- 桌面自动聚焦单个输入框（移动端很少）
- 没有死区——交互元素看起来可交互
- 为所有内容深度链接（过滤器、标签页、面板）
- 清晰的拖拽交互（禁用选择，使用
inert） - 链接使用
<a>或<button>（而不是 button/div） - 宣告异步更新（
aria-live） - 本地化键盘快捷键
- 尊重
prefers-reduced-motion
Animation
- 首选 CSS > Web Animations API > JS 库
- GPU 加速属性（
transform、opacity） - 仅在提升清晰度或带来愉悦时使用动画
- 缓动应符合主题
- 可被用户输入中断
- 由输入驱动，而非自动播放
- 正确设置
transform-origin - 切勿使用
transition: all（仅对明确属性使用） - 在
<svg>包装器上使用transform-box: fill-box的 SVG 变换
Source: …
Layout
- 光学对齐（± 1 px 调整）
- 有意的对齐（网格、基线、边缘、居中）
- 平衡文本/图标组合的对比度
- 在移动设备、笔记本、超宽屏幕上测试
- 尊重安全区域（凹口、内嵌）
- 不出现过多滚动条
- 让浏览器自行布局（优先使用 flex/grid 而非 JS）
- 首选内联帮助，最后使用提示框
- 稳定的骨架屏应与最终内容相匹配
- 精确的
<title>反映上下文 - 没有死路（提供下一步或恢复方案）
- 设计所有状态（空、稀疏、密集、错误）
- 使用弯引号（“ ”）
- 避免孤行/寡行
- 使用等宽数字进行比较
- 冗余的状态提示（不要仅靠颜色）
- 图标配有文字标签
- 即使标签隐藏，也要有可访问名称
- 使用省略号字符（
…），而非三个句点 - 在标题上使用
scroll-margin-top - 优雅地处理短、普通和长内容
- 本地化格式（日期、数字、货币）
- 通过
Accept-Language获取语言，而非 IP/GPS - 精确使用
aria-label、aria-hidden - 仅含图标的按钮需添加
aria-label - 语义优先于 ARIA（先使用原生元素）
- 分层
<nav>+ 跳过链接 - 通过右键点击徽标获取品牌资源
- 对粘连词使用不换行空格（
⁠） - 按 Enter 提交（单输入框或最后一个控件）
- 多行文本框：⌘/⌃ + Enter 提交，Enter 换行
- 每个控件都有
<label>或关联 - 点击标签可聚焦对应控件
- 提交按钮在请求进行中保持禁用（显示 spinner + 幂等键）
- 不阻止输入（验证而非限制）
- 不预先禁用提交（表层验证）
- 复选框/单选框没有死区
- 错误信息显示在字段旁，提交时聚焦第一个错误
- 设置
autocomplete与有意义的name - 对电子邮件、代码、用户名禁用拼写检查
- 正确使用
type与inputmode - 占位符以省略号结尾，展示示例
- 在有未保存更改时导航前提示
- 与密码管理器和双因素认证兼容
- 不要在非认证字段触发密码管理器
- 去除输入末尾的空白字符
- 为
<input>设置background-color与color
Performance
- 测试 iOS 低功耗模式 与 macOS Safari
- 在分析时禁用扩展
- 跟踪重新渲染（React DevTools，React Scan）
- 在分析时限制 CPU/网络
- 最小化布局工作（批量读取/写入）
-
POST/PATCH/DELETE<link rel="preload">对资产/CDN 域使用 - 预加载关键字体
- 子集化字体（
unicode-range） - 将耗费资源的工作放入 Web Workers
- 分层阴影（环境 + 直接）
- 清晰的边框 + 阴影
- 嵌套圆角（子 ≤ 父，同心）
- 非中性背景上的色相一致性
- 对色盲友好的图表配色方案
- 对比度优先使用 APCA 而非 WCAG 2
- 交互时提升对比度
- 设置
<meta name="color-scheme"> - 在
<html>上设置color-scheme: dark以实现暗色主题 - 动画作用于包装元素，而非文本节点（或使用
translateZ(0)） - 避免渐变条纹（使用背景图像）
文案与内容
- 主动语态
- 标题/按钮：标题大小写（Chicago）
- 营销页面：句子大小写
- 清晰简洁
- 适当时使用“&”而非“and”
- 行动导向语言
- 名词保持一致
- 使用第二人称，避免第一人称
- 占位符保持一致（例如，
YOUR_API_TOKEN_HERE，0123456789） - 计数使用数字
- 货币格式统一（0 或 2 位小数，切勿混用）
- 数字与单位之间留空格（
10 MB，使用 - 默认使用积极语言
- 错误信息应指引退出
- 避免歧义（使用具体标签）