UI/UX 设计

名称：ui-ux-design
描述：面向 Web 与移动应用的现代 UI/UX 设计原则、模式及最佳实践。适用于构建用户界面、设计布局、选择配色方案、实现响应式设计、确保可访问性（WCAG）、或打造美观现代的应用程序。涵盖 2026 年设计趋势、Tailwind CSS 模式、Shadcn/ui 集成、微交互（micro-interactions）以及移动优先（mobile-first）响应式设计。

何时使用本技能

在以下场景中启用该技能：

• 构建或设计 Web / 移动端界面
• 选择配色、字体排印（typography）或布局系统
• 实现响应式设计（移动优先）
• 确保符合可访问性规范（WCAG 2.2）
• 搭建 Shadcn/ui + Tailwind CSS 项目
• 创建微交互与动画效果
• 编码前评审 UI/UX 决策

核心设计原则

1. 始终坚持移动优先

• 从 320px 宽度（最小手机屏幕）开始设计
• 断点设置：576px（手机）、768px（平板）、992px（笔记本）、1200px（桌面）
• 默认采用单列布局，仅当空间允许时再扩展为多列

2. 视觉层级

通过以下方式引导用户注意力：

• 尺寸：越大越重要
• 颜色：明亮/高对比度 = 吸引注意
• 留白（Whitespace）：留白越多 = 强调程度越高
• 邻近性（Proximity）：相关元素分组呈现
• 对比度（Contrast）：深色文字配浅色背景，或浅色文字配深色背景（正文文本最低对比度 4.5:1）

3. 留白是你的利器

• 元素间距以 8px 为基准倍数设定（8、16、24、32、48、64）
• 区块之间留白：至少 48–64px
• 卡片内边距（padding）：24–32px

速查指南

色彩体系

构建主色阶（50–900）：

• 主色（Primary）：品牌色（用于主要操作按钮 CTA、链接、激活态等）
• 中性色（Neutrals）：灰阶 50–900（用于文字、背景、边框）
• 语义色（Semantic）：成功（绿色）、错误（红色）、警告（黄色/橙色）

推荐工具：Huevy.app、Coolors.co、Adobe Color

字体排印比例（8px 基线）

text-xs:   12px / 16px 行高
text-sm:   14px / 20px
text-base: 16px / 24px（正文默认字号）
text-lg:   18px / 28px
text-xl:   20px / 28px
text-2xl:  24px / 32px
text-3xl:  30px / 36px（章节标题）
text-4xl:  36px / 40px
text-5xl:  48px / 1（首页大标题）

字体搭配建议：最多使用 2 种字体（UI 使用无衬线字体，标题可选配衬线字体）

布局模式

• CSS Grid：二维布局（页面整体结构）
• Flexbox：一维布局（组件内部结构）
• 自动适配网格（Auto-fit grid）：repeat(auto-fit, minmax(280px, 1fr))（无需媒体查询！）

微交互（Micro-Interactions）

• 悬停（Hover）：缩放至 1.05x（增强按钮可点击感）
• 点击（Click）：缩放至 0.95x（提供触觉反馈）
• 持续时间：最长 0.2–0.3 秒（保持克制）
• 仅对以下属性做动画：transform 和 opacity（GPU 加速）

可访问性（WCAG 2.2）

• 文字对比度：正文最低 4.5:1，大号文字（≥18pt 或加粗 ≥14pt）最低 3:1
• UI 组件对比度：最低 3:1
• 键盘导航：Tab 键序逻辑清晰，焦点状态可见（焦点框对比度 ≥3:1）
• ARIA 标签：所有按钮、图片、交互式元素必须提供 ARIA label

Shadcn/ui + Tailwind 技术栈

初始化（Next.js）

npx create-next-app@latest project-name --typescript --tailwind --app
cd project-name
npx shadcn@latest init

配置选项建议：样式（Default）、基础色（Blue 或自定义）、CSS 变量（Yes）

添加组件

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add calendar

组件将生成于 components/ui/ 目录下——代码完全由你掌控，可自由定制。

Tailwind 最佳实践

• 使用设计标记（design tokens），避免任意值：p-4 而非 p-[17px]
• 响应式工具类：w-full md:w-1/2 lg:w-1/3
• 暗色模式支持：dark:bg-gray-900 dark:text-white

构建前检查清单

编写代码前，请确认以下事项均已明确：

• 配色方案已定义（主色 + 中性色 + 语义色）
• 字体排印比例已选定（6–8 个字号）
• 组件库已确定（Shadcn + Tailwind）
• 移动端断点已规划（576px、768px、992px）
• 可访问性对比度已验证（正文 4.5:1，UI 元素 3:1）
• 微交互清单已列出（悬停、点击、成功态等）
• 网格布局草图已完成（从移动端到桌面端的演进）

灵感来源

值得深入研究的产品：

• Linear（linear.app）—— 键盘优先体验最佳的 UI，动画细腻克制
• Stripe Dashboard —— 数据可视化简洁清晰，间距精准到位
• Vercel —— 极简主义风格，加载迅速，渐变现代感强
• Notion —— 拖拽操作直观自然，信息层级一目了然

实用工具：

• Figma（编码前完成原型与交互稿）
• WebAIM Contrast Checker（可访问性对比度检测）
• Coolors / Huevy（配色方案生成）

精美 UI 的五大法则

1. 对比创造层级（大小对比、明暗对比）
2. 留白营造宁静（不必畏惧空白区域）
3. 一致建立信任（相同模式反复出现）
4. 反馈确认操作（动画、成功提示等）
5. 可访问性包容所有人（对比度、键盘支持、屏幕阅读器兼容）

完整参考文档

如需深入了解（组件模式详解、动画示例、响应式网格技术等），请查阅本技能目录下的 UI_UX_MASTER_GUIDE.md 文件。

最后更新日期：2026-02-05