新书《Axure RP 8 实战手册 – 网站和APP原型制作案例精粹》已在当当和京东隆重上市！
这本书真的是我自己都十分期盼的一本书。
继上一本书之后，我重新构思，以实战案例的角度出发，完成了这本书。
全书实战案例110个，超过当前市面上所有Axure RP 8图书案例的总和。
这样的内容量和品质，我自己是满意的！
这本书以全新的操作流的方式展现各个案例的实现过程。
不管是视觉效果，还是内容的条理都更加清晰直观。
案例也是由浅至深的走向，每一个案例都包含特定知识点。
每向后学习一个案例，都会接触新的知识点。
购买地址：
~~~~~~~~~~~~
~~~~~~~~~~~~
小楼老师再出新作，倾力打造Axure RP 8精品课程系列，以最短的时间高效完成学习目标，入门进阶与实战案例并重，是0基础的新手从入门到精通的必备课程。
《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------
《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------
转载请注明： &
or分享 (0)关于本书的内容有任何问题，请联系
1. 提供图书管理系统、微信、QQ邮箱三大综合案例，和数十个小案例。
2.循序渐进逐步提高，适合初、中级读者逐步掌握如何使用Axure RP8进行项目原形设计，快速制作高保真原形。
3. 在介绍使用Axure RP8设计产品原形的同时，也简述产品原形中的一些技术性知识，为读者理解和实践Axure RP8制作原形提供帮助。
4. 本书采用了大量的实例，介绍了Axure RP8的功能、元件的操作方法、使用技巧以及如何快速制作原形。
5. 重点介绍了如何创建团队项目、局部变量和全局变量以及函数等。
6. 所有实例都极具有代表性和可操作性，并着重介绍了如何使用Axure RP8制作各种交互效果的原形。
7. 有针对性地对疑难点及重点，加以案例。并把抽象的知识点，以通俗易懂的语言进行介绍。有利于帮助读者理解学习。
8. 对于操作过程中，需要注意的事项及关键要点予以特别提示。
（8.5 折）
本书共分为两篇，结合了大量例子循序渐进地介绍了Axure RP8特色、元件详细介绍、项目实例等操作。
第一篇介绍了Axure RP8的基本操作以及如何使用团队项目。包括如何安装Axure RP8；并通过例子介绍了如何制作低保真原形和一些基本的交互效果，以及Axure RP8新增功能及特色等操作。
第二篇通过项目实例介绍了图书管理系统、手机APP微信原形设计、QQ邮箱原形设计等原形。
第一篇　基础篇
第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
王兆丰，河北农业大学艺术学院教师，擅长产品设计和交互设计，目前致力于研究移动产品的用户界面设计 包括界面布局、操作流程、制 作产品交互原型。喜欢产品的简洁之美，认为产品只有设计好了才有灵魂。为数十家网站提供产品原型设计内部培训服务。
王雅宁，华北电力大学（保定）教师，热爱设计，更热爱交互设计，熟悉社交类互联网产品，对交互设计敏感。因为专业原因，一直与社会 上的各种互联网产品打交道，熟悉各种产品的设计流程，也模拟过一些高交互型产品的产品原型、流程图、线框图等等。多为线下产品原型 设计结构提供培训服务 。
本书由浅入深、系统全面地讲解了Android软件开发的基本方法和常用技能。全书分为11章，首先概述Androi...
本书较为全面地介绍了利用Axure软件进行原型设计的方法和技巧。全书分为3篇，共11章，首篇原型设计及Axur...
《微信小程序开发图解案例教程》分两篇，介绍了微信小程序设计的基本知识和实战案例。第一篇为微信小程序快速入门，包...
本书根据微信小程序的内容，全面系统地介绍了微信小程序的搭建和开发。本书主要内容有小程序注册、编程基础知识、小程...
本书主要内容包括：微信公众号概述、微信公众号开发入门、微信公众号接口入门、微信网页设计样式库、OneThink...Axure RP 8入门手册 网站和App 原型设计从入门到精通_在线翻页电子书免费阅读,发布_云展网
阅读云展网其他3D杂志
喜欢这样的3D电子杂志？您也可以在几分钟内把文档免费上传到云展网变成翻页书！[点击上传我的文档]
Axure RP 8入门手册 网站和App 原型设计从入门到精通
描述：Axure RP 8.0软件，从0 开始操作，从小白到打下扎实基础、有效稳步地提升； 讲解Axure RP 8.0系统全面的知识结构，以及如何使原型开发的思路更加清晰流畅，提高产出效率； 包含实战项目引导，根据产品设计实际工作需求及实现快速完成学习到产出的转化。
关键字: Axure RP8,网站设计,App原型设计
人人都是产品经理
推荐Axure RP8
入门手册网站和 App 原型设计从入门到精通
·小楼一夜听春语◎编著·
searchign...
产品经理和交互设计师的原型设计必修课一本书实现基础入门 + 实战进阶
快速、全面掌握网站和 App 原型开发技能Axure RP8
网站和 App 原型设计从入门到精通
·小楼一夜听春语◎编著·
searchign...内容提要
本书的写作初衷是面向初学者，由浅至深地引导读者学习 Axure RP 8.0 的使用方法，从而实现最终的学习目标。
本书不但适合初学者学习，在知识结构与案例的安排上，也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习，就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者，也能够在本书的大量案例之中，获得各种实战的参考。书中的案例均为网站或 App 中采用的一些典型交互方式，作者通过这些案例引导读者学习如何进行原型的构建、逻辑的整理、思路的分析及交互的实现。序
这本书是我自己最期待的一本书。
这并不是说我的另外一本书《Axure RP 8 实战手册》写得不好，而是从这本书的构思及面向的读者来讲，这本书会让我更有成就感。
《Axure RP 8 实战手册》是以案例为主导的一本书，全书囊括了 Web 与 App 原型设计的 110 个案例，并且按照由浅至深的规则结合清晰的知识结构进行案例的排布。同时，考虑到初学者的上手难度，在书的第一部分安排了 56 项基础操作内容。可以说，《Axure RP 8 实战手册》是目前的 Axure 书籍中，案例较多、实际应用参考性较强的一本书。
但是，以案例为主导的书不能适合所有读者，对于初学者来说课堂比图书馆更适合学习。那么，本书就可以用课堂来形容。从我的《Axure RP 7.0 从入门到精通》一书出版上市之后，我更清楚地看到了读者的需求。我把这些需求及教学中总结出的一些新的思路，再加上一些写作方法上的创新，全部融合到这本书当中。
总的来说，这本书有以下特点与优势。
1. 主线清晰。和一般的工具书不同，本书并不是枯燥地罗列知识点，对各种功能进行文字解释，而是以一条由浅至深的路线，循序渐进地展开讲述。读者在学习过程中，只需按照由前至后的顺序阅读并配合练习，即可轻松掌握各类知识要点，实现学习目标。
2. 层次清晰。学以致用是本书的原则。作者考虑读者的需求，将书中内容与工作需求紧密结合，内容上分为基础与进阶两部分。读者在工作中如果只是需要做静态线框图（低保真原型），在学习完基础部分之后，即可满足工作需求。如果需要为原型添加丰富的交互（高保真原型），则可以通过继续学习进阶部分，来加强原型交互实现的能力。
3. 结构清晰。结合读者的反馈，本书的知识结构分布上做了更清晰的划分，特别是在目录结构上，除了章节目录还单独增加了案例目录，能够让读者更加方便查阅到需要参考的内容。
4. 情景真实。这是保留了《Axure RP 7.0 从入门到精通》一书的优点，通过虚拟人物让读者更加感同身受，口语化的知识问答，更适合读者理解知识内容。本书特别征集了多位真实人物的头像，让读者在阅读过程中体验更加真实，更有亲切感。
5. 案例丰富。作者结合知识内容，融入了大量的实战案例，共计 70 个，虽然没有标明具体出处，但是读者能够从各个知名网站或者 App 中发现与这些案例相似的交互效果。这些案例都紧紧结合知识点的分布，所有案例出现时，都基于当前所讲述的知识点和读者已经学过的知识点，不会有陌生内容的存在，让读者能够轻松完成案例的练习。
6. 资源丰富。本书所有的案例源文件、素材、元件库、汉化包等资料，全部奉献给每一位读者。
3考虑到带有光驱的计算机越来越少，这些资料将通过网络进行传递，读者可以根据书中的提示进行相关资源的下载。
综上所述，每一个特点与优势，都是我期待这本书上市的理由。
我希望看到每一位读者轻松学习的喜悦，而不是难于上手和理解的苦恼。
我想，能够心系读者，从真正有益于读者的角度去撰写一本书，是作为作者的责任与骄傲。内容导读
本书共分为 2 篇。
第 1 篇：基础部分。包含了 1~9 章的内容，共计 17 个案例。读者通过对这一部分内容的学习，就能够掌握软件的使用方法，熟悉原型项目的构建，以及带有简单交互的低保真原型的制作。
第 1 章：讲述软件的安装与汉化，以及一些重要的注意事项。
第 2 章：讲述如何结合思维导图软件创建项目结构。
第 3 章：讲述元件与元件库的基本操作与用途。
第 4 章：讲述原型的查看与各种发布共享方法。
第 5 章：讲述原型尺寸的设定以及对多种设备的适配。
第 6 章：讲述通过概要功能进行页面与元件的管理，以及使用检视功能，对页面与元件进行属性、样式以及说明的设置。
第 7 章：讲述母版功能的使用，通过母版进行原型内容的重用，提高原型制作效率。
第 8 章：讲述标记元件的使用，以及业务流程图的绘制方法。
第 9 章：讲述一些其它软件功能的使用方法。
第 2 篇：进阶部分。包含 10~15 章的内容，共计 53 个案例。读者可以在这一部分学习更加深入的内容，包括复杂的元件、变量以及函数等内容。通过学习这些内容掌握更多的原型制作技巧，不但能够学习高保真原型的制作，也能从中获得各种实战应用的参考。
第 10 章：讲述动态面板的原理与各种特性。
第 11 章：讲述公式的格式与自定义变量的使用。
第 12 章：讲述条件的编辑，运算符的作用，以及条件表达式的书写。
第 13 章：讲述系统变量与函数的使用方法，通过结合系统变量、函数实现各种交互效果的案例，体现函数在提升原型的制作效率、保真度、扩展性方面的优势与特点。
第 14 章：讲述中继器的原理，以及与中继器有关的交互。
第 15 章：讲述中继器相关的系统变量，并结合这些系统变量实现更多的中继器交互效果。
最后提醒读者，如果是初学者，务必按前后顺序学习本书的内容，切勿跳跃学习，以免产生学习障碍。
感谢小楼老师的信任和邀请，让我从编辑的角度谈一谈这本书。
与小楼老师认识并合作，是一种缘分。
其实我们刚开始合作时并不顺利，原因是小楼老师实在太“固执”了。从书稿内容到随书配套资 源，再到排版、封面设计的讨论，凡是小楼老师认为需要坚持的东西，他都不会做任何让步。我们曾 针对案例演示图片应该用何种线条来标注更适合读者理解、演示步骤时用箭头引导还是数字符号标注 表达更清楚等问题，连续在线讨论了两天，确切地说，是争论。如果我们当时是面对面讨论的话，可 能争论到最后双方都是面红耳赤，要拍案而起了。更不论《Axure RP 8 实战手册》这本书的写作原稿 近 800 页，排版时我们因为版式设计的问题，一遍又一遍推倒方案重来。一方面我需要考虑控制图书 页数，保证图书成本、定价不能过高，另一方面小楼老师又要坚持保障读者阅读和学习的质量不被影 响，拒绝采用双栏排版的方式。以致我们争论到最后，一度接近终止合作的边缘……
可又是这种“固执”，让我看到一位作者对图书内容的坚持、对产品品质的追求和对读者的负责。 也是这种“固执”，让我每次出版小楼老师的书后都仿佛被“剥掉一层皮”，却对这样的作者更加钦佩 和珍惜。
小楼老师在每一本书里，都倾注了太多的时间和心血，这一本更不必说。因为看到太多写作背后 的故事，所以，每一次书稿拿在我手里，都并不轻松。这本书在写作时，恰逢 Axure 软件新版本测试 阶段，正式版发布后，软件界面样式进行了一些细微调整。但为了严格保证书内的操作截图与软件界 面完全一致，使读者在学习过程中不会因此产生任何疑惑或遇到任何困难，小楼老师将书内 90% 的 图（与正式版界面有细微差别）换了一遍。他告诉我这个消息时是当天下午 5 点多，已经改了近 20 小 时，只改了全书四分之一。之后很快提交了全部的更新版图片。类似这样的事，在小楼老师的写作过 程中很常见，单是这本书内由于官方更新版本导致界面细节有调整而全书更换图片的经历就有过 3 次。 而在案例的选取、教学设计、源文件制作、图片标注、步骤讲解过程中，更能感受到作为一名作者的“死磕”和用心。
在《Axure RP 7.0 从入门到精通》和《Axure RP 8 实战手册》相继取得成功，一跃成为 Axure 软 件教程类书籍中被业内首推和高度受读者认可的学习资料后，小楼老师本可以直接在现有教程的内容、 结构和教学方式设计的基础上，通过直接添加新版本的内容、更新界面图片，快速地完成《Axure RP 8.0 从入门到精通》的写作。不过，这显然不能达到小楼老师对自己苛刻的要求。事实上，每一部作品 都是他对自己的颠覆。前两本书出版后，我们建立了相应的读者 QQ 群，另外，还有小楼老师的网站（Axure 原创教程网）等，从这些渠道，小楼老师搜集到读者对前两本书的学习反馈和建议，然后根据 这些反馈，将自己的教学方式、知识结构、案例内容等全部重构一遍。这本书对于小楼老师来说，不
5仅只是将操作过程和技巧讲述一遍，他更希望通过这本书，让读者达到在课堂上的学习效果，仿佛老师就在身边一对一地耐心讲解，在讲授技巧的同时，更注意因材施教，分别对不同学习阶段、不同基础的读者人群讲解基础操作、高阶技巧，以及如何将书本里的知识与实际工作直接结合。
所以，这本书，不仅对于读者来说是一部不可错过的 Axure RP 8.0 教程，对于小楼老师来说，更是倾尽自己所有的心思、时间和精力，细细打磨出的一个产品。小楼老师说，这本书是他最为期待的一本教程。对于我，又何尝不是呢？与小楼老师的合作，是一段弥足珍贵的经历，其中点点滴滴透露的，不仅是稿件上的精致图文内容，更多是做产品的态度。本书的读者，多少都是与产品相关的，相信你读完这本书后，收获的远不止于对 Axure 这款软件的精通使用。
第 1 篇 基础第 1 章 准备工作与注意事项 ……………………………………………………… 161.1 下载安装 Axure RP 8.0 …………………………………………………………………………… 17
1.1.1 Windows 系统的安装与汉化 …………………………………………………………… 17
1.1.2 Mac 系统的安装与汉化 ………………………………………………………………… 181.2 原型相关的文件类型 …………………………………………………………………………… 191.3 文件自动备份与找回 …………………………………………………………………………… 191.4 功能区域的视图设置 …………………………………………………………………………… 20第 2 章 创建项目结构 ……………………………………………………………… 212.1 使用 Xmind 进行项目结构梳理 ………………………………………………………………… 222.2 根据思维导图搭建原型页面结构 ……………………………………………………………… 26第 3 章 元件功能概述 ……………………………………………………………… 273.1 鼠标的操作 ……………………………………………………………………………………… 283.2 元件的使用 ……………………………………………………………………………………… 29
3.2.1 使用软件自带元件库 …………………………………………………………………… 29
3.2.2 使用自定义元件库 ……………………………………………………………………… 34第 4 章 查看原型 …………………………………………………………………… 354.1 本机预览 ………………………………………………………………………………………… 364.2 共享发布 ………………………………………………………………………………………… 384.3 在线反馈 ………………………………………………………………………………………… 404.4 Axure Share App…………………………………………………………………………………… 414.5 生成文件 ………………………………………………………………………………………… 444.6 浏览器插件 ……………………………………………………………………………………… 474.7 工具栏介绍 ……………………………………………………………………………………… 49第 5 章 创建自适应视图 …………………………………………………………… 515.1 不同设备的原型尺寸 …………………………………………………………………………… 52
75.2 创建不同设备的视图 …………………………………………………………………………… 53
5.3 移动设备的浏览设置 …………………………………………………………………………… 54
第 6 章 概要与检视功能 …………………………………………………………… 59
6.1 概要功能 ………………………………………………………………………………………… 60
6.2 检视功能——页面样式 ………………………………………………………………………… 62
6.3 检视功能——页面说明 ………………………………………………………………………… 65
6.4 检视功能——页面属性 ………………………………………………………………………… 65
6.5 检视功能——元件命名 ………………………………………………………………………… 66
6.6 检视功能——元件样式 ………………………………………………………………………… 67
6.7 检视功能——元件说明 ………………………………………………………………………… 73
6.7.1 添加元件说明 …………………………………………………………………………… 73
6.7.2 自定义说明字段 ………………………………………………………………………… 74
6.8 检视功能——元件属性 ………………………………………………………………………… 74
6.9 检视功能——元件交互 ………………………………………………………………………… 87
6.10 检视功能——组合属性 ………………………………………………………………………… 91
第 7 章 母版管理 …………………………………………………………………… 95
7.1 母版简介 ………………………………………………………………………………………… 96
7.2 添加 / 编辑 / 删除 ………………………………………………………………………………… 96
7.3 添加母版到页面中 ……………………………………………………………………………… 97
7.4 从页面中移除母版 ……………………………………………………………………………… 97
7.5 拖放行为 ………………………………………………………………………………………… 98
7.6 自定义触发事件 ………………………………………………………………………………… 98
第 8 章 标注与流程 ……………………………………………………………… 103
8.1 页面快照 ………………………………………………………………………………………… 104
8.2 便签与标记 ……………………………………………………………………………………… 105
8.3 连线与箭头 ……………………………………………………………………………………… 108
第 9 章 其他 ……………………………………………………………………… 113
9.1 自定义元件库 …………………………………………………………………………………… 114
9.1.1 创建元件库 ……………………………………………………………………………… 114
9.1.2 制作自定义元件 ………………………………………………………………………… 115
9.1.3 使用元件库 ……………………………………………………………………………… 116
9.2 自定义形状 ……………………………………………………………………………………… 117889.3 钢笔工具 ………………………………………………………………………………………… 1209.4 裁剪与切割图片 ………………………………………………………………………………… 1209.5 网格与辅助线 …………………………………………………………………………………… 1229.6 团队项目 ………………………………………………………………………………………… 1249.7 图标字体 ………………………………………………………………………………………… 1309.8 Web 字体 ………………………………………………………………………………………… 131
9.8.1 @font-face 代码 ………………………………………………………………………… 131
9.8.2 链接到“.CSS”文件 …………………………………………………………………… 134
第 2 篇 进阶第 10 章 动态面板 ………………………………………………………………… 13810.1 动态面板简介 …………………………………………………………………………………… 13910.2 动态面板特性——容器 ………………………………………………………………………… 14110.3 动态面板特性——多状态 ……………………………………………………………………… 15010.4 动态面板特性——循环 ………………………………………………………………………… 15410.5 动态面板特性——拖动 ………………………………………………………………………… 15810.6 动态面板特性——适应宽度 …………………………………………………………………… 16010.7 动态面板特性——相对固定 …………………………………………………………………… 161第 11 章 公式与自定义变量 ……………………………………………………… 16411.1 公式的格式 ……………………………………………………………………………………… 16511.2 自定义变量——局部变量 ……………………………………………………………………… 16611.3 自定义变量——全局变量 ……………………………………………………………………… 174第 12 章 条件与表达式 …………………………………………………………… 18412.1 条件的编辑 ……………………………………………………………………………………… 18512.2 条件的类型 ……………………………………………………………………………………… 19412.3 运算符与表达式 ………………………………………………………………………………… 209
12.3.1 算术运算符 ……………………………………………………………………………… 209
12.3.2 关系运算符 ……………………………………………………………………………… 209
12.3.3 逻辑运算符 ……………………………………………………………………………… 211第 13 章 系统变量与函数 ………………………………………………………… 21613.1 概念简介 ………………………………………………………………………………………… 21713.2 元件 ……………………………………………………………………………………………… 219
9913.3 鼠标指针 ………………………………………………………………………………………… 248
13.4 窗口页面 ………………………………………………………………………………………… 253
13.5 数字 ……………………………………………………………………………………………… 259
13.6 数学 ……………………………………………………………………………………………… 263
13.7 日期 ……………………………………………………………………………………………… 270
13.8 字符串 …………………………………………………………………………………………… 277
第 14 章 中继器 …………………………………………………………………… 287
14.1 中继器的组成 …………………………………………………………………………………… 288
14.2 数据集——添加行 ……………………………………………………………………………… 303
14.3 数据集——更新行 ……………………………………………………………………………… 313
14.4 数据集——删除行 ……………………………………………………………………………… 316
14.5 数据集——标记行与取消标记行 ……………………………………………………………… 323
14.6 项目列表——排序 ……………………………………………………………………………… 340
14.7 项目列表——筛选 ……………………………………………………………………………… 347
14.8 中继器的属性 …………………………………………………………………………………… 358
第 15 章 中继器的系统变量 ……………………………………………………… 367
15.1 系统变量——中继器 …………………………………………………………………………… 368
15.2 系统变量——数据集 …………………………………………………………………………… 383写在最后………………………………………………………………………………… 392 10案例目录案例 01 QQ 注册页面的蓝色渐变背景 ……………………………………………………………… 64案例 02 导航菜单样式 ………………………………………………………………………………… 69案例 03 带删除线的文字效果 ………………………………………………………………………… 72案例 04 文本框中的提示 ……………………………………………………………………………… 75案例 05 圆角蓝色边框的文本输入框 ………………………………………………………………… 77案例 06 动态样式的按钮效果 ………………………………………………………………………… 78案例 07 页面中嵌入优酷视频 ………………………………………………………………………… 81案例 08 页面中嵌入百度地图 ………………………………………………………………………… 82案例 09 性别的唯一选择 ……………………………………………………………………………… 85案例 10 单击按钮等待 3 秒后打开作者的网站地址…………………………………………………… 88案例 11 唯一选项选中效果 …………………………………………………………………………… 89案例 12 触发组合中所有元件的鼠标交互 …………………………………………………………… 92案例 13 母版的自定义触发事件 ……………………………………………………………………… 99案例 14 页面快照的应用 ………………………………………………………………………………105案例 15 页面快照的交互 ………………………………………………………………………………106案例 16 添加连接点 ……………………………………………………………………………………110案例 17 黑桃图标的制作 ………………………………………………………………………………117案例 18 单击登录按钮显示登录面板 …………………………………………………………………142案例 19 水平菜单移入时弹出隐藏效果 ………………………………………………………………146案例 20 垂直菜单单击时展开收起效果 ………………………………………………………………148案例 21 淘宝搜索栏内容切换 …………………………………………………………………………151案例 22 使用循环实现图片轮播 ………………………………………………………………………155案例 23 滑块在一定范围内拖动的效果 ………………………………………………………………158案例 24 横向铺满屏幕的背景条 ………………………………………………………………………160案例 25 导航菜单顶部固定的效果 ……………………………………………………………………162案例 26 使用局部变量计算商品合计 …………………………………………………………………166案例 27 单击加减按钮实现商品数量自增减……………………………………………………………168案例 28 图片轮播中页签的切换（1） …………………………………………………………………171案例 29 密码找回的跨页面传递数据 …………………………………………………………………175
11案例 30 跨页面控制动态面板状态 ……………………………………………………………………180案例 31 通过条件判断限制商品数量 …………………………………………………………………187案例 32 失去焦点时判断账号合法性（1） ……………………………………………………………188案例 33 失去焦点时判断账号合法性（2） ……………………………………………………………190案例 34 手机号码合法性验证 …………………………………………………………………………194案例 35 注册信息的合法性验证 ………………………………………………………………………200案例 36 图片轮播中页签的切换（2） …………………………………………………………………206案例 37 使用条件表达式进行判断 ……………………………………………………………………212案例 38 购物车数量自增减效果 ………………………………………………………………………220案例 39 图片轮播页签改变尺寸与单击页签切换图片 ………………………………………………223案例 40 通过焦点元件实现键盘为多个文本框输入文字 ……………………………………………229案例 41 界面滚动超过一屏高度时显示返回顶部按钮 ………………………………………………231案例 42 界面滚动时改变搜索栏透明度 ………………………………………………………………235案例 43 唱片旋转与进度条效果 ………………………………………………………………………238案例 44 百度云网盘的右键菜单 ………………………………………………………………………249案例 45 页面滚动时浮现的返回顶部按钮 ……………………………………………………………254案例 46 页面滚动时模块顶部吸附效果 ………………………………………………………………257案例 47 屏幕中虚拟 Home 键水平方向自动停靠的交互 ……………………………………………260案例 48 单击按钮获取 4 位随机整数验证码……………………………………………………………264案例 49 拖动旋钮时自转的交互效果 …………………………………………………………………267案例 50 动态数字时钟（1） ……………………………………………………………………………273案例 51 模拟物理时钟 …………………………………………………………………………………275案例 52 动态数字时钟（1） ……………………………………………………………………………280案例 53 输入密码与退格的交互效果 …………………………………………………………………281案例 54 手机端商品列表（上）…………………………………………………………………………290案例 55 手机端商品列表（下）…………………………………………………………………………294案例 56 手机端浏览器添加常用网站（上） ……………………………………………………………304案例 57 手机端浏览器添加常用网站（下）……………………………………………………………313案例 58 手机端浏览器删除常用网站（上）……………………………………………………………316案例 59 手机端浏览器删除常用网站（下）……………………………………………………………319案例 60 手机端购物车中的多项删除 …………………………………………………………………323案例 61 手机端购物车中的单项删除 …………………………………………………………………332案例 62 手机端商品列表的价格排序 …………………………………………………………………341案例 63 手机端商品列表按名称搜索 …………………………………………………………………347案例 64 手机端商品列表按价格区间筛选 ……………………………………………………………349 12案例 65 手机端商品列表多条件筛选 …………………………………………………………………356案例 66 项目列表中单项选中的效果 …………………………………………………………………359案例 67 文件列表的翻页交互 …………………………………………………………………………369案例 68 移动端列表向上滑动时加载更多商品项 ……………………………………………………377案例 69 音乐播放列表的歌曲编号 ……………………………………………………………………384案例 70 移动端浏览器前 3 个图标禁止删除……………………………………………………………387
13141第 篇 基础
第 1 章 准备工作与注意事项
第 2 章 创建项目结构
第 3 章 元件功能概述
第 4 章 查看原型
第 5 章 创建自适应视图
第 6 章 概要与检视功能
第 7 章 母版管理
第 8 章 标注与流程
第 9 章 其他
15第 1 章 准备工作与注意事项
第 1 章 准备工作与注意事项
1.1 下载安装 Axure RP 8.0
1.2 原型相关的文件类型
1.3 文件自动备份与找回
1.4 功能区域的视图设置 161.1 下载安装 Axure RP 8.0
每个与 Axure 相关的 QQ 群是一个很繁杂的地方，人来人往，大多都是一些刚刚接触或者从未接触过 Axure 的新手。所以，往往看似简单的软件安装、汉化及基础功能的使用，却问题最多。1.1 下载安装 Axure RP 8.01.1.1 Windows 系统的安装与汉化
晶 楼大，我也要用 Axure 做原型了，最新的 Axure 软件从哪里下载？
楼 可以去官方网站下载，下载地址是 /download。
晶 这个地址我刚才试过了，为什么单击下载后没有反应？
楼 国内用户是有这个问题，你到我的网站下载吧！网站是 Axure 原创教程网。晶 好的，楼大。我先去看看！晶 这是什么？你看。好讨厌这个乱码（图 1-1）！楼 是呀！中文系统中几乎都会出现这个情况。这是
图 1-1软件在抽取安装文件。等进度条加载完，单击【Next&】按钮，在界面中勾选【I Agree】复选框就可以啦（图 1-2）！
晶 好的。安装路径就用默认路径就可以了吧（图 1-3）？
楼 一般选择默认路径就可以啦！不过，如果想装在其他的路径，也可以更改。更改后的路径要记住，汉化软件时需要能够找到安装目录。
晶 嗯。那其余的步骤都单击【Next&】按钮吧？
楼 是的，一直到最后一步，如果不想马上运行 Axure，可以取消勾选【Run Axure RP 8】复选框；单击【Finish】按钮，完成安装（图 1-4）。
17第 1 章 准备工作与注意事项
晶 好的，谢谢楼大。我安装好啦！先去研究研究怎么用。 1.1.2 Mac 系统的安装与汉化
H 楼哥，我的是 Mac 系统，怎么安装呀？
楼 Mac 的安装更简单，打开安装文件之后，按照界面提示，将 Axure RP 8 的图标拖到右侧的“Applications”图标上，就可以完成安装啦（图 1-5）！
181.3 文件自动备份与找回1.2 原型相关的文件类型
芝 小楼老师，我不小心把软件关闭了，我编辑的文件在哪？
楼 你新建完文件没有保存吗？
芝 我有生成 HTML 文件，但是好像不能用软件打开呀！
楼 看来你对文件的类型不太了解呀！我给你讲讲吧！
与 Axure 相关的文件有 4 种类型，分别是“.rp”文件、“.rplib”文件、“.rpprj”文件及“HTML”文件。
“.rp”文件：独立原型项目的源文件，这是最重要的文件，只有这个文件才能进行原型的编辑与输出。
“.rpprj”文件：团队原型项目文件，可以通过在团队项目文件夹中打开此文件查看团队原型项目。
“.rplib”文件：元件库文件，可以在软件中载入，并拖曳到画布中使用。
“HTML”文件：这里泛指通过项目源文件生成的网页文件内容，可通过浏览器打开，对原型进行查看。1.3 文件自动备份与找回
芝 我明白了，小楼老师。那是不是我的 rp 文件就找不回
楼 看一下有没有自动备份吧！如果有的话，是可以找回
在 Axure 的导航菜单【文件】列表中，有一个【自动备份设
置】选项（图 1-6）。
一般这个选项是默认开启的，自动备份间隔为 15 分钟。这
个自动备份间隔时间，可以根据计算机性能进行调整，性能越
高，时间可以越短（图 1-7）。
图 1-7图 1-6
如果这个选项没有关闭，当出现意外情况导致文件未保存或
丢失时，可以选择这个选项下方的【从备份中恢复】选项，弹出【从备份中恢复文件】对话框，在列表中选择最近几天备份的文件，单击【恢复】按钮，导出到本地磁盘中（图 1-8）。
19第 1 章 准备工作与注意事项
1.4 功能区域的视图设置
芝 小楼老师，我不小心把软件的一些功能面板关闭了，找不到了！
楼 没关系，我告诉你从哪里找回来。
有时可能会因为一些操作失误或需要，关闭某些功能面板。如果要重新开启，只需打开导航菜单的【视图】列表，在【功能区】的二级菜单中进行开启（图 1-9）。
如果需要将所有功能面板全部开启，恢复到初始状态，只需要开启【功能区】选项下方的【重置视图】选项（图 1-10）。
图 1-10 201.4 功能区域的视图设置第 2 章 创建项目结构
2.1 使用 Xmind 进行项目结构
2.2 根据思维导图搭建原型页
21第 2 章 创建项目结构
2.1 使用 Xmind 进行项目结构梳理
春 楼老师，怎么做一个完整的原型项目啊？我觉得做一个页面很简单，但是做一个完整的项 目，却一点思路都没有呀！
楼 嗯，我们做原型都不是上来就直接做页面，需要先有整个项目结构的搭建。
从产品角度来说，产品原型就是另一种形式的产品需求文档。一般来说，做一个产品需求文档， 都要先搭建项目结构。做原型也一样，有了项目结构才能搭建原型的页面结构，而有了页面之后，才 能去组织页面内容，添加功能逻辑。
在搭建项目结构之前需要为项目考虑一个合适的布局结构。
以 Web 端为例，可以将页面划分为上、中、下、左、右 5 部分。
上：是指页面头部部分，一般包含站点名称、Logo 和导航菜单等。
中：是指页面水平或垂直方向中部的部分，一般是页面主体内容部分。
下：是指页面底部部分，一般包含版权信息、公司信息、导航信息及友情链接等。
左：是指页面左侧边栏，一般是导航菜单或内容列表。
右：是指页面右侧边栏，一般是推荐内容、分类目录、标签列表、广告模块及其他一些杂项。
一个 Web 站点并非一定包含以上 5 部分，可以根据需求进行组合搭配，呈现多种不同的布局类型。 例如，新浪微博用户首页的布局包含了所有 5 部分（图 2-1），而新浪微博内容详情页，只包含了 4 部分（图 2-2）。
222.1 使用 Xmind 进行项目结构梳理
图 2-3 所示是作者的网站（）采用的布局，也是包含 4 部分。
有了布局结构，就能进一步搭建项目的结构。在项目结构中，主要页面的组成都围绕这种布局创建。还是以作者的网站（）为例，看看项目结构是什么样的（图 2-4）。
春 楼老师，这个图是用什么画的呀？也是 Axure 吗？
楼 这个图是用思维导图软件画的，软件名称为 Xmind。
春 那你能教教我怎么用吗？
楼 好吧！你先把这款软件下载下来，默认安装即可。
Xmind 是一款商业思维导图软件，但是它的基本功能是免费使用的。这里使用的是 Xmind 7 中文版。
23第 2 章 创建项目结构
图 2-4 242.1 使用 Xmind 进行项目结构梳理
打开Xmind 7后，在【空白图】列表中向下拉动右侧滚动条，选择【逻辑图（向右）】选项（图2-5）。
在弹出的选择风格窗口中选择自己喜欢的风格，单击【新建】按钮，打开工作界面（图 2-6）。
打开后的工作界面只有一个【中心主题】，双击可以更改它的名称，一般改成项目名称或者网站名称（图 2-7）。
在 Xmind 中有以下组合键。
（1）在中心主题上按 &Enter& 键可以添加子主题。
（2）在任意子主题上按 & Enter & 键可以在下方添加同级主题，按 &Shift&+&Enter& 组合键可以在上方添加同级主题。
（3）在任意主题上按 &Insert& 键可以添加子主题，按 &Delete& 键删除当前主题及其子主题。
（4）在任意主题上按 &Ctrl&+&L& 组合键可以添加该主题与其他主题的关联。
25第 2 章 创建项目结构
（5）使用鼠标拖动主题，可以调整主题的位置和层级关系。
图 2-7说明
本书所有操作均基于 Window 系统，出现的所有组合键，如果有使用 &Ctrl& 键，Mac 系统下一般对应为 &Command& 键，此后不再特别说明。2.2 根据思维导图搭建原型页面结构
春 楼老师，有了项目结构图，就可以制作原型了吧？
楼 是的，如果项目结构没有什么问题了，就可以根据项目结构中的页面组成搭建原型的页面结构了。你看，根据我网站的项目结构，搭建的页面结构是这样的（图 2-8）。
在页面管理面板中，可以单击面板右上方的图标添加文件夹与页面。文件夹用于页面分类，将相同类别的页面文件放在同一个文件夹中。
在页面管理面板中，文件夹与页面可以调整层级和顺序关系，一般通过拖动来操作，也可以通过在文件夹或者页面上单击鼠标右键，在弹出的快捷菜单中进行调整。
根据项目结构，文章页是通过在首页中单击文章列表中的标题打开的，它是首页的子页面。所以，在图 2-8 中，将文章页放置在首页下一级的位置。特别说明
原型页面使用中文命名，在浏览器中查看时可能出现页面无法打开的问题，本节中的页面使用中文 命名，是为了表达原型页面结构与项目结构的关系。建议读者在实际应用中使用英文小写字母命名，命 名中可以包含数字和下画线“_”。
春 楼老师，我明白啦！谢谢你！我去好好研究研究。262.2 根据思维导图搭建原型页面结构第 3 章 元件功能概述
3.1 鼠标的操作
3.2 元件的使用
27第 3 章 元件功能概述
3.1 鼠标的操作
麦 老师，我想做一个页面，但是那些元件都怎么用啊？
楼 选中后拖到画布里面用呀！
麦 我知道是拖进去，但是我想要一个向左倾斜的椭圆形。
楼 没问题，这个很简单！
在 Axure 中，如果需要一个椭圆形，可以放入一个矩形元件到画布中，然后，单击矩形元件右上角的圆点，在弹出的形状列表中选择圆形，就能够得到一个椭圆形。在这个列表中除了圆形，还提供了很多其他形状（图 3-1）。
椭圆的宽和高，可以通过拖曳形状的边缘节点调整（图 3-2）。
如果想让一个形状倾斜或者说旋转一定的角度，如果不要求角度很精确，可以按住 &Ctrl& 键的同时，拖曳形状的边缘节点进行调整（图 3-3）。
麦 老师！我还想要个圆角矩形……
楼 这个也很简单！
如果需要一个圆角矩形，可以直接使用形状按钮元件，也可以通过修改一个矩形为圆角矩形。在形状的左上角有一个三角形，水平拖曳这个三角形就能改变矩形的角部为圆角。在拖曳过程中，会实时显示一个数字。这个数字是圆角半径，一个圆角其实是四分之一圆，圆角半径指的就是圆的半径（图 3-4）。
图 3-4283.2 元件的使用3.2 元件的使用
麦 元件库中那些元件，都是干什么用的？
楼 这就说来话长了！元件库中的元件有好几种类型，我给你一一介绍吧！3.2.1 使用软件自带元件库
在 Axure RP 8.0 中，软件自带了 3 个元件库，分别是默认元件库、流程图元件库和图标元件库。下面按照次要到重要的顺序来介绍这 3 个元件库。
1. 图标元件库（Icons）
图标元件库是 Axure 团队基于 FontAwesome 图标字体中的各种图标制作发布的形状元件，直接拖曳到编辑区即可使用，无须安装 FontAwesome 字体文件（图 3-5）。
图 3-52. 流程图元件库（Flow）流程图元件库包含的是各种流程图的形状，通过这些形状可以构建流程图（图 3-6）。
29第 3 章 元件功能概述
梯形：表示手动操作
流程图形状的含义如表 3-1 所示。
椭圆形：表示流程的结束
六边形：表示准备或起始 矩形：一般用来表示执行
平行四边形：表示数据的处理或输入 圆角矩形：表示程序的开始或者结束
角色：模拟流程中执行操作的角色是谁 斜角矩形：不常用，可以自定义
数据库：指保存数据的数据库 菱形：表示判断
页面快照：引用项目内某一页面的缩略图 文件：表示一个文件
图片：表示一张图片 括弧：注释或者说明 半圆形：表示页面跳转的标记 三角形：数据的传递
流程图在使用时，各个形状之间的连线需要在快捷功能中选择【连接】，通过这个连线工具绘制形状间的连接线（图 3-7）。
在选择【连接】开启连线工具之后，将鼠标指针指向形状的连接点，单击并拖动到另一形状的连接点松开，即可完成连接。另外，选中或者双击某个连接线还可以为线段输入文字（图 3-8）。
连接线可以改变线段与两端箭头的样式，这个操作在快捷功能中也可以实现（图 3-9）。
3. 默认元件库（Default）
默认元件库中包含 3 种类型的常用的元件。 303.2 元件的使用
● 基本元件
基本元件是搭建页面内容的形状、图片、线段、热区及容器元件（图 3-10）。
形状：形状元件包括各种矩形、形状按钮和文本，常用于页面中的一些背景形状、文字标题与按钮。图 3-10 中的第 1、2 行元件除了图片都是形状元件。这些元件可以通过改变属性与样式进行互相转换。如果需要编辑这些元件上的文字，双击这些元件即可进入编辑状态，如果只是添加文字，也可以选中该元件直接输入文字。
图片：图片元件一般用于为页面添加各种图片或图标，双击该元件即可导入默认显示的图片。如果需要为图片元件添加文字，可以选中该元件并直接输入文字。修改已有的文字可以在元件上单击鼠标右键，在弹出的快捷菜单中选择【编辑文本】命令，即可进入编辑状态。
线段：线段包括水平线和垂直线，常用于页面中的一些分隔线。这两个元件可以通过改变角度互相替代。另外，线段与形状也可相互转换。
热区：热区是一个透明元件，最常用的是它透明的特性，例如，在一张图片中的两个位置上添加单击的交互，就可以在这两个位置上放置两个热区，然后为热区添加单击的交互。
动态面板：动态面板是容器类元件，在之后将有详细的说明。
内联框架：内联框架容器类元件，简称框架，可以在页面的某个区域嵌入项目中的其他页面或某个 URL 指向的网页，还可以嵌入一些多媒体文件，如 MP3、AVI、SWF 等文件。
31第 3 章 元件功能概述
中继器：中继器是容器类元件，在之后将有详细的说明。
基本元件使用非常广泛，常见的页面基本上都可以用这些元件完成搭建。
● 表单元件
表单元件是用来获取用户输入的元件。在前端开发中，通过此类元件可以制作各类表单，并通过提交按钮，将用户输入的内容提交至服务器（图 3-11）。
文本框：单行文本框和多行文本框用于获取用户输入的文字。
列表框：下拉列表框和列表框用于获取用户选择的选项。元件默认的选项可通过双击元件，在弹出的窗口中进行设置。
单选按钮：具有选中与未选中两种状态。一般在使用时会有多个单选按钮，并属于互斥关系，只允许用户选择其一。
复选框：具有选中与未选中两种状态。可单独使用，也可多个一起使用，一般表示用户可自由选择或者取消选择。
提交按钮：在编程开发中，该元件被单击时，能够将用户填写完成的表单数据提交到服务器。但是，在原型制作中不涉及与服务器的交互，所以显得多余，特别是它的样式不能调整且只有几种简单的交互触发，所以，一般都用基本元件中的形状按钮或图片按钮来代替它。
● 菜单与表格元件
菜单与表格元件在搭建对样式无要求或要求较低的线框图时，使用起来比较方便（图 3-12）。
树状菜单：垂直方向的菜单，节点可以展开与折叠。
表格：可以添加行与列，但不可合并多个单元格。
水平菜单与垂直菜单：可以添加菜单项和子菜单项。
菜单与表格元件的常用操作，如添加删除行、节点或菜单项等，可以在节点、单元格或者菜单项上单击鼠标右键，在弹出的快捷菜单中完成。 323.2 元件的使用● 标记元件标记元件主要用来进行功能标注或者展现界面业务流程（图 3-13）。
图 3-13页面快照：能够指向项目中的某个页面，呈现该页面的缩略图。除页面快照之外的元件都是形状或线段元件，这些元件均可使用基本元件通过改变样式制作出来。
麦 老师，我大概对这些元件有了些印象，但是怎么通过这些元件搭建页面还是没有什么概念。
楼 好吧！我来找个页面，指出里面都能用哪些元件来完成页面的构建，给你参考（图 3-14）。
麦 老师，为什么两个矩形并排放一起中间是粗线啊？
楼 这与元件的边框对齐设置有关系。
如果发现并排的形状或图片元件之间的边框比较粗，可以在导航菜单【项目】的选项列表中选择【项目设置】，在弹出的窗口中将 { 边框对齐方式 } 设置为【边框重合】（图 3-15）。
33第 3 章 元件功能概述
图 3-163.2.2 使用自定义元件库
麦 老师，我想问问你怎么用别的元件库。
楼 点这里，想用哪个选哪个（图 3-16）！
麦 老师，这个我会！ 我是想问问你怎么用别的元件库，比如你网站上分享的那些。对了，就像你截图中后一个元件库，是怎么弄到软件的元件库列表中的？
楼 这个只需要载入即可。
如果需要使用其他元件库，可以在元件库面板中单击功能列表按钮，在打开的列表中选择【载入元件库】命令（图 3-17）。
图 3-17343.2 元件的使用第 4 章 查看原型
4.1 本机预览
4.2 共享发布
4.3 在线反馈
4.4 Axure Share App
4.5 生成文件
4.6 浏览器插件
4.7 工具栏介绍
35第 4 章 查看原型4.1 本机预览霏 老师，我做了一个简单的页面，怎么才能查看效果呀？
楼 自己查看的话可以用软件的预览功能。
如果想快捷地查看原型图的效果，Axure 提供了预览功能，能够将制作的原型直接在浏览器中打开查看。
可以单击快捷功能中的预览按钮，或者按 &F5& 键进行预览（图 4-1）。
预览是以 Web 服务的方式在浏览器中查看原型，在浏览器中的地址是本机的 IP 地址与页面路径的组合。例如，http://127.0.0.1:.41/index.html。霏 预览时可以选择不同的浏览器吗？我是用 IE 打开的，我想用火狐查看。
楼 可以呀！预览可以选择不同的浏览器，可在导航菜单【发布】菜单中选择【预览选项】进行设置（图 4-2）。
在打开的预览选项对话框中，左半部就是浏览器的相关设置。一般，IE、谷歌、火狐浏览器都有单独的选项显示，直接选择即可。而其他的浏览器，只能通过设置为系统默认浏览器后，选择【默认浏览器】进行使用（图 4-3）。
图 4-3364.1 本机预览右侧是浏览原型时关于工具栏的设置（图 4-4）。
图 4-4开启页面列表：表示开启工具栏，并展开页面列表（图 4-5）。
图 4-5关闭页面列表：表示开启工具栏，并收起页面列表（图 4-6）。最小化工具栏：表示开启工具栏，但不展开工具栏（图 4-7）。不加载工具栏：表示关闭工具栏，只显示页面内容（图 4-8）。图 4-6
37第 4 章 查看原型
4.2 共享发布
霏 老师，我想把原型让别人也能看到，像访问一个网站一样，通过 URL 地址打开，可以吗？
楼 嗯，Axure 有共享功能，能够满足这种需求。
Axure 为我们提供了共享功能，这个功能需要先注册一个 Axure Share 的账号才能使用。注册账号 可以直接在软件上完成。单击软件右上角的【登录】按钮，在弹出的界面中选择【注册】选项，填 写真实有效的邮箱与密码，勾选【我同意 Axure 条款】复选框，最后单击【确定】按钮就完成了注册（图 4-9）。
完成注册后，软件会自动登录刚刚注册的账号，用户名显示为注册邮箱的前缀（图 4-10）。
这时，就可以正常使用 Axure 的共享功能了。
按 &F6& 键，或者单击快捷功能中的【共享】按钮（图 4-11），可以打开共享窗口。
在发布窗口中输入共享项目的名称，单击【发布】按钮即可将原型发布到 AxureShare 的服务器 中。如果发布的原型需要更高的安全性，可以在发布到 AxureShare 时，设置原型的访问密码，查 看此原型的人必须输入正确的密码才能够查看。另外，还能选择发布到指定工作区的某一文件夹（图 4-12）。
如果需要新建工作区（图 4-13）与文件夹（图 4-14），需要登录 / 进行设置。384.2 共享发布
项目的发布与管理也可以在登录 / 后，进行相关操作。例如，发布一个新项目，单击【New Project】按钮，根据界面中的提示操作即可（图 4-15）。
39第 4 章 查看原型
无论在软件中（图 4-16），还是在 Axure Share 站点中（图 4-17），成功发布一个项目后，都会自动生成一个 URL 地址，供任何用户访问查看原型。
4.3 在线反馈
霏 共享发布这个方法不错！不过，别人在看我的原型时，能不能在原型上做标注或者写评论 404.4 Axure Share App呢？这样，我能比较直接地得到用户的反馈。
楼 通过共享发布生成的网址查看原型时，工具栏中就有评论功能。
在 Axure Share 站点中发布原型后，通过自动生成的 URL 进行浏览原型时，如果带有工具栏，能够看到工具栏中有一个“DISCUSS”的菜单项，选择这个菜单项，右侧就会显示发布讨论的面板。在面板中输入讨论内容，单击【提交】按钮，就可以把讨论内容保存到原型中（图 4-18）。
使用“DISCUSS”功能发布讨论内容时，还可以截取图像辅助说明（仅 FireFox 和 Chrome 浏览器）。需要注意的是，这个功能需要安装浏览器插件才能支持，并且安装完插件后，需要重新加载页面才能生效（图 4-19）。
当输入了讨论内容及截图并发表后，在面板中就会显示相应的内容（图 4-20）。图 4-19
图 4-204.4 Axure Share App
霏 老师，我想在手机上查看原型，但是手机的状态栏和浏览器的导航菜单都不能隐藏。而且，
41第 4 章 查看原型我经常外出拜访客户，有时网络环境也不好，查看发布好的原型，经常要等很久，或者干脆打不开。搞得我好尴尬！像这种情况，有没有解决办法呀？
楼 可以下载一个 Axure Share 的 App。这款 App 不但能全屏查看原型，还支持将原型内容下载到本地，进行离线查看。可以到我的网站下载这个软件，网站是 Axure 原创教程网。
我们就来看一下如何使用 AxureShare App（iOS 版与 Android 版基本无差别，这里以 Android 版进行讲解）。
● 登录界面
输入注册邮箱和密码，点击“LOG IN TO AXURE SHARE”按钮登录即可（图 4-21）。
● 工作区界面
登录之后会打开 Home 页，这里是工作区的列表。 工作区中的文件夹可以在 Axure Share 网站中创建（见本章第 2 节），这里以默认的“My Projects”进行介绍。界面的下方还有两个按钮，默认被选中的是【CLOUD】按钮，表示当前查看的是云端服务器中的项目文件列表。另一个是【LOCAL】按钮，单击可以打开本地存储的项目文件列表（图 4-22）。
● 在线项目列表
单击工作区的名称，进入工作区。新打开的页面中显示的是项目列表，所有上传到这个工作区中的项目，都在这里显示，下拉页面可刷新内容。单击项目名称后方的点状图标，可以为每个项目单独进行设置和操作（图 4-23）。
对项目设置和操作包括 4 项，由上至下分别是（图 4-24）：
■ 显示 / 隐藏设备状态栏
■ 下载项目文件到本地
■ 使用浏览器打开项目
■ 打开查看项目424.4 Axure Share App
图 4-24● 本地项目列表单击工作区界面中的【LOCAL】按钮，打开已经下载到本地的项目文件列表（图 4-25）。注意
一个项目的文件可以多次下载，并都在文件列表中显示，需要注意区分，或者是及时清除旧版本。
单击项目名称后方的点状图标，可以为每个项目单独进行设置和操作（图 4-26）。
本地项目的设置和操作有三项，由上至下分别是：
■ 显示 / 隐藏设备状态栏
■ 删除本地副本
■ 打开查看项目
● 打开查看项目
不管是云端的项目还是下载的项目，都可以在项目列表中单击查看项目。项目被打开后，会自动隐藏页面列表。如果想打开页面列表，需要快速点击设备屏幕三次，即可打开（图 4-27）。图 4-25
43第 4 章 查看原型
在未进行移动设备设置的情况下查看原型时，AxureShare 的最大宽度为 980px，原型尺寸的宽度超过
980px 时会自动按比例缩小，横向填满屏幕。原型尺寸的宽度小于 980px 时按原型的实际尺寸显示。关于
如何进行移动设备的设置，将在后文中详细讲解。
4.5 生成文件
霏 老师，除了在线发布，以及 App 中查看的这种方式，还有其他方式给别人查看吗？我听说 可以传送文件给别人，就能够直接在计算机上查看原型。
楼 嗯，你说的是生成 HTML 文件的方式。
Axure 中能够将制作的原型输出生成为 HTML 文件，这个生成的文件内容可以发送给他人直接通过 浏览器查看。
生成 HTML 文件的操作可以通过单击快捷功能中的【发布】按钮，然后在弹出的菜单中选择【生 成 HTML 文件】选项，打开生成配置的对话框。这一步操作也可以通过按 &F8& 键来完成（图 4-28）。
在弹出的对话框中选择【常规】选项，设置 HTML 文件的保存位置，可以选择硬盘上的某个文件 夹的路径，或者在某个路径的末尾输入“\ 文件夹名称”新建文件夹。例如，将生成的 HTML 文件保 存至系统桌面的“TestFiles”文件夹中。如果系统桌面上没有这个文件夹，可以先通过单击路径输入 框后面的【…】按钮选择保存到系统桌面，然后在路径末尾再加上“\TestFiles”，这样在生成时，软 件会在系统桌面上新建一个名为“TestFiles”的文件夹，并将生成的 HTML 文件保存到该文件夹中（图 4-29）。
霏 老师，我刚才生成了 HTML 文件，但是生成后发现文件夹中有很多文件，到底把哪些发给 别人呢？
楼 嗯，要把这个文件夹所有的文件都发给别人。
霏 啊？我的原型是做给客户看的，那么多文件，客户要打开哪个？
444.5 生成文件楼 别急！我给你简单说一下，你就明白了。
在生成的 HTML 文件夹中，会包含很多内容，有文件夹及 HTML 类型的网页文件。文件夹中的内容不需要去关注，浏览原型的关键在于几个 HTML 页面文件。以一个新建的 RP 文件为例，生成的 HTML文件包含图 4-30 中的这些内容。 特别说明
作者制作的汉化文件中，将 index 页与 home 页进行了合并，所以，在生成的文件中不包含 home 页。
其他汉化版本会可能同时包含 home 页与 index 页，并且 index 页打开时会包含工具栏。
图 4-30其中：● index：能够打开原型的起始页面。● start：打开的页面中包含工具栏，并展开页面列表，同时包含原型起始页面。● start_g_1：打开的页面中包含工具栏，但不展开页面列表，同时包含原型起始页面。
45第 4 章 查看原型
● start_c_1：打开的页面中包含工具栏，工具栏
图 4-31 为最小化状态，同时包含原型起始页面。
● 其他页面：如 page1~page3，能够打开原型中相 同名称的页面。
通过以上内容能够看出，除了其他页面，剩余的 4 个页面分别对应了浏览原型时工具栏设置的 4 个选项（图 4-31）。
霏 哦，我明白了，老师。如果我不想让客户看到工具栏，就删除名称以 start 开头的几个页面，让客户打开 index 页面。如果想让客户看到工具栏，就删除另外两个名称以 start 开头的页面，让客户打开 start 页面……
楼 嗯嗯，但是千万要记住，index 页面和其他自定义名称的页面都是原型的内容，是不可以删除的。
霏 我还有一个问题，生成 HTML 文件时，一定要把所有的都生成吗？如果有些页面不想让别人看到怎么办？
楼 这个也在生成 HTML 对话框中进行设置。
如果只想生成原型中的部分页面，只需要在生成 HTML 对话框的【页面】设置中进行相应的选择。例如，只想生成 page1 和 page3，就先取消勾选【生成所有页面】复选框，然后勾选【page1】和【page3】复选框。不过因为【page1】和【page3】是【index】的子页面，所以在勾选时，【index】也会被自动选中（图 4-32）。
如果不希望【index】被选中，需要把【page1】和【page3】的层级调整到与【index】平级或者更高的层级（图 4-33）。
霏 老师，我发现即便不生成【index】在文件夹中还是会出现【index】。
楼 是的，【index】是系统默认生成的一个页面。当原型中包含命名为 index 的页面时，它能够打开这个 index 页面，如果原型中没有命名为 index 的页面，则它能够打开生成的页面列表中排在上方第一位的页面。 464.6 浏览器插件
4.6 浏览器插件
霏 老师，紧急求助！今天我把做的原型发给客户，结果他打不开。
楼 哦，他是什么浏览器？
霏 是谷歌浏览器。
楼 那就不用着急了，谷歌浏览器是需要安装插件才能正常浏览原型的。
使用谷歌浏览器浏览生成的 HTML 文件，需要安装浏览器插件（图 4-34）。
这个插件可以直接单击提示中步骤1下面的粉红色按钮【INSTALL EXTENSION】进行安装（图4-34）。
如果无法顺利安装（一般是无法下载），可以通过以下步骤解决。步骤 1 下载“AxureRP_for_chorme_0_6_2.crx”文件，下载地址是/menupage/download.html。步骤 2 打开谷歌浏览器，单击功能列表按钮，打开菜单中的
【设置】选项（图 4-35）。图 4-34
图 4-35步骤 3 在设置界面中找到【扩展程序】选项，单击打开扩展程序列表（图 4-36）。
47第 4 章 查看原型
图 4-36步骤 4 将下载到本地的插件文件放入到谷歌浏览器中界面，这时会显示提示“拖放以安装”（图 4-37）。
图 4-37步骤 5 在弹出的对话框中单击【添加扩展程序】按钮（图 4-38）。
图 4-38步骤 6 在添加好的扩展程序中勾选【允许访问文件网址】复选框，并且保证【已启用】为已勾选状态
（图 4-39）。
完成以上步骤，谷歌浏览器就可以正常浏览 Axure 生成的 HTML 文件了。
霏 老师，真的是这个问题！不过，让别人安装插件好麻烦啊！而且，有的客户浏览器也很老 484.7 工具栏介绍 旧，有的居然用 IE8 或者 IE9，导致经常出现莫名其妙的问题，没办法正常浏览。
楼 我有两个工具能够解决这个问题！你可以试一下。
作者为了解决浏览原型用户的浏览器环境的问题，做了两个简单的小工具。在这两个工具中分别 内置了谷歌浏览器和火狐浏览器。生成 HTML 文件后，将所有生成的内容复制到任一工具中的 Demo 文件夹中（图 4-40），删除不符合需求的打开方式（.bat 文件），然后将工具文件夹中的所有内容发送 给浏览原型的用户，用户无须安装浏览器及插件，只需要双击打开相应的“.bat”文件，就能够正常 浏览原型。
工具的下载地址是 /menupage/download.html。
在后文中将会讲解文本框元件不同类型的设置，有些类型需要特定的浏览器才能够支持，所以，在
选择上述工具时，需要考虑原型中特定类型文本框对浏览器的要求。
4.7 工具栏介绍
霏 老师，浏览原型时左侧工具栏中的那些功能都是什么呀？都是英文，我看不懂啊！
楼 翻译成中文就能看懂啦！
作者做了工具栏的汉化包，下载后替换 Axure 安装目录中的同名文件即可实现工具栏的汉化。
下载地址是 /menupage/download.html。
工具栏的页面面板中，除了可以单击页面列表中的页面名称切换显示页面，还有两个功能按钮（图 4-41）。
一个功能按钮用于生成单个页面的共享链接，例如，将原型共享到 Axure 服务器上时，获取到的是 项目初始页面的访问链接，而在工具栏上，能够获取各个页面单独的共享链接。
办公时间：周一至周五 （9：00-18：00）
销售电话：020-
售后：020-
除特别注明外，作品版权归上传方所有和负责。如果无意之中侵犯了您的权益，请来信告知，本站将在三个工作日内做出处理。