阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。

国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。

 

1.认识一下JsutinMind里的image,这个动态面板理论上和axure一样

2.我们创建一个5层的动态面板

image

3.选择面板:Panel_2

双击图片更换图片

4.添加交互动作

选择图片后,单击Add Event

image

5.设置条件

image

 

5.在每个图层面板上都要设置上image 这个图片焦点角标,以区分是哪个图片在当前视图。

6.你还可以在自动滑动播放幻灯片时给他加上Duang! 加特效!

image

7.自动循环播放交互

依次添加交互动作:

7.1选择事件:页面载入时

7.2创建变量:J

image

7.3设置事件的动作步骤1先暂停6秒时间

7.4设定值1给变量J

7.5然后自动切换面板,设置动态面板to Panel_2

7.6在图片上方新增一个input输入框的部件,然后设置最底层。接着在动态面板页面载入事件的交互动作里加入最后一个动作就是设置焦点到 上面加入的input输入框部件。

7.7上面已经完成了一张图片所需的所有交互动作如下图所示:

image

7.8后面还有4张幻灯片怎么切换尼?这时候就用到上面7.6加入的input部件了,选择这个部件加入交互事件:

image

简单描述一下7.8 并不复杂,就是同样的交互动作,复制出来4份,我们看一下逻辑:当变量=1时候1.暂停6秒 2.设定变量值=2 3.设置动态面板切换到2,设置焦点给Input部件(没错,每次都要重新获取焦点)。我们默认的那张幻灯片1的交互式页面载入时他的交互动作是暂停6秒,设定值=1)设置动态面板,设置焦点给input部件,这就可以循环播放了。

8.在自动播放的基础上加左右滑动。

image

 

向左滑动就设置第二个面板层,向右滑动还设置为本层,因为是第一层,也可以看自己的要求,循环到第5个。

依次复制交互给5个面板层,每个曾都必须有向左滑动向右滑动的交互,记得修改滑动后的跳转面板。

效果预览

 

demo2

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/4440/

(0)
Smiler李想Smiler李想
上一篇 2015-03-23
下一篇 2015-03-24

相关推荐

  • [自译]VR 设计实践

    在Media Lab的作者分享了他在本科项目中对VR设计实践的一些思考,阅读后能够帮助对虚拟现实中的体验设计建立一些基础的认识,其中对地形特征(terrain features)和标线(reticle)的交互解读让我感觉收获颇多,与…

    交互设计 2016-08-30
  • iOS 9 人机界面指南(五):图标与图形设计

    文章索引译者注:本章是iOS Human Interface Guideline的最后一章,文末附上全文PDF下载地址。译文如有任何疏漏之处,或任何意见或建议,请不吝指出,翻译组感谢大家长久以来的关注和支持!

    2017-05-26
  • 2014年APP分类排行

    纵观全年,在APP应用领域有四大类发展最为迅速,分别是社交、支付、导航以及美化软件。此外,打车软件则是在2014年一新兴产品,该类软件的推出填补了APP领域的一项空白,同时也是用户的一大刚需,在很短时间内就被…

    2015-01-13
  • 【求职招聘】绝对干货

    阿里巴巴1招聘岗位1.数据研发工程师2.java研发工程师3.机器学习算法工程师(研究生及以上)4.客户端开发工程师5.前端开发工程师6.产品经理(对候选人要求高,应聘人数多,淘汰率高,投递前望客观自我评估)7.运营等(对候选人要求高,应聘人数多,淘汰率高,投递前望客观自我评估)2岗位要求计算机与理工科等相关专业,本硕博皆可3岗位说明1.申请过内推、网申、被拒绝过的无法再次内推,请勿投递2.理论上官网上面的实习岗位都可,阿里集团及下属公...

    2018-03-26
  • Mockplus原型交互跟我做之8 - 使用交互状态,快速搞定简单交互

    Mockplus交互 = 页面链接 + 组件交互 +交互状态。

    2016-02-18
  • 如何正确提示用户进行评价应用

    设计文章 / 交互设计 | 2014-10-15 | 来源:woshipm | 发布者: GUImobile 在App里提示用户“给应用打分”的做法已经相当普遍。但正因为它太普遍了,用户一直被各种评价请求骚扰。我并不认为用户会介意给他们喜欢,并且…

    2014-10-15
  • 026.Axure RP中线条的设置

    (本文出自萧何)

    2014-09-11
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 平面设计里怎样提高作品的视觉冲击力?

    提高视觉冲击力的方法非常非常多,我将结合下我的平面设计经验,总结归纳一下我所学习到的平面设计理论。我一直觉得学习平面设计不能只着眼于平面,应该让眼光开阔些,所以我下面的一些例子会从传统平面海报,绘画,建筑,电影等各个方面来分析设计原则。

    2017-05-17