axure8.0原型设计实例:喜欢向右不喜欢向左

2017年5月2日 阅读:386

喜欢向右不喜欢向左,这个标题不知道大家懂不懂什么意思?这是前一阵子新推出的一款APP,叫做“探探”,这款社交应用的规则是:看到自己喜欢的异性照片,就向右滑,否则向左,如果两人都刚好喜欢对方,就可以聊天交流了。后来这一交互设计被广泛应用很多APP中,甚至包括一些相亲APP,比如“世纪佳缘”。这一章,就是教大家如何使用axure8.0制作这种喜欢向右不喜欢向左这种交互设计。

第一步:拖拉摆放好相关控件

首先,一个手机外壳,一个动态面板

然后,在动态面板的state1中,放置2个动态面板,2条垂直线和2个组合。

1、一个动态面板,命名为“滑动美女”,动态面板有8个面板状态,每个面板状态放一张美女照片以及一些文本标签。

2、另一个动态面板,命名为“备滑美女”,动态面板也有8个面板状态,一样每个面板状态放一张美女照片以及一些文本标签。不过“备滑美女”的美女张片和“滑动美女”的美女照片刚好错位,就是说“备滑美女”的第一张照片是“滑动美女”的第二张照片,“备滑美女”的第二张照片是“滑动美女”的第三张照片,……,“备滑美女”的第八张照片是“滑动美女”的第一张照片。

3、一条垂直线,命名为“左侧”,另一条垂直线,命名为“右侧”,对称放在照片两侧一定距离的地方。

4、一个组合,命名为“不喜欢”,由一个圆形和一个十字形组成。另一个组合,命名为“喜欢”,由一个圆形和一个心形组成。

第二步:为“滑动美女”添加拖动时用例

水平移动“滑动美女”

第三步:为“滑动美女”添加拖动结束时用例

Case1:如果当前元件接触“右侧”

1、线性相对移动“滑动美女”,x轴移动172,时间为500毫秒;

2、等待500毫秒;

3、设置“滑动美女”为next状态,向后循环;

4、隐藏“滑动美女”;

5、移动“滑动美女”回到拖动前位置;

6、显示“滑动美女”;

7、设置“备滑美女”为next状态,向后循环。

Case2:如果当前元件接触“左侧”

1、线性相对移动“滑动美女”,x轴移动-172,时间为500毫秒;

2、等待500毫秒;

3、设置“滑动美女”为next状态,向后循环;

4、隐藏“滑动美女”;

5、移动“滑动美女”回到拖动前位置;

6、显示“滑动美女”;

7、设置“备滑美女”为next状态,向后循环。

Case3:其他情况

1、移动“滑动美女”回到拖动前位置,动画为线性,时间为200毫秒。

第四步:为“不喜欢”组合添加鼠标单击时用例

设置组合允许触发鼠标交互

1、线性相对移动“滑动美女”,x轴移动-272,时间为500毫秒;

2、等待500毫秒;

3、设置“滑动美女”为next状态,向后循环;

4、隐藏“滑动美女”;

5、线性相对移动“滑动美女”,x轴移动272;

6、显示“滑动美女”;

7、设置“备滑美女”为next状态,向后循环。

第五步:为“喜欢”组合添加鼠标单击时用例

设置组合允许触发鼠标交互

1、线性相对移动“滑动美女”,x轴移动272,时间为500毫秒;

2、等待500毫秒;

3、设置“滑动美女”为next状态,向后循环;

4、隐藏“滑动美女”;

5、线性相对移动“滑动美女”,x轴移动-272;

6、显示“滑动美女”;

7、设置“备滑美女”为next状态,向后循环。

点击预览中,左右滑动美女照片,或者点击“不喜欢”按钮和点击“喜欢”按钮,就可以看到交互效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之喜欢向右不喜欢向左
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/05/02/580/

没有评论

评论已关闭。