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-64像素
• 卡片内边距：24-32像素

快速参考

色彩系统

构建主色阶（50-900）：

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

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

字体排版比例（8像素基线）

text-xs：   12像素 / 16像素行高
text-sm：   14像素 / 20像素
text-base： 16像素 / 24像素（默认正文）
text-lg：   18像素 / 28像素
text-xl：   20像素 / 28像素
text-2xl：  24像素 / 32像素
text-3xl：  30像素 / 36像素（区块标题）
text-4xl：  36像素 / 40像素
text-5xl：  48像素 / 1（主标题）

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

布局模式

• CSS网格：二维布局（页面结构）
• 弹性盒子：一维布局（组件内部）
• 自适应网格： repeat(auto-fit, minmax(280px, 1fr))（无需媒体查询！）

微交互

• 悬停：缩放1.05倍（使按钮感觉可点击）
• 点击：缩放0.95倍（触觉反馈）
• 时长：最长0.2-0.3秒（保持微妙）
• 仅动画化： transform属性和不透明度（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 project-name --typescript --tailwind --app
cd project-name
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仪表盘 —— 清晰的数据可视化，完美的间距处理
• Vercel —— 极简主义，快速，现代渐变风格
• Notion —— 直观的拖放操作，清晰的层级结构

工具：

• Figma（编码前制作线框图）
• WebAIM对比度检查器（无障碍设计）
• Coolors/Huevy（配色方案）

精美UI的五大法则

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

完整参考

如需全面深入了解（组件模式、动画示例、响应式网格技术），请参阅本技能目录中的UI_UX_MASTER_GUIDE.md

文件。最后更新：