Axure初中高级交互实例 联系客服

发布时间 : 星期日 文章Axure初中高级交互实例更新完毕开始阅读36115b0cf12d2af90242e6f7

7. Show Panel(s) 显示Dynamic Panel 8. Hide Panel(s) 隐藏Dynamic Panel 9. Toggle Visibitdty for Panel(s) 切换Dynamic Panel显示或隐藏 10. Move Panel(s) 移动Dynamic Panel 11. Set Variable and Widget value(s) equal to Value(s) 设定变量或Widget 的值 12. Open link in Parent Frame 开启网页在上层内嵌框架中 13. Scroll to Image Map Region 卷动画面到Image Map的位置 14. Enable Widget(s) 把Widgets变成可用状态 15. Disable Widget(s) 把Widgets变成变成不可用状态 16. Wait Time(s) 动作之前先等候(毫秒) 17. Other 以文字说明来描述实际动作 4. 多重假设条件(Multiple Cases)

一个触发事件(Event)可以加入多个假设条件(Multiple Cases),以进行不同条件判断的差异化流程或交互表现。

举例来说,您可以在一个按钮的OnClick触发事件中加入两个假设条件,第一个假设 条件 Case 1 命名为 “If Yes”,选择这个假设条件时会开

启第一页;第二个假设条件 Case 2 命名为 “If No”,选择这个假设条件时会开启第二页。

当按纽在Prototype中被按下时,会显示出这两个条件的说明(”If Yes” 与”If No”),此

时点选其中一个条件的说明,就会执行该条件所关连的动作。

使用条件说明可以有效沟通条件流程,但是,如果需要建立一个高亲合力的Prototype,则必需在条件中定义条件逻辑,根据在窗体Widget中 输

入的值或变量值来执行动作,这个主题将会在高级交互设计做深入的说明。

5. 网页层级的交互: OnPageLoad

Axure RP支持一个网页层级的触发事件(Event)-OnPageLoad,这个触发事件发生在Prototype载入网页时。

OnPageLoad 交互必须在Page Notes 窗格的Interactions 窗格中定义,

加入假设条件的方式与在Widget中相同。

OnPageLoad 触发事件(Event)会在OnPageLoad Event的介绍中做深入的说明。

6. 秘技(Quick Tips)

秘技一. 快速连结(Quick Link)

选择 Widget ,然后按一下Interactions 窗格中的「Quick Link」并选择目标网页,可以快速地在Widget中加入一个基本连结。

秘技二. 连结外部实际网址或网页

你可以让prototype的hyperlink动作去连结到外部的实际网址或网页。

如果使用Axure RP 5.0版

在「Link Properties」对话框中指定网页连结的时候,勾选「Link to an external url or file」选项,然后在「Hyperlink」字段指定一个外部

实际网址的URL。

如果使用Axure RP 4.6版

在「Link Properties」对话框中指定网页连结的时候,取消勾选「Link to a page in this design」选项,然后在「Hyperlink」字段指定一个

外部实际网址的URL。

秘技三. 重复应用类似的交互设计

如果你要进行一连串类似的交互设定,可以在Interaction窗格上,对着某个Case按鼠标右键选择”Copy”的动作,然后到你想加上交互 设定的

另一个Case,以鼠标右键选”Paste”动作,然后再修改这个新的交互设定。如此一来,就可以更快速的完成对象的交互设定。

xure中级互动设计 1——控制Dynamic Panel 控制Dynamic Panel

1. Axure RP实现更丰富的互动设计 2. 认识Dynamic Panel Widget 3. 编辑Dynamic Panel 的状态 4. 预设Dynamic Panel的显示/隐藏 5. 示范-以Click来开关Dynamic Panel 6. 教学影片

1. Axure RP实现更丰富的互动设计

网站开发技术越来越丰富了,这是我们正在经历的过程,也是未来的趋势。

不管是AJAX或JavaScript,甚至是 Flash、Silverlight、JavaFX,这些都被归类为RIA(Rich Internet Application)的技术,能够让网站介面更丰富,展现更优质的人机互动。

同时,这个趋势也挑战了传统的文书软体或绘图软体,当这些软体受限于仅能表现单一画面与单一状态的情况下,您很难把心目中最友善的互动方式表达清楚并设计出来。

Axure RP与其他的wireframe软体,最大的差异在于能够进行互动设计(Interaction Design),且可以立即将结果呈现于prototype上,而不是只有文字叙述。更棒的一点是,学习Axure RP的互动设计,您并不需要学习HTML或Java Script语法,只要透过一些设定与操作,便可以完成多样而创新的互动介面设计。

在Axure RP设计出来的Prototype中,最简单的互动设计是网页连结,透过滑鼠的click来串起使用者与网站的互动流程。然而,真正发挥Axure RP在互动设计上的惊人特色,并不是只有连结这么简单的互动,您可以藉由学习Dynamic Panel (动态面板)物件的操作与控制,来做到更丰富更友善的互动介面设计。

2. 认识Dynamic Panel Widget

Dynamic Panel (动态面板) 这种物件是专门用在设计Prototype动态功能的Widget,Dynamic Panel可以包含一或多个状态(State),每个状态本身是一个小页面,藉由控制状态(State)的顺序或隐藏/显示Dynamic Panel来达成互动介面的整个表现。

就像其他Widget一样,Dynamic Panel可以用拖放的方式从Wireframe窗格加入到画布中。

学习Dynamic Panel的互动设计之前,有2个重要的概念必须先认识: (1) Dynamic Panel (动态面板):

一种透明的物件,本身可以包含很多个状态 (State),而每个状态都是一个小网页。被放置在最上层的状态就是该面板的长相。 (2) State (状态):

每个状态都是一个小网页,而这个小网页的边界与大小,与所属的Dynamic Panel大小相同。不同的State可以重叠在同一个Dynamic Panel里头,唯有被控制放在最上层的State,才会呈现于Prototype的画面中。

以Axure RP所设计出来的多样互动介面,大多藉由各种触发事件(Event)来控制Dynamic Panel显示或消失,或控制哪个State在最上层来模拟出实际的互动介面。 3. 编辑Dynamic Panel 的State(状态)

已经摆放到画布中的Dynamic Panel,直接在上头快速点滑鼠左键两下,会开启「Dynamic Panel State Manager」对话方块。在这个对话视窗中,您可以新增State、更改 State名称、调整State排序、移除State与编辑State。