# User Experience > 提供用户体验设计的标准规范，包括用户体验原则、方法、流程等。在设计或改进应用程序的用户体验时调用。 - Skill: `bage2014/user-experience` (Agent Skill) - Install (CLI): `npx skillmds@latest add bage2014/user-experience` - Raw SKILL.md: https://api.skillmd.com/api/skills/bage2014/user-experience/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: bage2014 (https://skillmd.com/u/bage2014) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/bage2014/user-experience --- # 用户体验设计规范 ## 1. 概述 用户体验（User Experience，简称UX）是指用户与产品或服务交互时的整体感受。良好的用户体验能够提高用户满意度、增加用户粘性、提升产品价值。本规范定义了项目中用户体验设计的原则、方法和流程，确保产品能够提供优质的用户体验。 ## 2. 用户体验原则 ### 2.1 核心原则 - **以用户为中心**：所有设计决策都应以用户需求和期望为中心 - **简洁明了**：界面设计应简洁清晰，减少认知负担 - **一致性**：保持界面元素和交互行为的一致性 - **可预测性**：用户能够预测操作的结果 - **反馈及时**：对用户操作提供及时明确的反馈 - **容错性**：允许用户犯错并提供简单的恢复机制 - **可访问性**：确保所有用户都能访问和使用产品 ### 2.2 具体原则 - **直观性**：界面设计应符合用户的直觉和习惯 - **效率性**：用户能够快速完成任务 - **满意度**：用户在使用产品时感到愉悦和满足 - **信任度**：产品应让用户感到可靠和安全 - **适应性**：产品应适应不同用户的需求和使用场景 ## 3. 用户体验设计方法 ### 3.1 用户研究 #### 3.1.1 用户访谈 - **目的**：了解用户的需求、痛点和期望 - **方法**：一对一访谈、焦点小组 - **步骤**：准备问题、进行访谈、分析结果 #### 3.1.2 用户问卷调查 - **目的**：收集大量用户的反馈和意见 - **方法**：在线问卷、纸质问卷 - **步骤**：设计问卷、分发问卷、分析结果 #### 3.1.3 用户行为分析 - **目的**：了解用户如何使用产品 - **方法**：热图分析、用户会话记录、数据分析 - **步骤**：收集数据、分析数据、提取洞察 ### 3.2 设计方法 #### 3.2.1 personas（用户画像） - **目的**：创建虚拟用户代表，帮助团队理解用户需求 - **方法**：基于用户研究数据创建 - **步骤**：收集用户数据、分析用户类型、创建用户画像 #### 3.2.2 用户旅程地图 - **目的**：可视化用户与产品交互的全过程 - **方法**：绘制用户从接触到完成任务的整个过程 - **步骤**：定义用户目标、识别接触点、分析情感变化、识别痛点和机会 #### 3.2.3 信息架构 - **目的**：组织和结构化产品信息 - **方法**：卡片分类、树状图 - **步骤**：收集信息、组织信息、设计导航结构 #### 3.2.4 线框图 - **目的**：创建页面的基本布局和结构 - **方法**：手绘、数字工具 - **步骤**：定义页面功能、设计布局、标注交互 #### 3.2.5 原型设计 - **目的**：创建可交互的产品模型 - **方法**：低保真原型、高保真原型 - **步骤**：设计界面、添加交互、测试原型 ### 3.3 测试方法 #### 3.3.1 用户测试 - **目的**：评估产品的用户体验质量 - **方法**：任务测试、启发式评估 - **步骤**：准备测试任务、招募测试用户、进行测试、分析结果 #### 3.3.2 A/B测试 - **目的**：比较不同设计方案的效果 - **方法**：同时测试两个或多个设计版本 - **步骤**：设计测试方案、实施测试、分析结果 #### 3.3.3 可用性测试 - **目的**：评估产品的易用性 - **方法**：观察用户完成任务的过程 - **步骤**：定义测试目标、设计测试任务、招募测试用户、进行测试、分析结果 ## 4. 用户体验设计流程 ### 4.1 发现阶段 1. **需求分析**：理解业务需求和用户需求 2. **用户研究**：收集和分析用户数据 3. **竞品分析**：研究竞争对手的产品和用户体验 ### 4.2 设计阶段 1. **信息架构**：设计产品的信息结构和导航 2. **交互设计**：设计用户与产品的交互方式 3. **视觉设计**：设计产品的视觉风格和界面 4. **原型设计**：创建可交互的产品原型 ### 4.3 测试阶段 1. **用户测试**：测试产品的用户体验 2. **反馈收集**：收集用户和 stakeholders 的反馈 3. **迭代优化**：根据测试结果和反馈优化设计 ### 4.4 实施阶段 1. **设计交付**：向开发团队交付设计规范和资产 2. **开发支持**：在开发过程中提供设计支持 3. **验收测试**：验证开发结果是否符合设计要求 ### 4.5 评估阶段 1. **上线评估**：评估产品上线后的用户体验 2. **数据分析**：分析用户行为数据 3. **持续优化**：根据数据和反馈持续优化产品 ## 5. 具体功能的用户体验设计 ### 5.1 登录/注册流程 #### 5.1.1 设计原则 - **简洁明了**：减少表单字段，简化注册流程 - **反馈及时**：提供实时的表单验证和错误提示 - **容错性**：允许用户使用不同的登录方式 - **安全性**：确保用户数据的安全 #### 5.1.2 设计要点 - **登录页面**：清晰的表单布局，记住密码选项，忘记密码链接 - **注册页面**：必要的字段，密码强度提示，确认密码字段 - **错误处理**：明确的错误提示，指导用户如何修正错误 - **成功反馈**：登录/注册成功后的明确提示和导航 ### 5.2 家族管理 #### 5.2.1 设计原则 - **直观性**：清晰的家族列表和管理界面 - **效率性**：快速创建、编辑和删除家族 - **反馈及时**：操作后的明确反馈 - **组织性**：合理组织家族成员和关系 #### 5.2.2 设计要点 - **家族列表**：清晰的表格展示，支持排序和筛选 - **家族创建**：简洁的表单，必要的字段 - **家族详情**：完整的家族信息展示，包括成员列表 - **管理员功能**：明确的管理员标识和权限管理 ### 5.3 成员管理 #### 5.3.1 设计原则 - **直观性**：清晰的成员列表和管理界面 - **效率性**：快速添加、编辑和删除成员 - **组织性**：合理组织成员信息和关系 - **搜索功能**：方便的成员搜索功能 #### 5.3.2 设计要点 - **成员列表**：清晰的表格展示，支持排序和筛选 - **成员添加**：简洁的表单，必要的字段 - **成员详情**：完整的成员信息展示，包括关系、事件等 - **成员搜索**：支持按姓名、关系等搜索 ### 5.4 家族树 #### 5.4.1 设计原则 - **直观性**：清晰的家族树可视化展示 - **交互性**：支持缩放、拖拽、点击等操作 - **信息性**：展示足够的成员信息 - **导航性**：方便在大家族树中导航 #### 5.4.2 设计要点 - **树状结构**：清晰的层级关系展示 - **成员节点**：包含成员基本信息的节点 - **交互操作**：支持点击查看详情，拖拽调整布局 - **缩放功能**：支持缩放查看整体和细节 ### 5.5 成员大事件 #### 5.5.1 设计原则 - **时间性**：按时间顺序展示事件 - **详细性**：提供事件的详细信息 - **多媒体支持**：支持图片、视频等多媒体内容 - **交互性**：方便添加、编辑和删除事件 #### 5.5.2 设计要点 - **事件列表**：按时间顺序展示，支持筛选 - **事件详情**：完整的事件信息，包括图片、视频等 - **事件添加**：支持富文本编辑和多媒体上传 - **事件编辑**：方便的编辑界面 ### 5.6 家族地理位置 #### 5.6.1 设计原则 - **可视化**：地图展示位置信息 - **交互性**：支持地图操作和位置编辑 - **信息性**：提供位置的详细信息 - **组织性**：合理组织多个位置 #### 5.6.2 设计要点 - **地图展示**：清晰的地图界面，标记家族相关位置 - **位置列表**：按成员或类型组织位置 - **位置详情**：完整的位置信息，包括地址、坐标等 - **位置添加**：支持在地图上标记位置 ### 5.7 AI关系分析 #### 5.7.1 设计原则 - **直观性**：清晰的分析结果展示 - **交互性**：支持调整分析参数 - **反馈及时**：分析过程中的加载提示 - **可读性**：易于理解的分析结果 #### 5.7.2 设计要点 - **分析界面**：简洁的参数设置，清晰的分析按钮 - **加载状态**：明确的加载提示 - **结果展示**：可视化的关系图谱和分析报告 - **导出功能**：支持导出分析结果 ### 5.8 家族故事 #### 5.8.1 设计原则 - **创意性**：支持丰富的故事内容 - **交互性**：方便的故事生成和编辑 - **多媒体支持**：支持图片、视频等多媒体内容 - **分享性**：支持故事分享 #### 5.8.2 设计要点 - **故事生成**：简洁的生成界面，必要的参数设置 - **故事编辑**：支持富文本编辑和多媒体上传 - **故事展示**：美观的故事展示界面 - **分享功能**：支持分享故事到社交媒体 ## 6. 响应式设计 ### 6.1 移动端用户体验 - **简化导航**：使用汉堡菜单或底部导航 - **优化触控**：适当增大触控目标，调整间距 - **简化表单**：减少表单字段，优化输入体验 - **加载优化**：优化图片和资源加载，减少加载时间 ### 6.2 平板用户体验 - **适当布局**：利用平板的屏幕空间，采用双列布局 - **保持一致性**：与桌面版保持一致的功能和界面 - **优化交互**：支持触控和鼠标操作 ### 6.3 桌面用户体验 - **充分利用空间**：采用多列布局，展示更多信息 - **优化导航**：使用顶部导航和侧边栏 - **支持键盘操作**：支持键盘快捷键和Tab导航 - **响应式调整**：根据屏幕尺寸调整布局 ## 7. 可访问性 ### 7.1 可访问性原则 - **感知性**：信息和用户界面组件必须以可感知的方式呈现给用户 - **可操作性**：用户界面组件和导航必须是可操作的 - **可理解性**：信息和用户界面操作必须是可理解的 - **稳健性**：内容必须足够稳健，能被各种用户代理可靠地解释 ### 7.2 可访问性实践 - **键盘导航**：确保所有功能都可以通过键盘访问 - **屏幕阅读器**：确保屏幕阅读器能够正确解读内容 - **颜色对比度**：确保文本和背景的对比度符合标准 - **替代文本**：为图片和多媒体内容提供替代文本 - **清晰的错误提示**：提供明确的错误提示和修正建议 ## 8. 性能优化 ### 8.1 性能原则 - **快速加载**：减少页面加载时间 - **流畅交互**：确保交互操作的响应速度 - **资源优化**：优化图片、视频等资源 - **缓存策略**：合理使用缓存，减少重复加载 ### 8.2 性能实践 - **图片优化**：使用适当的图片格式和大小，懒加载 - **代码优化**：减少不必要的代码，使用代码分割 - **资源压缩**：压缩CSS、JavaScript等资源 - **服务器优化**：使用CDN，优化服务器响应时间 ## 9. 用户体验测试 ### 9.1 测试计划 - **测试目标**：明确测试的目标和范围 - **测试方法**：选择合适的测试方法 - **测试用户**：招募符合目标用户特征的测试用户 - **测试任务**：设计符合用户实际使用场景的测试任务 ### 9.2 测试执行 - **测试环境**：确保测试环境的一致性 - **测试流程**：按照测试计划执行测试 - **数据收集**：收集测试过程中的数据和反馈 - **观察记录**：观察用户行为，记录关键发现 ### 9.3 测试分析 - **数据分析**：分析测试数据，提取关键洞察 - **问题识别**：识别用户体验问题和痛点 - **解决方案**：提出改进建议和解决方案 - **优先级排序**：根据影响范围和严重程度排序问题 ## 10. 最佳实践 - **用户中心**：始终以用户需求为中心 - **持续迭代**：根据用户反馈和数据持续优化 - **跨团队协作**：与产品、开发、测试等团队密切合作 - **数据驱动**：基于数据和用户反馈做出设计决策 - **用户测试**：定期进行用户测试，验证设计效果 - **可访问性**：确保产品对所有用户都可访问 - **性能优化**：注重产品性能，提供流畅的用户体验 - **一致性**：保持设计和交互的一致性 - **简洁明了**：保持界面简洁，减少认知负担 - **反馈及时**：对用户操作提供及时明确的反馈 通过遵循本用户体验设计规范，可以确保产品提供优质的用户体验，满足用户需求，提高用户满意度和产品价值。