文章,

🔥 Vercel 官方设计指南大公开！Web 界面设计的 7 大黄金法则，让你的产品瞬间提升 10 倍用户体验

Web 界面指南

界面的成功来自成百上千个抉择。此清单是持续更新的、非穷尽的实践集合。多数指南与框架无关，部分条目针对 React/Next.js。欢迎反馈。

交互（Interactions）

  • 键盘无处不在：所有流程都需可用键盘操作，并遵循 WAI-ARIA Authoring Patterns。
  • 清晰的焦点：所有可聚焦元素都要显示可见的焦点环；优先用 
    1

    :focus-visible
    ，成组控件可用 
    1

    :focus-within
    。
  • 管理焦点：使用焦点陷阱，按 WAI-ARIA 规范移动并归还焦点。
  • 视觉与点击目标一致：若视觉目标 < 24px，扩大命中区域 ≥ 24px；在移动端最小 44px。
  • 移动端输入字号：
    1

    <input>
    在移动端字体 ≥ 16px 以避免 iOS Safari 聚焦时自动放大；或设置 
    1

    meta viewport
    限制缩放。
  • 尊重缩放：不要禁用浏览器缩放。
  • 水合安全输入：水合后输入框不应丢失焦点或值。
  • 允许粘贴：不要禁用 
    1

    <input>
    /
    1

    <textarea>
    的粘贴。
  • 按钮加载态：显示加载指示器并保留原标签文案。
  • 最小加载显示时长：给骨架/菊花添加 150–300ms 的显示延迟与 300–500ms 的最小可见时长，避免闪烁；React 的 
    1

    <Suspense>
    会自动处理。
  • URL 即状态：把状态持久化到 URL，支持分享/刷新/前进后退（例如 nuqs）。
  • 乐观更新：成功概率高时先更新 UI；待服务端回应再对账；失败则提示错误并回滚或提供撤销。
  • 省略号规则：会引出后续输入的菜单项以”…”结尾（如”重命名…”）。
  • 破坏性操作需确认：要求确认或提供可撤销窗口。
  • 阻止控件双击放大：设置 
    1

    touch-action: manipulation
    。
  • 点击高亮可控：设置 
    1

    -webkit-tap-highlight-color
    。
  • 宽容交互：更大命中区、清晰可供性、可预测交互（如”预测锥”）。
  • 提示气泡时序：一组内首个延迟，后续同组不延迟。
  • 过滚动行为：在模态/抽屉等场景有意设置 
    1

    overscroll-behavior: contain
    。
  • 滚动位置持久：前进/后退应恢复上次滚动。
  • 自动聚焦提速：桌面端且只有一个主要输入时自动聚焦；移动端很少自动聚焦以免键盘导致布局移动。
  • 无”死区”：看起来可点的区域都应可点。
  • 深链一切：筛选、标签页、分页、展开面板，凡是用 
    1

    useState
    的状态都可深链。
  • 干净拖拽：拖拽时禁用文本选择并应用 
    1

    inert
    ，避免同时触发选中/悬停。
  • 链接就是链接：导航使用 
    1

    <a>
    /
    1

    <Link>
    ，不要用 
    1

    <button>
    /
    1

    <div>
    代替，以保留新开标签等浏览器行为。
  • 公告异步更新：对吐司/行内校验用礼貌的 aria-live。
  • 本地化快捷键：适配非 QWERTY 键位并显示平台符号。

动效（Animations）

  • 尊重 
    1

    prefers-reduced-motion
    ，提供低动效版本。
  • 实现优先级：首选 CSS，其次 Web Animations API，再次 JS 库。
  • 复合层友好：优先 
    1

    transform
    /
    1

    opacity
    ，避免触发布局/重绘的属性。
  • 必要性检查：只在澄清因果或带来”恰到好处的愉悦”时使用动效。
  • 缓动契合对象：根据变化的内容选择缓动。
  • 可打断：用户输入可取消动画。
  • 输入驱动：避免自动播放，响应用户动作。
  • 正确的变换原点：从”物理上”的起点出发。
  • 禁用 
    1

    transition: all
    ：只列出需要的属性（常见为 
    1

    opacity
    、
    1

    transform
    ）。
  • 跨浏览器 SVG 变换：对 
    1

    <g>
    外包一层并设置 
    1

    transform-box: fill-box; transform-origin: center;
    。

布局（Layout）

  • 光学对齐：当感知优于几何时，允许 ±1px 的微调。
  • 有意对齐：每个元素都与某个网格/基线/边缘/视觉中心对齐，避免偶然摆放。
  • 锁定组合的对比平衡：图标与文字并列时调节粗细/大小/间距/颜色以避免冲突。
  • 响应式覆盖：在手机/笔电/超宽屏都验证；超宽用 50% 缩放模拟。
  • 安全区：考虑刘海与内边距（safe-area 变量）。
  • 避免多余滚动条：修正溢出，只渲染有用滚动条；macOS 可设”始终显示”以模拟 Windows。
  • 让浏览器决定尺寸：优先 flex/grid/内在布局，避免 JS 测量引发抖动。

内容（Content）

  • 优先行内帮助：工具提示是下下策。
  • 稳定骨架屏：骨架应与最终内容结构一致，避免布局跳动。
  • 精准页面标题：
    1

    <title>
    需反映当前上下文。
  • 无死路：每个页面都提供下一步或补救路径。
  • 所有状态都设计：空/稀疏/密集/错误态。
  • 引号：优先弯引号（” “）。
  • 避免”寡行/孤行”：整理换行与参差边。
  • 比较用等宽数字：
    1

    font-variant-numeric: tabular-nums
    或使用等宽字体（如 Geist Mono）。
  • 冗余状态提示：不要只靠颜色，还要有文字标签。
  • 图标配标签：给非视力用户提供文本等价。
  • 不要把”无障碍语义”漏掉：视觉可省标签，但无障碍名/标签仍需存在。
  • 使用省略号字符：用 
    1

    …
    而不是 
    1

    ...
    。
  • 锚点标题：为可链接的标题设置 
    1

    scroll-margin-top
    。
  • 适应用户生成内容：布局能处理短/中/极长文本。
  • 本地化格式：日期/时间/数字/分隔符/货币按用户本地化。
  • 语言优先于位置：通过 
    1

    Accept-Language
    与 
    1

    navigator.languages
    检测语言，不要靠 IP/GPS。
  • 无障碍内容：准确设置 
    1

    aria-label
    ，装饰性元素用 
    1

    aria-hidden
    ，并在可访问性树中验证。
  • 仅图标按钮要命名：提供描述性的 
    1

    aria-label
    。
  • 语义优先于 ARIA：优先原生元素（
    1

    button
    /
    1

    a
    /
    1

    label
    /
    1

    table
    ）。
  • 标题层级与跳转链接：正确使用 
    1

    <h1–h6>
    ，提供”跳至内容”链接。
  • 从 Logo 获取品牌资源：右击导航 Logo 可快速获取品牌资产。
  • 不换行空格：单位、快捷键、名称用 
    1

    &nbsp;
    粘连（如 
    1

    10&nbsp;MB
    、
    1

    ⌘&nbsp;+&nbsp;K
    、
    1

    Vercel&nbsp;SDK
    ）；不加空格可用 
    1

    &#x2060;
    。

表单（Forms）

  • Enter 提交：文本输入聚焦时，回车提交。
  • 文本域行为：
    1

    ⌘/Ctrl+Enter
    提交；单独 Enter 换行。
  • 标签无处不在：每个控件都有 
    1

    <label>
    或等效关联。
  • 点击标签聚焦控件。
  • 提交规则：提交开始前保持可点击；请求在途时禁用并显示加载，包含等幂键。
  • 不要阻断输入：即便只接受数字也允许任意键入，再做校验反馈。
  • 不要预先禁用提交：允许提交不完整表单以暴露校验。
  • 控件无”死区”：复选/单选的控件与标签合并成大命中区。
  • 错误就地显示：在字段旁显示；提交后聚焦首个错误。
  • 自动填充：设置合适的 
    1

    autocomplete
    与有意义的 
    1

    name
    。
  • 选择性拼写检查：对邮箱、代码、用户名等禁用拼写检查。
  • 正确的 
    1

    type
    /
    1

    inputmode
    ：获得更好的键盘与校验。
  • 占位符表示”空”：以省略号结尾。
  • 占位符示例值：放示例或模式（如电话号码、API Key）。
  • 未保存更改：离开前警告可能丢失数据。
  • 密码管理器与 2FA：确保兼容，允许粘贴一次性验证码。
  • 不要误触发密码管理器：搜索等非认证字段避免保留名；用 
    1

    autocomplete="off"
    或更具体的 token（如 
    1

    one-time-code
    ）。
  • 文本替换/扩展：某些输入法会加尾随空格；应自动裁剪避免造成误报。
  • Windows 的 
    1

    <select>
    背景    ：显式设置 
    1

    background-color
    与 
    1

    color
    以避免暗色模式对比度问题。

性能（Performance）

  • 设备/浏览器矩阵：测试 iOS 省电模式与 macOS Safari。
  • 可靠测量：禁用会增加开销或改变运行时的扩展。
  • 追踪重渲染：最小化并加速重渲染（用 React DevTools/React Scan）。
  • 降速剖析：对 CPU/网络做限速测试。
  • 最小化布局工作量：批量读/写，避免不必要回流/重绘。
  • 网络时延预算：
    1

    POST/PATCH/DELETE
    < 500ms 完成。
  • 按键成本：优先非受控输入；若受控，保证回路足够便宜。
  • 大列表：虚拟化（如 virtua 或 
    1

    content-visibility: auto
    ）。
  • 明智预加载：首屏图片预加载，其余延迟加载。
  • 图片不引发 CLS：为图片设置明确尺寸并预留空间。
  • 预连接：对资源/CDN 域使用 
    1

    <link rel="preconnect">
    （必要时加 
    1

    crossorigin
    ）以降低 DNS/TLS 延迟。
  • 预加载字体：为关键文本预加载以避免闪烁与布局移位。
  • 字体子集化：只运送需要的字符范围/变量轴以缩小体积。
  • 避免主线程重活：把超长任务移到 Web Workers，别阻塞交互。

设计（Design）

  • 分层阴影：用至少两层模拟环境光+直射光。
  • 清晰边界：边框与阴影配合；半透明边框可增强边缘清晰度。
  • 半径内外嵌：子元素圆角 ≤ 父元素且同心。
  • 色相一致：非中性背景上，边框/阴影/文字往同一色相微调。
  • 无障碍图表：使用色盲友好调色板。
  • 最小对比：更偏好 APCA 而非 WCAG 2 以获得更符合感知的对比。
  • 交互态提高对比：
    1

    :hover
    /
    1

    :active
    /
    1

    :focus
    比静止态更高对比。
  • 浏览器 UI 与背景一致：设置 
    1

    <meta name="theme-color">
    与页面背景对齐。
  • 设置 
    1

    color-scheme
    ：暗色主题在 
    1

    <html>
    上设 
    1

    color-scheme: dark
    以匹配滚动条等设备 UI。
  • 文本抗锯齿与变换：缩放文本会改变平滑；优先给包装容器做动画；必要时 
    1

    translateZ(0)
    /
    1

    will-change
    升层。
  • 避免渐变断带：必要时用遮罩改善。

Vercel 特定偏好（Vercel-specific）

这些偏好反映 Vercel 的品牌与产品选择，不是通用准则。

文案（Copywriting）

  • 主动语态（例：”安装 CLI”，而非”CLI 将被安装”）。
  • 标题/按钮用标题式大小写（Chicago）；营销页用句式大小写。
  • 清晰、简洁、最少用词。
  • 优先用”&”而非”and”。
  • 行动导向（例：”安装 CLI…”，而非”你将需要 CLI…”）。
  • 名词一致，减少术语数量。
  • 第二人称写作，避免第一人称。
  • 占位符一致：字符串 
    1

    YOUR_API_TOKEN_HERE
    ；数字 
    1

    0123456789
    。
  • 计数用阿拉伯数字（如”8 次部署”）。
  • 货币格式一致：同一上下文中要么 0 小数位，要么 2 位，不能混用。
  • 数字与单位留空格（用不换行空格）：如 
    1

    10 MB
    。
  • 默认积极表述：即便报错也用鼓励/可解的问题表述（如”出错了——重试或联系支持”）。
  • 错误信息引导解决：不仅说明错在哪，还告诉如何修（如”API Key 不正确或过期，请在账号设置生成新 Key”），并配合明确的按钮/链接。
  • 避免歧义：标签具体清晰（如用”保存 API Key”，别用”继续”）。

与 Agent 集成（Integrate with Agents）

提供一份 

1

AGENTS.md
供 Agent 使用。将此文件与 Agent 搭配，以确保自动生成的界面遵循这些指南；建议审计所有生成的界面。页面提供下载链接。

Agent.md 下载

参考

Web Interface Guidelines

文章大纲
Prompt Engineering
获得 α 收益