UI/UX 设计

名称： ui-ux-design
描述： 适用于网页和移动应用的现代 UI/UX 设计原则、模式和最佳实践。适用于构建用户界面、设计布局、选择配色方案、实现响应式设计、确保无障碍访问（WCAG）或创建美观的现代应用程序。包含 2026 年设计趋势、Tailwind CSS 模式、Shadcn/ui 集成、微交互和移动优先的响应式设计。

何时使用此技能

在以下场景中激活此技能：
- 构建或设计网页/移动端界面
- 选择颜色、字体或布局系统
- 实现响应式设计（移动优先）
- 确保符合无障碍访问标准（WCAG 2.2）
- 设置 Shadcn/ui + Tailwind CSS 项目
- 创建微交互和动画效果
- 在编码前评审 UI/UX 决策

核心设计原则

1. 始终移动优先

• 从 320px 宽度（最小手机尺寸）开始设计
• 断点：576px（手机）、768px（平板）、992px（笔记本）、1200px（桌面）
• 默认单列布局，仅在空间允许时扩展

2. 视觉层次

使用以下方式引导用户注意力：
- 尺寸： 越大越重要
- 颜色： 明亮/对比色吸引注意
- 留白： 更多空间意味着强调
- 邻近性： 相关项目分组放置
- 对比度： 深色背景配浅色文字或反之（文本最小对比度 4.5:1）

3. 留白是你的利器

• 以 8px 的倍数间隔元素（8, 16, 24, 32, 48, 64）
• 区块间的最小呼吸空间：48-64px
• 卡片内边距：24-32px

快速参考

色彩系统

构建主色调色板（50-900）：
- 主色： 品牌色（用于号召性用语、链接、激活状态）
- 中性色： 灰度 50-900（用于文本、背景、边框）
- 语义色： 成功（绿色）、错误（红色）、警告（黄色/橙色）

工具：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： 一维布局（组件内部）
• 自适应网格： repeat(auto-fit, minmax(280px, 1fr))（无需媒体查询！）

微交互

• 悬停： 缩放 1.05 倍（使按钮感觉可点击）
• 点击： 缩放 0.95 倍（提供触觉反馈）
• 时长： 最多 0.2-0.3 秒（保持微妙）
• 仅动画化： transform 和 opacity（GPU 加速）

无障碍访问（WCAG 2.2）

• 文本对比度： 最小 4.5:1（普通文本），3:1（大文本）
• UI 组件： 最小对比度 3:1
• 键盘导航： Tab 顺序逻辑清晰，焦点状态可见（对比度 3:1）
• ARIA 标签： 始终为按钮、图像、交互元素提供

Shadcn/ui + Tailwind 技术栈

设置（Next.js）

npx create-next-app@latest 项目名 --typescript --tailwind --app
cd 项目名
npx shadcn@latest init

选择：样式（默认）、基础颜色（蓝色或自定义）、CSS 变量（是）

添加组件

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

组件将出现在 components/ui/ 目录中——代码归你所有，可自由定制。

Tailwind 最佳实践

• 使用设计令牌（而非任意值）：用 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 对比度检查器（无障碍访问）
- Coolors/Huevy（配色方案）

优美 UI 的五大法则

1. 对比创造层次（大与小，深与浅）
2. 留白营造平静（不要害怕留白）
3. 一致性建立信任（重复相同的模式）
4. 反馈确认操作（动画、成功消息）
5. 无障碍设计包容所有人（对比度、键盘、屏幕阅读器）

完整参考

如需全面的深度解析（组件模式、动画示例、响应式网格技术），请查看此技能目录中的 UI_UX_MASTER_GUIDE.md 文件。

最后更新： 2026-02-05