视觉稿设计
文档编号: SYS-UX-VD-002
版本: 1.0
日期: 2026-03-09
编制: UI/UX设计师
状态: ⏳ 进行中
一、文档概述
1.1 文档目的
本文档基于设计系统规范，定义各核心页面的视觉设计方案，包括颜色应用、字体排版、组件样式等视觉细节。
1.2 参考文档
二、页面视觉设计
2.1 登录页
2.1.1 整体布局
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 系统Logo │
│ │
│ ┌─────────────────────┐ │
│ │ │ │
│ │ 用户登录 │ │
│ │ │ │
│ │ ┌───────────────┐ │ │
│ │ │ 用户名 │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ │ ┌───────────────┐ │ │
│ │ │ 密码 │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ │ [☐] 记住我 │ │
│ │ │ │
│ │ ┌───────────────┐ │ │
│ │ │ 登 录 │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ │ 忘记密码? │ │
│ │ │ │
│ └─────────────────────┘ │
│ │
│ © 2026 公司名称 │
│ │
└─────────────────────────────────────────────────────────────────┘2.1.2 视觉规范
| 元素 | 样式 |
|---|---|
| 背景 | 渐变背景: linear-gradient(135deg, #1890FF 0%, #096DD9 100%) |
| 卡片 | 白色背景, 圆角12px, 阴影Shadow-4 |
| 标题 | 24px, 字重600, 颜色#262626 |
| 输入框 | 高度40px, 圆角4px, 边框#D9D9D9 |
| 登录按钮 | 主色背景, 高度40px, 全宽, 圆角4px |
| Logo | 居中, 下方留白32px |
2.2 首页（仪表盘）
2.2.1 整体布局
┌─────────────────────────────────────────────────────────────────┐
│ Logo 首页 用户管理 组织架构 权限管理 系统设置 👤 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 首页 │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐│
│ │ 总用户数 │ │ 今日新增 │ │ 活跃用户 │ │ 部门数 ││
│ │ │ │ │ │ │ │ ││
│ │ 1,234 │ │ +56 │ │ 892 │ │ 12 ││
│ │ │ │ │ │ │ │ ││
│ │ 较昨日 +12% │ │ 较昨日 +8% │ │ 较昨日 +5% │ │ 较昨日 0││
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘│
│ │
│ ┌─────────────────────────┐ ┌───────────────────────────────┐│
│ │ 用户增长趋势 │ │ 部门人员分布 ││
│ │ │ │ ││
│ │ 📈 │ │ 🥧 ││
│ │ 折线图 │ │ 饼图 ││
│ │ │ │ ││
│ │ │ │ ││
│ └─────────────────────────┘ └───────────────────────────────┘│
│ │
│ ┌───────────────────────────────────────────────────────────┐│
│ │ 最近活动 ││
│ │ ││
│ │ • 张三 创建了用户 李四 - 10分钟前 ││
│ │ • 王五 修改了部门 技术部 - 30分钟前 ││
│ │ • 赵六 分配了权限 管理员 - 1小时前 ││
│ │ • ... ││
│ └───────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘2.2.2 视觉规范
| 元素 | 样式 |
|---|---|
| 页面背景 | #F5F5F5 |
| 统计卡片 | 白色背景, 圆角8px, 阴影Shadow-1 |
| 统计数字 | 32px, 字重600, 主色#1890FF |
| 趋势标签 | 12px, 绿色#52C41A(正), 红色#FF4D4F(负) |
| 图表卡片 | 白色背景, 圆角8px, 高度300px |
| 活动列表 | 白色背景, 圆角8px, 头像+文字布局 |
2.3 用户列表页
2.3.1 整体布局
┌─────────────────────────────────────────────────────────────────┐
│ Logo 首页 用户管理 组织架构 权限管理 系统设置 👤 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 用户管理 [+ 新建用户]│
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🔍 搜索用户名... [部门 ▼] [状态 ▼] [更多 ▼] [查询] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [批量启用] [批量禁用] [批量删除] [📥 导入] [📤 导出] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ☑ │ 用户名 │ 姓名 │ 部门 │ 手机号 │ 状态 │ 操作 │ │
│ ├───┼────────┼──────┼───────┼──────────┼───────┼─────────┤ │
│ │ ☐ │ zhangs │ 张三 │ 技术部│ 138**** │ 🟢启用│ 编辑 删除│ │
│ │ ☐ │ lis │ 李四 │ 产品部│ 139**** │ 🟢启用│ 编辑 删除│ │
│ │ ☐ │ wangw │ 王五 │ 测试部│ 137**** │ 🔴禁用│ 编辑 删除│ │
│ │ ☐ │ zhaol │ 赵六 │ 设计部│ 136**** │ 🟢启用│ 编辑 删除│ │
│ │ ... │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 共 128 条记录 [< 1 2 3 4 5 ... 13 >] 10条/页│
│ │
└─────────────────────────────────────────────────────────────────┘2.3.2 视觉规范
| 元素 | 样式 |
|---|---|
| 页面标题 | 20px, 字重600, 颜色#262626 |
| 新建按钮 | 主色背景, 圆角4px, 图标+文字 |
| 筛选栏 | 白色背景, 圆角4px, 边框#D9D9D9 |
| 操作按钮组 | 次要按钮样式, 间距8px |
| 表格 | 白色背景, 表头#F5F5F5, 行高48px |
| 状态标签 | 圆角4px, 绿色#52C41A, 红色#FF4D4F |
| 操作链接 | 主色#1890FF, 悬停下划线 |
| 分页 | 圆角4px, 选中主色背景 |
2.4 用户创建/编辑页
2.4.1 整体布局
┌─────────────────────────────────────────────────────────────────┐
│ Logo 首页 用户管理 组织架构 权限管理 系统设置 👤 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 首页 > 用户管理 > 新建用户 │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 新建用户 │ │
│ │ │ │
│ │ 步骤: [1 基本信息] — [2 部门岗位] — [3 确认提交] │ │
│ │ │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 基本信息 │ │
│ │ │ │
│ │ 用户名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入用户名 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 姓名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入姓名 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 手机号 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入手机号 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 邮箱 │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入邮箱 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 状态 │ │
│ │ ● 启用 ○ 禁用 │ │
│ │ │ │
│ │ │ │
│ │ [取消] [下一步] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘2.4.2 视觉规范
| 元素 | 样式 |
|---|---|
| 面包屑 | 14px, 颜色#8C8C8C, 当前页#262626 |
| 步骤条 | 已完成主色, 进行中主色, 待完成#D9D9D9 |
| 表单卡片 | 白色背景, 圆角8px, 阴影Shadow-1 |
| 表单标题 | 16px, 字重600, 颜色#262626 |
| 标签 | 14px, 颜色#262626, 必填标红* |
| 输入框 | 高度40px, 圆角4px, 聚焦主色边框 |
| 单选按钮 | 主色选中状态 |
| 按钮组 | 次要按钮(取消) + 主按钮(下一步), 右对齐 |
2.5 部门管理页
2.5.1 整体布局
┌─────────────────────────────────────────────────────────────────┐
│ Logo 首页 用户管理 组织架构 权限管理 系统设置 👤 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 部门管理 [+ 新建部门] │
│ │
│ ┌──────────────────────┐ ┌─────────────────────────────────┐│
│ │ 组织架构 │ │ 部门详情 ││
│ │ │ │ ││
│ │ ▼ 总公司 │ │ 技术部 ││
│ │ ▶ 技术部 │ │ ││
│ │ ▼ 产品部 │ │ 部门信息 ││
│ │ ▶ 设计组 │ │ ───────────────────────────── ││
│ │ ▶ 运营组 │ │ 部门名称: 技术部 ││
│ │ ▶ 市场部 │ │ 部门编码: TECH ││
│ │ ▶ 财务部 │ │ 上级部门: 总公司 ││
│ │ │ │ 负责人: 张三 ││
│ │ │ │ 人员数量: 25人 ││
│ │ │ │ ││
│ │ │ │ [编辑] [删除] ││
│ │ │ │ ││
│ │ │ │ 部门成员 ││
│ │ │ │ ───────────────────────────── ││
│ │ │ │ ┌─────────────────────────┐ ││
│ │ │ │ │ ☑ │ 姓名 │ 岗位 │ 操作 │ ││
│ │ │ │ ├───┼──────┼──────┼──────┤ ││
│ │ │ │ │ ☐ │ 张三 │ 经理 │ 移除 │ ││
│ │ │ │ │ ☐ │ 李四 │ 开发 │ 移除 │ ││
│ │ │ │ │ ... │ ││
│ │ │ │ └─────────────────────────┘ ││
│ │ │ │ ││
│ └──────────────────────┘ └─────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘2.5.2 视觉规范
| 元素 | 样式 |
|---|---|
| 左侧树形 | 宽度280px, 白色背景, 圆角8px |
| 树节点 | 高度40px, 悬停#F5F5F5, 选中主色背景 |
| 展开图标 | 16px, 颜色#8C8C8C |
| 右侧详情 | 白色背景, 圆角8px, 阴影Shadow-1 |
| 信息项 | 标签#8C8C8C, 值#262626 |
| 成员表格 | 紧凑模式, 行高40px |
2.6 权限分配页
2.6.1 整体布局
┌─────────────────────────────────────────────────────────────────┐
│ Logo 首页 用户管理 组织架构 权限管理 系统设置 👤 │
├─────────────────────────────────────────────────────────────────┤
│ │
│ 权限管理 [+ 新建角色] │
│ │
│ ┌──────────────────────┐ ┌─────────────────────────────────┐│
│ │ 角色列表 │ │ 权限配置 ││
│ │ │ │ ││
│ │ ● 超级管理员 │ │ 超级管理员 ││
│ │ ○ 部门管理员 │ │ ││
│ │ ○ 普通用户 │ │ 角色信息 ││
│ │ ○ 访客 │ │ ───────────────────────────── ││
│ │ │ │ 角色名称: 超级管理员 ││
│ │ │ │ 角色描述: 拥有所有权限 ││
│ │ │ │ ││
│ │ │ │ [编辑] [删除] ││
│ │ │ │ ││
│ │ │ │ 权限配置 ││
│ │ │ │ ───────────────────────────── ││
│ │ │ │ ││
│ │ │ │ [√] 用户管理 ││
│ │ │ │ [√] 查看用户 ││
│ │ │ │ [√] 创建用户 ││
│ │ │ │ [√] 编辑用户 ││
│ │ │ │ [√] 删除用户 ││
│ │ │ │ ││
│ │ │ │ [√] 组织架构 ││
│ │ │ │ [√] 查看部门 ││
│ │ │ │ [√] 管理部门 ││
│ │ │ │ ││
│ │ │ │ [√] 系统设置 ││
│ │ │ │ [√] 查看日志 ││
│ │ │ │ [√] 系统配置 ││
│ │ │ │ ││
│ │ │ │ [保存权限] ││
│ │ │ │ ││
│ └──────────────────────┘ └─────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘2.6.2 视觉规范
| 元素 | 样式 |
|---|---|
| 角色列表 | 宽度240px, 白色背景, 圆角8px |
| 角色项 | 高度48px, 悬停#F5F5F5, 选中主色左边框 |
| 权限树 | 层级缩进24px |
| 复选框 | 主色选中状态 |
| 保存按钮 | 主色, 右对齐 |
三、组件视觉规范
3.1 导航栏
┌─────────────────────────────────────────────────────────────────┐
│ Logo 首页 用户管理 组织架构 权限管理 系统设置 👤 │
└─────────────────────────────────────────────────────────────────┘| 元素 | 样式 |
|---|---|
| 背景 | 白色, 阴影Shadow-1 |
| Logo | 高度32px, 左边距24px |
| 导航项 | 14px, 颜色#595959, 悬停主色 |
| 选中项 | 颜色主色, 底部2px主色边框 |
| 用户头像 | 32px圆形, 右边距24px |
3.2 侧边栏
┌────────────────┐
│ 📊 仪表盘 │
│ 👥 用户管理 │
│ 🏢 组织架构 │
│ 🔐 权限管理 │
│ ⚙️ 系统设置 │
└────────────────┘| 元素 | 样式 |
|---|---|
| 宽度 | 240px |
| 背景 | #001529 (深色) |
| 菜单项 | 14px, 颜色#A6ADB4 |
| 悬停 | 背景#1890FF, 颜色白色 |
| 选中 | 背景#1890FF, 颜色白色 |
| 图标 | 16px, 右边距8px |
3.3 弹窗
┌─────────────────────────────────────┐
│ 确认删除 [×] │
├─────────────────────────────────────┤
│ │
│ ⚠️ 确定要删除用户"张三"吗? │
│ │
│ 删除后无法恢复，请谨慎操作。 │
│ │
│ [取消] [确定删除] │
│ │
└─────────────────────────────────────┘| 元素 | 样式 |
|---|---|
| 遮罩 | rgba(0,0,0,0.45) |
| 弹窗 | 白色, 圆角8px, 阴影Shadow-4 |
| 标题 | 16px, 字重600, 左边距24px |
| 关闭按钮 | 右上角, 颜色#8C8C8C |
| 内容 | 24px内边距 |
| 警告图标 | 24px, 黄色#FAAD14 |
| 按钮组 | 右对齐, 间距8px |
3.4 消息提示
┌─────────────────────────────────────┐
│ ✅ 操作成功 │
└─────────────────────────────────────┘| 类型 | 背景 | 图标 | 文字 |
|---|---|---|---|
| 成功 | #F6FFED | 绿色✓ | #52C41A |
| 警告 | #FFFBE6 | 黄色⚠ | #FAAD14 |
| 错误 | #FFF2F0 | 红色✕ | #FF4D4F |
| 信息 | #E6F7FF | 蓝色ℹ | #1890FF |
四、响应式视觉适配
4.1 移动端适配
4.1.1 布局调整
| 元素 | 桌面端 | 移动端 |
|---|---|---|
| 侧边栏 | 固定显示 | 抽屉式, 点击展开 |
| 统计卡片 | 4列 | 2列 |
| 图表 | 并排 | 堆叠 |
| 表格 | 完整显示 | 卡片列表 |
| 表单 | 多列 | 单列 |
4.1.2 移动端表格转卡片
┌─────────────────────────┐
│ 张三 │
│ 技术部 · 开发工程师 │
│ 138****8888 │
│ 🟢 启用 │
│ [编辑] [删除] │
└─────────────────────────┘4.2 平板适配
| 元素 | 桌面端 | 平板 |
|---|---|---|
| 侧边栏 | 240px | 200px |
| 统计卡片 | 4列 | 2列 |
| 内容边距 | 24px | 16px |
五、视觉设计原则
5.1 一致性
- 所有按钮使用相同的圆角和阴影
- 所有卡片使用相同的背景色和阴影
- 所有输入框使用相同的边框和聚焦样式
- 所有状态标签使用统一的颜色规范
5.2 层次性
- 通过颜色深浅区分信息层级
- 通过字重和大小区分标题层级
- 通过阴影区分卡片层级
- 通过间距区分内容分组
5.3 可读性
- 正文使用14px, 行高1.5, 确保舒适阅读
- 重要信息使用16px以上, 字重600
- 辅助信息使用12px, 颜色#8C8C8C
- 链接和可点击元素使用主色标识
5.4 反馈性
- 悬停状态提供视觉反馈
- 点击状态提供即时响应
- 操作结果通过消息提示反馈
- 加载状态提供进度指示
六、修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，创建视觉稿设计 |
文档状态: ⏳ 进行中
最后更新: 2026-03-09
文档作者: UI/UX设计师