frontend-ui-ux-design

前端 UI/UX 设计

概述

此技能可帮助你从调研到实现，创建可用于生产环境的前端 UI/UX 设计。请遵循结构化的设计流程，平衡用户需求、业务目标、技术限制和无障碍要求。

设计工作流

1. 了解需求

收集背景信息：

• 项目目标和成功指标
• 目标受众和用户画像
• 技术限制（框架、浏览器、设备）
• 品牌指南和设计语言
• 无障碍要求（WCAG 等级）

明确范围：

• 交付物类型（线框图、模型、设计系统、组件库）
• 保真度级别（低、中、高）
• 所需的响应式断点
• 浏览器和设备支持范围

2. 调研与策略

用户调研：

• 分析用户需求、目标和痛点
• 查看现有分析数据或用户反馈
• 确定关键用户旅程和场景
• 定义信息架构

完整调研流程：详细的调研、用户画像、旅程映射和信息架构指南，请参阅 uiux-design-process.md。

3. 设计与原型

创建线框图：

• 从低保真布局开始
• 聚焦内容层级和结构
• 定义关键任务的用户流程
• 根据反馈迭代

应用视觉设计：

• 定义调色板（主色、辅助色、语义色）
• 建立字体比例和间距系统
• 设计具有不同变体和状态的组件
• 确保视觉层级和一致性

设计原则：有关视觉层级、一致性、简洁性、反馈和错误预防的指南，请参阅 design-principles.md。

设计系统：构建包含设计令牌、治理和文档的综合设计系统时，请参阅 design-systems.md。

4. 确保无障碍

符合 WCAG 标准：

• 最低对比度（文本为 4.5:1，大文本/UI 为 3:1）
• 支持键盘导航
• 兼容屏幕阅读器（语义化 HTML、ARIA 标签）
• 焦点指示器和跳转链接
• 图像替代文本

完整的无障碍指南：有关 WCAG 2.1/2.2 标准、ARIA 模式、键盘导航、测试工具和合规性检查清单，请参阅 accessibility-guide.md。

5. 设计响应式布局

移动优先方法：

• 从移动端设计开始（最小 320px）
• 逐步增强平板端体验（768px+）
• 针对桌面端优化（1024px+、1440px+）
• 使用流式网格和弹性图像
• 应用合适的布局模式

响应式模式：有关断点、布局模式（流式网格、列折叠、画布外布局）、响应式导航、排版、图像、表格、表单和容器查询，请参阅 responsive-design.md。

6. 构建组件库

组件设计：

• 设计原子组件（按钮、输入框、图标）
• 创建分子组件（表单字段、卡片、菜单）
• 构建有机体组件（页眉、表单、版块）
• 定义组件变体、状态和属性
• 记录组件使用模式

组件详情：有关包含规格、变体、状态和使用指南的综合组件目录，请参阅 component-library.md 和 component-patterns.md。

7. 优化性能

性能注意事项：

• 优化图像（WebP/AVIF、延迟加载、响应式图像）
• 缩减 CSS/JS 包体积
• 为首屏内容实现关键 CSS
• 使用高效动画（transform、opacity）
• 监控 Core Web Vitals（LCP、FID、CLS）

优化详情：有关图像优化、代码拆分、缓存策略和性能预算，请参阅 performance-optimization.md。

8. 文档与交接

设计交付物：

• 设计规范（颜色、字体、间距）
• 组件文档及变体
• 响应式断点设计
• 无障碍报告和合规检查清单
• 实施指南和设计令牌

关于输出格式：请参阅 output-format.md，了解结构化交付物格式，包括设计简报、线框图、视觉设计、组件库和开发交接材料。

快速参考

何时加载参考资料

• uiux-design-process.md - 从研究到原型设计和用户测试的完整设计流程
• design-principles.md - 核心设计原则（层级、一致性、简洁性、反馈）
• design-systems.md - 使用令牌和治理机制构建全面的设计系统
• accessibility-guide.md - WCAG 合规性、ARIA 模式、键盘导航和测试
• responsive-design.md - 断点、布局模式和响应式组件
• component-library.md - 包含规范的原子/分子组件目录
• component-patterns.md - 组件模式（表单、导航、数据展示、反馈）
• performance-optimization.md - 图像优化、代码拆分、Core Web Vitals
• design-tools-and-resources.md - 设计工具、框架、图标库和资源
• output-format.md - 用于交接的结构化交付物格式
• examples.md - 实际设计示例和模式
• design-checklist.md - 完成设计前的质量检查清单

核心原则

1. 以用户为中心的设计

• 始终从用户需求和目标出发
• 通过研究和测试验证假设
• 可用性优先于美观性

2. 无障碍优先

• 为所有用户设计，包括残障人士
• 至少遵循 WCAG 2.1 AA 标准
• 使用键盘导航和屏幕阅读器进行测试

3. 移动优先的响应式设计

• 从最小的屏幕尺寸开始
• 逐步增强大屏幕体验
• 确保交互便于触控（至少 44x44px）

4. 设计系统思维

• 构建可复用且一致的组件
• 记录模式和使用指南
• 维护设计令牌系统

5. 性能至关重要

• 优化图像和资源
• 保持较小的打包体积
• 监控并改进 Core Web Vitals

6. 迭代流程

• 从低保真开始，逐步迭代至高保真
• 尽早并经常收集反馈
• 根据用户测试和指标进行优化