点击上方“蓝字”关注本公众号
《Axure RP 8入门手册》
本书的写作初衷是面向初学者，由浅至深地引导读者学习Axure RP 8.0的使用方法，从而实现最终的学习目标。本书不但适合初学者学习，在知识结构与案例的安排上，也非常适合工作中的查阅与参考。初学者只需要按照从前至后的顺序进行学习，就能够迅速、全面地掌握原型开发技能。具备一定原型开发基础的读者，也能够在本书的大量案例之中，获得各种实战的参考。书中的案例均为网站或App中采用的一些典型交互方式，作者通过这些案例引导读者学习如何进行原型的构建、逻辑的整理、思路的分析及交互的实现。
特点与优势
1. 主线清晰
和一般的工具书不同，本书并不是枯燥地罗列知识点，对各种功能进行文字解释，而是以一条由浅至深的路线，循序渐进地展开讲述。读者在学习过程中，只需按照由前至后的顺序阅读并配合练习，即可轻松掌握各类知识要点，实现学习目标。
2. 层次清晰
学以致用是本书的原则。作者考虑读者的需求，将书中内容与工作需求紧密结合，内容上分为基础与进阶两部分。读者在工作中如果只是需要做静态线框图（低保真原型），在学习完基础部分之后，即可满足工作需求。如果需要为原型添加丰富的交互（高保真原型），则可以通过继续学习进阶部分，来加强原型交互实现的能力。
3. 结构清晰
结合读者的反馈，本书的知识结构分布上做了更清晰的划分，特别是在目录结构上，除了章节目录还单独增加了案例目录，能够让读者更加方便查阅到需要参考的内容。
4. 情景真实
这是保留了《Axure RP 7.0从入门到精通》一书的优点，通过虚拟人物让读者更加感同身受，口语化的知识问答，更适合读者理解知识内容。本书特别征集了多位真实人物的头像，让读者在阅读过程中体验更加真实，更有亲切感。
5. 案例丰富
作者结合知识内容，融入了大量的实战案例，共计70个，虽然没有标明具体出处，但是读者能够从各个知名网站或者App中发现与这些案例相似的交互效果。这些案例都紧紧结合知识点的分布，所有案例出现时，都基于当前所讲述的知识点和读者已经学过的知识点，不会有陌生内容的存在，让读者能够轻松完成案例的练习。
6. 资源丰富
本书所有的案例源文件、素材、元件库、汉化包等资料，全部奉献给每一位读者。
案例教程——动态面板
动态面板简介
菜同学
老师好！ 我听说动态面板能做很多动态效果，但是，我研究好久都不知道怎么用。能麻烦你教教我吗？
小楼老师
可以呀！首先，要想使用好动态面板，需要先了解一下这个元件。
把动态面板放到画布中，看上去它是一个半透明的形状。但是，如果在浏览器中查看原型，是看不到动态面板的存在的。也就是说，动态面板本身是个透明的元件。
接下来，介绍动态面板的结构和特点。
对于一个陌生的元件，可以双击试试看。双击动态面板，弹出一个窗口，这个窗口的标题是“面板状态管理”。可以单击【+】按钮，添加新的状态。也可以单击上下箭头按钮，调整状态的顺序。还可以选中一个状态，然后单击【复制】按钮，复制一个状态。还有【删除】按钮，可以删除状态。
但是，状态又是什么呢？如果要做一个比喻的话，可以将动态面板想象成幻灯片的放映机。而状态就是幻灯片。幻灯片里面可以放置内容，状态也一样可以编辑。可以单击编辑状态的按钮，或者直接双击某个状态的名称，打开状态的编辑界面。状态的编辑区域和页面的编辑区域一样，可以放置各种各样的元件，组成内容。
动态面板的样式设置中，可以单独为各个状态设置背景颜色或图片。
菜同学
啊！原来是要双击状态名称才能进一步编辑啊！
小楼老师
对呀！对于一个陌生的元件，可以尝试双击的操作！
菜同学
嗯，我记住了。不过，动态面板编辑区域中的那个蓝色的虚线框是什么？
小楼老师
这个是动态面板的尺寸范围。动态面板的尺寸如果是固定的，就只能显示固定范围（蓝色虚线框）中的内容。（如下图）
菜同学
明白了，老师。是不是动态面板状态编辑区域中左上角留有空白的话，页面中也会有这个空白？
小楼老师
对呀！动态面板加载状态中的内容，是从编辑区域的左上顶点开始一直到固定范围的右下角的。
菜同学
那能不能让动态面板的尺寸和里面的内容尺寸自动保持一致呀？这样省得状态中内容尺寸发生改变时，还要去改动态面板的尺寸。
小楼老师
可以。动态面板的属性中有【自动调整为内容尺寸】选项，当勾选了该复选框，动态面板的尺寸就会自动跟随状态中内容的尺寸调整了（如下图）。
菜同学
哦，这样果然方便了很多。老师，给我讲讲动态面板都能做什么吧！听说能够用动态面板做出很多动态效果呢！
小楼老师
嗯！动态面板总的来说有几种独有的特性，分别是容器、多状态、拖动、循环、适应宽度和相对固定。今天我们来讲讲其中的一些特性。
动态面板特性——循环
菜同学
老师，你看淘宝商品页的商品图片展示是不是就要用到动态面板的多状态呀（如下图）？
小楼老师
这个可以用。不过，这个切换的只有一张图片，切换时也没有什么动画，其实是用不到动态面板的。你想一下，是不是下面的小图【鼠标移入时】，设置大图的图片为另外一张图片就可以了呀？
菜同学
对哦！只需要【设置图片】的动作，设置大图的{默认}图片，【导入】与小图一致的图片就可以了。
小楼老师
不过，要使图片在切换时带有动画效果，就要用到动态面板的多状态了。而且，动态面板多状态还有一种应用，就是循环。比如，京东网首页正中的图片轮播，就需要用动态面板的多状态，结合循环来实现（如下图）。
案例：使用循环实现图片轮播
步骤1
把一个图片元件放到画布中，双击图片元件导入第一张宣传图片。
步骤2
在图片上单击鼠标右键，在弹出的快捷菜单中选择【转换为动态面板】命令。
步骤3
双击动态面板，在弹出的编辑界面中将动态面板命名为“ImagePanel”，然后选中第一个状态，将其复制5 次。
步骤4
修改状态“State2~State6”的图片为其他几张宣传图片。比较快捷的方法是双击两次概要中相应的图片，即可进行导入。
步骤5
页面打开时，图片就会自动循环切换播放，切换时为渐变效果，所以，为动态面板“ImagePanel”添加【载入时】的用例，设置动作为【设置面板状态】，勾选“当前元件”或“ImagePanel”，{ 选择状态} 为【Next】；勾选【向后循环】和【循环间隔】复选框，设置间隔时间为“3000”毫秒；勾选【首个状态延时3000毫秒后切换】复选框；{进入动画}选择【逐渐】，{ 时间} 为“500”毫
秒；{ 退出动画} 也选择【逐渐】，{ 时间} 为“500”毫秒。用例动作如图所示。
交互事件如图所示。
动态面板特性——适应宽度
小楼老师
动态面板还能够自动适应浏览器的宽度。
菜同学
老师，什么叫适应宽度？
小楼老师
就是能够随着浏览器的宽度改变自己的宽度，永远铺满浏览器整个宽度。比如，我发布在线视频时的课程管理主页，欢迎语所在位置的蓝色背景就是随着浏览器的宽度变化而变化的（如下图）。
案例：横向铺满屏幕的背景条
步骤1
放入一个动态面板到画布中；在动态面板的样式设置中，设置动态面板的高度为背景图片的原始高度“160”；然后，为状态“State1”【导入】背景图片，设置图片【填充】动态面板的状态。
步骤2
勾选动态面板属性中的【100%宽度】复选框。
TIPS
水平方向自动铺满屏幕的动态面板，只需要确定纵向的摆放位置。不过，为了设计方便，可以设置动态面板的x 轴坐标位置为“0”，宽度为页面内容的整体宽度。
动态面板特性——相对固定
小楼老师
动态面板最后一个特性是能够实现相对固定。
菜同学
老师，什么叫相对固定？
小楼老师
有些网站拖动浏览器滚动条时，页面会跟随滚动，但页面中总有一部分内容是保持在某个位置不动的，如知乎网的导航菜单（如下图）。
菜同学
那就是固定位置了呀！为什么叫相对固定？
小楼老师
其实，页面的内容是不会移动的，在拖动浏览器的滚动条时，其实是视觉上保持不动的内容，在跟随着滚动条的滚动而移动位置。所以，这个相对固定是相对于浏览器窗口而言的固定效果，并不是内容自身没有移动。
案例：导航菜单顶部固定的效果
步骤1
放入两个图片元件，分别双击并导入代替导航菜单与页面内容的图片，将它们摆放在合适的位置。
步骤2
在代替导航菜单内容的图片上方单击鼠标右键，在弹出的快捷菜单中选择【转换为动态面板】命令。
步骤3
在动态面板属性中单击【固定到浏览器】，在弹出的对话框中勾选【固定到浏览器窗口】复选框，{ 水平固定} 选择【居中】，{垂直固定} 选择【上】。
新书推荐
延伸阅读
更多内容可以购买《Axure RP8 入门手册 网站和App原型设计从入门到精通》详细阅读哦！
作座者：小楼一夜听春语
出版社：人民邮电出版社
出版年：2017年7月
ISBN ：978-7-115-45844-5
长按二维码进入当当购买页面
长按二维码进入京东购买页面
小福利
输入标题
互动话题：
关于 Axure 你想知道哪些事儿
在留言区和我们互动，我们会选出2条精彩回复，送出《Axure RP8 入门手册 网站和App原型设计从入门到精通》 一书，中奖结果将在2017年7月11日“数艺社”推送中公布。快来加入吧！
2017年数艺社第二季书单（赠书活动）
数艺社
微信公众号ID ： szysptpress
点击“阅读原文”可以直接购买
《Axure RP8 入门手册 网站和App原型设计从入门到精通》
原创文章，作者：交互精选，如若转载，请注明出处：https://www.iamue.com/36364/
