设计场景细化
文档编号: SYS-UX-UR-006
版本: 1.0
日期: 2026-03-09
编制: UI/UX设计师
审核: 产品经理
批准: 项目总监
状态: ✅ 已批准
一、文档概述
1.1 文档目的
本文档基于需求分析阶段的使用场景，从UI/UX设计角度进一步细化用户场景，明确每个场景下的设计要点和交互流程。
1.2 参考文档
二、高频场景设计细化
2.1 场景一：用户登录
场景描述
用户打开系统，输入账号密码进行登录。
用户类型
- 所有用户类型
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 登录框 | 居中显示，突出品牌标识 | 高 |
| 账号输入 | 支持工号/邮箱/手机号 | 高 |
| 密码输入 | 支持显示/隐藏切换 | 高 |
| 记住密码 | 可选记住账号 | 中 |
| 验证码 | 错误多次后显示 | 中 |
| 错误提示 | 友好的错误提示信息 | 高 |
| 加载状态 | 登录中显示Loading | 高 |
交互流程
打开登录页 → 输入账号 → 输入密码 → 点击登录 → 验证中 → 登录成功/失败异常处理
| 异常情况 | 处理方式 |
|---|---|
| 账号不存在 | 提示"账号不存在，请检查" |
| 密码错误 | 提示"密码错误，还剩X次机会" |
| 账号锁定 | 提示"账号已锁定，请联系管理员" |
| 网络异常 | 提示"网络异常，请稍后重试" |
2.2 场景二：用户管理
场景描述
系统管理员对用户进行增删改查操作。
用户类型
- 系统管理员
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 用户列表 | 表格展示，支持排序筛选 | 高 |
| 搜索功能 | 支持多条件组合搜索 | 高 |
| 批量操作 | 支持批量启用/禁用/删除 | 高 |
| 新增用户 | 表单填写，支持批量导入 | 高 |
| 编辑用户 | 弹窗或页面编辑 | 高 |
| 用户详情 | 展示完整用户信息 | 中 |
| 操作记录 | 查看用户操作日志 | 中 |
交互流程
查询用户流程：
进入用户管理 → 设置搜索条件 → 执行搜索 → 查看结果 → 操作/查看详情新增用户流程：
点击新增 → 填写用户信息 → 设置角色权限 → 保存 → 提示成功页面布局建议
- [ ] 左侧：搜索筛选区
- [ ] 中间：用户列表表格
- [ ] 顶部：操作按钮区（新增、导入、导出、批量操作）
- [ ] 右侧：可展开的用户详情抽屉
2.3 场景三：角色权限配置
场景描述
系统管理员配置角色和分配权限。
用户类型
- 系统管理员
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 角色列表 | 展示所有角色 | 高 |
| 权限树 | 树形结构展示权限 | 高 |
| 角色编辑 | 修改角色名称、描述 | 高 |
| 权限分配 | 勾选分配权限 | 高 |
| 角色复制 | 基于现有角色创建 | 中 |
| 权限预览 | 预览角色拥有的权限 | 中 |
交互流程
配置角色权限流程：
进入角色管理 → 选择角色 → 展开权限树 → 勾选/取消权限 → 保存 → 确认生效页面布局建议
- [ ] 左侧：角色列表
- [ ] 右侧：权限配置区
- [ ] 权限树：支持展开/收起
- [ ] 底部：保存/取消按钮
2.4 场景四：个人信息查看与修改
场景描述
普通用户查看和修改个人信息。
用户类型
- 普通用户
- 所有用户类型
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 信息展示 | 卡片式展示个人信息 | 高 |
| 头像上传 | 支持上传和裁剪 | 中 |
| 信息编辑 | 表单编辑模式 | 高 |
| 密码修改 | 独立的密码修改流程 | 高 |
| 保存确认 | 修改后保存确认 | 高 |
交互流程
进入个人中心 → 查看信息 → 点击编辑 → 修改信息 → 保存 → 提示成功2.5 场景五：审批流程处理
场景描述
部门负责人处理待审批事项。
用户类型
- 部门负责人
- 审批相关人员
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 待办列表 | 展示待审批事项 | 高 |
| 流程图 | 可视化展示审批流程 | 高 |
| 审批操作 | 通过/驳回/转办 | 高 |
| 审批意见 | 输入审批意见 | 高 |
| 历史记录 | 查看审批历史 | 中 |
| 附件查看 | 查看相关附件 | 中 |
交互流程
查看待办 → 选择审批项 → 查看详情 → 填写意见 → 选择操作 → 确认 → 完成移动端适配
- [ ] 简化流程图展示
- [ ] 一键快速审批
- [ ] 消息推送提醒
- [ ] 支持语音输入意见
三、中频场景设计细化
3.1 场景六：组织架构管理
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 组织树 | 树形结构展示组织架构 | 高 |
| 部门操作 | 新增、编辑、删除部门 | 高 |
| 人员调整 | 部门间人员调动 | 中 |
| 组织图 | 可视化组织架构图 | 中 |
页面布局
- [ ] 左侧：组织架构树
- [ ] 右侧：部门详情/成员列表
- [ ] 支持拖拽调整
3.2 场景七：系统日志查看
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 日志列表 | 表格展示操作日志 | 高 |
| 筛选条件 | 按时间、用户、操作类型筛选 | 高 |
| 日志详情 | 查看单条日志详情 | 中 |
| 导出功能 | 导出日志数据 | 中 |
3.3 场景八：数据报表查看
设计要点
| 设计要素 | 设计说明 | 优先级 |
|---|---|---|
| 报表列表 | 展示可用报表 | 高 |
| 数据可视化 | 图表展示数据 | 高 |
| 筛选条件 | 时间范围、部门等筛选 | 高 |
| 导出功能 | 导出报表数据 | 中 |
| 打印功能 | 支持打印报表 | 低 |
四、特殊场景设计考虑
4.1 批量操作场景
场景描述
系统管理员需要对大量数据进行批量处理。
设计要点
- [ ] 支持全选/反选/部分选择
- [ ] 批量操作确认机制
- [ ] 批量操作进度展示
- [ ] 支持后台异步处理
- [ ] 操作结果汇总反馈
4.2 移动端场景
场景描述
用户在移动设备上使用系统。
设计要点
- [ ] 响应式布局适配
- [ ] 触控友好的交互
- [ ] 简化操作流程
- [ ] 离线功能支持
- [ ] 消息推送提醒
4.3 错误恢复场景
场景描述
用户操作出错或系统异常。
设计要点
- [ ] 友好的错误提示
- [ ] 提供解决方案
- [ ] 支持撤销操作
- [ ] 数据自动保存
- [ ] 错误日志记录
五、场景设计总结
5.1 核心设计原则
- 以用户为中心：根据用户类型设计差异化界面
- 效率优先：优化高频场景的操作流程
- 容错设计：提供错误恢复和帮助机制
- 一致性：保持交互和视觉的一致性
5.2 场景优先级
| 优先级 | 场景 | 设计重点 |
|---|---|---|
| P0 | 登录、用户管理、权限配置 | 功能完整、体验流畅 |
| P1 | 个人信息、审批流程 | 易用性、移动端适配 |
| P2 | 组织架构、日志、报表 | 信息展示、数据可视化 |
六、修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，创建设计场景细化 |
文档状态: ⏳ 进行中
最后更新: 2026-03-09
文档作者: UI/UX设计师