名称: 网页界面设计 描述: 用于设计或审查网页用户界面、实施表单/按钮/输入、修复视觉层次问题、创建颜色系统、构建布局，或当界面感觉混乱、难以阅读或用户不知道点击什么时使用。
网页界面设计
概述
设计的存在是为了区分主要和次要内容。用户应该立即识别出重要的东西。好的界面设计是隐形的—用户在完成任务时不会注意到界面。
这个技能协调特定领域的参考文件。只读你任务所需的内容。
参考文件索引
| 任务 | 加载参考 |
|---|---|
| 字体大小、行间距、标题层次、垂直韵律 | references/typography.md |
| 输入字段、验证、复选框、单选按钮、选择框、文本区域 | references/forms-and-inputs.md |
| 按钮层次、大小、状态、行动号召、幽灵按钮 | references/buttons.md |
| 颜色调色板、深色模式、色调/阴影、状态颜色 | references/color-systems.md |
| 导航、卡片、选项卡、手风琴、模态框、表格、提示信息 | references/ui-components.md |
| 网格、间距尺度、响应式模式、空白空间 | references/layout-and-spacing.md |
| 聚焦技术、层次原则、行动金字塔 | references/visual-hierarchy.md |
| 对比度比例、聚焦状态、屏幕阅读器、WCAG | references/accessibility.md |
| CSS实现模式、变量、常见样式 | references/css-patterns.md |
快速决策：使用哪个参考？
问题是什么？
├─ 文本难以阅读，间距感觉不对 → typography.md
├─ 表单工作不佳，验证问题 → forms-and-inputs.md
├─ 用户不知道点击什么 → buttons.md 或 visual-hierarchy.md
├─ 颜色看起来不对，深色模式损坏 → color-systems.md
├─ 需要导航/卡片/选项卡/模态框/表格 → ui-components.md
├─ 间距不一致，布局拥挤 → layout-and-spacing.md
├─ 所有元素都争夺注意力 → visual-hierarchy.md
├─ 可访问性审计或对比度问题 → accessibility.md
└─ 需要CSS实现 → css-patterns.md
通用快速参考
间距尺度（4px基础）
4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
字体基线
- 正文: 16px，行高1.5
- 标题:正文比例最大1:3（48px标题对应16px正文）
- 段落间距: 行高 ÷ 1.5
触摸目标
- 最小: 44×44px
- 推荐: 48×48px
对比度最小值（WCAG）
- 正常文本: 4.5:1
- 大文本（18px以上或14px以上粗体）: 3:1
- UI组件: 3:1
按钮层次
| 层级 | 用于 | 处理方式 |
|---|---|---|
| 主要 | 主要操作（每个视图一个） | 实心填充，高对比度 |
| 次要 | 替代操作 | 轮廓线或微妙填充 |
| 三级 | 次要操作 | 仅文本或幽灵 |
深色模式要点
- 背景: #121212（非纯黑）
- 文本: #E0E0E0（非纯白）
- 降低颜色饱和度
常见错误检查清单
- [ ] 每个视图有多个主要按钮
- [ ] 占位符作为唯一标签
- [ ] 纯白在纯黑上
- [ ] 薄/浅字体粗细
- [ ] 仅颜色错误指示
- [ ] 长居中文本
- [ ] 间距值不一致
设计审查协议
- 层次: 主要操作是否明显？你能分辨什么重要吗？
- 可读性: 文本对比度OK？行长度合理（45-75字符）吗？
- 表单: 标签在字段上方？触摸目标44px以上？有幫助的错误提示吗？
- 间距: 一致的尺度？元素周围有呼吸空间吗？
- 可访问性: 颜色不是唯一指示？聚焦状态可见吗？
何时不使用此技能
- 纯视觉品牌/身份工作
- 营销文案决策
- 后端架构
- 移动原生模式（iOS/Android不同）
来源
- 网页界面手册 by Aleksei Baranov (Imperavi)
- 用户界面字体 by Imperavi
- 重构UI by Wathan & Schoger
- WCAG 2.1 可访问性指南