ui-ux-master

UI/UX 大师技能

融合 Apple 人机界面指南、现代网页设计模式、SuperDesign 原则和通用 UX 最佳实践的终极设计技能，助你在所有平台上打造卓越的用户体验。

设计理念

核心原则

1. 清晰胜过巧妙

• 信息层级一目了然
• 操作符合预期
• 反馈即时呈现
• 不需要时隐藏复杂性

2. 一致性带来熟悉感

• 界面中的模式保持一致
• 术语统一
• 视觉语言协调
• 遵循平台惯例

3. 简约之美

• 每个元素都有其用途
• 留白营造呼吸感
• 尽量减少视觉噪声
• 精心打磨细节

4. 无障碍不可妥协

• 无论能力如何，每个人都能使用
• 支持键盘导航
• 便于屏幕阅读器使用
• 提供高对比度选项

平台专属设计

Apple 平台（iOS、macOS、watchOS、tvOS、visionOS）

完整的 Apple HIG 模式请参阅 references/apple-platforms.md

Apple 核心原则：

• **清晰：**文字易读，图标精准，装饰克制
• **尊重内容：**以内容为先，UI 不干扰用户
• **层次：**视觉层级、真实的动效、空间感知

**适用场景：**原生 iOS、macOS、watchOS、tvOS 或 visionOS 应用

现代网页设计

完整的网页设计模式请参阅 references/web-design.md

网页设计核心原则：

• **响应式：**移动端优先，适配所有屏幕
• **高性能：**加载迅速，资源经过优化
• **渐进增强：**处处可用，并在条件允许时增强体验
• **语义化：**采用恰当的 HTML 结构和无障碍标记

**适用场景：**网站、网页应用、PWA、落地页、仪表板

设计系统

色彩理论

现代色彩系统：

• oklch() 色彩空间（感知均匀，现代）
• HSL 用于快速调整
• RGB/Hex 用于兼容旧系统

语义化颜色：

/* Light/Dark mode compatible */
--primary: oklch(0.649 0.237 267);
--secondary: oklch(0.556 0 0);
--background: oklch(0.145 0 0); /* dark */
--foreground: oklch(0.985 0 0); /* light text */
--muted: oklch(0.556 0 0 / 0.5);
--border: oklch(0.922 0 0 / 0.15);

避免使用：

• 通用的 bootstrap 蓝色（#007bff）——显得过时
• 纯黑色（#000000）——改用深灰色
• 低对比度文本（对比度低于 4.5:1）

颜色指南： 调色板、对比度和色彩心理学请参阅 references/color-systems.md

字体排印

系统字体（推荐）：

• **Apple：**SF Pro（iOS/macOS）、SF Compact（watchOS）
• **Web：**Inter、Outfit、DM Sans、Plus Jakarta Sans
• **等宽字体：**JetBrains Mono、Fira Code、Geist Mono
• 后备字体：-apple-system、system-ui、sans-serif

字体比例：

Display: 72px / 4.5rem
Heading 1: 48px / 3rem
Heading 2: 36px / 2.25rem
Heading 3: 24px / 1.5rem
Body: 16px / 1rem
Small: 14px / 0.875rem
Caption: 12px / 0.75rem

行高：

• 标题：1.2 - 1.3
• 正文：1.5 - 1.6
• 小号文本：1.4 - 1.5

字体搭配： 搭配规则和示例请参阅 references/typography.md

间距与布局

8 点网格系统：

• 基础单位：8px（0.5rem）
• 间距比例：8、16、24、32、40、48、56、64、80、96
• 微调时使用 4px 的倍数（4、12、20、28 等）

标准边距：

• 移动端：16px
• 平板：24px
• 桌面端：32-48px
• 最大宽度：1200-1400px

组件间距：

XS:  4px  - Tight groups (icon + text)
S:   8px  - Related items
M:   16px - Standard spacing
L:   24px - Section spacing
XL:  32px - Major sections
2XL: 48px - Page sections

布局模式： 网格、flexbox 和响应式模式请参阅 references/layout-patterns.md

组件设计

按钮

层级：

1. **主要：**实心填充，使用强调色，执行主要操作
2. **次要：**描边或浅色填充，执行辅助操作
3. **第三级：**幽灵按钮或纯文本按钮，视觉强调最低

状态：

• 默认
• 悬停（上浮或颜色变化）
• 激活（按下时缩小）
• 禁用（降低不透明度，不响应交互）
• 加载中（显示加载动画，按钮禁用）

尺寸：

• 小：高度 32-36px
• 中：高度 40-44px（默认）
• 大：高度 48-56px

最佳实践：

• 触控目标至少为 44×44px（移动端）
• 标签清晰且以操作为导向（使用“保存更改”，而非“确定”）
• 异步操作应显示加载状态
• 结合图标与文本，提升清晰度

表单

输入字段：

• 在字段上方设置清晰的标签
• 将占位符用作提示，而不是标签
• 显示焦点状态
• 内联验证
• 在字段附近显示错误消息
• 显示成功状态

字段尺寸：

• 单行：高度 40-48px
• 文本区域：最小高度 80-120px
• 宽度应与预期输入长度相匹配

表单布局：

• 使用单列布局，保持简洁
• 将相关字段分组
• 渐进式展示（按需显示复杂内容）
• 将保存按钮放在底部，清晰区分取消操作

最佳实践： 有关验证模式和无障碍设计，请参阅 references/forms.md

卡片

结构：

• 圆角：8-12px（现代风格），0px（粗野主义风格）
• 内边距：16-24px
• 阴影：轻微，最多 1-2 层
• 背景：比页面略微突出

类型：

• 扁平： 无阴影，仅有边框
• 凸起： 轻微阴影
• 交互式： 悬停时上移，可点击
• 玻璃拟态： 模糊 + 透明效果

内容：

• 顶部图片/图标（可选）
• 标题（标题级别）
• 描述/正文
• 底部操作

导航

模式：

• 顶部导航： 全局、持久显示（Web）
• 标签栏： 3-5 个主要版块（移动端）
• 侧边栏： 用于复杂应用，可折叠（桌面端）
• 汉堡菜单： 移动端备用方案，尽可能避免使用
• 面包屑： 显示层级位置

移动端导航：

• 底部标签栏（方便拇指操作）
• 使用汉堡菜单收纳溢出选项
• 带返回按钮的粘性页眉

桌面端导航：

• 顶部栏或侧边栏
• 使用下拉菜单呈现层级
• 突出显示搜索

参阅 references/navigation-patterns.md

动画与动效

时长：

• 快速： 100-200ms（按钮按下、悬停）
• 标准： 200-400ms（过渡、面板）
• 缓慢： 400-600ms（页面过渡、复杂动画）

缓动函数：

• ease-out： 适用于大多数动画（开始快，结束慢）
• ease-in： 适用于退出动画（开始慢，逐渐加速）
• ease-in-out： 平衡流畅（开始和结束都平滑）
• spring： 自然、活泼（CSS 或 JS 弹簧效果）

动画原则：

1. 预期： 暗示即将发生的变化
2. 跟随： 动作自然完成
3. 连续性： 元素平滑过渡
4. 响应性： 对交互立即反馈

微交互：

button: 150ms [scale: 1→0.95→1] (press)
hover: 200ms [translateY: 0→-2px] + shadow↗
fadeIn: 400ms [opacity: 0→1, translateY: 20→0]
slideIn: 300ms [translateX: -100%→0]

减少动效：

• 提供交叉淡化替代效果
• 遵循 prefers-reduced-motion
• 仅保留必要动画

完整的动画模式请参阅 references/animation-guide.md

现代设计趋势

深色模式

设计策略：

• 同时测试两种模式
• 使用语义颜色（自动适配）
• 通过轻微提亮来凸显表面层级
• 避免使用纯黑色（#000），改用深灰色

颜色映射：

/* Light mode */
--background: oklch(1 0 0);
--surface: oklch(0.98 0 0);
--text: oklch(0.15 0 0);

/* Dark mode */
--background: oklch(0.145 0 0);
--surface: oklch(0.205 0 0);
--text: oklch(0.985 0 0);

参阅 references/dark-mode.md

玻璃拟态

配方：

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

适用场景：

• 覆盖层（模态框、工具提示）
• 导航栏
• 丰富背景上的卡片
• 营造现代、高级的感觉

避免使用：

• 过度使用（会显得花哨）
• 对性能敏感的场景
• 浏览器支持不足的场景

新粗野主义

特点：

• 强烈阴影（4px 4px 0 black）
• 鲜明、饱和的颜色
• 黑色边框（2-3px）
• 无圆角
• 原始、未经修饰的美感

适用场景：

• 活泼、富有创意的品牌
• 面向年轻群体的产品
• 艺术/设计作品集
• 在“简洁”极简主义中脱颖而出

更多趋势请参阅 references/design-trends.md

响应式设计

断点：

Mobile:    < 640px
Tablet:    640px - 1024px
Desktop:   1024px - 1440px
Wide:      > 1440px

移动优先策略：

/* Base: Mobile */
.container { padding: 16px; }

/* Tablet */
@media (min-width: 640px) {
  .container { padding: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { 
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

响应式模式：

• 堆叠 → 侧边栏： 移动端使用单列布局，桌面端使用侧边栏
• 网格列数： 1 → 2 → 3 → 4 列
• 隐藏/显示： 渐进式展示
• 重新排序： 根据屏幕尺寸调整优先级

参阅 references/responsive-design.md

无障碍设计

WCAG 合规性

AA 级（最低要求）：

• ✅ 普通文本的对比度为 4.5:1
• ✅ 大号文本（18pt 及以上）的对比度为 3:1
• ✅ 支持键盘导航
• ✅ 焦点指示器清晰可见
• ✅ 图片提供替代文本
• ✅ 表单包含标签

AAA 级（理想标准）：

• ✅ 普通文本的对比度为 7:1
• ✅ 大号文本的对比度为 4.5:1
• ✅ 不包含仅有音频的内容
• ✅ 提供增强的焦点指示器

屏幕阅读器

最佳实践：

• 使用语义化 HTML（<nav>、<main>、<article>）
• 在需要时使用 ARIA 标签（aria-label、aria-labelledby）
• 保持标题层级逻辑清晰（h1 → h2 → h3）
• 提供跳过导航链接
• 播报动态内容（aria-live）

键盘导航

基本要求：

• Tab 键顺序符合逻辑
• 焦点清晰可见（使用轮廓或自定义样式）
• 按 Enter 键可激活按钮和链接
• 按 Escape 键可关闭模态框
• 使用方向键浏览列表和菜单

动效与动画

• 遵循 prefers-reduced-motion 设置
• 提供静态替代方案
• 不自动播放视频
• 提供暂停和停止控件

完整的 WCAG 检查清单请参见 references/accessibility.md

设计工具与资源

设计系统

• Material Design（Google）
• Human Interface Guidelines（Apple）
• Fluent Design（Microsoft）
• Lightning Design（Salesforce）
• Carbon（IBM）

图标库

• SF Symbols（Apple，6000+ 个图标）
• Lucide（开源、简洁）
• Heroicons（Tailwind 团队）
• Phosphor（字重灵活）
• Feather（简约、极简）

配色工具

• oklch.com - 现代化配色选择器
• coolors.co - 配色方案生成器
• contrast-ratio.com - WCAG 检查工具
• color.adobe.com - Adobe Color

字体排版工具

• Google Fonts - 免费网页字体
• fonts.google.com - 浏览字体并进行搭配
• fontpair.co - 字体搭配建议
• typ.io - 字体排版灵感

组件库

• Tailwind CSS（实用优先）
• shadcn/ui（可复制粘贴的组件）
• Flowbite（Tailwind 组件）
• Radix UI（无头基础组件）
• Chakra UI（无障碍 React）

完整列表请参见 references/tools-resources.md

设计工作流

1. 研究与探索

• 了解用户需求
• 研究竞争对手
• 明确核心用户流程
• 识别限制条件

2. 线框图设计

ASCII 线框图：

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

3. 视觉设计

• 定义主题（颜色、字体、间距）
• 设计关键屏幕
• 创建组件库
• 构建设计系统

4. 原型制作

• 交互式模型
• 用户测试
• 根据反馈迭代

5. 实现

• 响应式开发
• 无障碍测试
• 性能优化
• 跨浏览器测试

详细流程请参见 references/design-workflow.md

平台专属资源

Apple 平台

• Apple HIG 完整指南
• iOS 模式
• macOS 模式
• watchOS 模式
• SF Symbols 指南

Web 设计

• 现代 Web 模式
• CSS 架构
• JavaScript 交互
• 性能优化

移动 Web 与 PWA

• 响应式模式
• 触控交互
• PWA 最佳实践

快速决策指南

选择颜色？ → references/color-systems.md

设计表单？ → references/forms.md

需要导航模式？ → references/navigation-patterns.md

为 iOS 构建？ → references/apple-platforms.md

创建动画？ → references/animation-guide.md

有无障碍相关问题？ → references/accessibility.md

响应式布局？ → references/responsive-design.md

---

设计检查清单

✅ 视觉层级

• 最重要的元素突出醒目
• 相关项目归为一组
• 留白营造舒适的空间感

✅ 一致性

• 组件的外观和行为相似
• 术语在全文中保持统一
• 视觉语言连贯一致

✅ 反馈

• 操作会立即得到响应
• 加载状态清晰明确
• 错误提示有帮助且便于采取行动

✅ 无障碍

• 支持键盘导航
• 便于屏幕阅读器使用
• 色彩对比度充足
• 尊重用户偏好

✅ 性能

• 加载速度快（<3s）
• 动画流畅（60fps）
• 图像经过优化
• 尽量减少布局偏移

✅ 响应式

• 适用于所有屏幕尺寸
• 触控友好（44px 的目标尺寸）
• 智能调整内容

✅ 平台原生体验

• 遵循平台惯例
• 尽可能使用原生组件
• 尊重系统设置

---

终极 UI/UX 设计参考，融合 Apple HIG、现代 Web 设计和通用 UX 原则。