effective-ui-design

高效 UI 设计

贯彻专业 UI 设计准则，打造无障碍、结构清晰的界面。所有 UI 设计决策都必须遵守这些规则，不得例外。

快速参考

主题	参考文件
基础原则	references/01-fundamentals.md
少即是多	references/02-less-is-more.md
色彩	references/03-colour.md
布局与间距	references/04-layout-spacing.md
字体排印	references/05-typography.md
Web 字体	references/05b-webfonts.md
文案撰写	references/06-copywriting.md
按钮	references/07-buttons.md
表单	references/08-forms.md
前端 SEO	references/09-seo.md

核心原则（始终遵守）

1. 将可用性风险降至最低

• 满足 WCAG 2.1 AA 级无障碍要求
• 考虑视力不佳、计算机使用能力较弱或灵活度受限的用户
• 避免使用纤细或浅灰色文字、没有标签的图标，以及看起来像链接的彩色标题

2. 每个设计细节都要有合理依据

• 每个元素都必须有助于提升可用性
• 基于客观逻辑进行设计，而非主观意见
• 能够清楚说明每项决策背后的理由

3. 将交互成本降至最低

• 将相关操作放在相近位置（菲茨定律）
• 减少干扰
• 减少选择项（希克定律）
• 目标区域至少为 48pt × 48pt

4. 将认知负荷降至最低

• 删除不必要的样式和信息
• 将信息拆分成更小的组块
• 使用熟悉的设计模式（雅各布定律）
• 保持一致性
• 建立清晰的视觉层级

5. 创建设计系统

• 定义预设的配色方案
• 设定字体比例
• 使用 8pt 间距增量：8pt、16pt、24pt、32pt、48pt、80pt
• 创建可复用组件

关键规则（绝不可违反）

色彩

• 文字对比度：最低 4.5:1（小号文字 ≤18px）
• 大号文字/UI 元素：最低 3:1
• 绝不可只依靠颜色传达含义
• 品牌色仅用于交互元素
• 避免在白色背景上使用纯黑色（#000000），应改用深灰色
• 使用 OKLCH 创建感知均匀的配色方案；使用相对颜色语法生成变化
• 使用 light-dark() 切换主题，避免重复编写媒体查询

字体排印

• 大多数界面使用单一无衬线字体
• UI 文字（标签、按钮、导航）：基准字号为 14px
• 正文：基准字号为 16px；长篇阅读可通过 clamp() 调整至 18-20px
• 行高：正文至少为 1.5（150%）
• 行长：每行 40-80 个字符
• 文本左对齐（针对英文）
• 限制字体字重：通常使用 2 种，最多 3 种（例如 Regular 400、Medium 500、Bold 700）

布局

• 根据元素之间的关系设置间距（距离越近，关系越密切）
• 主布局使用 12 列网格
• 对齐元素，形成整齐的边缘
• 留出充足的留白
• 使用容器查询实现组件级响应式布局；使用媒体查询实现页面级布局
• 使用 subgrid 对齐同级元素中的嵌套内容（例如卡片网格）
• 使用响应式图片（srcset、loading="lazy"、aspect-ratio）以防止布局偏移
• 仅在 @media (hover: hover) and (pointer: fine) 条件下启用悬停效果——绝不可将内容隐藏在悬停效果之下
• 对带刘海屏设备上的固定/粘性元素，配合 viewport-fit=cover 使用 env(safe-area-inset-*)

图标

• 只使用 SVG 图标——绝不可使用表情符号或图标字体
• 统一使用一套图标库（例如 Lucide、Heroicons、Phosphor）
• 使用 currentColor 继承文字颜色；使描边宽度与字体字重相匹配
• 图标始终配有可见的文字标签；仅含图标的按钮需要 aria-label

按钮

• 定义 3 种按钮权重：主要、次要、三级
• 每个屏幕只使用一个主要按钮
• 按钮左对齐（最重要的放在最前）
• 按钮文案：动词 + 名词（例如：“保存帖子”）
• 最小尺寸：48pt × 48pt
• 避免使用禁用按钮；改为在提交时进行验证

表单

• 采用单列布局
• 将标签置于输入框上方
• 标注必填（*）和选填字段
• 根据预期输入内容设置字段宽度
• 使用常见的表单字段样式
• 在字段上方显示提示（不要放在下方）
• 使用 :user-valid/:user-invalid 实现遵循交互时机的验证

SEO

• 每个页面使用唯一的 <title>（50-60 个字符，主要关键词尽量靠前）
• 每个页面使用唯一的 <meta name="description">（150-160 个字符）
• 每个页面都设置指向自身的 <link rel="canonical">
• 每个页面使用一个 <h1>，并采用逻辑清晰的标题层级（不可跳级）
• 添加用于社交分享的 Open Graph 标签（og:title、og:description、og:image）
• 添加 JSON-LD 结构化数据以获得丰富搜索结果（Article、Product、BreadcrumbList、FAQPage）
• 使用描述性、以连字符分隔的图片文件名和自然的替代文本
• 满足 Core Web Vitals 指标：LCP < 2.5s、INP < 200ms、CLS < 0.1

网站图标

• 五种图标：favicon.ico（32×32）、icon.svg（支持深色模式）、apple-touch-icon.png（180×180）、icon-192.png、icon-512.png
• SVG 网站图标支持 @media (prefers-color-scheme: dark)，以自动适配深色模式
• 对于 PWA：添加 manifest.webmanifest，包含 icon-192.png、icon-mask.png（512×512，可遮罩）和 icon-512.png
• 可遮罩图标需要额外留白——安全区域为一个 409×409 的圆形
• 不要生成多个尺寸的 PNG、多个尺寸的 Apple 触控图标或 browserconfig.xml

设计检查清单

定稿任何 UI 设计前：

1. 无障碍性

   • 所有文本的对比度至少为 4.5:1
   • UI 元素的对比度至少为 3:1
   • 不要只用颜色传达信息
   • 目标区域的最小尺寸为 48pt
   • 文本链接带下划线
   • 使用语义化 HTML（<nav>、<main>、<search>、地标）
   • 图标带有可见的文本标签（仅图标按钮使用 aria-label）
   • 图片具有有意义的 alt 文本（装饰性图片使用空 alt=""）
   • 跳过链接是第一个可聚焦元素
   • 视口 meta 标签未禁用缩放（user-scalable=no / maximum-scale=1）
   • 复合控件（标签页、工具栏、菜单）使用单个 Tab 停靠点，并支持方向键导航

2. 视觉层级

   • 重要性顺序清晰
   • 主要操作最醒目
   • 将相关元素分组
   • 使用一致的间距

3. 排版

   • 使用 1-2 种字体（可选添加展示字体/标题字体）
   • UI 文本不小于 14px，正文不小于 16px（长篇阅读使用 18-20px）
   • 正文行高至少为 1.5
   • 文本左对齐
   • 每行 40-80 个字符

4. 文案

   • 文本简洁（不含不必要的词语）
   • 使用句首字母大写格式
   • 使用通俗语言（避免术语）
   • 重要信息前置
   • 按钮文案具有描述性

5. 表单

   • 采用单列布局
   • 标签位于输入框上方
   • 标注必填/选填字段
   • 字段宽度与预期输入内容相匹配
   • 边框对比度高（至少为 3:1）

6. SEO

   • 使用包含主要关键词的唯一 <title>（50-60 个字符）
   • 使用唯一的 <meta name="description">（150-160 个字符）
   • 设置指向自身的 canonical 标签
   • 每个页面使用一个 <h1>，标题层级不可跳级
   • 包含 Open Graph 标签（og:title、og:description、og:image）
   • 在适用时添加 JSON-LD 结构化数据
   • 图片文件名和替代文本具有描述性
   • LCP 图片不启用延迟加载，并设置 fetchpriority="high"
   • 网站图标：favicon.ico、icon.svg（支持深色模式）、apple-touch-icon.png、icon-192.png、icon-512.png
   • PWA：manifest.webmanifest 包含 icon-192.png、icon-mask.png（可遮罩）和 icon-512.png

实现

创建 UI 代码时：

1. 阅读相关参考文件，了解详细指南
2. 无一例外地应用所有规则
3. 根据上方的清单进行检查
4. 使用预定义的间距比例（以 8pt 为增量）
5. 使用 references/03-colour.md 中的色彩调色板结构
6. 使用 Popover API 实现工具提示、下拉菜单和菜单（无需 JS 库）
7. 使用 @starting-style 为对话框和弹出层实现纯 CSS 入场动画
8. 使用 View Transition API 实现页面过渡和共享元素动画；始终遵循 prefers-reduced-motion

色彩调色板模板（OKLCH）

Brand:         oklch(60% 0.15 hue)     - Interactive elements
Text strong:   oklch(25% 0.02 hue)     - Headings, primary text (4.5:1+)
Text weak:     oklch(45% 0.02 hue)     - Secondary text (4.5:1+)
Stroke strong: oklch(58% 0.02 hue)     - Form borders, icons (3:1+)
Stroke weak:   oklch(92% 0.005 hue)    - Decorative borders
Fill:          oklch(97% 0.003 hue)    - Secondary backgrounds
Background:    oklch(100% 0 0)         - White or near-white

字体排印比例（1.200 小三度）

Heading 1: 40px / 48px line-height / bold
Heading 2: 32px / 40px line-height / bold
Heading 3: 24px / 32px line-height / bold
Heading 4: 20px / 28px line-height / bold
Body:      16px / 24px line-height / regular
Small:     14px / 20px line-height / regular

间距比例（8pt 网格）

XS:  8pt   - Closely related elements
S:   16pt  - Related elements
M:   24pt  - Component padding
L:   32pt  - Grid gutters, section gaps
XL:  48pt  - Large section gaps
XXL: 80pt  - Page section padding