介绍
# UI/UX Design
**名称：** ui-ux-design **描述：** 适用于 Web 和移动应用程序的现代 UI/UX 设计原则、模式和最佳实践。在构建用户界面、设计布局、选择配色方案、实现响应式设计、确保无障碍性 (WCAG) 或创建精美的现代应用程序时使用。包括 2026 年设计趋势、Tailwind CSS 模式、Shadcn/ui 集成、微交互和移动优先的响应式设计。
---
## 何时使用此技能
在以下情况下激活此技能： - 构建或设计 Web/移动端界面 - 选择颜色、字体或布局系统 - 实现响应式设计（移动优先） - 确保无障碍性合规 (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）： - **主色：** 品牌色（CTA 按钮、链接、激活状态） - **中性色：** 灰色 50-900（文本、背景、边框） - **语义色：** 成功（绿色）、错误（红色）、警告（黄色/橙色）
工具：Huevy.app, Coolors.co, Adobe Color
### 字体排印标尺（8px 基线网格） ``` text-xs: 12px / 16px line-height text-sm: 14px / 20px text-base: 16px / 24px (body default) text-lg: 18px / 28px text-xl: 20px / 28px text-2xl: 24px / 32px text-3xl: 30px / 36px (section headers) text-4xl: 36px / 40px text-5xl: 48px / 1 (hero titles) ```
**字体搭配：** 最多 2 种字体（UI 使用无衬线字体，标题可选衬线字体）
### 布局模式 - **CSS Grid：** 2D 布局（页面结构） - **Flexbox：** 1D 布局（组件内部） - **自适应网格：** `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) ```bash npx create-next-app@latest project-name --typescript --tailwind --app cd project-name npx shadcn@latest init ```
选择：样式（默认）、基础颜色（蓝色或自定义）、CSS 变量（是）
### 添加组件 ```bash 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 Contrast Checker（无障碍性检查） - Coolors/Huevy（配色方案生成）
---
## 精美 UI 的 5 大法则
1. **对比创造层级**（大与小，深与浅） 2. **留白创造平静**（永远不要害怕空白） 3. **一致性建立信任**（重复相同的模式） 4. **反馈确认操作**（动画，成功消息） 5. **无障碍性包容所有人**（对比度，键盘，屏幕阅读器）
---
## 完整参考
如需深入了解综合内容（组件模式、动画示例、响应式网格技术），请参阅此技能目录中的 `UI_UX_MASTER_GUIDE.md`。
---
**最后更新：** 2026-02-05