欢迎来到天天文库
浏览记录
ID:14312993
大小:955.63 KB
页数:26页
时间:2018-07-27
《axure交互设计实例介绍》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、Axure中级互动设计1——控制DynamicPanel控制DynamicPanel1.AxureRP实现更丰富的互动设计2.认识DynamicPanelWidget3.编辑DynamicPanel的状态4.预设DynamicPanel的显示/隐藏5.示范-以Click来开关DynamicPanel6.教学影片1.AxureRP实现更丰富的互动设计网站开发技术越来越丰富了,这是我们正在经历的过程,也是未来的趋势。不管是AJAX或JavaScript,甚至是Flash、Silverlight、JavaFX,这些都被归类为RIA(RichInternetApp
2、lication)的技术,能够让网站介面更丰富,展现更优质的人机互动。同时,这个趋势也挑战了传统的文书软体或绘图软体,当这些软体受限于仅能表现单一画面与单一状态的情况下,您很难把心目中最友善的互动方式表达清楚并设计出来。AxureRP与其他的wireframe软体,最大的差异在于能够进行互动设计(InteractionDesign),且可以立即将结果呈现于prototype上,而不是只有文字叙述。更棒的一点是,学习AxureRP的互动设计,您并不需要学习HTML或JavaScript语法,只要透过一些设定与操作,便可以完成多样而创新的互动介面设计。在Axu
3、reRP设计出来的Prototype中,最简单的互动设计是网页连结,透过滑鼠的click来串起使用者与网站的互动流程。然而,真正发挥AxureRP在互动设计上的惊人特色,并不是只有连结这么简单的互动,您可以藉由学习DynamicPanel(动态面板)物件的操作与控制,来做到更丰富更友善的互动介面设计。2.认识DynamicPanelWidgetDynamicPanel(动态面板)这种物件是专门用在设计Prototype动态功能的Widget,DynamicPanel可以包含一或多个状态(State),每个状态本身是一个小页面,藉由控制状态(State)的顺
4、序或隐藏/显示DynamicPanel来达成互动介面的整个表现。就像其他Widget一样,DynamicPanel可以用拖放的方式从Wireframe窗格加入到画布中。学习DynamicPanel的互动设计之前,有2个重要的概念必须先认识:(1)DynamicPanel(动态面板):一种透明的物件,本身可以包含很多个状态(State),而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。(2)State(状态):每个状态都是一个小网页,而这个小网页的边界与大小,与所属的DynamicPanel大小相同。不同的State可以重叠在同一个Dynam
5、icPanel里头,唯有被控制放在最上层的State,才会呈现于Prototype的画面中。以AxureRP所设计出来的多样互动介面,大多藉由各种触发事件(Event)来控制DynamicPanel显示或消失,或控制哪个State在最上层来模拟出实际的互动介面。3.编辑DynamicPanel的State(状态)已经摆放到画布中的DynamicPanel,直接在上头快速点滑鼠左键两下,会开启「DynamicPanelStateManager」对话方块。在这个对话视窗中,您可以新增State、更改State名称、调整State排序、移除State与编辑Sta
6、te。在「DynamicPanelStateManager」对话方块中选择一个PanelState,然后按下【EditState】钮,会开启这个PanelState的Wireframe以供设计。或者您可以选择【EditAllStates】钮,一口气把所有的状态页面通通开启。开启后,您就可以像设计其他Wireframe一样的设计状态页面(State),每个状态页面的侧边蓝色虚线外框就表示DynamicPanel的边界。4.预设DynamicPanel的显示/隐藏DynamicPanel可以预设为隐藏(Hidden),作法是在DynamicPanel物件上按滑
7、鼠右键,并选择「EditDynamicPanel->SetHidden」,这样就可以隐藏Panel的内容,而且DynamicPanel的遮罩也会从蓝色变成黄色。已经预设隐藏的DynamicPanel,可以选择「EditDynamicPanel->SetVisible」来显示DynamicPanel。DynamicPanel可以藉由接下来所介绍的互动模式,动态控制在Prototype中的显示或隐藏。AxureRP提供互动设计的实现方式,都在「InteractionCaseProperties」对话方块中设定(请参考初级互动设计)。其中有5种互动方式(Acti
8、on)是专门用来控制DynamicPanel的,分别是:*SetP
此文档下载收益归作者所有