Axure RP8网站与App原型设计

**篇　基础篇

第1章　Axure原型设计概述　1

1.1　原型设计与工具　1

1.1.1　什么是原型设计　1

1.1.2　目前常用的原型设计工具　2

1.1.3　AxureRP的设计目的　2

1.1.4　AxureRP的设计优势　3

1.1.5　AxureRP8的特色　3

1.2　准备AxureRP　6

1.2.1　AxureRP的安装　6

1.2.2　AxureRP的汉化　7

1.2.3　AxureRP的注册　8

1.3　AxureRP的主界面　8

1.3.1　Axure的文件格式　9

1.3.2　团队项目　9

1.3.3　工作环境　9

1.3.4　自定义工作区　10

1.3.5　页面（站点地图）　11

1.3.6　元件概述　11

1.3.7　交互基础　11

1.3.8　母版　11

1.4　案例：一个App登录页的低保真原型制作　11

第2章　使用Axure页面（站点地图）　14

2.1　认识站点地图　14

2.1.1　什么是站点地图　14

2.1.2　站点地图的功能条　15

2.1.3　站点地图的页面管理　15

2.2　案例：“百度”UI的站点地图　16

2.2.1　“百度”产品的页面规划　16

2.2.2　增加页面　16

2.2.3　移动页面　18

2.2.4　删除页面　18

2.2.5　生成流程图　19

第3章　使用Axure中的线框图　21

3.1　线框图组件的种类及使用　21

3.2　图片组件　22

3.3　一级标题和二级标题组件　23

3.4　文本标签和文本段落组件　24

3.5　矩形和占位符组件　24

3.6　自定义形状组件　26

3.7　水平线和垂直线组件　28

3.8　图像热区组件　28

3.9　动态面板组件　30

3.9.1　tab式页签的切换效果　31

3.9.2　利用动态面板制作导航下拉菜单效果　35

3.10　内联框架组件　37

3.11　中继器组件　40

3.12　文本框组件　45

3.13　下拉列表框和列表选择框组件　47

3.14　复选框、单选按钮和HTML按钮组件　48

3.15　树、表格、菜单组件　49

第4章　使用Axure中的流程图　51

4.1　流程图组件的种类及使用　51

4.2　创建流程图　52

4.2.1　流程图形状　52

4.2.2　连接模式　52

4.2.3　标记页面为流程图　52

4.2.4　连接线　53

4.2.5　添加参照页　54

4.2.6　生成流程图　54

第5章　自定义AxureRP8中的元件　56

5.1　如何载入元件库　56

5.2　制作自己的元件库　57

5.2.1　添加注释和交互　57

5.2.2　组织元件库到文件夹　58

5.2.3　使用自定义样式　58

5.2.4　编辑自定义元件属性　58

第6章　使用Axure母版　60

6.1　关于母版区域　60

6.1.1　什么是母版区域　60

6.1.2　母版的基本功能　61

6.1.3　母版的使用　63

6.2　案例：“12306火车购票网站”母版原型设计　67

6.2.1　建立站点地图　68

6.2.2　建立母版页面　68

第7章　应用Axure中的交互　75

7.1　触发事件　75

7.2　交互条件　77

7.2.1　新建、删除条件和条件之间关系　77

7.2.2　条件设置　78

7.2.3　交互条件应用　78

7.3　交互行为　82

7.3.1　链接：切换用户UI　83

7.3.2　元件：元件效果介绍　97

7.3.3　动态面板深入使用　115

7.3.4　中继器：动态操作数据　120

7.4　案例：“百度”登录的交互设计　146

7.4.1　分析百度登录界面　147

7.4.2　制作百度登录原型　147

7.4.3　用户名输入框聚焦后用户名图标和输入框的边框变成蓝色　153

7.4.4　密码输入框聚焦后密码图标和输入框的边框变成蓝色　156

7.4.5　登录时进行表单验证　158

7.4.6　登录成功时跳转，并把用户名带过去　162

第8章　Axure中的高级交互　166

8.1　变量　166

8.1.1　全局变量和局部变量　166

8.1.2　内置变量　172

8.1.3　变量值在页面间传递　175

8.1.4　变量的使用场景　179

8.2　案例：加减乘除运算　179

8.3　函数　185

8.3.1　元件函数和页面函数　185

8.3.2　窗口函数和鼠标函数　190

8.3.3　数字函数和字符串函数　196

8.3.4　数学函数和日期函数　197

第9章　使用Axure时的团队合作技巧　199

9.1　项目如何共享协作　199

9.2　创建共享项目　199

9.3　获取共享项目　201

9.4　编辑共享项目　202

9.5　团队项目环境和本地副本　202

第二篇　实战篇

第10章　原型设计：“图书管理系统”　205

10.1　需求描述　205

10.2　设计思路　206

10.3　准备工作　206

10.4　实现用户界面功能　206

10.4.1　建立站点地图栏目结构　206

10.4.2　登录界面设计　207

10.4.3　制作导航菜单母版　209

10.4.4　首页模块设计　216

10.4.5　用户管理模块设计　218

10.4.6　借书管理模块设计　223

10.4.7　图书管理模块设计　226

10.4.8　统计分析模块设计　228

10.5　关键技术讲解　231

第11章　App设计：12“微信”　232

11.1　需求描述　232

11.2　设计思路　232

11.3　准备工作　233

11.4　原型制作　233

11.4.1　微信登录功能　233

11.4.2　软件进入动画效果　237

11.4.3　导航菜单切换效果　240

11.4.4　给好友发送聊天内容　247

11.4.5　上下拖曳微信页面内容　253

11.4.6　显示、隐藏下拉菜单　255

11.5　关键技术讲解　257

第12章　邮箱设计：“QQ邮箱”　259

12.1　需求描述　259

12.2　设计思路　260

12.3　实现原型制作　260

12.3.1　首页页面布局　260

12.3.2　首页顶部信息设计　261

12.3.3　导航菜单设计　268

12.3.4　未读邮件提示区域　271

12.3.5　写信插入地图区域　273

12.3.6　邮箱推荐区域　274

12.3.7　消息区域　275

12.3.8　邮箱版本及版权区域　279

12.4　关键技术讲解　280