axure范例优秀word范文 21页.docx
- 文档编号:527849
- 上传时间:2022-10-10
- 格式:DOCX
- 页数:11
- 大小:18.60KB
axure范例优秀word范文 21页.docx
《axure范例优秀word范文 21页.docx》由会员分享,可在线阅读,更多相关《axure范例优秀word范文 21页.docx(11页珍藏版)》请在冰豆网上搜索。
axure范例优秀word范文21页
本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除!
==本文为word格式,下载后可方便编辑和修改!
==
axure范例
篇一:
Axure6交互原型设计详细实例教程
(一)
Axure6.0交互原型设计详细实例教程
(一)
——TAB标签切换的制作
我们通常看到的切换形式为:
工作原理是:
其中,控件和内容一一对应,控件和内容都有两种状态,控件的状态包括“被选中”和“没被选中”,内容的状态为“显示”和“不显示”,当控件的状态为“被选中”时,内容的状态为“显示”,当控件的状态为“没被选中”时,内容的状态为“不显示”。
下面我们来做一个实例,就以上面的图为例子:
第一步,按照TAB切换原理,我们准备好3个按钮和3个内容区,并为三个控件命名(控件A、控件B、控件C),如下图:
注:
图中右侧红圈里面的名字就是控件的名字。
第二步,我们为控件设定“被选中”和“没被选中”两种状态,其中“没被选中”的状态为默认状态,“被选中状态”设置方式如下:
第三步,我们为内容区设定“显示”和“不显示”两种状态,并为三个内容区命名(内容A、内容B、内容C):
好了,准备完毕,下面要做的就是设置交互:
点击“控件A”:
将“控件A”变成“被选中”状态,将“控件B”和“控件C”变成“没被选中”状态;
显示“内容A”,隐藏“内容B”和“内容C”。
点击“控件B”:
将“控件B”变成“被选中”状态,将“控件A”和“控件C”变成“没被选中”状态;
显示“内容B”,隐藏“内容A”和“内容C”。
点击“控件C”:
将“控件C”变成“被选中”状态,将“控件A”和“控件B”变成“没被选中”状态;
显示“内容C”,隐藏“内容A”和“内容B”。
具体实现方式(以点击“控件A”为例):
双击onclick会出现下面的窗口:
点击左侧的“显示面板”,并在最右侧勾选需要显示的面板“内容A”:
点击左侧的“隐藏面板”,并在最右侧勾选需要显示的面板“内容B”和“内容C”:
点击左侧的“将组件设置为选定状态”,并在最右侧勾选“控件A”、“控件B”和“控件C”:
在右下角设定“控件A”的“Selectthevalue”值为“selected”、“控件B”和“控件C”为“default”:
篇二:
Axure交互设计实例介绍
Axure中级互动设计1——控制DynamicPanel控制DynamicPanel1.AxureRP实现更丰富的互动设计2.认识DynamicPanelWidget3.编辑DynamicPanel的状态4.预设DynamicPanel的显示/隐藏5.示范-以Click来开关DynamicPanel6.教学影片1.AxureRP实现更丰富的互动设计网站开发技术越来越丰富了,这是我们正在经历的过程,也是未来的趋势。
不管是AJAX或JavaScript,甚至是Flash、Silverlight、JavaFX,这些都被归类为RIA(RichInternetApplication)的技术,能够让网站介面更丰富,展现更优质的人机互动。
同时,这个趋势也挑战了传统的文书软体或绘图软体,当这些软体受限于仅能表现单一画面与单一状态的情况下,您很难把心目中最友善的互动方式表达清楚并设计出来。
AxureRP与其他的wireframe软体,最大的差异在于能够进行互动设计(InteractionDesign),且可以立即将结果呈现于prototype上,而不是只有文字叙述。
更棒的一点是,学习AxureRP的互动设计,您并不需要学习HTML或JavaScript语法,只要透过一些设定与操作,便可以完成多样而创新的互动介面设计。
在AxureRP设计出来的Prototype中,最简单的互动设计是网页连结,透过滑鼠的click来串起使用者与网站的互动流程。
然而,真正发挥AxureRP在互动设计上的惊人特色,并不是只有连结这么简单的互动,您可以藉由学习DynamicPanel(动态面板)物件的操作与控制,来做到更丰富更友善的互动介面设计。
2.认识DynamicPanelWidgetDynamicPanel(动态面板)这种物件是专门用在设计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物件上按滑鼠右键,并选择「Edit
DynamicPanel->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要了解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的各种互动设计技巧的熟练,您将越来越能随心所欲地设计出各种丰富又兼具创意的互动介面。
Axure中级互动设计2—鼠标移入移出等的互动设计1.滑鼠移入移出(OnMouseEnter/OnMouseOut)2.变换图像(RolloverImage)3.变换样式(RolloverStyle)1.滑鼠移入移出(OnMouseEnter/
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- axure范例优秀word范文 21页 axure 范例 优秀 word 范文 21