AXURE 原型设计教程2——变量控制不同场景的交互演示

该教程适合追求axure功能使用最大化的人,并不是原型设计的目的。追求方便、快速设计交互原型的同学可以无视这篇文章。

实例演示:
演示地址(axure 6 beta生成)

原理:
1. 通过Axure的变量来记录对应的场景
2. 用master 的 onPageLoad 事件根据变量的值来判断dynamic panel对应的state

Ps: 该教程实际上我上一篇变量教程的升级版本,有兴趣的同学可以看这里:Axure 实现网站登录的交互

实例教程:
实例说明:需要设计一个电子商务网站“用户中心”首页的原型。该页面呈现的内容要根据不同用户的情况来显示。比如:用户是vip会员,需要显示vip的标识,用户有一笔需要支付的订单,需要提醒用户有一笔“待支付”订单等等。

1. 分析和整理会产生的的所有场景

1.1 将所有会产生不同场景的条件都罗列出来
当用户进入用户中心首页时:
·如果已经通过实名认证,显示相应的标识
·如果用户已经上传头像,显示头像,否则,则提示用户上传
·如果是2011年的新用户,在公告中显示给新用户营销的信息,否则显示普通的信息
·如果有需要提醒处理的订单,显示提示
·如果是vip用户需要,显示vip的标识

1.2 将这些场景分组,并梳理其中的逻辑关系
AXURE 原型设计教程2——变量控制不同场景的交互演示
Ps:分组可以帮助我分析各种信息展示时的关系,并能够让我们考虑到以后的扩展性

2. 规划Axure的变量和变量值

变量和变量值规划只要能包含所有会出现的场景就可以了。但规划方式的不同将影响影响到axure动作中的逻辑判断的复杂度。

2.1 所有Axure变量,以及变量值对应的关系
AXURE 原型设计教程2——变量控制不同场景的交互演示

2.2 Axure变量组合对应的各种场景
AXURE 原型设计教程2——变量控制不同场景的交互演示

3. 设计“场景控制台”

用户(这里的用户指的是演示这个原型的人,以下同)可以在场景控制台中选择各种场景的组合,来查看对应的交互原型演示
3.1 将可能出现的条件通过Axure的widgets的radio button或者checkbox的方式让用户选择

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.2 同一个选项的radio button(checkbox)设置编组
是否为vip会员为例:

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.2 为每一个radio button(checkbox)命名
是否为vip会员为例: 将“是”的单选框取名为“rb_vip_yes” “否”的单选框取名为“rb_vip_no”

3.3 为“进入demo”按钮添加交互事件,将所有用户的选择记录在变量中
是否为vip会员为例:
3.3.1 为按钮“进入demo”添加交互事件

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.2 添加判断条件:当选中“是否是vip”的单选框“是”时

AXURE 原型设计教程2——变量控制不同场景的交互演示

图5AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.3 选择交互事件,为变量赋值

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.4 点击“open set values editor”按钮打开设置变量面板

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.5 在打开的新窗口中新建变量,变量名为“vip”:

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.6 为变量名“vip” 赋值为“have”(这里的have表示用户选择的条件“是vip用户”)

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.3.7 用同样的办法,将用户的每一种选择都记录在Axure的变量中

AXURE 原型设计教程2——变量控制不同场景的交互演示

提醒:这里值得一提的是,需要把每个else if 改成 if。因为这里需要对每一种情况都判断一次。

AXURE 原型设计教程2——变量控制不同场景的交互演示

3.4 设置动作的最后一步是链接到原型页面:

AXURE 原型设计教程2——变量控制不同场景的交互演示

4. 设计“用户中心”首页的原型

4.1 根据1.2的场景组来设计用户中心首页信息的布局

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.2. 将场景组中的每一个场景封装成一个dynamic panel
以“用户信用、会员体系”场景组为例

AXURE 原型设计教程2——变量控制不同场景的交互演示
每一种显示内容做在一个state中,如上图,
AXURE 原型设计教程2——变量控制不同场景的交互演示

4.3 将场景组封装成的dynamic panel转化为master
以“用户信用、会员体系”场景组为例

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4. 通过master的OnPageLoad事件,判断dynamic panel应该显示哪个state
该事件的作用是当页面加载master时,通过Axure的变量去判断dynamic panel应该显示哪个state。
以判断“只是vip会员”为例
AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.1 为ico这个master添加OnPageLoad事件

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.2 添加判断条件

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.3 设定panel显示哪个state
以判断“只是vip会员”为例

AXURE 原型设计教程2——变量控制不同场景的交互演示

AXURE 原型设计教程2——变量控制不同场景的交互演示

4.4.5 同样的方法,设置完成“用户信用、会员体系”场景组dynamic panel的所有的states

AXURE 原型设计教程2——变量控制不同场景的交互演示
4.4.6 其它场景组也是同样设置

5. 添加变量值监测功能,方便测试
同样是用master的OnPageLoad事件,将变量赋值给文本,这里就不啰嗦。

AXURE 原型设计教程2——变量控制不同场景的交互演示

6. 大功告成:)

附实例源文件:rp文件下载

© jerry的交互设计(未经授权严禁转载,更新于2011年1月23日17点)

AXURE RP 6 即将发布

AXURE RP 6 即将发布
持续了半年的5.6版本,终于等来了AXURE RP 6的消息了!
·AXURE RP 6 将在2011年1月31日发布
·现在你可以下载AXURE RP 6 beta版本来体验了

AXURE RP 6的新功能让我非常兴奋,新版本的改进非常实用,解决了早期版本的许多“顽疾” 比如文字不能编辑行距,制作tab比较繁琐等。以下是我整理的新功能的体验:
1. AXURE RP 6 新增页面属性设置
AXURE RP6 新特性
Page Align: 可以设置原型在浏览器中是水品左对齐还是水品居中,非常实用
Back color/Back Image : 可以设置原型页面的背景颜色和图片
Sketch Effects: 还在羡慕Mockups的手绘风格?AXURE RP 6也可以

2. AXURE RP 6 widgets 在移动和缩放时可以实时看到widgets的坐标和大小
AXURE RP6 新特性
AXURE RP6 新特性
这样移动和调整widgets就更加方便和快捷

3. AXURE RP 6 对文本和widgets的设置更加完整了
AXURE RP6 新特性
Line spacing: 设置文本的行距
Padding: 自定义形状的padding值,和css中的类似

4. AXURE RP 6 ButtonShap 新增加selection group 群组功能
AXURE RP6 新特性
该功能也灰常实用,制作tab一下之变得灰常简单。(文章最后有demo演示)

5. AXURE RP 6 变量的控制更加强大,加入了常用函数的功能
AXURE RP6 新特性
懂变量的童鞋都知道,AXURE RP 6 变量控制的提升会让原型的实现复杂程度又上升一个数量级

6. AXURE RP 6 panel的移动交互变得更加强大
AXURE RP6 新特性
AXURE RP 6的panel移动增加了动画效果,再也不用配合wait time交互方式来制作动画效果。(文章最后有demo演示)

7. AXURE RP 6 pannel增加了Drag的交互方式
AXURE RP6 新特性
具体怎么做拖放效果还在研究中…

8. AXURE RP 6的其它改进
AXURE的specification和notes的功能也有改进,但我用得比较少就没有去研究。除此之外官网的介绍中还在原型中增加了feedback的功能(beta版本没有该功能)

AXURE RP 6 beta panel的move交互演示&ButtonShap 新增加selection group演示
以上演示rp文件

更多AXURE RP 6信息参看这里
AXURE RP 6 beta版本下载

Axure 实现网站登录的交互

原理:

1. 通过变量来记住用户的状态,是处于登录前还是登录后

2. 用master 的 onPageLoad 事件来判断是显示登录前的界面还是登录后的界面

实例:

1. 将设计好登录前和登录后两种界面效果做成dynamic panel的两种state,默认state为未登录的。pannl命名为login

登录前的state命名为no:

登录后的state命名为yes:

2. 添加登录前“登录”按钮的交互事件

2.1

2.2 新建一个变量,“login”

2.3 将该变量login赋值为“yes” 表示已经登录

2.4 添加交互事件

选择reload current page方式

3. 添加登录后“退出”文字链的交互事件

3.1

将该变量login赋值为“no” 表示未登录

4. 将这panel转化成master

5. 为master添加onPageLoad事件

5.1 为交互事件设置引发条件

当变量 login 等于“yes”时,既用户已经登录

5.2 设置交互事件

切换到pannel面板的“yes”state

5.3 同上面的设置

当判断出用户没有登录(变量login等于“no”)切换到dynamic pannel 面板的“no”state

原型图预览

下载源文件

Axure Design Pattern

用了Axure 快一年,基本都是靠摸索和上一些国内使用axure的先驱的博客来学习这款软件。后来发现了Loren Baxter 的Axure Design Pattern,从中学到了不少交互的设计方式。
Axure Design Pattern:

  1. Calendar 月曆
  2. Checkbox List 核取方塊列表
  3. Embedded Video 嵌入視訊檔
  4. Expand / Collapse Animation 動態展開/摺疊
  5. Inline Edit 直接編輯
  6. Lightbox 光箱特效
  7. Live Search 自動完成
  8. Photo Scroller 照片捲軸
  9. Post a Message 張貼訊息
  10. Rating 評分
  11. Tabs 頁籤
  12. ……

更多内容自己下载吧

Axure Design Pattern

同时再附上西贝同学整理的Axure教程网络资料汇集

Axure 果然很强大

在网上看到一些对Axure的溢美之词,所以就下载了个下来玩玩。经非专业鉴定得到的结论是:Axure果然很强大,特别是网页原型的自动生成功能。

对于Axure,我还在处于初级学习阶段,总体感觉还是比较容易上手的。Axure可以比较快速的创建带注释的Wireframe或Flow;甚至可以不用写一句html代码和js直接一键自动生成网页原型和对应的文档,相当赞。它也有些不足的地方,希望以后的版本能解决:物件(widget)的自定义功能还比较弱;菜单的尺寸和定位用起来很不方便,而且锁定功能对它也失效。当然,瑕不掩瑜,Axure的强大功能还是值得交互设计师一用的。