原型设计是互联网行业产品设计过程中不可缺少的环节，也是检验互联网产品经理能力的重要指标。本书通过丰富的实例展示了Windows系统下流行的快速原型设计工具Axure强大的原型设计能力。 本书分为12章。第1章讲解原型设计的基本知识。第2章介绍Axure的工作空间。第3章介绍原型设计的操作技巧。第4章讲解如何随时查看设计效果。第5章介绍的变量与函数是第6章事件处理的基础。第6章讲解的事件处理知识是Axure原型设计的精髓，配合第7章讲解的动画效果，可令原型更加生动。第8章介绍动态面板的使用方法。第9章介绍的中继器是一个有趣且有用的元件。第10章详细介绍如何设计自己的元件库。*后两章以实际案例为基础，针对不同的场景，全面介绍如何使用 Axure工具，涵盖了 Axure的大部分知识点，其中，第12章更是将多场景完整衔接，读者可以通过练习学会如何在实际项目中综合应用软件。 本书附赠教学资源，包括书中实例的源文件与操作演示视频，读者可结合视频进行学习，提高学习效率。 本书适合互联网和移动互联网产品经理，以及需求分析师、UI/UE设计师、交互设计师学习和使用，对于有志于从事互联网产品运营工作的读者来说，本书对提升其产品原型设计能力也将有所帮助。

这是一本轻松教你掌握Axure原型设计技术的教程。 更是一本将产品经理设计思路融入其中的方法论。 它用经典的案例教给你现实工作中必须要掌握的模型。 将案例据为己有，因为模仿是快的学习方式和超越旁人的前奏。 同时本书本身是一个产品，而你将会是这阅读体验的受益者，因为它带给你的将不止是简单的思考。

朱传明，曾就职于亚信联创科技（中国）有限公司，现担任北京思特奇信息技术股份有限公司电子商务和互联网支撑产品线电子渠道部门产品经理。人人都是产品经理专栏作家、起点学院导师。 关注移动互联网、交互设计和用户体验方面的内容，多年的开发和需求分析经验，熟悉Axure原型设计工具，在公司内部做了系列Axure原型培训教程，有着扎实的理论知识和丰富的实践经验。

Axure RP8 网站与App原型设计经典实例教程（超值版 ）





01 原型设计的基本知识/011

1.1 Axure RP 介绍/012

1.1.1 当前版本/012

1.1.2 主要功能/012

1.1.3 其他原型设计工具/013

1.2 原型设计的概念/014

1.3 原型设计的重要性/016

1.4 我该如何着手学习/016

1.5 组件化的设计思路/017

1.6 学习路径/017

1.7 小结/018



02 Axure工作空间介绍/019

2.1 概述/020

2.2 工具栏/020

2.2.1 选择、连接和画笔/020

2.2.2 排列顺序/021

2.2.3 编组与打散/022

2.2.4 对齐与分布/022

2.2.5 锁定与解锁/023

2.2.6 样式工具栏/023

2.3 左侧面板/024

2.3.1 站点地图/024

2.3.2 元件库/024

2.3.3 母版库/025

2.4 右侧面板/026

2.4.1 属性和样式/026

2.4.2 页面元素大纲/026

2.5 设计区域/027

2.5.1 右键菜单/027

2.5.2 用例编辑/028

2.5.3 变量与函数编辑/030

2.6 小结/030



03 Axure原型设计的操作技巧与解析/031

3.1 关于元件命名/032

3.2 怎样让内容屏幕居中/033

3.3 背景适应宽度/033

3.4 交互样式设置/034

3.5 矩形的基本样式设置/034

3.5.1 选择形状/034

3.5.2 背景颜色/035

3.5.3 文字颜色/035

3.5.4 边框大小、颜色和线段类型/035

3.5.5 圆角/036

3.5.6 边距/036

3.5.7 阴影/036

3.6 吸管工具的使用/036

3.7 自定义元件的设置/038

3.8 动态面板的特性/039

3.8.1 容器性/039

3.8.2 多状态性/040

3.8.3 整体性/040

3.8.4 固定到浏览器/040

3.9 如何设置选项组/040

3.10 选中属性的应用/042

3.11 母版的使用/043

3.12 响应式页面设计/043

3.13 图片Scale-9属性的应用/046

3.14 如何显示草图效果/048

3.15 发布到移动终端/048

3.16 小结/050



04 预览与发布/051

4.1 关于预览/052

4.2 关于发布/052

4.2.1 导出HTML文件/053

4.2.2 发布到AxShare/053

4.3 查看原型/054

4.3.1 安装Chrome插件/054

4.3.2 从home.html开始/055

4.4 综合实例：Hello Axure！/055

4.5 小结/060



05 变量与函数的设置/061

5.1 概述/062

5.2 变量和函数的常用类型/062

5.3 插入变量或函数/063

实例：转换输入内容为大写/063

5.4 全局变量的添加与使用/064

5.4.1 添加方法/064

5.4.2 如何使用/064

实例：通过变量给按钮标签赋值/066

5.5 局部变量的添加与使用/067

5.5.1 添加方法/067

5.5.2 如何使用/068

实例：给按钮设置标签/069

5.6 综合实例：手机拨号盘/070

5.7 小结/074



06 事件处理/075

6.1 概述/076

6.2 普通元件/076

实例：普通事件/077

6.3 动态面板/079

实例：动态面板事件/079

6.4 文本/082

实例：文本事件/082

6.5 页面/086

实例：页面事件/086

6.6 事件分支/091

6.6.1 事件分支的产生/091

6.6.2 事件分支的命名/091

实例：事件分支与事件命名/092

6.7 事件动作介绍/094

6.7.1 链接动作/094

实例：不同的链接打开方式/095

6.7.2 元件动作/098

实例：显示/隐藏弹出窗口/098

实例：自动水平幻灯片/101

实例：文本设置/103

实例：设置图片按钮/105

实例：性别选择/108

实例：用户注册/110

实例：滑动验证码/111

实例：幸运大转盘/114

实例：动态进度条/116

实例：图片透明度调整/117

6.7.3 全局变量动作/119

实例：转换输入内容为大写/119

6.7.4 中继器动作/121

实例：dribbble网站的作品显示与过滤/124

6.7.5 其他动作/131

实例：设置等待时间/132

6.8 小结/134



07 动画效果的设置/135

7.1 动画效果的应用范围/136

7.2 显示/隐藏元件/136

实例：显示/隐藏按钮气泡提示信息/137

7.3 设置动态面板状态/139

实例：自动垂直幻灯片/139

7.4 移动元件/141

实例：显示/隐藏动态浮动气泡/141

7.5 旋转元件/142

实例：制作旋转的风车/143

7.6 设置尺寸/146

实例：设置图片缩放效果/146

7.7 小结/148



08 动态面板的设置/149

8.1 概述/150

8.2 动态面板的属性/150

实例：自动调整为内容尺寸/150

实例：固定到浏览器/152

8.3 动态面板事件/154

8.3.1 载入事件/154

8.3.2 拖动开始时/154

8.3.3 拖动进行时/155

8.3.4 拖动结束时/155

实例：移动滑块，实时显示当前滑块位置/155

8.4 综合实例：人人都是产品经理之动态面板的应用/159

8.5 小结/166



09 中继器的操作/167

9.1 概述/168

9.2 中继器的基本操作方法/168

9.2.1 添加排序/168

9.2.2 移除排序/169

9.2.3 添加筛选/169

9.2.4 移除筛选/169

9.2.5 设置当前显示页面/170

9.2.6 设置每页显示项目数量/170

9.2.7 添加行/170

9.2.8 标记行、取消标记/170

9.2.9 更新行/171

9.2.10 删除行/171

实例：中继器样式设置/171

9.3 综合实例：用户列表的数据操作/173

9.4 小结/182



10 元件库的设计与应用/183

10.1 概述/184

10.2 元件库设计的作用和意义/185

10.2.1 提高原型设计效率/185

10.2.2 保持原型设计的一致性/185

10.3 综合实例：Android元件库的

设计/186

10.4 小结/190



11 综合实例的操作与应用/191

11.1 综合实例：淘宝网首页自动

幻灯片/192

11.2 综合实例：网易云音乐分享

弹出窗口/195

11.3 综合实例：美团网导航

菜单/199

11.4 综合实例：人人都是产品经理网站导航菜单/205

11.5 综合实例：新浪微博下拉

刷新/210

11.6 综合实例：雷锋网浮动

菜单栏/217

11.7 综合实例：京东网手机品牌的选择/222

11.8 综合实例：UC浏览器文件

下载处理/225

11.9 综合实例：淘宝网商品搜索

结果/235

11.10 综合实例：创业邦登录和

注册界面/243

11.11 小结/252



12 微信Android客户端原型

设计/253

12.1 概述/254

12.2 准备工作/255

12.2.1 截图功能的应用/255

12.2.2 吸管工具的应用/256

12.2.3 客户端截图准备/256

12.3 设计公共元件库/257

12.3.1 新建元件库/257

12.3.2 设计元件库内容/258

实例：制作绿色按钮/258

实例：制作浅灰色按钮/259

实例：制作返回箭头图标/260

实例：制作输入框/261

实例：制作标题栏/264

实例：制作白色/绿色文字气泡背景/265

实例：制作提示信息弹出框/267

实例：制作输入法键盘/268

实例：制作照片选择列表/272

实例：设置开关选项/275

实例：设置扫一扫功能/277

12.3.3 加载元件库/281

12.4 综合实例：微信登录和首页设计/282

12.4.1 设置启动界面/282

12.4.2 设置登录界面/283

12.4.3 首页布局/286

12.4.4 制作主导航/287

12.4.5 设置搜索功能/289

12.4.6 设置微信菜单/290

12.4.7 设置添加朋友功能/292

12.4.8 扫一扫功能的应用/293

12.4.9 设置消息列表/295

12.4.10 设置好友聊天功能/299

12.4.11 预览/304

12.5 小结/306

附录：函数与属性/307

元件属性/307

窗口属性/307

光标属性/308

数字函数/308

数学函数/308

字符串函数和属性/308

日期函数/309