AXURE RP8.0产品原型设计与制作实战

第 1章 关于界面原型/ 9

1.1 界面原型的概念和作用 / 10

1.2 界面原型的保真程度及应用 / 10

1.2.1 “画”糙理不糙——低保真原型 / 10

1.2.2 交流高格调——高保真原型 / 11

第 2章 使用 Axure制作低保真原型/ 13

2.1 初识 Axure RP/ 14

2.1.1 菜单 / 14

2.1.2 工具栏 / 14

2.1.3 功能区 / 15

2.1.4 案例：制作第 一张原型图 / 16

2.2 基本元件 / 18

2.2.1 矩形类 / 18

2.2.2 占位符 / 21

2.2.3 水平线和垂直线 / 21

2.2.4 图片 / 22

2.2.5 热区 / 23

2.2.6 案例：修改按钮的交互样式 / 24

2.3 文本框与多行文本框 / 25

2.3.1 文本框的属性设置 / 26

2.3.2 文本框样式 / 26

2.3.3 设计原则：表单设计那些事儿 / 26

2.4 选择类表单元件 / 28

2.4.1 下拉列表框 / 28

2.4.2 列表框 / 29

2.4.3 复选框 / 29

2.4.4 单选按钮 / 29

2.4.5 提交按钮 / 30

2.4.6 设计原则：选择合适的表单元件 / 30

2.4.7 选择类表单元件在 App上的“变体”/ 32

2.5 表格与菜单 / 33

2.5.1 表格 / 33

2.5.2 树状菜单 / 33

2.5.3 水平菜单和垂直菜单 / 34

2.6 动态面板 / 35

2.6.1 动态面板的创建 / 35

2.6.2 动态面板的状态 / 35

2.6.3 动态面板的属性 / 36

2.6.4 动态面板样式 / 36

2.6.5 案例：移动端“开关”元件 / 37

2.6.6 案例：轮播图基础 / 37

2.6.7 案例：悬浮网页头部 / 39

2.6.8 案例：标签页 / 43

2.7 内联框架 / 44

2.7.1 内联框架嵌入内容 / 44

2.7.2 内联框架属性 / 45

2.7.3 案例：在内联框架中实现菜单跳转 / 46

2.8 中继器 / 47

2.8.1 中继器的“项”/ 47

2.8.2 中继器的数据集 / 47

2.8.3 中继器显示数据 / 47

2.8.4 中继器样式 / 48

2.8.5 案例：用户管理列表 / 48

2.8.6 案例：商品订单列表 / 49

2.9 巧用母版 / 52

2.9.1 创建母版 / 52

2.9.2 母版实例 / 52

2.9.3 母版的拖放行为 / 53

2.9.4 应用母版 / 54

2.9.5 移除母版 / 54

2.10 界面原型的尺寸 / 55

2.10.1 Web 原型尺寸/ 55

2.10.2 App 原型尺寸/ 56

第 3章 原型的分享与合作/ 57

3.1 页面快照标记元件 / 58

3.1.1 添加引用页面 / 58

3.1.2 设置快照范围 / 58

3.1.3 案例：制作低保真线框图 / 58

3.2 其他标记元件 / 59

3.3 流程图 / 59

3.3.1 绘制流程图 / 59

3.3.2 生成页面流程图 / 60

3.4 交互说明书 / 60

3.4.1 页面说明 / 60

3.4.2 元件说明 / 61

3.4.3 生成 Word说明书/ 61

3.4.4 生成 CSV报告/ 62

3.5 AxShare/ 62

3.5.1 分享原型 / 62

3.5.2 管理原型 / 64

3.5.3 创建和管理团队项目 / 65

3.6 生成 HTML文件/ 68

3.6.1 选择生成的页面 / 69

3.6.2 选择页面说明字段 / 69

3.6.3 选择元件说明字段 / 70

3.6.4 设置交互效果相关内容 / 70

3.6.5 设置 HTML页面工具栏的标志/ 70

3.6.6 设置 Web字体/ 71

3.6.7 设置字体映射 / 72

3.6.8 在移动设备中预览 App原型/ 72

3.6.9 高级设置 / 73

3.6.10 设置是否开放讨论 / 74

第 4章 使用Axure制作高保真原型/ 75

4.1 高级交互 / 76

4.1.1 事件 / 76

4.1.2 用例 / 76

4.1.3 动作 / 76

4.1.4 条件用例 / 77

4.1.5 变量 / 78

4.1.6 函数 / 80

4.1.7 案例：登录表单验证 / 83

4.1.8 案例：跨页面传递用户登录信息 / 86

4.1.9 案例：生成四位验证码 / 88

4.1.10 设计原则：用户登录 /注册功能/ 91

4.2 动态面板进阶 / 93

4.2.1 案例：滑动解锁 / 93

4.2.2 案例：App 中带指示器的轮播图/ 95

4.2.3 案例：倒计时获取动态验证码 / 97

4.3 中继器进阶 / 100

4.3.1 排序 / 101

4.3.2 筛选 / 102

4.3.3 分页 / 104

4.3.4 编辑中继器数据集 / 105

4.3.5 案例：跨页面添加列表数据 / 109

4.3.6 案例：高亮显示列表中的数据 / 113

4.4 母版自定义事件 / 114

4.4.1 什么是母版自定义事件 / 114

4.4.2 创建并使用母版自定义事件 / 114

4.4.3 图解自定义事件 / 116

第 5章 自定义元件库/ 117

5.1 认识自定义元件库 / 118

5.1.1 使用场景 / 118

5.1.2 自定义元件库与母版的区别 / 118

5.2 创建并使用自定义元件库 / 118

5.2.1 创建自定义元件库 / 118

5.2.2 载入自定义元件库 / 118

5.2.3 卸载自定义元件库 / 118

第 6章 自适应视图/ 119

6.1 认识自适应视图 / 120

6.2 使用自适应视图 / 120

第 7章 案例：自定义UI元素/ 121

7.1 自定义文本框样式 / 122

7.2 自定义下拉列表样式 / 124

7.3 自定义单选按钮样式 / 126

第 8章 综合案例：电商类产品/129

8.1 淘宝 App首页/ 130

8.1.1 底部标签栏 / 130

8.1.2 顶部导航栏 / 133

8.2 商品列表页 / 134

8.2.1 商品列表 / 134

8.2.2 局部滚动的侧滑筛选菜单 / 136

8.2.3 切换标签页 / 138

8.3 商品详情页 / 141

8.3.1 窗口滚动时逐渐显示头部 / 141

8.3.2 标签锚点定位 / 143

8.3.3 收藏 / 147

8.4 购物车 / 149

8.5 完善原型 / 151

8.6 制作手机外壳 / 151

8.7 思考：电商购物车的设计 / 153

8.7.1 购物车的功能设计 / 153

8.7.2 购物车的设计细节 / 154

第 9章 综合案例：音乐类产品/ 155

9.1 音乐馆页面：抽屉菜单 / 156

9.2 歌单页 / 158

9.3 通用头部导航栏 / 161

第 10章 综合案例：后台管理系统/ 163

10.1 页面框架 / 164

10.1.1 头像快捷入口 / 164

10.1.2 手风琴导航菜单 1/ 165

10.1.3 手风琴导航菜单 2/ 168

10.2 数据查询与编辑页面 / 169

10.2.1 联动下拉菜单 / 169

10.2.2 进度条 / 171

第 11章 产品设计工作中的体会/ 173

11.1 设计原型前，先画流程图 / 174

11.1.1 如何画好流程图 / 174

11.1.2 泳道图 / 175

11.1.3 Axure RP 流程图与原型图的配合/ 175

11.2 原型图中的注意事项 / 176

11.2.1 低保真原型也要“美观”/ 176

11.2.2 模拟真实数据 / 177

11.3 团队项目协作注意事项 / 177

11.3.1 规范命名规则 / 177

11.3.2 谨慎创建全局变量 / 177

11.3.3 及时签入已完成的更新 / 178

11.3.4 及时获取全部更新 / 178

11.3.5 不要同时签出过多页面 / 178

11.4 撰写 PRD文档/ 178

11.4.1 PRD 文档的内容/ 178

11.4.2 传统 PRD文档存在的弊病/ 179

11.4.3 利用 Axure撰写PRD文档/ 179