AlphaFuturesPro/.trae/skills/ux交互设计师/SKILL.md

---
name: "ux交互设计师"
description: "根据用户需求生成交互设计方案，支持预览调整，产出可用于开发的详细设计文档。当需要设计用户界面交互流程、优化现有界面体验或为新功能设计交互方案时调用。"
---

# UX交互设计师

## 功能说明

此技能专门用于根据用户需求生成专业的UX交互设计方案，主要功能包括：

1. **需求分析**：分析用户需求，提取关键交互点和用户场景

2. **交互设计生成**：根据需求生成完整的交互设计方案，包括：
   - 用户流程图
   - 页面布局设计
   - 交互流程设计
   - 状态转换设计
   - 响应式设计考虑

3. **预览调整**：提供设计预览和调整功能，包括：
   - 交互流程演示
   - 视觉效果预览
   - 可调整的设计参数
   - 实时反馈机制

4. **开发方案产出**：生成可直接用于开发的详细设计文档，包括：
   - 交互规范文档
   - UI组件库引用
   - 前端实现指南
   - 技术可行性分析

## 使用场景

当遇到以下情况时，应调用此技能：

- **新功能设计**：为新产品或新功能设计完整的用户交互流程
- **界面优化**：优化现有界面的用户体验和交互流程
- **原型设计**：快速生成可预览的交互原型
- **开发支持**：为开发团队提供详细的交互设计规范

## 使用方法

1. 提供详细的需求描述，包括：
   - 产品目标和用户群体
   - 核心功能需求
   - 技术约束条件
   - 设计风格偏好

2. 调用此技能生成初始交互设计方案

3. 查看设计预览并提供反馈

4. 基于反馈进行调整优化

5. 获取最终的开发方案文档

## 输出内容

### 设计方案包含：

1. **交互流程图**：用户操作流程的可视化图表

2. **页面设计**：关键页面的布局和元素设计

3. **交互细节**：按钮、表单、导航等交互元素的具体行为

4. **响应式设计**：不同设备尺寸的适配方案

5. **动画效果**：过渡动画和微交互设计

### 开发文档包含：

1. **交互规范**：详细的交互行为描述和实现要求

2. **UI组件清单**：使用的组件及其配置

3. **前端实现指南**：技术实现建议和最佳实践

4. **测试要点**：交互测试的重点和方法

## 示例

### 输入示例
用户需求："为移动应用设计一个任务管理功能，包括任务创建、编辑、完成状态管理和分类查看"

### 输出示例

#### 交互设计方案

**用户流程图**：
- 启动应用 → 进入任务列表 → 创建新任务 → 编辑任务详情 → 标记任务完成 → 按分类查看任务

**页面设计**：
- 任务列表页：卡片式布局，显示任务标题、截止日期、优先级
- 任务创建页：表单布局，包含标题、描述、截止日期、优先级、分类
- 任务详情页：展示完整任务信息，提供编辑和完成按钮
- 分类筛选页：标签式分类，点击切换任务列表

**交互细节**：
- 任务卡片左滑：显示编辑/删除选项
- 任务卡片右滑：快速标记完成/未完成
- 下拉刷新：更新任务列表
- 长按任务：进入多选模式

**响应式设计**：
- 移动端：单列布局，底部导航
- 平板端：双列布局，侧边导航

#### 开发文档

**交互规范**：
- 任务创建：表单验证，必填字段提示
- 任务编辑：实时保存，撤销/重做功能
- 状态切换：平滑过渡动画，状态视觉反馈
- 分类筛选：标签切换动画，内容加载过渡

**UI组件**：
- 任务卡片组件：支持滑动操作和状态显示
- 日期选择器：支持快速选择常用日期
- 优先级选择器：颜色编码的优先级标识
- 分类标签组件：可自定义和管理分类

**实现指南**：
- 使用React Native或Flutter实现跨平台兼容
- 采用状态管理库管理任务状态
- 实现本地存储确保离线访问
- 优化列表性能，支持大量任务展示

**测试要点**：
- 任务创建和编辑流程测试
- 状态切换的一致性测试
- 分类筛选的准确性测试
- 响应式布局在不同设备上的测试
- 动画效果的流畅度测试