阿西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

相关推荐

  • Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。

      摘要:Force Touch是Apple用于Apple Watch、全新MacBook和13英寸MacBook Pro的一项新的触摸传感技术。通过它,设备可以感知用户点击力度,再根据力度的不同调出相应的不同功能,让用户和设备能够进行更好的…

    2015-03-18
  • 万豪国际集团打造智能交互体验客房

    作为全球酒店业的创新者,万豪国际集团近日携手两大全球领先企业 -- 三星与罗格朗,重磅推出 “智能交互体验客房”,探索有可能提升宾客体验的各种新概念,创造更为高效的客房设计,从而为宾客带来未来酒店体验。宾客可在万豪国际集团“智能交互体验客房”镜子上投射瑜伽练习视频万豪国际集团全球首席商务官Stephanie Linnartz表示:“我们的宾客期望在生活中的方方面面都能获得个性化的体验,酒店入住也是如此。智能交互体验客房使得宾客可以按照自...

    2018-01-30
  • 人工智能对交互设计的影响

    人工智能(Artificial Intelligence),英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能的本质,是数据+算法。人工智能的概念其实已经提出来了60年,中间也经历过很多次虚假的黎明期,为什么说现在人工智能时代真正的黎明呢?这里面有三个原因:首先是大数据和云计算。在数据上,移动互联网的发展,已经把我们生活中的各种信息不断数字化,这些数据储存在云上,就可以被利...

    2018-03-28
  • 交互设计流程(一):需求分析(转自人人都是产品经理)

    本文是系列文章的第一篇,主要从业务需求、用户需求、分解关键因素三个方面来分析。一起来文章中看看吧~进入到腾讯工作后,由于处于广点通广告部门,平时的设计呈现多与业务相关,基本是以B端设计为主,对于传统交互设计的方法论有点生疏了。所以特在此整理,同时也分享给有需要的同学。该系列交互设计文章,抽取工作中需要的核心步骤,预估计有6篇,暂拟定如下内容:交互设计流程一之需求分析交互设计流程二之架构设计交互设计流程三之流程设计交互设计流程四之页面布局...

    2018-05-08
  • 微信小程序的原型设计尝鲜

    "小程序”来了,大世界要变了?微信小程序可能是近期业绩最火的话题之一了。这个根植于微信流量巨无霸的应用,将对应用市场、对微商、电商、对企业的开发成本、获客成本将产生深远影响?将制造出绕开Google Play和Ap…

    2016-10-17
  • 为什么你读了1000篇有关如何改变的文章却从未改变?

    发布者: EVEN 此文是 Eric Barker 的文章。 大多数人其实并没有失败—不做就不会失败。 知道不等于执行。 我写了很多有关让事情变得更好的东西。常见的回应是“我懂。”好吧,如果你看 Jeopardy(智力知识竞赛节目)的…

    2015-03-21
  • 【分享•客户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,客户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-02-11
  • 你应该知道的24种新兴交互设计

    文字原文:一淘UX原文:http://ux.etao.com/posts/570   在互联网这个领域,每天都有不计其数的产品诞生,有些产品只是灵光一现,有的却存活了下来,但是不论存活与否,这些产品上总有一些设计细节让我们眼前…

    2014-12-18
  • 在设计登录注册之前,注意这10个要点能迅速提高用户体验

    有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

    2017-05-26