Axure RP8网站与App原型设计经典实例教程

原型设计已经是互联网行业产品设计过程中不可缺少的环节，也是检验互联网产品经理能力的标配指 标。本书以Windows系统下流行的快速原型设计工具Axure RP为基础，以丰富的案例展示了Axure强大的原型设计能力。 

本书首先介绍为什么要进行原型设计？它到底能给我们带来什么样的好处？然后了解工作环境的构成；从第3章开始进入原型设计操作阶段，从简单的元件命名开始，到一些高级技巧的应用，提炼了原型设计过程中的常用操作；第4章介绍预览操作，随时查看你的设计效果；第5章变量与函数的内容是学习第6章“事件处理”的基础，“事件处理”是Axure原型设计中的精髓，同时配合第7章的动画效果，让你的原型更加生动；动态面板在Axure中无处不在，第8章单独介绍它的使用方法；第9章的中继器是一个有趣且有用的元件，通过编辑数据和布局样式，可以实现丰富的列表展示样式；元件库为提高生产效率而存在，因此在第10章会详细介绍如何设计自己的元件库；在后两章里，我们以实际案例为基础，针对不同的场景，全面介绍如何使用 Axure工具，涵盖Axure的大部分知识点，其中第12章更是将多场景完整衔接，通过练习你将学会如何在实际项目中综合应用软件。

本书附赠资源包括书中所有案例的素材文件、效果文件以及案例的操作演示视频，读者可结合视频进行学习，提高学习效率。本书主要适合互联网和移动互联网产品经理、需求分析师、UI/UE设计师以及交互设计师等学习和使用。如果你有志于从事产品经理行业，希望本书能对提升你的产品原型设计能力有所帮助。

朱传明，先后就职于亚信联创和北京思特奇科技，目前任职思特奇公司电子商务和互联网支撑产品线电子渠道部门产品经理角色，关注移动互联网、交互设计和用户体验方面的内容，多年的开发和需求分析经验，熟悉Axure原型设计工具，在公司产品线内部做了系列Axure原型培训教程，有着扎实的理论知识和丰富的实践经验。

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

1．1 Axure RP 介绍/018 

1．1．1 当前版本/018 

1．1．2 主要功能/018 

1．1．3 其他原型设计工具/019 

1．2 原型设计的概念/020 

1．3 原型设计的重要性/022 

1．4 我如何才能开始/022 

1．5 组件化的设计思路/023 

1．6 学习路径/023 

1．7 小结/024 

02 Axure工作空间的介绍/025 

2．1 概述/026 

2．2 工具栏/026 

2．2．1 选择、连接和画笔/026 

2．2．2 排列顺序/027 

2．2．3 编组与打散/028 

2．2．4 对齐与分布/028 

2．2．5 锁定与解锁/029 

2．2．6 样式工具栏/029 

2．3 左侧面板/030 

2．3．1 站点地图/030 

2．3．2 元件库/030 

2．3．3 母版库/031 

2．4 右侧面板/032 

2．4．1 属性和样式/032 

2．4．2 页面元素大纲/032 

2．5 设计区域/033 

2．5．1 右键菜单/033 

2．5．2 用例编辑/034 

2．5．3 变量与函数编辑/036 

2．6 小结/036 

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

3．1 关于元件命名/038 

3．2 怎样让内容屏幕居中/039 

3．3 背景适应宽度/039 

3．4 交互样式设置/040 

3．5 矩形的基本样式设置/040 

3．5．1 选择形状/040 

3．5．2 背景颜色/041 

3．5．3 文字颜色/041 

3．5．4 边框大小、颜色和线段类型/041 

3．5．5 圆角/042 

3．5．6 边距/042 

3．5．7 阴影/042 

3．6 吸管工具的使用/042 

3．7 自定义元件的设置/044 

3．8 动态面板的特性/045 

3．8．1 容器性/045 

3．8．2 多状态性/046 

3．8．3 整体性/046 

3．8．4 固定到浏览器/046 

3．9 如何设置选项组/046 

3．10 选中属性的应用/048 

3．11 母版的使用/049 

3．12 响应式页面设计/049 

3．13 图片Scale-9属性的应用/052 

3．14 如何显示草图效果/054 

3．15 发布到移动终端/054 

3．16 小结/056 

04 预览与发布/057 

4．1 关于预览/058 

4．2 关于发布/058 

4．2．1 导出HTML文件/059 

4．2．2 发布到AxShare/059 

4．3 查看原型/060 

4．3．1 安装chrome插件/060 

4．3．2 从home．html开始/061 

4．4 综合实例：Hello Axure！/061 

4．5 小结/066 

05 变量与函数的设置 067 

5．1 概述/068 

5．2 变量和函数的常用类型/068 

5．3 插入变量或函数/069 

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

5．4 全局变量的添加与使用/070 

5．4．1 添加方法/070 

5．4．2 如何使用/070 

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

5．5 局部变量的添加与使用/073 

5．5．1 添加方法/073 

5．5．2 如何使用/074 

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

5．6 综合实例：手机拨号盘/076 

5．7 小结/080 

06 事件处理/081 

6．1 概述/082 

6．2 普通元件/082 

实例：普通事件/083 

6．3 动态面板/085 

实例：动态面板事件/085 

6．4 文本/088 

实例：文本事件/088 

6．5 页面/092 

实例：页面事件/092 

6．6 事件分支/097 

6．6．1 事件分支的产生/097 

6．6．2 事件分支的命名/09 7 

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

6．7 事件动作介绍/100 

6．7．1 链接动作/100 

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

6．7．2 元件动作/104 

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

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

实例：文本设置/109 

实例：设置图片按钮/111 

实例：性别选择/114 

实例：用户注册/116 

实例：滑动验证码/117 

实例：幸运大转盘/120 

实例：动态进度条/122 

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

6．7．3 全局变量动作/125 

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

6．7．4 中继器动作/127 

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

6．7．5 其他动作/137 

实例：设置等待时间/138 

6．8 小结/140 

07 动画效果的设置/141 

7．1 动画效果的应用范围/142 

7．2 显示/隐藏元件/142 

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

7．3 设置动态面板状态/145 

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

7．4 移动元件/147 

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

7．5 旋转元件/148 

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

7．6 设置尺寸/152 

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

7．7 小结/154 

08 动态面板的设置/155 

8．1 概述/156 

8．2 动态面板的属性/156 

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

实例：固定到浏览器/158 

8．3 动态面板事件/160 

8．3．1 载入事件/160 

8．3．2 拖动开始时/160 

8．3．3 拖动进行时/161 

8．3．4 拖动结束时/161 

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

8．4 综合实例：“人人都是产品经理”之 

8．5 小结/172 

09 中继器的操作/173 

9．1 概述/174 

9．2 中继器的基本操作方法/174 

9．2．1 添加排序/174 

9．2．2 移除排序/175 

9．2．3 添加筛选/175 

9．2．4 移除筛选/175 

9．2．5 设置当前显示页面/176 

9．2．6 设置每页显示数量/176 

9．2．7 添加行/176 

9．2．8 标记行、取消标记/176 

9．2．9 更新行/177 

9．2．10 删除行/177 

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

9．3 综合实例：用户列表的数据操作 /179 

9．4 小结/188 

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

10．1 概述/190 

10．2 元件库设计的作用和意义/191 

10．2．1 提高原型设计效率/191 

10．2．2 保持原型设计的一致性/191 

10．3 综合实例：Android元件库的设计/192 

10．4 小结/196 

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

11． 1 综合实例：“淘宝网”首页自动幻灯片/198 

11．2 综合实例：“网易云音乐”分享弹出 

11． 3 综合实例：“美团网”导航菜单的制作/205 

11．4 综合实例：“人人都是产品经理”网站 

11．5 综合实例：“新浪微博”下拉刷新/216 

11．6 综合实例：“雷锋网”浮动菜单栏/223 

11．7 综合实例：“京东网”手机品牌的选择/228 

11．8 综合实例：“UC浏览器”文件下载 

11．9 综合实例：“淘宝网”商品搜索结果/241 

11．10 综合实例：“创业邦”登录和注册 

11．11 小结/258 

12 微信Android客户端原型设计/259 

12．1 概述/260 

12．2 准备工作/261 

12．2．1 截图功能的应用/261 

12．2．2 吸管工具的应用/262 

12．2．3 客户端截图准备/262 

12．3 设计公共元件库 /263 

12．3．1 新建元件库/263 

12．3．2 设计元件库内容/264 

实例：制作绿色按钮/264 

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

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

实例：制作输入框/267 

实例：制作标题栏/270 

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

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

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

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

实例：设置“开关”选项/281 

实例：设置“扫一扫”功能/283 

12．3．3 加载元件库/287 

12．4 综合实例：微信登录和首页设计/288 

12．4．1 设置启动界面/288 

12．4．2 设置登录界面/289 

12．4．3 首页布局/292 

12．4．4 制作主导航/293 

12．4．5 设置“搜索”功能/295 

12．4．6 设置微信菜单/296 

12．4．7 设置“添加朋友”功能/298 

12．4．8 “扫一扫”功能的应用/299 

12．4．9 设置消息列表/301 

1 2 ．4．10 设置“好友聊天”功能/305 

12．4．11 预览/310 

12．5 小结/312 

附录：函数与属性/313 

元件属性/313 

窗口属性/313 

光标属性/314 

数字函数/314 

数学函数/314 

字符串函数和属性/314 

日期函数/315