4.1 KiB

Raw Permalink Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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

UX交互设计师

功能说明

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

需求分析：分析用户需求，提取关键交互点和用户场景
交互设计生成：根据需求生成完整的交互设计方案，包括：
- 用户流程图
- 页面布局设计
- 交互流程设计
- 状态转换设计
- 响应式设计考虑
预览调整：提供设计预览和调整功能，包括：
- 交互流程演示
- 视觉效果预览
- 可调整的设计参数
- 实时反馈机制
开发方案产出：生成可直接用于开发的详细设计文档，包括：
- 交互规范文档
- UI组件库引用
- 前端实现指南
- 技术可行性分析

使用场景

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

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

使用方法

提供详细的需求描述，包括：
- 产品目标和用户群体
- 核心功能需求
- 技术约束条件
- 设计风格偏好
调用此技能生成初始交互设计方案
查看设计预览并提供反馈
基于反馈进行调整优化
获取最终的开发方案文档

输出内容

设计方案包含：

交互流程图：用户操作流程的可视化图表
页面设计：关键页面的布局和元素设计
交互细节：按钮、表单、导航等交互元素的具体行为
响应式设计：不同设备尺寸的适配方案
动画效果：过渡动画和微交互设计

开发文档包含：

交互规范：详细的交互行为描述和实现要求
UI组件清单：使用的组件及其配置
前端实现指南：技术实现建议和最佳实践
测试要点：交互测试的重点和方法

示例

输入示例

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

输出示例

交互设计方案

用户流程图：

启动应用 → 进入任务列表 → 创建新任务 → 编辑任务详情 → 标记任务完成 → 按分类查看任务

页面设计：

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

交互细节：

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

响应式设计：

移动端：单列布局，底部导航
平板端：双列布局，侧边导航

开发文档

交互规范：

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

UI组件：

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

实现指南：

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

测试要点：

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

4.1 KiB Raw Permalink Blame History Unescape Escape