线框图设计
文档编号: SYS-UX-IX-002
版本: 1.0
日期: 2026-03-09
编制: UI/UX设计师
审核: 产品经理
批准: 项目总监
状态: ✓ 已批准
一、文档概述
1.1 文档目的
本文档提供系统核心页面的线框图设计，定义页面布局、元素位置、信息层级，为视觉设计和前端开发提供结构依据。
1.2 参考文档
二、线框图设计规范
2.1 设计原则
| 原则 | 描述 | 应用 |
|---|---|---|
| 清晰性 | 布局清晰，信息层级分明 | 使用网格系统，统一间距 |
| 一致性 | 相同类型页面结构一致 | 统一布局模板 |
| 可用性 | 符合用户操作习惯 | 重要操作突出，常用功能易达 |
| 响应式 | 支持多设备适配 | 定义断点和适配规则 |
2.2 网格系统
桌面端 (1920px)
┌─────────────────────────────────────────────────────────────────┐
│ 侧边栏(240px) │ 内容区域 (剩余宽度) │
│ │ ┌─────────────────────────────────────────┐ │
│ │ │ 顶部栏 (64px) │ │
│ │ ├─────────────────────────────────────────┤ │
│ │ │ │ │
│ │ │ 页面内容区域 │ │
│ │ │ (24px 边距) │ │
│ │ │ │ │
│ │ │ │ │
│ │ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
内容区域网格: 24列网格系统, 间距 16px2.3 间距规范
| 元素 | 尺寸 | 说明 |
|---|---|---|
| 页面边距 | 24px | 内容区域四周 |
| 卡片间距 | 16px | 卡片之间 |
| 表单字段间距 | 24px | 表单字段之间 |
| 按钮间距 | 8px | 按钮之间 |
| 文字行高 | 1.5 | 正文行高 |
三、页面布局设计
3.1 整体布局结构
┌─────────────────────────────────────────────────────────────────┐
│ 浏览器窗口 │
├─────────────────────────────────────────────────────────────────┤
│ ┌──────────┐ ┌─────────────────────────────────────────────┐ │
│ │ │ │ Logo 面包屑 通知 头像 │ │
│ │ 侧边栏 │ ├─────────────────────────────────────────────┤ │
│ │ │ │ │ │
│ │ Logo │ │ │ │
│ │ │ │ 页面标题 │ │
│ │ 菜单 │ │ │ │
│ │ │ │ ┌─────────────────────────────────────┐ │ │
│ │ 首页 │ │ │ │ │ │
│ │ 用户管理 │ │ │ 内容区域 │ │ │
│ │ ... │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │ │
│ └──────────┘ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘3.2 布局类型
| 布局类型 | 适用页面 | 特点 |
|---|---|---|
| 列表布局 | 用户列表、部门列表 | 筛选区+操作栏+表格+分页 |
| 表单布局 | 用户创建、编辑 | 分组表单+操作按钮 |
| 详情布局 | 用户详情、部门详情 | 信息卡片+操作按钮 |
| 仪表盘布局 | 首页 | 数据卡片+快捷入口+图表 |
| 树形布局 | 部门管理 | 左侧树+右侧详情 |
四、核心页面线框图
4.1 登录页
┌─────────────────────────────────────────────────────────────────┐
│ │
│ │
│ [系统 Logo] │
│ │
│ 欢迎使用系统平台 │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 👤 请输入用户名 │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 🔒 请输入密码 │ │
│ │ [显示密码 👁️] │ │
│ └─────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 🔢 请输入验证码 [ABCD] │ │
│ └─────────────────────────────────┘ │
│ │
│ [ ] 记住密码 │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 登 录 │ │
│ └─────────────────────────────────┘ │
│ │
│ 忘记密码？ │
│ │
│ │
└─────────────────────────────────────────────────────────────────┘
布局说明:
- 居中布局，最大宽度 400px
- 垂直居中显示
- 背景使用品牌色渐变或浅色背景
- 表单元素宽度 100%4.2 首页（仪表盘）
┌─────────────────────────────────────────────────────────────────┐
│ 首页 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 数据概览 │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────┐│
│ │ 总用户数 │ │ 今日新增 │ │ 在线用户 │ │ 部门数量 ││
│ │ │ │ │ │ │ │ ││
│ │ 1,234 │ │ 56 │ │ 128 │ │ 12 ││
│ │ ↑ 12% │ │ ↑ 8% │ │ -- │ │ -- ││
│ └──────────────┘ └──────────────┘ └──────────────┘ └──────────┘│
│ │
│ ┌───────────────────────────┐ ┌───────────────────────────┐ │
│ │ 快捷入口 │ │ 待办事项 │ │
│ │ │ │ │ │
│ │ [➕] [👥] [🏢] [🔐] │ │ ● 待审批申请 (5) │ │
│ │ 新建 用户 部门 权限 │ │ ● 待处理异常 (2) │ │
│ │ │ │ ● 系统通知 (3) │ │
│ └───────────────────────────┘ └───────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 用户增长趋势 │ │
│ │ │ │
│ │ [图表区域] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────┐ ┌───────────────────────────┐ │
│ │ 最近访问 │ │ 系统公告 │ │
│ │ │ │ │ │
│ │ 📄 用户列表 2分钟前 │ │ 📢 系统维护通知 │ │
│ │ 📄 部门管理 15分钟前 │ │ 📢 功能更新说明 │ │
│ │ 📄 角色权限 1小时前 │ │ │ │
│ └───────────────────────────┘ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
布局说明:
- 顶部数据概览：4列等宽卡片
- 中部：快捷入口(左) + 待办事项(右)，比例 6:4
- 图表区域：全宽
- 底部：最近访问(左) + 系统公告(右)，比例 5:54.3 用户列表页
┌─────────────────────────────────────────────────────────────────┐
│ 首页 > 用户管理 > 用户列表 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 用户列表 [➕ 新建用户]│
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ [搜索用户名...] [选择部门 ▼] [状态 ▼] [更多筛选 ▼] │ │
│ │ [🔍 查询] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [批量启用] [批量禁用] [批量删除] [📥 导入] [📤 导出] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ☑ │ 用户名 │ 姓名 │ 部门 │ 手机号 │ 状态 │ 创建时间 │ 操作 │ │
│ ├───┼────────┼──────┼──────┼────────┼──────┼──────────┼──────┤ │
│ │ ☐ │ zhangs │ 张三 │ 技术部│ 138****│ 启用 │2024-01-15│编辑删除│ │
│ │ ☐ │ lis │ 李四 │ 产品部│ 139****│ 启用 │2024-01-14│编辑删除│ │
│ │ ☐ │ wangw │ 王五 │ 测试部│ 137****│ 禁用 │2024-01-13│编辑删除│ │
│ │ ... │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 共 128 条记录 [< 1 2 3 4 5 ... 13 >] 10条/页 │
│ │
└─────────────────────────────────────────────────────────────────┘
布局说明:
- 筛选区：搜索框 + 筛选条件 + 查询按钮
- 操作栏：批量操作按钮（选择数据后显示）
- 表格：全宽，支持横向滚动
- 分页：右对齐，显示总记录数4.4 用户创建页（分步表单）
┌─────────────────────────────────────────────────────────────────┐
│ 首页 > 用户管理 > 用户列表 > 创建用户 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 创建用户 [返回列表] │
│ │
│ ① 基础信息 ─── ② 组织信息 ─── ③ 权限设置 │
│ [●────] [○────] [○────] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 步骤 1: 基础信息 │ │
│ │ │ │
│ │ 用户名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入用户名 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ 4-20个字符，支持字母、数字、下划线 │ │
│ │ │ │
│ │ 姓名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │请输入真实姓名 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 手机号 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 138 0000 0000 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 邮箱 │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ example@email.com │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ │ │
│ │ [取消] [下一步 >] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
步骤2: 组织信息
┌─────────────────────────────────────────────────────────┐
│ 部门 * │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 请选择部门 [▼] │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 岗位 * │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 请选择岗位 [▼] │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 职级 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 请选择职级 [▼] │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ [< 上一步] [下一步 >] │
└─────────────────────────────────────────────────────────┘
步骤3: 权限设置
┌─────────────────────────────────────────────────────────┐
│ 角色 * │
│ ┌─────────────────────────────────────────────────┐ │
│ │ ☑ 普通用户 │ │
│ │ ☐ 部门管理员 │ │
│ │ ☐ 系统管理员 │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ 数据权限 │
│ ┌─────────────────────────────────────────────────┐ │
│ │ ○ 全部数据 │ │
│ │ ● 本部门及下级部门数据 │ │
│ │ ○ 仅本部门数据 │ │
│ │ ○ 仅本人数据 │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ [ ] 创建后立即发送通知邮件 │
│ │
│ [< 上一步] [✓ 确认创建] │
└─────────────────────────────────────────────────────────┘
布局说明:
- 步骤指示器：顶部显示当前步骤
- 表单区域：最大宽度 600px，居中
- 底部操作：左取消/返回，右下一步/确认4.5 用户编辑页
┌─────────────────────────────────────────────────────────────────┐
│ 首页 > 用户管理 > 用户列表 > 编辑用户 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 编辑用户 - 张三 [返回列表] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 基础信息 │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 用户名 zhangs │ │
│ │ (用户名不可修改) │ │
│ │ │ │
│ │ 姓名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 张三 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 手机号 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 138 0000 0000 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 组织信息 │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 部门 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 技术部 [▼] │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 岗位 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 前端工程师 [▼] │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 权限信息 │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 角色 │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ ☑ 普通用户 │ │ │
│ │ │ ☐ 部门管理员 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ │ │
│ │ [取消] [✓ 保存修改] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
布局说明:
- 分组表单：基础信息、组织信息、权限信息
- 不可修改字段：置灰显示
- 底部操作：取消 + 保存4.6 部门管理页（树形布局）
┌─────────────────────────────────────────────────────────────────┐
│ 首页 > 组织架构 > 部门管理 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 部门管理 [➕ 新建部门]│
│ │
│ ┌─────────────────────┐ ┌───────────────────────────────────┐│
│ │ 部门结构 │ │ 部门详情 ││
│ │ │ │ ││
│ │ ▼ 总公司 │ │ 技术部 ││
│ │ ▼ 技术事业部 │ │ ─────────────────────────────── ││
│ │ ▶ 研发部 ◀──┼──┼── 部门信息 ││
│ │ ▶ 测试部 │ │ ││
│ │ ▶ 产品事业部 │ │ 部门名称: 研发部 ││
│ │ ▶ 运营事业部 │ │ 部门编码: DEV-001 ││
│ │ │ │ 上级部门: 技术事业部 ││
│ │ [展开] [折叠] │ │ 负责人: 张三 ││
│ │ │ │ 成立时间: 2020-01-01 ││
│ │ │ │ ││
│ │ │ │ 部门成员 (32人) ││
│ │ │ │ ─────────────────────────────── ││
│ │ │ │ ┌─────────────────────────────┐ ││
│ │ │ │ │ 姓名 │ 岗位 │ 入职时间 │ 操作 │ ││
│ │ │ │ ├──────┼──────┼──────────┼──────┤ ││
│ │ │ │ │ 张三 │ 经理 │2020-01-15│ 查看 │ ││
│ │ │ │ │ 李四 │ 工程师│2021-03-20│ 查看 │ ││
│ │ │ │ │ ... │ ... │ ... │ ... │ ││
│ │ │ │ └─────────────────────────────┘ ││
│ │ │ │ ││
│ │ │ │ [编辑] [删除] ││
│ │ │ │ ││
│ └─────────────────────┘ └───────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘
布局说明:
- 左侧：部门树，宽度 280px
- 右侧：部门详情，自适应宽度
- 树形组件：支持展开/折叠、选中
- 详情区域：部门信息 + 成员列表4.7 角色权限分配页
┌─────────────────────────────────────────────────────────────────┐
│ 首页 > 权限管理 > 角色列表 > 权限分配 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 权限分配 - 部门管理员 [返回列表] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 基本信息 │ │
│ │ 角色名称: 部门管理员 角色编码: ROLE_DEPT_ADMIN │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 菜单权限 │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ │ │
│ │ ☑ 首页 │ │
│ │ ☑ 用户管理 │ │
│ │ ☑ 用户列表 │ │
│ │ ☐ 用户创建 (无此权限) │ │
│ │ ☑ 用户详情 │ │
│ │ ☑ 组织架构 │ │
│ │ ☑ 部门管理 │ │
│ │ ☐ 岗位管理 (无此权限) │ │
│ │ ☐ 系统监控 (无此权限) │ │
│ │ ☐ 日志管理 (无此权限) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 操作权限 │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 用户管理模块 │ │
│ │ ☑ 查看 ☑ 编辑 ☐ 删除 ☐ 导出 │ │
│ │ │ │
│ │ 组织架构模块 │ │
│ │ ☑ 查看 ☑ 编辑 ☐ 删除 │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 数据权限 │ │
│ │ ───────────────────────────────────────────────────── │ │
│ │ │ │
│ │ ● 本部门及下级部门数据 │ │
│ │ ○ 仅本部门数据 │ │
│ │ ○ 仅本人数据 │ │
│ │ ○ 全部数据 (需超级管理员权限) │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [取消] [✓ 保存权限配置] │
│ │
└─────────────────────────────────────────────────────────────────┘
布局说明:
- 权限分组：菜单权限、操作权限、数据权限
- 树形选择：菜单权限使用树形结构
- 权限说明：无权限的选项置灰并标注五、组件线框图
5.1 确认对话框
┌─────────────────────────────────┐
│ ⚠️ 确认删除 │
├─────────────────────────────────┤
│ │
│ 确定要删除用户"张三"吗？ │
│ 删除后数据将无法恢复。 │
│ │
│ [取消] [确认删除] │
│ │
└─────────────────────────────────┘
尺寸: 400px × 180px
按钮: 次要按钮(左) + 主要按钮(右)5.2 成功提示
┌─────────────────────────────────┐
│ ✅ 操作成功 │
├─────────────────────────────────┤
│ │
│ 用户创建成功！ │
│ │
│ [查看详情] [继续创建] [关闭] │
│ │
└─────────────────────────────────┘5.3 批量操作栏
┌─────────────────────────────────────────────────────────┐
│ 已选择 5 项 │
│ [启用] [禁用] [删除] [导出] [取消选择] │
└─────────────────────────────────────────────────────────┘
显示条件: 选择数据后显示
位置: 表格上方六、响应式适配
6.1 断点定义
| 断点 | 宽度范围 | 设备类型 |
|---|---|---|
| xs | < 576px | 手机竖屏 |
| sm | 576px - 768px | 手机横屏/平板竖屏 |
| md | 768px - 992px | 平板横屏 |
| lg | 992px - 1200px | 小型桌面 |
| xl | 1200px - 1600px | 标准桌面 |
| xxl | > 1600px | 大屏桌面 |
6.2 布局适配规则
| 布局元素 | 桌面端 | 平板端 | 手机端 |
|---|---|---|---|
| 侧边栏 | 固定 240px | 可折叠 | 隐藏（抽屉式） |
| 内容区域 | 自适应 | 自适应 | 全宽 |
| 数据卡片 | 4列 | 2列 | 1列 |
| 表格 | 全列显示 | 横向滚动 | 卡片式列表 |
| 表单 | 多列 | 双列 | 单列 |
6.3 移动端适配示例
手机端用户列表
┌─────────────────────────┐
│ ≡ 用户列表 ➕ │
├─────────────────────────┤
│ [搜索...] [筛选 ▼] │
├─────────────────────────┤
│ ┌───────────────────┐ │
│ │ 张三 │ │
│ │ 技术部 · 前端工程师 │ │
│ │ 138****8888 │ │
│ │ [启用] [>] │ │
│ └───────────────────┘ │
│ ┌───────────────────┐ │
│ │ 李四 │ │
│ │ 产品部 · 产品经理 │ │
│ │ 139****6666 │ │
│ │ [启用] [>] │ │
│ └───────────────────┘ │
│ ... │
│ │
│ [< 1 2 3 ... 13 >] │
└─────────────────────────┘
适配规则:
- 表格转为卡片列表
- 每卡片显示核心信息
- 操作按钮简化
- 底部固定分页七、线框图标注规范
7.1 尺寸标注
┌─────────────────────────────────┐
│ │
│ ┌─────────────────────────┐ │ ← 24px 页面上边距
│ │ │ │
│ │ 内容区域 │ │
│ │ │ │
│ │ 宽度: 100% │ │
│ │ 最小高度: calc(100vh │ │
│ │ - 64px │ │
│ │ - 48px) │ │
│ │ │ │
│ └─────────────────────────┘ │ ← 24px 页面下边距
│ │
└─────────────────────────────────┘
↑ ↑
24px 页面左边距 24px 页面右边距7.2 间距标注
元素间距规范:
┌─────────┐
│ 卡片1 │ ← 16px → ┌─────────┐
│ │ │ 卡片2 │
└─────────┘ └─────────┘
↓ 16px
┌─────────┐
│ 卡片3 │
└─────────┘八、修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，创建线框图设计 |
文档状态: ⏳ 进行中
最后更新: 2026-03-09
文档作者: UI/UX设计师