axure教程十一如何控制Dynamic Panel.docx
- 文档编号:11929349
- 上传时间:2023-04-16
- 格式:DOCX
- 页数:19
- 大小:173.78KB
axure教程十一如何控制Dynamic Panel.docx
《axure教程十一如何控制Dynamic Panel.docx》由会员分享,可在线阅读,更多相关《axure教程十一如何控制Dynamic Panel.docx(19页珍藏版)》请在冰豆网上搜索。
axure教程十一如何控制DynamicPanel
axure教程(十一)如何控制DynamicPanel
axure发表于227天21小时36分钟前
来源:
标签:
DynamicPanelaxureAxure教程
控制DynamicPanel
1.AxureRP实现更丰富的交互设计
2.认识DynamicPanelWidget
3.编辑DynamicPanel的状态
4.预设DynamicPanel的显示/隐藏
5.示范-以Click来开关DynamicPanel
1.AxureRP实现更丰富的交互设计
网站开发技术越来越丰富了,这是我们正在经历的过程,也是未来的趋势。
不管是AJAX或JavaScript,甚至是Flash、Silverlight、JavaFX,这些都被归类为RIA(RichInternetApplication)的技术,能够让网站介面更丰富,展现更优质的人机交互。
同时,这个趋势也挑战了传统的文书软件或绘图软件,当这些软件受限于仅能表现单一画面与单一状态的情况下,您很难把心目中最友善的交互方式表达清楚并设计出来。
AxureRP与其它的wireframe软件,最大的差异在于能够进行交互设计(InteractionDesign),且可以立即将结果呈现于prototype上,而不是只有文字叙述。
更棒的一点是,学习AxureRP的交互设计,您并不需要学习HTML或JavaScript语法,只要透过一些设定与操作,便可以完成多样而创新的交互介面设计。
在AxureRP设计出来的Prototype中,最简单的交互设计是网页连结,透过鼠标的click来串起使用者与网站的交互流程。
然而,真正发挥AxureRP在交互设计上的惊人特色,并不是只有连结这么简单的交互,您可以藉由学习DynamicPanel(动态面板)对象的操作与控制,来做到更丰富更友善的交互介面设计。
2.认识DynamicPanelWidget
DynamicPanel(动态面板)这种对象是专门用在设计Prototype动态功能的Widget,DynamicPanel可以包含一或多个状态(State),每个状态本身是一个小页面,藉由控制状态(State)的顺序或隐藏/显示DynamicPanel来达成交互介面的整个表现。
就像其它Widget一样,DynamicPanel可以用拖放的方式从Wireframe窗格加入到画布中。
学习DynamicPanel的交互设计之前,有2个重要的概念必须先认识:
(1)DynamicPanel(动态面板):
一种透明的对象,本身可以包含很多个状态(State),而每个状态都是一个小网页。
被放置在最上层的状态就是该面板的长相。
(2)State(状态):
每个状态都是一个小网页,而这个小网页的边界与大小,与所属的DynamicPanel大小相同。
不同的State可以重迭在同一个DynamicPanel里头,唯有被控制放在最上层的State,才会呈现于Prototype的画面中。
以AxureRP所设计出来的多样交互介面,大多藉由各种触发事件(Event)来控制DynamicPanel显示或消失,或控制哪个State在最上层来仿真出实际的交互介面。
3.编辑DynamicPanel的State(状态)
已经摆放到画布中的DynamicPanel,直接在上头快速点鼠标左键两下,会开启「DynamicPanelStateManager」对话框。
在这个对话窗口中,您可以新增State、更改State名称、调整State排序、移除State与编辑State。
在「DynamicPanelStateManager」对话框中选择一个PanelState,然后按下【EditState】钮,会开启这个PanelState的Wireframe以供设计。
或者您可以选择【EditAllStates】钮,一口气把所有的状态页面通通开启。
开启后,您就可以像设计其它Wireframe一样的设计状态页面(State),每个状态页面的侧边蓝色虚线外框就表示DynamicPanel的边界。
4.预设DynamicPanel的显示/隐藏
DynamicPanel可以预设为隐藏(Hidden),作法是在DynamicPanel对象上按鼠标右键,并选择「EditDynamicPanel->SetHidden」,这样就可以隐藏Panel的内容,而且DynamicPanel的屏蔽也会从蓝色变成黄色。
已经预设隐藏的DynamicPanel,可以选择「EditDynamicPanel->SetVisible」来显示DynamicPanel。
DynamicPanel可以藉由接下来所介绍的交互模式,动态控制在Prototype中的显示或隐藏。
AxureRP提供交互设计的实现方式,都在「InteractionCaseProperties」对话框中设定(请参考初级交互设计)。
其中有5种交互方式(Action)是专门用来控制DynamicPanel的,分别是:
∙SetPanelstate(s)toState(s):
将某个DynamicPanel的State设定为该Panel的显示状态
∙ShowPanel(s):
显示(设为visible)一或多个DynamicPanel
∙HidePanel(s):
隐藏一或多个DynamicPanel
∙ToggleVisibilityforPanel(s):
根据目前的显示状态来显示或隐藏DynamicPanel
∙MovePanel(s):
移动DynamicPanel,可根据绝对坐标或相对坐标来移动
5.示范-以Click来开关DynamicPanel
》下载这个示范rp檔(MyFirstPanel.zip,52k)
》教学影片-开关DynamicPanel交互设计51秒
要了解DynamicPanel的交互控制,我们先来模拟一个Click的效果-当鼠标Click页面上的矩形时,会出现一个讯息窗口,再Click一次时,又把讯息窗口隐藏起来。
换句话说,我们将藉由鼠标Click来控制DynamicPanel的显示与隐藏。
首先我们先在画布上放一个矩形对象。
接下来放置一个DynamicPanel,并且编辑这个Panel唯一的预设状态(State1)。
在State1(状态)的wireframe上,随意加入一些文字,以供辨认。
再把DynamicPanel的显示状态,设定为隐藏(Hidden)。
然后,在矩形对象上增加一个OnClick的InteractionCase。
先选择矩形对象,接着click两下“OnClick”,弹出「InteractionCaseProperties」交互设计的对话框。
分别针对这个对话框中的Step1-3做交互设计的设定:
step1:
Description-预设为Case1,不用变更。
step2:
SelectActions-勾选ToggleVisibilityforPanel(s),此时在step3会出现ToggleVisibilityforPanel。
如下图:
接下来…
step3:
EdittheActiondescription(clickanunderlinedvaluetoedit)-这句话的意思是,去点选有加底线的项目进一步编辑。
于是我们接着clickPanel这个单字,然后会看到弹出一个「SelectPanels」对话框,里头只有一个叫做”MyFirstPanel”的项目,把它勾选起来。
此时在step3会出现ToggleVisibilityforMyFirstPanel。
(如下图)
如果您曾经给DynamicPanel有意义的名称,就可以在SelectPanel时看到被您命名过的Panel。
选择DynamicPanel时,DynamicPanel会以Annotations&Interactions窗格中所给予的Label做为识别,如果没有指定的话,DynamicPanel会预设标示为”Unlabeled”。
接下来,就可以输出Prototype了,按下F5或选择「Generate>Prototype」,将刚刚设计过的简易交互介面,输出到浏览器上进一步检视,当鼠标click时,您所设计的那个DynamicPanel是否会消失/出现(如下图)。
当您顺利完成这个DynamicPanel的设定之后,非常恭喜!
您已经成功进阶到AxureRP中级交互设计了,随着DynamicPanel的各种交互设计技巧的熟练,您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面。
∙一.认识AxureRP
∙二.下载/安装
o安装授权序号
∙三.AxureRP基本操作
o示意图及批注
o初级交互设计
o使用共享区块(Master)
o输出网站/应用程序原型
o输出规格文件(Word)
∙四.架构图&流程图
o1-click绘制架构图
o流程图&连接线
∙五.中级交互设计
o控制DynamicPanel
o鼠标移入移出及图像变换的交互设计
o设计多层选单
∙首页
∙>
∙在线教程
∙>
∙五.中级交互设计
∙>
∙控制DynamicPanel
控制DynamicPanel
1.AxureRP实现更丰富的交互设计
2.认识DynamicPanelWidget
3.编辑DynamicPanel的状态
4.预设DynamicPanel的显示/隐藏
5.示范-以Click来开关DynamicPanel
6.教学影片
》教学影片-开关DynamicPanel交互设计51秒
》教学影片3分55秒
1.AxureRP实现更丰富的交互设计
网站开发技术越来越丰富了,这是我们正在经历的过程,也是未来的趋势。
不管是AJAX或JavaScript,甚至是Flash、Silverlight、JavaFX,这些都被归类为RIA(RichInternetApplication)的技术,能够让网站介面更丰富,展现更优质的人机交互。
同时,这个趋势也挑战了传统的文书软件或绘图软件,当这些软件受限于仅能表现单一画面与单一状态的情况下,您很难把心目中最友善的交互方式表达清楚并设计出来。
AxureRP与其它的wireframe软件,最大的差异在于能够进行交互设计(InteractionDesign),且可以立即将结果呈现于prototype上,而不是只有文字叙述。
更棒的一点是,学习AxureRP的交互设计,您并不需要学习HTML或JavaScript语法,只要透过一些设定与操作,便可以完成多样而创新的交互介面设计。
在AxureRP设计出来的Prototype中,最简单的交互设计是网页连结,透过鼠标的click来串起使用者与网站的交互流程。
然而,真正发挥AxureRP在交互设计上的惊人特色,并不是只有连结这么简单的交互,您可以藉由学习DynamicPanel(动态面板)对象的操作与控制,来做到更丰富更友善的交互介面设计。
2.认识DynamicPanelWidget
DynamicPanel(动态面板)这种对象是专门用在设计Prototype动态功能的Widget,DynamicPanel可以包含一或多个状态(State),每个状态本身是一个小页面,藉由控制状态(State)的顺序或隐藏/显示DynamicPanel来达成交互介面的整个表现。
就像其它Widget一样,DynamicPanel可以用拖放的方式从Wireframe窗格加入到画布中。
学习DynamicPanel的交互设计之前,有2个重要的概念必须先认识:
(1)DynamicPanel(动态面板):
一种透明的对象,本身可以包含很多个状态(State),而每个状态都是一个小网页。
被放置在最上层的状态就是该面板的长相。
(2)State(状态):
每个状态都是一个小网页,而这个小网页的边界与大小,与所属的DynamicPanel大小相同。
不同的State可以重迭在同一个DynamicPanel里头,唯有被控制放在最上层的State,才会呈现于Prototype的画面中。
以AxureRP所设计出来的多样交互介面,大多藉由各种触发事件(Event)来控制DynamicPanel显示或消失,或控制哪个State在最上层来仿真出实际的交互介面。
3.编辑DynamicPanel的State(状态)
已经摆放到画布中的DynamicPanel,直接在上头快速点鼠标左键两下,会开启「DynamicPanelStateManager」对话框。
在这个对话窗口中,您可以新增State、更改State名称、调整State排序、移除State与编辑State。
在「DynamicPanelStateManager」对话框中选择一个PanelState,然后按下【EditState】钮,会开启这个PanelState的Wireframe以供设计。
或者您可以选择【EditAllStates】钮,一口气把所有的状态页面通通开启。
开启后,您就可以像设计其它Wireframe一样的设计状态页面(State),每个状态页面的侧边蓝色虚线外框就表示DynamicPanel的边界。
4.预设DynamicPanel的显示/隐藏
DynamicPanel可以预设为隐藏(Hidden),作法是在DynamicPanel对象上按鼠标右键,并选择「EditDynamicPanel->SetHidden」,这样就可以隐藏Panel的内容,而且DynamicPanel的屏蔽也会从蓝色变成黄色。
已经预设隐藏的DynamicPanel,可以选择「EditDynamicPanel->SetVisible」来显示DynamicPanel。
DynamicPanel可以藉由接下来所介绍的交互模式,动态控制在Prototype中的显示或隐藏。
AxureRP提供交互设计的实现方式,都在「InteractionCaseProperties」对话框中设定(请参考初级交互设计)。
其中有5种交互方式(Action)是专门用来控制DynamicPanel的,分别是:
∙SetPanelstate(s)toState(s):
将某个DynamicPanel的State设定为该Panel的显示状态
∙ShowPanel(s):
显示(设为visible)一或多个DynamicPanel
∙HidePanel(s):
隐藏一或多个DynamicPanel
∙ToggleVisibilityforPanel(s):
根据目前的显示状态来显示或隐藏DynamicPanel
∙MovePanel(s):
移动DynamicPanel,可根据绝对坐标或相对坐标来移动
5.示范-以Click来开关DynamicPanel
》下载这个示范rp檔(MyFirstPanel.zip,52k)
》教学影片-开关DynamicPanel交互设计51秒
要了解DynamicPanel的交互控制,我们先来模拟一个Click的效果-当鼠标Click页面上的矩形时,会出现一个讯息窗口,再Click一次时,又把讯息窗口隐藏起来。
换句话说,我们将藉由鼠标Click来控制DynamicPanel的显示与隐藏。
首先我们先在画布上放一个矩形对象。
接下来放置一个DynamicPanel,并且编辑这个Panel唯一的预设状态(State1)。
在State1(状态)的wireframe上,随意加入一些文字,以供辨认。
再把DynamicPanel的显示状态,设定为隐藏(Hidden)。
然后,在矩形对象上增加一个OnClick的InteractionCase。
先选择矩形对象,接着click两下“OnClick”,弹出「InteractionCaseProperties」交互设计的对话框。
分别针对这个对话框中的Step1-3做交互设计的设定:
step1:
Description-预设为Case1,不用变更。
step2:
SelectActions-勾选ToggleVisibilityforPanel(s),此时在step3会出现ToggleVisibilityforPanel。
如下图:
接下来…
step3:
EdittheActiondescription(clickanunderlinedvaluetoedit)-这句话的意思是,去点选有加底线的项目进一步编辑。
于是我们接着clickPanel这个单字,然后会看到弹出一个「SelectPanels」对话框,里头只有一个叫做”MyFirstPanel”的项目,把它勾选起来。
此时在step3会出现ToggleVisibilityforMyFirstPanel。
(如下图)
如果您曾经给DynamicPanel有意义的名称,就可以在SelectPanel时看到被您命名过的Panel。
选择DynamicPanel时,DynamicPanel会以Annotations&Interactions窗格中所给予的Label做为识别,如果没有指定的话,DynamicPanel会预设标示为”Unlabeled”。
接下来,就可以输出Prototype了,按下F5或选择「Generate>Prototype」,将刚刚设计过的简易交互介面,输出到浏览器上进一步检视,当鼠标click时,您所设计的那个DynamicPanel是否会消失/出现(如下图)。
当您顺利完成这个DynamicPanel的设定之后,非常恭喜!
您已经成功进阶到AxureRP中级交互设计了,随着DynamicPanel的各种交互设计技巧的熟练,您将越来越能随心所欲地设计出各种丰富又兼具创意的交互介面
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- axure教程十一如何控制Dynamic Panel axure 教程 十一 如何 控制 Dynamic