原型设计规范

1. 概述

1.1 文档目的

本文档定义了系统原型设计的规范和标准，确保原型设计的一致性、可用性和可维护性。

1.2 适用范围

适用于系统所有功能模块的原型设计，包括：

用户管理模块
组织架构模块
权限管理模块
系统配置模块

1.3 原型设计目标

验证交互流程：验证用户任务的完成路径是否合理
发现体验问题：在开发前发现潜在的交互问题
沟通设计意图：为开发团队提供清晰的设计参考
用户测试：支持用户可用性测试

2. 原型设计原则

2.1 fidelity 层级

层级	名称	描述	适用场景
Low	低保真	线框图，无视觉细节	早期概念验证
Medium	中保真	有基础视觉，简化交互	内部评审
High	高保真	接近真实产品，完整交互	用户测试、开发参考

2.2 设计原则

2.2.1 一致性原则

统一使用设计系统定义的组件
保持交互模式的一致性
遵循既定的页面布局规范

2.2.2 完整性原则

覆盖所有用户操作流程
包含正常流程和异常流程
考虑边界情况和空状态

2.2.3 可测试性原则

关键流程必须可交互
状态变化要有明确反馈
支持用户操作路径的完整模拟

3. 原型设计规范

3.1 页面结构规范

3.1.1 页面布局

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏 (64px)                                           │
├──────────────┬──────────────────────────────────────────────┤
│              │                                              │
│  侧边菜单    │           内容区域                            │
│  (200px)     │           (自适应)                            │
│              │                                              │
│              │                                              │
│              │                                              │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

3.1.2 页面元素层级

层级	元素	z-index	说明
1	页面内容	auto	基础内容层
10	固定头部	100	固定在顶部
10	固定侧边栏	100	固定在左侧
20	下拉菜单	200	悬浮层
30	模态框遮罩	300	遮罩层
40	模态框内容	400	弹窗层
50	消息提示	500	通知层
60	加载层	600	最高层级

3.2 交互规范

3.2.1 页面转场

转场类型	动画效果	时长	缓动函数
页面切换	淡入淡出	300ms	ease-in-out
侧边栏展开	滑动	200ms	ease-out
弹窗出现	缩放+淡入	200ms	cubic-bezier(0.4, 0, 0.2, 1)
抽屉滑出	从右滑入	300ms	ease-out
下拉展开	高度展开	200ms	ease-in-out

3.2.2 交互反馈

交互类型	反馈方式	延迟
按钮点击	颜色变化/缩放	即时
链接悬停	下划线/颜色变化	即时
输入框聚焦	边框高亮	即时
加载状态	加载动画	即时
操作成功	Toast提示	即时
操作失败	错误提示	即时

3.2.3 手势支持（移动端）

手势	操作	反馈
点击	选择/激活	视觉反馈
长按	上下文菜单	震动+菜单弹出
滑动	列表操作/页面切换	跟随手指移动
下拉	刷新	加载指示器
上拉	加载更多	加载指示器
捏合	缩放（图片/地图）	内容缩放

3.3 组件交互规范

3.3.1 按钮

状态	视觉表现	交互说明
默认	主色填充	可点击
悬停	颜色加深	提示可点击
按下	缩放0.98	确认点击
禁用	灰色，cursor:not-allowed	不可点击
加载	加载图标+文字	等待中

3.3.2 表单输入

状态	视觉表现	交互说明
默认	灰色边框	等待输入
聚焦	主色边框+阴影	当前输入框
错误	红色边框+错误提示	验证失败
成功	绿色边框+成功图标	验证通过
禁用	灰色背景	不可编辑

3.3.3 表格

交互	行为	说明
行悬停	背景色变化	高亮当前行
行点击	选中/展开详情	单选或多选
表头点击	排序	升序/降序切换
复选框	批量选择	支持全选
操作按钮	悬停显示	节省空间

3.3.4 弹窗/抽屉

类型	触发方式	关闭方式	遮罩点击
确认框	点击删除等危险操作	确认/取消	可关闭
信息框	点击详情	关闭按钮	可关闭
表单弹窗	点击新建/编辑	保存/取消	不可关闭
抽屉	点击更多操作	关闭按钮/遮罩	可关闭

4. 页面原型规范

4.1 登录页

4.1.1 页面结构

┌─────────────────────────────────────────────────────────────┐
│  Logo + 系统名称                                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                                                     │   │
│  │  用户名/邮箱                                         │   │
│  │  ┌─────────────────────────────────────────────┐   │   │
│  │  │                                             │   │   │
│  │  └─────────────────────────────────────────────┘   │   │
│  │                                                     │   │
│  │  密码                                               │   │
│  │  ┌─────────────────────────────────────────────┐   │   │
│  │  │                                             │   │   │
│  │  └─────────────────────────────────────────────┘   │   │
│  │                                                     │   │
│  │  [√] 记住密码          忘记密码？                    │   │
│  │                                                     │   │
│  │  ┌─────────────────────────────────────────────┐   │   │
│  │  │                   登 录                      │   │   │
│  │  └─────────────────────────────────────────────┘   │   │
│  │                                                     │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

4.1.2 交互说明

元素	交互	说明
用户名输入	失焦验证	验证邮箱格式
密码输入	显示/隐藏切换	点击眼睛图标切换
登录按钮	点击提交	验证通过后跳转
记住密码	勾选保存	本地存储登录信息
忘记密码	点击跳转	进入密码找回流程

4.2 首页仪表盘

4.2.1 页面结构

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏 (用户信息、通知、设置)                            │
├──────────────┬──────────────────────────────────────────────┤
│              │  页面标题 + 面包屑                            │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│              │  │统计卡片1│ │统计卡片2│ │统计卡片3│ │统计卡片4│ │
│              │  └────────┘ └────────┘ └────────┘ └────────┘ │
│              │                                              │
│              │  ┌────────────────────┐ ┌──────────────────┐ │
│              │  │                    │ │                  │ │
│              │  │    趋势图表         │ │   饼图/分布      │ │
│              │  │                    │ │                  │ │
│              │  └────────────────────┘ └──────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │              最近活动列表                 │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

4.2.2 交互说明

元素	交互	说明
统计卡片	悬停效果	轻微上浮+阴影增强
趋势图表	数据点悬停	显示具体数值Tooltip
饼图	扇区悬停	扇区突出+显示详情
活动列表	点击跳转	进入对应详情页
快捷入口	点击跳转	快速访问常用功能

4.3 用户列表页

4.3.1 页面结构

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  用户管理 > 用户列表                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 筛选条件: [部门▼] [状态▼] [角色▼]  搜索🔍 │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ [+ 新建用户]  [批量操作▼]  [导出]         │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ ☑ │ 用户名 │ 姓名 │ 部门 │ 角色 │ 状态 │ 操作│
│              │  ├───┼────────┼──────┼──────┼──────┼──────┼────┤
│              │  │ ☑ │ user01 │ 张三 │ 技术部│ 管理员│ 启用 │编辑│
│              │  │ ☑ │ user02 │ 李四 │ 产品部│ 用户  │ 启用 │编辑│
│              │  │...│  ...   │ ...  │ ...  │ ...  │ ...  │... │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │ 共 100 条  < 1 2 3 ... 10 >  每页20条     │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

4.3.2 交互说明

元素	交互	说明
筛选条件	选择后自动筛选	多条件组合筛选
搜索框	输入后回车/失焦	实时搜索或按回车搜索
新建用户	点击打开弹窗	弹出用户创建表单
批量操作	选择后激活	需先勾选用户
表格行	悬停显示操作	编辑/删除/禁用按钮
分页	点击切换	跳转指定页码

4.4 用户创建/编辑页

4.4.1 页面结构

┌─────────────────────────────────────────────────────────────┐
│  顶部导航栏                                                  │
├──────────────┬──────────────────────────────────────────────┤
│              │  用户管理 > 新建用户                          │
│  侧边菜单    ├──────────────────────────────────────────────┤
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │  步骤条: 基本信息 > 角色权限 > 完成        │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
│              │  ┌──────────────────────────────────────────┐ │
│              │  │                                          │ │
│              │  │  基本信息                                  │ │
│              │  │  ─────────────────────────────────────── │ │
│              │  │  用户名 *                                  │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │                                     │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  姓名 *                                    │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │                                     │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  邮箱 *                                    │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │                                     │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  部门 *                                    │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │ 请选择部门                    [▼]   │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  手机号码                                  │ │
│              │  │  ┌─────────────────────────────────────┐ │ │
│              │  │  │                                     │ │ │
│              │  │  └─────────────────────────────────────┘ │ │
│              │  │                                          │ │
│              │  │  ┌──────────────┐    ┌──────────────┐   │ │
│              │  │  │   取 消      │    │  下一步  >   │   │ │
│              │  │  └──────────────┘    └──────────────┘   │ │
│              │  │                                          │ │
│              │  └──────────────────────────────────────────┘ │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

4.4.2 交互说明

元素	交互	说明
步骤条	点击切换	可返回上一步修改
表单验证	失焦验证	实时显示验证结果
下一步	验证通过后激活	有错误时禁用
取消	点击确认	二次确认是否放弃
完成	显示成功提示	跳转回列表页

5. 响应式设计规范

5.1 断点定义

断点	宽度	设备类型	布局调整
xs	< 576px	手机竖屏	单列布局，隐藏侧边栏
sm	576px - 767px	手机横屏	单列布局，隐藏侧边栏
md	768px - 991px	平板	侧边栏可折叠
lg	992px - 1199px	小桌面	标准布局
xl	1200px - 1599px	桌面	标准布局
xxl	≥ 1600px	大桌面	更宽内容区

5.2 移动端适配

5.2.1 导航适配

顶部导航：简化图标，收起次要功能
侧边菜单：改为抽屉式，点击汉堡菜单展开
面包屑：简化显示，只保留上一级

5.2.2 内容适配

表格：改为卡片列表，横向滚动或折叠列
表单：全宽输入框，垂直排列
图表：保持比例，支持手势缩放
弹窗：全屏或底部抽屉

5.2.3 交互适配

增大点击区域（最小44px）
支持滑动手势
支持下拉刷新
支持上拉加载更多

6. 原型交付规范

6.1 交付内容

内容	格式	说明
可交互原型	HTML/在线链接	支持点击、跳转
原型说明文档	Markdown	详细交互说明
页面流程图	PNG/PDF	页面间跳转关系
状态说明	Markdown	各状态定义

6.2 命名规范

类型	命名规则	示例
页面	`模块_功能_状态`	`user_list_default`
组件	`组件类型_变体`	`button_primary`
交互	`动作_对象_结果`	`click_submit_success`
状态	`状态_描述`	`state_loading`

6.3 版本管理

版本号	规则	示例
主版本	重大结构调整	v1.0.0
次版本	新增页面/功能	v1.1.0
修订版本	细节优化/修复	v1.1.1

7. 原型评审检查清单

7.1 功能完整性

[ ] 覆盖所有用户故事
[ ] 包含正常流程和异常流程
[ ] 边界情况处理
[ ] 空状态设计

7.2 交互合理性

[ ] 操作流程符合用户习惯
[ ] 反馈及时明确
[ ] 错误处理友好
[ ] 加载状态完整

7.3 视觉一致性

[ ] 使用设计系统组件
[ ] 颜色、字体、间距一致
[ ] 图标风格统一
[ ] 动效风格一致

7.4 技术可行性

[ ] 交互可实现
[ ] 性能可接受
[ ] 兼容目标浏览器
[ ] 响应式适配完整

8. 附录

8.1 原型工具推荐

工具	适用场景	特点
Figma	团队协作	实时协作，组件库支持
Axure RP	复杂交互	强大的交互逻辑
Sketch	Mac用户	插件丰富
ProtoPie	高保真动效	精细的动画控制
墨刀	快速原型	中文支持好，上手快

8.2 参考资源

修订记录

版本	日期	作者	变更内容
1.0	2026-03-09	UI/UX设计师	初始版本，定义原型设计规范

原型设计规范 ​

1. 概述 ​

1.1 文档目的 ​

1.2 适用范围 ​

1.3 原型设计目标 ​

2. 原型设计原则 ​

2.1 fidelity 层级 ​

2.2 设计原则 ​

2.2.1 一致性原则 ​

2.2.2 完整性原则 ​

2.2.3 可测试性原则 ​

3. 原型设计规范 ​

3.1 页面结构规范 ​

3.1.1 页面布局 ​

3.1.2 页面元素层级 ​

3.2 交互规范 ​

3.2.1 页面转场 ​

3.2.2 交互反馈 ​

3.2.3 手势支持（移动端） ​

3.3 组件交互规范 ​

3.3.1 按钮 ​

3.3.2 表单输入 ​

3.3.3 表格 ​

3.3.4 弹窗/抽屉 ​

4. 页面原型规范 ​

4.1 登录页 ​

4.1.1 页面结构 ​

4.1.2 交互说明 ​

4.2 首页仪表盘 ​

4.2.1 页面结构 ​

4.2.2 交互说明 ​

4.3 用户列表页 ​

4.3.1 页面结构 ​

4.3.2 交互说明 ​

4.4 用户创建/编辑页 ​

4.4.1 页面结构 ​

4.4.2 交互说明 ​

5. 响应式设计规范 ​

5.1 断点定义 ​

5.2 移动端适配 ​

5.2.1 导航适配 ​

5.2.2 内容适配 ​

5.2.3 交互适配 ​

6. 原型交付规范 ​

6.1 交付内容 ​

6.2 命名规范 ​

6.3 版本管理 ​

7. 原型评审检查清单 ​

7.1 功能完整性 ​

7.2 交互合理性 ​

7.3 视觉一致性 ​

7.4 技术可行性 ​

8. 附录 ​

8.1 原型工具推荐 ​

8.2 参考资源 ​

修订记录 ​

原型设计规范

1. 概述

1.1 文档目的

1.2 适用范围

1.3 原型设计目标

2. 原型设计原则

2.1 fidelity 层级

2.2 设计原则

2.2.1 一致性原则

2.2.2 完整性原则

2.2.3 可测试性原则

3. 原型设计规范

3.1 页面结构规范

3.1.1 页面布局

3.1.2 页面元素层级

3.2 交互规范

3.2.1 页面转场

3.2.2 交互反馈

3.2.3 手势支持（移动端）

3.3 组件交互规范

3.3.1 按钮

3.3.2 表单输入

3.3.3 表格

3.3.4 弹窗/抽屉

4. 页面原型规范

4.1 登录页

4.1.1 页面结构

4.1.2 交互说明

4.2 首页仪表盘

4.2.1 页面结构

4.2.2 交互说明

4.3 用户列表页

4.3.1 页面结构

4.3.2 交互说明

4.4 用户创建/编辑页

4.4.1 页面结构

4.4.2 交互说明

5. 响应式设计规范

5.1 断点定义

5.2 移动端适配

5.2.1 导航适配

5.2.2 内容适配

5.2.3 交互适配

6. 原型交付规范

6.1 交付内容

6.2 命名规范

6.3 版本管理

7. 原型评审检查清单

7.1 功能完整性

7.2 交互合理性

7.3 视觉一致性

7.4 技术可行性

8. 附录

8.1 原型工具推荐

8.2 参考资源

修订记录