Mockups设计
文档编号: SYS-UX-VD-003
版本: 1.0
日期: 2026-03-09
编制: UI/UX设计师
状态: ⏳ 进行中
一、文档概述
1.1 文档目的
本文档定义系统各核心页面的高保真Mockups设计规范，为前端开发提供精确的视觉参考。
1.2 参考文档
二、Mockups清单
2.1 页面Mockups
| 序号 | 页面名称 | 文件路径 | 状态 |
|---|---|---|---|
| 1 | 登录页 | ../03-mockups/01-login/login-page.png | ⏳ 待设计 |
| 2 | 首页仪表盘 | ../03-mockups/02-dashboard/dashboard-page.png | ⏳ 待设计 |
| 3 | 用户列表 | ../03-mockups/03-user-management/user-list-page.png | ⏳ 待设计 |
| 4 | 用户创建 | ../03-mockups/03-user-management/user-create-page.png | ⏳ 待设计 |
| 5 | 用户编辑 | ../03-mockups/03-user-management/user-edit-page.png | ⏳ 待设计 |
| 6 | 部门管理 | ../03-mockups/04-organization/department-page.png | ⏳ 待设计 |
| 7 | 权限管理 | ../03-mockups/05-permission/permission-page.png | ⏳ 待设计 |
| 8 | 系统设置 | ../03-mockups/06-system/settings-page.png | ⏳ 待设计 |
2.2 组件Mockups
| 序号 | 组件名称 | 文件路径 | 状态 |
|---|---|---|---|
| 1 | 导航栏 | ../03-mockups/00-components/navigation-bar.png | ⏳ 待设计 |
| 2 | 侧边栏 | ../03-mockups/00-components/sidebar.png | ⏳ 待设计 |
| 3 | 数据表格 | ../03-mockups/00-components/data-table.png | ⏳ 待设计 |
| 4 | 表单组件 | ../03-mockups/00-components/form-elements.png | ⏳ 待设计 |
| 5 | 弹窗组件 | ../03-mockups/00-components/modal-dialogs.png | ⏳ 待设计 |
| 6 | 消息提示 | ../03-mockups/00-components/message-toast.png | ⏳ 待设计 |
三、Mockups设计规范
3.1 设计工具
- 主设计工具: Figma
- 辅助工具: Sketch / Adobe XD
- 标注工具: Figma Dev Mode / Zeplin
3.2 画布设置
| 画布类型 | 宽度 | 高度 | 用途 |
|---|---|---|---|
| 桌面端 | 1440px | Auto | 标准桌面页面 |
| 平板 | 768px | Auto | 平板适配 |
| 移动端 | 375px | Auto | 手机适配 |
3.3 命名规范
页面命名: {模块}-{页面}-{状态}
示例:
user-list-defaultuser-list-filtereduser-create-step1user-create-step2modal-delete-confirm
图层命名: {类型}-{元素}-{状态}
示例:
btn-primary-defaultinput-text-focuscard-statistics-hover
3.4 导出规范
| 类型 | 格式 | 分辨率 | 命名 |
|---|---|---|---|
| 完整页面 | PNG | 2x | {page-name}@2x.png |
| 组件 | PNG | 2x | {component-name}@2x.png |
| 图标 | SVG | 矢量 | {icon-name}.svg |
| 切图 | PNG | 2x/3x | {asset-name}@2x.png |
四、核心页面Mockups详细说明
4.1 登录页
4.1.1 布局结构
┌─────────────────────────────────────────────────────────────────┐
│ │
│ [Logo] │
│ │
│ ┌─────────────────────┐ │
│ │ │ │
│ │ 用户登录 │ │
│ │ │ │
│ │ 用户名 │ │
│ │ ┌───────────────┐ │ │
│ │ │ │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ │ 密码 │ │
│ │ ┌───────────────┐ │ │
│ │ │ [👁] │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ │ [☐] 记住我 │ │
│ │ │ │
│ │ ┌───────────────┐ │ │
│ │ │ 登 录 │ │ │
│ │ └───────────────┘ │ │
│ │ │ │
│ │ 忘记密码? │ │
│ │ │ │
│ └─────────────────────┘ │
│ │
│ © 2026 公司名称 │
│ │
└─────────────────────────────────────────────────────────────────┘4.1.2 视觉细节
| 元素 | 规格 |
|---|---|
| 背景 | 渐变: #1890FF → #096DD9, 135度 |
| 卡片 | 白色 #FFFFFF, 圆角12px, 阴影 0 20px 25px rgba(0,0,0,0.1) |
| 卡片尺寸 | 400px × Auto, 内边距 40px |
| Logo | 居中, 尺寸 64px, 下方留白 32px |
| 标题 | 24px, 字重600, 颜色#262626, 居中 |
| 输入框 | 高度48px, 圆角4px, 边框#D9D9D9 |
| 输入框图标 | 左侧16px图标, 颜色#BFBFBF |
| 登录按钮 | 高度48px, 主色背景, 全宽, 圆角4px |
| 记住我 | 14px, 颜色#595959 |
| 忘记密码 | 14px, 主色#1890FF |
| 版权 | 12px, 颜色rgba(255,255,255,0.8) |
4.1.3 交互状态
| 状态 | 样式 |
|---|---|
| 默认 | 如上所述 |
| 输入框聚焦 | 边框#1890FF, 阴影 0 0 0 2px rgba(24,144,255,0.2) |
| 输入框错误 | 边框#FF4D4F, 下方显示错误提示 |
| 按钮悬停 | 背景#40A9FF |
| 按钮点击 | 背景#096DD9 |
| 按钮加载 | 显示加载动画, 禁用点击 |
4.2 首页仪表盘
4.2.1 布局结构
┌─────────────────────────────────────────────────────────────────┐
│ [Logo] 首页 用户管理 组织架构 权限管理 系统设置 [👤]│
├─────────────────────────────────────────────────────────────────┤
│ │
│ 首页 │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────┐│
│ │ │ │ │ │ │ │ ││
│ │ [👤图标] │ │ [📈图标] │ │ [🔥图标] │ │ [🏢图标]││
│ │ │ │ │ │ │ │ ││
│ │ 总用户数 │ │ 今日新增 │ │ 活跃用户 │ │ 部门数 ││
│ │ │ │ │ │ │ │ ││
│ │ 1,234 │ │ +56 │ │ 892 │ │ 12 ││
│ │ │ │ │ │ │ │ ││
│ │ ↑ 12% │ │ ↑ 8% │ │ ↑ 5% │ │ → 0% ││
│ │ │ │ │ │ │ │ ││
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────┘│
│ │
│ ┌─────────────────────────┐ ┌───────────────────────────────┐│
│ │ 用户增长趋势 │ │ 部门人员分布 ││
│ │ │ │ ││
│ │ │ │ ││
│ │ [折线图区域] │ │ [饼图区域] ││
│ │ │ │ ││
│ │ │ │ ││
│ └─────────────────────────┘ └───────────────────────────────┘│
│ │
│ ┌───────────────────────────────────────────────────────────┐│
│ │ 最近活动 ││
│ │ ││
│ │ ● 张三 创建了用户 李四 10分钟前 ││
│ │ ● 王五 修改了部门 技术部 30分钟前 ││
│ │ ● 赵六 分配了权限 管理员 1小时前 ││
│ │ ● ... ││
│ └───────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘4.2.2 视觉细节
| 元素 | 规格 |
|---|---|
| 页面背景 | #F5F5F5 |
| 页面边距 | 24px |
| 统计卡片 | 白色, 圆角8px, 阴影 0 1px 2px rgba(0,0,0,0.05) |
| 卡片内边距 | 24px |
| 图标容器 | 48px圆形, 背景主色10%透明度 |
| 图标 | 24px, 主色#1890FF |
| 标签 | 14px, 颜色#8C8C8C |
| 数值 | 32px, 字重600, 颜色#262626 |
| 趋势 | 12px, 绿色#52C41A(↑), 红色#FF4D4F(↓), 灰色#8C8C8C(→) |
| 图表卡片 | 白色, 圆角8px, 高度320px |
| 图表标题 | 16px, 字重600, 颜色#262626 |
| 活动卡片 | 白色, 圆角8px |
| 活动项 | 头像32px + 文字, 间距12px |
| 时间 | 12px, 颜色#8C8C8C, 右对齐 |
4.3 用户列表页
4.3.1 布局结构
┌─────────────────────────────────────────────────────────────────┐
│ [Logo] 首页 用户管理 组织架构 权限管理 系统设置 [👤]│
├─────────────────────────────────────────────────────────────────┤
│ │
│ 用户管理 [+ 新建用户] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ 🔍 搜索用户名... [部门 ▼] [状态 ▼] [更多 ▼] [查询] │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [批量启用] [批量禁用] [批量删除] [📥 导入] [📤 导出] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ ☑ │ 用户名 │ 姓名 │ 部门 │ 手机号 │ 状态 │ 操作 │ │
│ ├───┼────────┼──────┼───────┼──────────┼───────┼─────────┤ │
│ │ ☐ │ zhangs │ 张三 │ 技术部│ 138**** │ 🟢启用│ 编辑 删除│ │
│ │ ☐ │ lis │ 李四 │ 产品部│ 139**** │ 🟢启用│ 编辑 删除│ │
│ │ ☐ │ wangw │ 王五 │ 测试部│ 137**** │ 🔴禁用│ 编辑 删除│ │
│ │ ... │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 共 128 条记录 [< 1 2 3 4 5 ... 13 >] 10条/页│
│ │
└─────────────────────────────────────────────────────────────────┘4.3.2 视觉细节
| 元素 | 规格 |
|---|---|
| 页面标题 | 20px, 字重600, 颜色#262626 |
| 新建按钮 | 主色背景, 高度32px, 圆角4px, 图标+文字 |
| 筛选栏 | 白色背景, 圆角4px, 边框#D9D9D9, 内边距16px |
| 搜索框 | 高度32px, 圆角4px, 左侧搜索图标 |
| 下拉选择 | 高度32px, 圆角4px, 右侧下拉箭头 |
| 查询按钮 | 主色, 高度32px |
| 操作按钮 | 次要样式, 高度32px, 间距8px |
| 表格 | 白色背景, 表头#F5F5F5, 行高56px |
| 表头文字 | 14px, 字重600, 颜色#262626 |
| 单元格文字 | 14px, 颜色#262626 |
| 状态标签 | 圆角4px, 内边距2px 8px |
| 启用状态 | 背景#F6FFED, 文字#52C41A, 左侧绿色圆点 |
| 禁用状态 | 背景#FFF2F0, 文字#FF4D4F, 左侧红色圆点 |
| 操作链接 | 主色#1890FF, 14px, 间距8px |
| 分页 | 圆角4px, 选中主色背景, 悬停#F5F5F5 |
4.4 用户创建页
4.4.1 布局结构
┌─────────────────────────────────────────────────────────────────┐
│ [Logo] 首页 用户管理 组织架构 权限管理 系统设置 [👤]│
├─────────────────────────────────────────────────────────────────┤
│ │
│ 首页 > 用户管理 > 新建用户 │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 新建用户 │ │
│ │ │ │
│ │ [1 基本信息] — [2 部门岗位] — [3 确认提交] │ │
│ │ ●───────────○───────────○ │ │
│ │ │ │
│ │ ──────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 基本信息 │ │
│ │ │ │
│ │ 用户名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入用户名 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ 4-20个字符, 支持字母、数字、下划线 │ │
│ │ │ │
│ │ 姓名 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入姓名 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 手机号 * │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入手机号 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 邮箱 │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ 请输入邮箱 │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ 状态 │ │
│ │ ● 启用 ○ 禁用 │ │
│ │ │ │
│ │ │ │
│ │ [取消] [下一步] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘4.4.2 视觉细节
| 元素 | 规格 |
|---|---|
| 面包屑 | 14px, 颜色#8C8C8C, 分隔符> |
| 当前页 | 颜色#262626 |
| 步骤条 | 已完成主色圆点+文字, 进行中主色圆点+灰色文字, 待完成灰色圆点+文字 |
| 连接线 | 已完成主色, 待完成#D9D9D9 |
| 表单卡片 | 白色, 圆角8px, 阴影 0 1px 2px rgba(0,0,0,0.05) |
| 表单标题 | 16px, 字重600, 颜色#262626 |
| 标签 | 14px, 颜色#262626, 必填项标红* |
| 输入框 | 高度40px, 圆角4px |
| 提示文字 | 12px, 颜色#8C8C8C |
| 单选按钮 | 选中主色填充 |
| 按钮组 | 右对齐, 间距16px |
| 取消按钮 | 次要样式 |
| 下一步按钮 | 主色样式 |
4.5 部门管理页
4.5.1 布局结构
┌─────────────────────────────────────────────────────────────────┐
│ [Logo] 首页 用户管理 组织架构 权限管理 系统设置 [👤]│
├─────────────────────────────────────────────────────────────────┤
│ │
│ 部门管理 [+ 新建部门] │
│ │
│ ┌──────────────────────┐ ┌─────────────────────────────────┐│
│ │ 组织架构 │ │ 技术部 ││
│ │ │ │ ││
│ │ ▼ 🏢 总公司 │ │ ┌─────────────────────────────┐││
│ │ ▶ 👥 技术部 │ │ │ 部门信息 │││
│ │ ▼ 👥 产品部 │ │ │ │││
│ │ 👥 设计组 │ │ │ 部门名称 技术部 │││
│ │ 👥 运营组 │ │ │ 部门编码 TECH │││
│ │ 👥 市场部 │ │ │ 上级部门 总公司 │││
│ │ 👥 财务部 │ │ │ 负责人 张三 │││
│ │ │ │ │ 人员数量 25人 │││
│ │ │ │ │ │││
│ │ │ │ │ [编辑] [删除] │││
│ │ │ │ └─────────────────────────────┘││
│ │ │ │ ││
│ │ │ │ ┌─────────────────────────────┐││
│ │ │ │ │ 部门成员 │││
│ │ │ │ │ │││
│ │ │ │ │ ☑ │ 姓名 │ 岗位 │ 操作 │││
│ │ │ │ ├───┼──────┼────────┼──────┤││
│ │ │ │ │ ☐ │ 张三 │ 经理 │ 移除 │││
│ │ │ │ │ ☐ │ 李四 │ 工程师 │ 移除 │││
│ │ │ │ │ ... │││
│ │ │ │ └─────────────────────────────┘││
│ │ │ │ ││
│ └──────────────────────┘ └─────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘4.5.2 视觉细节
| 元素 | 规格 |
|---|---|
| 左侧树形 | 宽度280px, 白色背景, 圆角8px |
| 树节点 | 高度40px, 内边距12px 16px |
| 展开图标 | 16px, 颜色#8C8C8C |
| 部门图标 | 16px, 颜色#1890FF |
| 选中节点 | 背景#E6F7FF, 左边框3px主色 |
| 右侧详情 | 白色背景, 圆角8px |
| 详情头部 | 20px标题, 底部边框 |
| 信息卡片 | 内边距24px |
| 信息项 | 标签14px#8C8C8C, 值14px#262626 |
| 成员表格 | 紧凑模式, 行高48px |
4.6 权限管理页
4.6.1 布局结构
┌─────────────────────────────────────────────────────────────────┐
│ [Logo] 首页 用户管理 组织架构 权限管理 系统设置 [👤]│
├─────────────────────────────────────────────────────────────────┤
│ │
│ 权限管理 [+ 新建角色] │
│ │
│ ┌──────────────────────┐ ┌─────────────────────────────────┐│
│ │ 角色列表 │ │ 超级管理员 ││
│ │ │ │ ││
│ │ ● 🔐 超级管理员 │ │ ┌─────────────────────────────┐││
│ │ ○ 🔐 部门管理员 │ │ │ 角色信息 │││
│ │ ○ 👤 普通用户 │ │ │ │││
│ │ ○ 👁 访客 │ │ │ 角色名称 超级管理员 │││
│ │ │ │ │ 角色描述 拥有所有权限 │││
│ │ │ │ │ │││
│ │ │ │ │ [编辑] [删除] │││
│ │ │ │ └─────────────────────────────┘││
│ │ │ │ ││
│ │ │ │ ┌─────────────────────────────┐││
│ │ │ │ │ 权限配置 │││
│ │ │ │ │ │││
│ │ │ │ │ [√] 用户管理 │││
│ │ │ │ │ [√] 查看用户 │││
│ │ │ │ │ [√] 创建用户 │││
│ │ │ │ │ [√] 编辑用户 │││
│ │ │ │ │ [√] 删除用户 │││
│ │ │ │ │ │││
│ │ │ │ │ [√] 组织架构 │││
│ │ │ │ │ [√] 查看部门 │││
│ │ │ │ │ [√] 管理部门 │││
│ │ │ │ │ │││
│ │ │ │ │ [√] 系统设置 │││
│ │ │ │ │ [√] 查看日志 │││
│ │ │ │ │ [√] 系统配置 │││
│ │ │ │ │ │││
│ │ │ │ │ [保存权限] │││
│ │ │ │ └─────────────────────────────┘││
│ │ │ │ ││
│ └──────────────────────┘ └─────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘4.6.2 视觉细节
| 元素 | 规格 |
|---|---|
| 角色列表 | 宽度240px, 白色背景, 圆角8px |
| 角色项 | 高度48px, 内边距12px 16px |
| 角色图标 | 16px, 颜色#8C8C8C |
| 选中角色 | 左边框3px主色 |
| 权限树 | 层级缩进24px |
| 父级复选框 | 16px, 主色选中 |
| 子级复选框 | 16px, 主色选中, 缩进24px |
| 保存按钮 | 主色, 右对齐 |
五、组件Mockups详细说明
5.1 导航栏
┌─────────────────────────────────────────────────────────────────┐
│ [Logo 120×32] 首页 用户管理 组织架构 权限管理 系统设置 [👤]│
└─────────────────────────────────────────────────────────────────┘| 元素 | 规格 |
|---|---|
| 高度 | 64px |
| 背景 | 白色 #FFFFFF |
| 阴影 | 0 1px 2px rgba(0,0,0,0.05) |
| Logo | 120px × 32px, 左边距24px |
| 导航项 | 14px, 颜色#595959, 间距32px |
| 选中项 | 颜色#1890FF, 底部2px主色边框 |
| 用户区 | 右边距24px |
| 头像 | 32px圆形 |
5.2 数据表格
┌─────────────────────────────────────────────────────────┐
│ ☑ │ 用户名 │ 姓名 │ 部门 │ 手机号 │ 状态 │ 操作 │
├───┼────────┼──────┼───────┼──────────┼───────┼─────────┤
│ ☐ │ zhangs │ 张三 │ 技术部│ 138**** │ 🟢启用│ 编辑 删除│
│ ☐ │ lis │ 李四 │ 产品部│ 139**** │ 🟢启用│ 编辑 删除│
└─────────────────────────────────────────────────────────┘| 元素 | 规格 |
|---|---|
| 表头 | 背景#F5F5F5, 高度48px |
| 表头文字 | 14px, 字重600, 颜色#262626 |
| 行高 | 56px |
| 行悬停 | 背景#F5F5F5 |
| 选中行 | 背景#E6F7FF |
| 复选框 | 16px |
| 边框 | 1px #D9D9D9 |
5.3 弹窗组件
5.3.1 确认弹窗
┌─────────────────────────────────────┐
│ 确认删除 [×] │
├─────────────────────────────────────┤
│ │
│ ⚠️ │
│ │
│ 确定要删除用户"张三"吗? │
│ │
│ 删除后无法恢复，请谨慎操作。 │
│ │
│ [取消] [确定删除] │
│ │
└─────────────────────────────────────┘| 元素 | 规格 |
|---|---|
| 宽度 | 420px |
| 圆角 | 8px |
| 标题 | 16px, 字重600, 内边距16px 24px |
| 关闭按钮 | 24px, 右上角16px |
| 内容 | 内边距24px, 居中 |
| 警告图标 | 48px, 颜色#FAAD14 |
| 提示文字 | 16px, 颜色#262626 |
| 说明文字 | 14px, 颜色#8C8C8C |
| 按钮组 | 右对齐, 间距8px, 底部24px |
5.3.2 表单弹窗
┌─────────────────────────────────────┐
│ 新建部门 [×] │
├─────────────────────────────────────┤
│ │
│ 部门名称 * │
│ ┌─────────────────────────────┐ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ 上级部门 │
│ ┌─────────────────────────────┐ │
│ │ 请选择上级部门 [▼] │ │
│ └─────────────────────────────┘ │
│ │
│ 部门负责人 │
│ ┌─────────────────────────────┐ │
│ │ 请选择负责人 [▼] │ │
│ └─────────────────────────────┘ │
│ │
│ [取消] [确定] │
│ │
└─────────────────────────────────────┘| 元素 | 规格 |
|---|---|
| 宽度 | 520px |
| 表单字段 | 间距24px |
| 标签 | 14px, 颜色#262626 |
| 输入框 | 高度40px |
5.4 消息提示
┌─────────────────────────┐
│ ✅ 操作成功 │
└─────────────────────────┘| 类型 | 背景 | 图标 | 文字 |
|---|---|---|---|
| 成功 | #F6FFED | 绿色✓ 16px | #52C41A 14px |
| 警告 | #FFFBE6 | 黄色⚠ 16px | #FAAD14 14px |
| 错误 | #FFF2F0 | 红色✕ 16px | #FF4D4F 14px |
| 信息 | #E6F7FF | 蓝色ℹ 16px | #1890FF 14px |
位置: 顶部居中, 距离顶部24px
动画: 滑入 300ms, 自动消失 3s
六、移动端Mockups
6.1 布局调整
| 元素 | 桌面端 | 移动端 |
|---|---|---|
| 侧边栏 | 固定240px | 抽屉式, 点击汉堡菜单展开 |
| 页面边距 | 24px | 16px |
| 统计卡片 | 4列 | 2列 |
| 表格 | 完整表格 | 卡片列表 |
| 表单 | 多列 | 单列 |
6.2 移动端表格卡片
┌─────────────────────────┐
│ │
│ 张三 │
│ 技术部 · 开发工程师 │
│ 138****8888 │
│ 🟢 启用 │
│ │
│ [编辑] [删除] │
│ │
└─────────────────────────┘| 元素 | 规格 |
|---|---|
| 卡片 | 白色, 圆角8px, 阴影 |
| 姓名 | 16px, 字重600 |
| 信息 | 14px, 颜色#8C8C8C |
| 状态 | 标签样式 |
| 操作 | 文字按钮, 主色 |
七、设计交付规范
7.1 交付文件
| 文件类型 | 格式 | 用途 |
|---|---|---|
| 设计源文件 | .fig | 设计稿源文件 |
| 标注文件 | Figma Dev Mode | 开发标注 |
| 切图资源 | PNG/SVG | 开发使用 |
| 设计规范 | 设计参考 |
7.2 切图规范
| 类型 | 格式 | 尺寸 |
|---|---|---|
| 图标 | SVG | 矢量 |
| 图片 | PNG @2x | 2倍图 |
| 背景 | PNG @2x | 2倍图 |
7.3 命名规范
切图命名: {模块}_{元素}_{状态}
示例:
login_logo_default.pngbtn_primary_hover.pngicon_user_avatar.png
八、修订记录
| 版本 | 日期 | 作者 | 变更内容 |
|---|---|---|---|
| 1.0 | 2026-03-09 | UI/UX设计师 | 初始版本，创建Mockups设计规范 |
文档状态: ⏳ 进行中
最后更新: 2026-03-09
文档作者: UI/UX设计师