《AxureRP9网站与App原型设计》教学教案—04用Axure动态面板制作动态效果.docxVIP

第4章 用Axure动态面板制作动态效果 课时内容 用Axure动态面板制作动态效果 课时 6 教学目标 掌握动态面板、动态面板常用功能，学会制作淘宝登录页签的切换效果 教学重点 动态面板常用功能 教学难点 动态面板常用功能 教学设计 1.教学思路：通过实例引入动态面板的概念；通过多媒体演示和实机操讲解动态面版的常用功能；通过实战实现登录页面切换效果。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 动态面板元件是一个动态的、由面板组成的元件。它可以让原型呈现动态的效果，而不是沉闷的静态页面，并且它能实现软件的高级交互效果。 动态面板元件是Axure模拟很多动态效果的主要工具，如要模拟淘宝的广告轮播，可以将几张图摞在一起，轮流移动到最上面来显示，单击一个圈，就把对应的图，移动到最上面。 动态面板模拟海报轮播效果 4.1 动态面板的使用 动态面板元件里包含多种状态，可以把动态面板理解为装载这些状态的容器。 我们在上学的时候，经常把作业本摞成一摞，只能看到最上面一本的封面。这一摞作业本就是动态面板，每本作业就是动态面板中的一个状态，只有最上面的一个状态是可见的，其他状态都是隐藏的。动态面板的图标形象地表达动态面板元件的功能。 小刚的作业本小明的作业本状态（State）1状态（State） 小刚的作业本 小明的作业本 状态（State）1 状态（State）2 小虎的作业本状态（State）3 小虎的作业本 状态（State）3 作业本和动态面板图标 下面就以学生作业本为例，来学习动态面板的使用。 实战演练4.1.1 创建动态面板并命名 实战演练 （1）打开Axure RP 9软件，将工程保存并命名为“动态面板演示操作”，拖曳一个“动态面板”到工作区域。 拖曳动态面板 （2）在检视区域的说明面板输入动态面板的名称“一摞作业本”，这样方便完成对动态面板元件的查找。 动态面板名称 实战演练4.1.2 编辑动态面板状态 实战演练 （1）双击动态面板，弹出动态面板编辑框，它默认提供一种状态State1（State为动态面板默认的状态名称），就像一摞作业本里至少有一个作业本，一个动态面板至少有一种状态。 动态面板名称 （2）单击State1状态，弹出动态面板状态管理对话框，在这里可以添加动态面板状态、复制面板状态以及删除面板状态。 动态面板状态管理 （3）单击添加状态选项，可以新增一个动态面板的状态，单击相应状态名称就可以对状态重新命名，把两个状态分别命名为“小明的作业本”和“小刚的作业本”。 新增动态面板状态 （4）对于已经创建的动态面板，可以单击“重复状态”按钮，来复制动态面板的状态。如果两个状态内容相差不是很多，可以先复制出一个状态，在复制出的状态的基础上进行修改。与小虎知道小刚学习好，每次做作业都会借小刚的作业本来抄是一个道理。 复制动态面板状态 （5）动态面板状态显示顺序操作，可以通过选中要移动的动态面板状态，按住鼠标左键向上拖动。如果老师想看小刚的作业本，使用该操作就可以把小刚的作业本状态向上移动，一直移动到第一层。 向上移动操作 （6）按住鼠标左键也可以向下移动动态面板状态，如果小明同学的作业做得很不好，老师很生气，要把它放在最下面，这时候可以使用下移操作，一把小明的作业本移动到最下层。 向下移动操作 （7）如何编辑状态来修改作业本里的内容呢，虚线白色的区域就是用来当前状态的内容。 编辑状态 （8）在编辑状态区域，可以对动态面板进行状态内容编辑，虚线框的白色区域代表内容的显示区域，在虚线框里的内容可以显示出来，超出该区域范围的内容将被隐藏起来，先添加一个不超出显示区域的内容，拖曳一个“矩形1”元件，将文本内容重新命名为“小刚90分”。 拖曳“矩形1”元件 完全显示出来 （9）双击“一摞作业本”动态面板，打开状态管理对话框，单击“小虎的作业本”状态，拖曳一个“矩形”元件到工作区域，将矩形框放置在页面右下角，部分内容超出虚线框显示区域，文本内容重新命名为“小虎98分”。 编辑“小虎的作业本”状态 拖曳矩形1元件 （10）回到动态面板所在页面，页面显示的仍然是小刚的分数。 小刚的分数 （11）双击“一摞作业本”动态面板元件，选中小刚的作业本，按住鼠标左键将它移动到第一层，会发现这次显示的是小虎的作业本的内容，并且超出显示区域的内容，没有被显示出来。 没有完全显示出来 （12）选