如何使用Axure模拟手机上的左右滑动切换视图
白羽 2018-05-29 来源 :网络 阅读 4366 评论 0

摘要:本文将带你了解如何使用Axure模拟手机上的左右滑动切换视图,希望本文对大家学Axure有所帮助。


“只使用Axure的默认控件(Wireframe),不要用那些样式花哨的自定义控件,并且所有页面中使用的颜色不能超过5种(不同灰度的灰色也算一种颜色)。然后,在交互动作方面,务必要做到尽可能的全真。交互动作是开发过程中最容易出现理解误差的产品设计要素,因此务必有一份详实、形象的文档来进行阐述。用Axure来解决,真是再适合不过了。”

 

1 模拟手机上的左右滑动切换视图

示例页面://share.axure.com/D8AI7T

(1)新建一个工程,在page1里放个iphone背景图,拖一个Dynamic Panel上去。

 如何使用Axure模拟手机上的左右滑动切换视图

(2)在右下角的Dynamic Panel Manager里右键State1,Edit。

 如何使用Axure模拟手机上的左右滑动切换视图

(3)再拖放个DynamicPanel上去,大小是原大小的两倍。同理也在state1上右键Edit。左右各放一个东东标示滑动的左右页面。我这里放了一个图片和PlaceHolder。

 

如何使用Axure模拟手机上的左右滑动切换视图

(4)至此布局完成,下面添加事件,回到State1(Page1)页,选中Dynamic Panel。在右侧的Interaction里添加SwipeLeft和SwipeRight事件。

 如何使用Axure模拟手机上的左右滑动切换视图

(5)如下图,添加的事件为Move Panel,把我们这个有两幅图片的Panel坐标偏移140px,同时是线性的在500ms内完成移动就可以达到效果。

 如何使用Axure模拟手机上的左右滑动切换视图

移动位置有两种方式:(to 绝对位移)或者(by 相对位移)可以达到同样的效果。

绝对移动是将动态面板移动到一个固定的坐标,相对移动是将动态面板沿左/上移动相应距离。若动态面板移动到一个固定的位置或者可以获取准确的位置数据,推荐使用绝对移动,因为相对移动较容易出现多次点击会连续移动的bug。二者区别及适用情况需要在交互动作制作过程中多多体会。


动画有“挥动”“线性”“缓慢结束”“弹跳”等多种动作方式可供选择,可根据实际需要进行设置,要符合我们设计交互的需求。

 

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标常用软件之Axure频道!

本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 3
看完这篇文章有何感觉?已经有4人表态,25%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程