AXURE RP8网站与APP原型设计经典实例教程(超值版)

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