axure 7.0 实例:移动app/网页下拉刷新列表

作者: iam3y.com 分类: Axure实例 发布时间: 2015-01-15 13:51 ė 6没有评论

axure 是产品从业人员经常用到的一个工具,也是刚入门产品经理长捣鼓的软件之一,好的原型工具能够帮我们快速表达产品意图,但过于细致地扣产品的原型而忽略了产品的方向、体验,也是得不偿失的。所以在使用原型工具的时候,要把握好“高保真”与“低粗糙”原型之间的取舍。

 

这个栏目,主要记录一些自己做原型工具的一些学习过程。

 

axure 7.0 实例之 — 下拉刷新列表。

 

在app 或者移动网页里,下拉刷新是非常常见的一种交互,那我们要如何在原型工具里做到这种下拉刷新效果呢?

 

有几个要点,拖动、延迟、释放拖动、改变状态、延迟、回位。

 

1、首先,拖一个手机模型。

QQ20150115-1

2、在手机屏幕的区域,放置一个动态面板(dynamic panel),设置宽高与屏幕相同(这里我们设定320*568),命名为all ,state 命名也为all,作用是把所有的内容都装在这个panel 里进行操作,这样能统一控制。

QQ20150115-2

 

3、往panel [all] 里放一个dynamic panel,命名为 screen,屏幕同宽(320px),但高度比屏幕高度稍高50px,这50px用户存放刷新提示,所以宽高是 320*618 ,位置为 x:0 y:-50(为了在不刷新的状态下隐藏刷新提示)

QQ20150115-3

4、往panel[screen] 里先放一个dynamic panel,命名为 refresh_tips ,宽高为 320*50,用于存放提示,它有两个状态,drag(拖)、drop(放)。

QQ20150115-4

 

5、往state [drag] 里放一个文本 “下拉刷新列表”,往 state[drop] 里放一个文本“释放刷新列表”

QQ20150115-6

6、往panel[screen] 里先放一个dynamic panel,命名为 content ,宽高为 320*568,有两个states,一个是refresh_before用于存放刷新前的内容,一个是refresh_after ,即刷新后的内容。

QQ20150115-5

 

 

 

内容一切就绪之后,开始定义事件。

 

1、定义panel[all] 的 OnDrag 事件,with drag y,让screen 跟着手势向下移动。

QQ20150115-13

 

2、定义释放的时候的时间,也就是 OnDragDrop

2.1、panel [refresh_tips] 的state 切换到 drop 状态。

QQ20150115-8

 

2.2、为了伪造“刷新中”的状态,我们设置一个延迟,延迟时间1000ms.

QQ20150115-9

 

3、刷新完成,显示panel 的refresh_after状态。

QQ20150115-10

 

4、下一步是收起刷新提示,设置一个延时,这样刷新提示不会消失得太突兀。

5、把screen 向上移动到坐标 x:0,y:-50,复原其状态

6、把refresh_tips 设置到 drag的状态,下一次拖放的时候它就会出来了。

QQ20150115-12

 

 

至此,所有事件都设置完毕,按照顺序下来,应该如下图:

QQ20150115-14

 

 

 

以上就是用axure 7.0 做手机下拉刷新列表的交互步骤了。

 

效果图:

 

QQ20150115-15

 

 

预览 | 下载 

 

 

 

 

本文出自 IT P民,转载时请注明出处及相应链接。

本文永久链接: http://www.iam3y.com/?p=1232

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Ɣ回顶部