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

相关推荐

  • 零UI,为无屏交互而设计

    “最好的用户界面就是没有界面”——Golden Krishna“最好的用户界面就是没有界面”——Golden Krishna

    2017-05-08
  • 如何提高用户体验

    不同复杂的需求需不同的设计例如:一个非常简单的优化,不会涉及太多修改和分析,就不需要过多冗余的内容;一个复杂庞大的需求,需要复杂的分析和展现。设计前,需要对需求的复杂度有认知,明确该采用什么方式来展现设计内容。绿色区域很容易触及、黄色代表需要展开,而红色代表用户需要改变设备手持方式将视觉简化,隐藏一切不必要的操作,注定用户认知成本的增加,不利用各个模块的跳转:突出某些功能的同时,也不必避免其他的内容被感知。不同的方式,可视化的表达,体验...

    2018-03-21
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • 好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • APP中使用UI交互设计动效的三个好处

    1.让整个画面充满活力 在界面中加入了动态元素,可以很大的增加用户使用app趣味性,使整个app界面看起来不会那么枯燥,ui设计需要做的就是让 这些动态的元素效果有一种和用户在交流的情感。 来源 来源 来源 2.提高…

    2015-11-11
  • 5种设计策略,让你的UI更加安全稳妥

    安全的设计应该是清晰,简单并且能够引导用户的。

    2017-08-04
  • 独家 | 马化腾:用户体验,比一切事情都大

    内容来源:2017年4月26日下午,“清华-青腾未来科技学堂”发布会在深圳举办,马化腾出席了发布会,并以创业者的身份与在场的青腾学员进行交流,分享腾讯的创业经验。笔记侠经主办方授权发布。责编| Even第1715篇深度好文:2825字 | 3 分钟阅读独家·精华笔记·商业思维本文新鲜度:★★★★+口感:绿茶笔记君邀您,先思考:1、战略选择的第一步是什么?2、怎么通过用户体验打动用户?3、如何从互联网跨界中找到大的商机或蓝海?我非常希望也...

    2018-02-01
  • 用户体验和可用性之间的联系和差异,你都知道吗?

    本文转自本文由优设网作者 :Amy Smith,版权归作者所有阅读需 5 分钟Amy Smith – 最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,这些相互关联,在含义和功能上有所重叠的专业词汇,让许多设计师和相关的从业者感到...

    2018-03-03
  • APP常用导航总结

    虽然我承认导航这种东西在现在的app非常常见,但是实际上,这种东西也不是必须存在的。如果应用够轻,比如雅虎每日新闻News Digest就不存在导航这种东西。只有当app的架构扩大到一定的程度,当内容繁杂到无法展示在一个页面中,这时候才需要用到导航。

    2017-05-31