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

相关推荐

  • 艾璐斯刘光有:用户体验为先 九字方针瞄准盈利点

    2018年3月2日下午,由慧聪网主办、慧聪汽车用品网承办、广东哈弗石油能源股份有限公司总冠名的哈弗润滑油杯’2017年度汽车用品行业品牌盛会颁奖盛典在北京钓鱼台国宾馆芳华苑隆重举行,来自汽车后市场商(协)会领导、获奖企业代表、渠道商、终端门店精英、主流媒体记者等嘉宾共聚一堂,聚焦汽车用品行业热点话题,全面解读行业最新发展趋势,推动汽车后市场快速有序发展!香港艾璐斯实业有限公司总经理刘光有行业盛典现场嘉宾共聚一堂在本次盛会上,香港艾璐斯实...

    2018-03-06
  • 交互设计控件之按钮设计

    ♝点击上方“交互设计学堂”关注我们,送电子书一.主按钮和次按钮很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。主次按…

    2017-08-04
  • 陌陌:不全面商业化 不伤害用户体验

    关注订阅号“电商大世界”,海量电商资讯文章打包阅读以下文章数据,由电商大世界 "AI-贝贝",采集、分拣,由编辑 北风整理发布。电商本周要闻:阿里慧聪两大人事变动阿里巴巴B2B事业群总裁戴珊接任速卖通阿里巴巴集团合伙人、B2B事业群总裁戴珊将直接负责全球速卖通业务,而原阿里巴巴全球速卖通总经理沈涤凡,将出任阿里健康CEO。据了解,全球化战略是阿里未来20年的三大核心战略之一。业内人士认为,戴珊此次接任速卖通业务,不仅说明以速卖通为代表的...

    2018-04-01
  • 产品经理的末路,交互设计的穷途

    2016年上半年我跟进了几个项目,“开始众筹”、“finger”、“分答”和“袋鼠云”,“袋鼠云”是企业级服务,前面三个是toC的服务,在为这些老板提供支持的时候,问他们需要什么人才,都说需要技术大牛和运营大神,没有一个提…

    2017-08-02
  • 在互金个人理财爆发之前,以UX方法进行货币基金体验设计

    以业务模式和产品生命周期为核心的方法论所构建的功能模型完备而趋同,产品无法和用户的内心产生共振。UX方法论的核心专注于用户的想法,感受和目标,而非业务和功能。本文通过20个小时对货币基金APP的产品研究,用户研究,使用UX工具构建场景,目的在于改变产品高度趋同现状,使得呈现模型遵循用户的心智,而不再仅仅是“买与卖”的理财超市。

    2017-04-28
  • 线上讲座 | 送你一份全新的交互设计指南ヾ(゚∀゚ゞ)

    ▲ 向左滑动查看更多导师作品摘要:上期Designer Talk 我们邀请到的UI设计师Coraline,以“对现代科技发起交互”为媒介,来传达她所创作的艺术呈现,不知道同学们有没有通过对非现场性艺术分享,使思想脱离理性范畴,继而进行创作性的探索与尝试。本期Designer Talk我们将借助符号性的语言,将碎片化的艺术凝结在一起,打破虚无与现实桎梏,为您呈现全新的交互设计。关键词:交互设计 / 当下全新的非完美呈现分享导师Jason本...

    2018-04-19
  • 关于加载设计,你要知道的8种策略和4种样式

    加载的作用在于缓解用户的等待焦虑,同时及时的向用户反馈当前的系统状态,以提升产品的用户体验。

    2017-04-27
  • JustinMind免费版与JustinMind Pro的区别

    justinmind是一个可以免费创建移动和web原型的工具。 justinmind的免费版不仅仅是体验式的,它是永远免费,目的是为一些公司或个人处理小型项目。 在获得永久免费版本之前,你还可以享受我们的30天免费试用专业版带…

    JustinMind 2015-08-25
  • 3000字,详细梳理用户体验要素之核心五要素

    网站看起来如何,它怎样进行运转,它让你执行什么。这些决策都是互相依赖的,它告知并影响用户体验的各个方面。当产品发展到一定阶段,系统化的用户体验设计对于产品在激烈的商业竞争中保持核心竞争力至关重要。比如最近很火的共享单车,开锁是否方便这样一个小细节直接决定着用户选择,用户体验就成为了商机。这里与大家分享用户体验要素的核心五要素。要讨论的事今天跟大家分享的是用户体验的五个核心要素。虽然用户体验要素远不止这五个,但作为梳理一个产品的用户体验开...

    2018-03-20
  • 央视(传统媒体)与互联网巨头(AB)在新交互形式“脸部识别”上的互怼

    支付宝霸气回应:“被盗我全赔”表明了对于人脸识别这个技术领域有比较大的知识储备与研究,针对人脸识别交互本身并不是支付宝作出这个霸气回应的核心因素

    2017-03-17