AxureRP动态面板交互设计实例教程
主要是对AxureRP 动态面板交互设计实例教程的介绍，有需要的朋友可以参考一下。就跟随百分网小编一起去了解下吧，想了解更多相关信息请持续关注我们应届毕业生考试网!
网站开发技术越来越丰富了，不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，这些都被归类为RIA(Rich Internet Application)的技术，能够让网站界面更丰富，展现更优质的人机交互。Axure RP能够进行交互设计，且可以立即将结果呈现于原型上，而不是只有文字叙述。且学习Axure RP的交互设计，并不需要学习HTML或Java Script语法，通过直观设计就可以完成多样的交互界面设计。在Axure RP设计出来的原型中，最简单的交互设计是网页链接，真正发挥Axure RP在交互设计上的惊人特色，并不是只有超链接这么简单的交互，下面通过介绍动态面板的操作与控制，来学习更丰富更友善的交互界面设计。
动态面板是专门用来设计动态原型功能的组件，每个动态面板可以包含一个或多个状态，每个状态本身是一个页面，通过控制状态的'显示顺序或隐藏/显示动态面板来达成交互界面的效果，像其它组件一样，动态面板可以直接通过拖拽的方式从组件选择面板加入到画布中。
动态面板：本身可以包含很多个状态，而每个状态都是一个小网页。被放置在最上层的状态就是该面板的界面，即默认展示效果。
状态：每个状态都是一个小网页，而这个小网页的边界与大小，与所属的动态面板大小相同。不同的状态可以重叠在同一个动态面板里头，只有放在最上层的状态，才会呈现于原型的默认画面中。以Axure RP所设计出来的多样交互界面，大多由各种触发事件来控制动态面板显示或消失，或控制哪个状态在最上层来仿真出实际的交互界面。
在动态面板上鼠标左键双击，会开启动态面板状态管理对话框。在这个对话窗口中，可以新增状态、更改状态名称、调整状态排序、删除状态与编辑状态。在动态面板状态管理对话框中选择一个状态，然后按下编辑状态钮或者直接双击改状态，会开启这个状态的线框图以供设计。或者可以选择编辑所有状态钮，一口气把所有的状态页面通通开启。打开后就可以像设计其它线框图一样的设计状态页面， 每个状态页面的侧边蓝色虚线外框就表示其所属的动态面板的边界。
动态面板可以预设为隐藏，做法是在动态面板上按鼠标右键，并选择编辑动态面板->设为隐藏，这样就可以隐藏面板的内容，而且动态面板也会从蓝色变成黄色。已经预设隐藏的动态面板，可以选择编辑动态面板->设为可见来显示。
在交互事件属性对话框中有5种交互方式是专门用来控制动态面板的，分别是:
•Set Panel state(s) to State(s)：设置动态面板的状态转换
•Show Panel(s)：显示动态面板
•Hide Panel(s)：隐藏动态面板
•Toggle Visibility for Panel(s)：切换动态面板可见属性
•Move Panel(s)：移动动态面板，可根据绝对坐标或相对坐标来移动
下面以最常见的Tab标签切换效果来演示动态面板的交互效果。新增一个动态面板，设置两个状态，分别在两个状态中设计成如下小页面：
设置状态1在状态2的前面，状态1的页面显示产品的信息，状态2的页面显示活动的信息，产品、活动等的抬头是用矩形组件设计的，在相应的页面设置单击事件，如在状态1的产品处设置单击事件选择为“设置动态面板的状态转换”，并在动态面板状态管理中设置转换效果为转换至状态1;在状态2的产品处设置单击事件选择为“设置动态面板的状态转换”，并在动态面板状态管理中设置转换效果为转换至状态2.状态1和状态2的小页面设计的不一样，这样切换的时候也会看出状态切换的效果。需要注意的是，上述的单击事件的设置在每个状态的小页面中都需要做相同的设置，可以直接复制粘贴。
全部设置好之后，生成原型即可查看效果。
该例子只用到了矩形组件和动态面板组件，比较简单，如果需要比较美观，可以在动态面板的各个状态小页面上的设计上下功夫，比如改变矩形的显示样式为圆角矩形，改变颜色等，但主要功能是一样的。
【AxureRP动态面板交互设计实例教程】相关文章：
交互页面网页设计10-03
网页设计常见的交互设计错误09-09
网页设计中交互设计的流行趋势10-02
响应交互式网页设计10-03
网页设计中常见的几种交互设计错误09-17
网页设计中的滚动交互新技巧09-24
JAVA的动态考试系统的设计12-03
网页设计与动态数字世界发展趋势10-04
显示器面板特点详解10-05