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的小页面设计的不一样,这样切换的时候也会看出状态切换的效果。需要注意的是,上述的单击事件的设置在每个状态的小页面中都需要做相同的设置,可以直接复制粘贴。

全部设置好之后,生成原型即可查看效果。

该例子只用到了矩形组件和动态面板组件,比较简单,如果需要比较美观,可以在动态面板的各个状态小页面上的设计上下功夫,比如改变矩形的显示样式为圆角矩形,改变颜色等,但主要功能是一样的。

例子在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

评论已关闭!