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

相关推荐

  • Axure从入门到精通-第0课,课程介绍

    紫豆子开始新的教程编写,讲解Axure的使用。还是希望5次课程可以把这个软件讲通。这是一款很容易上手的产品,可能有的人已经会了。我们先看看下面由Axure做的网页是不是有点跟我们见过的Axure不太一样了为什么学这个软件?入门简单,它就像一个大的画布,你可以简单的通过拖拽组建在页面中添加你要放置的内容;不像PS那么难学。可以做一些简单的动画效果;可以让一个组建旋转、移动、缩放、消失、出现等等;可以做一些简单的交互效果;例如点击一个画布中...

    2018-04-29
  • 深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • VR/AR开发程序中直接搜索Sketchfab的3D素材 / Vive Pro 如何买更省钱?/ Vulkan拥有直接内存分配器

    从今天起试试这个新形式,把重点的资讯提炼后合并成一条,欲知详情就摁紧二维码跳转阅读啦。我们依然尽量让这些从外媒翻译过来的信息以最合适的中文翻译方法论润饰和(或)修改后放在这里。有什么好想法新想法告诉我们!【Sketchfab推出新API,3D内容“搜索引擎”可植入VR/AR应用中】Sketchfab今天推出了最新的 Download API(下载API),允许应用开发者直接把Sketchfab内容导入他们的3D、VR和AR软件,这样就无...

    2018-03-21
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • [Mockplus教程]创建

    新建页面可以使用三种方式来实现: 1 点击右边页面树顶部的“+”按钮; 2 在右边页面面板空白处右击,在弹出菜单中选择“新建页面”; 3 直接使用快捷键Ctrl+Enter(MAC系统为Command+Enter)。 下面为三种方式新建页面…

    Mockplus 2015-09-18
  • 交互案例分享-Spring音乐播放器

    在设计流程的过程中,我们往往会把流程设计的越短越好,最好一步完成,这样用户在流程中停留的时间越短,流程的转化率越高。 最近在试用一款叫「Spring」的音乐播放 App,它根据要你要进行的运动类型,节奏频率,偏…

    2014-09-16
  • 【Mockplus教程】Windows上安装Mockplus

    进入摩客官网桌面端下载页面,选择对应的版本(windows/MAC)下载。 下载完成后,即可按照向导开始安装。 windows安装的整个过程见下方视频:  

    2015-08-12
  • 交互译文—清晰度,可读性和可理解性:让用户阅读你的文章

    所谓成本是指:阅读你的文字所带来的长时间、理解内容带来的困惑、混乱的排版所带来的负面情绪等。
    所谓收益是指:阅读你的文字能让我获得的信息内容和质量,以及获得的积极情绪。

    2017-05-31