Axure实验室 | 带放大效果的轮播图

提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样。阅读原文预览然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮...

提起轮播图,相信大家已经非常熟悉了,脑海中自然而然的会浮现出轮播图的交互效果——几张图片,可以逐一的左右切换显示,而每次只能显示一张。这是最基本的轮播图,当然,我今天要讲的不是这种。


还有一种轮播图,会同时显示三张图片,中间的图片会放大显示(相比左右两边的两张会大一些),像下面这样。


Axure实验室 | 带放大效果的轮播图

阅读原文预览

然后左右切换的时候(通过点击左右按钮或者左右滑动),左右两边的图片移动到中间位置时会动态放大,而中间的图片移动到左右两边时会动态缩小。另外,这种轮播图也可以像普通轮播图一样,无限循环。


那接下来就教大家用Axure如何实现这种轮播图,其实步骤很简单,前提是你掌握了这种思路。

1原型解析

初次接触到这个案例的时候,第一感觉就是应该可以实现,但是实现起来会非常复杂,后来经过了多次试验,终于找到了一个最优解。


我们先来分解一下这个原型的交互:

  1. 左右轮播的时候三个图片会顺序移动,并且中间图片动态缩小,左右图片动态放大;

  2. 左右轮播可以无限循环。


其实如果单独考虑第一个问题,很容易解决;如果单独考虑第二个问题,也很容易解决;可两个问题结合起来一起考虑,就需要消耗一些脑细胞了。不知道各位看到这里的时候有没有什么思路。

2设计思路

对于上面两个问题,我首先考虑的是先解决第一个问题。提到轮播这个词很容易就能想到动态面板,因为网上太多的轮播教程是基于动态面板实现的。于是拿动态面板(的轮播)去套用一下这个案例,发现无论如何都达不到预期效果,最终不得不放弃动态面板。


放弃使用动态面板就意味着要手动实现左右轮播的效果,通过移动图片来实现,顺便还可以设置图片尺寸,来达到图片放大缩小的效果。这个思路对于解决第一个问题貌似可行(而后来实践证明确实可行)。


以向右轮播为例,如下图:

Axure实验室 | 带放大效果的轮播图


当前能够看到的是图2,图3(放大)和图4,向右轮播之后看到是图1,图2(放大)和图3。此时无法继续向右轮播,更无法循环轮播。


那么接下就考虑如何实现持续(循环)轮播,在刚才的基础上,我们如果要继续向右轮播的话,应该是像下图这样的情况。

Axure实验室 | 带放大效果的轮播图


那么如何在向右轮播后,可以继续向右轮播呢?从上图可以看出来,需要将轮播后最右侧的图片(例中的图片5)放到最左边,这样在继续向右轮播后,才能有图片源源不断的从左边进入画面,从而形成一个循环。


那么问题来了,如何将最右侧的图片5放到最左边?首先说,采用移动位置的方式是不行的。其实我们也不必真的将图片5的位置移动到最左边,我们在轮播后(整个图片组发生了位移)只需要将整个图片组复位(位置和大小都要复位)即可,然后再替换掉每个位置上显示的图片。


Axure实验室 | 带放大效果的轮播图

图片组复位后,原来图片1的位置显示图5,图片2的位置显示图1,图片3的位置显示图2,图片4的位置显示图3,图片5的位置显示图4。


根据以上逻辑,就可以实现图片向右无限轮播,向左轮播同理。


但是,此时还有一个问题没有解决,如何替换图片?


同一图片位在轮播的过程中显示的图片是不一样的,比如图片1的位置,可能会在轮播的时候显示为图2,图3,图4,图5等等。所以,要替换显示的图片是不固定的,无法设置一个固定的图片来替换,只能动态去取。


如果动态去取,必然有一个地方需要存放这些图片,而且根据图片的轮播,存放在每个位置的图片会发生变化。根据这些线索,此时有一个神奇而强大的元件进入我的脑海中——那就是中继器。


用中继器存放图片1-图片5五个图片,并且按照1-5进行排序,当图片向右轮播时,就把中继器中最后的一个图片排到中继器的第一个位置(通过更新排序字段来实现);相反的,如果图片向左轮播时,就把中继器中第一个位置的图片排到中继器的最后一个位置(通过更新排序字段来实现)。


至于图片的显示,则在中继器的每项加载时,第1个项目中的图片显示给图片1,第2个项目中的图片显示给图片2,以此类推,第5个项目中的图片显示给图片5。


到此为止,整个原型的设计原理就讲完了,接下来我们进行实践。

3制作过程


1)添加图片


在画布中添加5个图片(如下图排列),将中间图片的高宽尺寸设置为其他4个图片高宽尺寸的两倍。

Axure实验室 | 带放大效果的轮播图


2)编组并转换为动态面板


将五个图片进行编组,然后将图片组转换为动态面板,调整动态面板中图片组的位置,使第一个图片恰好完整超出画布的左边界。调整动态面板的宽度,使其宽度正好覆盖到第四个图片,这样第五个图片就不可见,如下图。

Axure实验室 | 带放大效果的轮播图

3)添加中继器


在画布中拖入一个中继器,删除掉其默认的矩形框、用例和数据集中的数据,并将其设置为隐藏。将中继器的数据集设置为两列,一列用于存放排序编号(本例中的sortid),一列用于存放图片(本例中的carimg)。将排序编号列依次填充5个数:1,2,3,4,5;将图片列导入5张图片。

Axure实验室 | 带放大效果的轮播图


设置中继器的“载入时”用例(将中继器按照sortid升序排列)和“每项加载时”用例(将中继器中的carimg依次显示到五个图片上)。


Axure实验室 | 带放大效果的轮播图

4)左右滑动图片时进行轮播


在由图片组转化成的动态面板上,设置“向左滑动时”和“向右滑动时”用例。

Axure实验室 | 带放大效果的轮播图


以向左滑动时为例,首先将图片组向左移动,

Axure实验室 | 带放大效果的轮播图


然后设置图片组中图片3的尺寸缩小及图片4的尺寸放大,

Axure实验室 | 带放大效果的轮播图


添加等待时间,


更新中继器中第一个项目的排序编号(在原来的基础上+中继器的项目数,使其可以排到最后的位置),

Axure实验室 | 带放大效果的轮播图


然后再将图片组位置复位,

Axure实验室 | 带放大效果的轮播图


图片尺寸复位。

Axure实验室 | 带放大效果的轮播图


到此向左滑动时,图片轮播效果完成,此时可以预览一下。


向右滑动时同理,不再赘述,小伙伴可自行实现。

4经验总结


这个案例是春节前一个小伙伴提出的,这段时间一直断断续续的思索着解决方案,但并未动手实践。没有实践并不是因为没有时间,而是一直没有一个完整的思路。近日得来空闲,于是打开Axure亲自动手实验一番,在尝试的过程中,却意外得来灵感,最终轻松搞定。所以说,有些事情只凭想是没有结果的,做,兴许能离目标更近一点。


(完)


原型下载地址:https://pan.baidu.com/s/1FymfFw8eZzHb0xHriNX_5w

公众号回复“021”获取百度网盘提取码

Axure实验室 | 更多教程        

史上最强网站后台多页签功能

模拟百度编号停靠效果

模拟iOS系统APP删除效果

列表拖动排序

会飞的图标菜单

12306图片验证码

万年历

九宫格拼图

机械时钟

环形进度条

微信小游戏之猜数字

超简单的计时器实现方式

年会抽奖原型

微信名:RAEDME

微信ID:raedme

❶ | 产 | 品 | 与 | 敏 | 捷 |
❷    www.raedme.cn
❸ 大鹏微信  :  urmagic

Axure实验室 | 带放大效果的轮播图

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35908/

(0)
交互精选交互精选
上一篇 2018-03-15
下一篇 2018-03-15

相关推荐

  • 我不知道的“用户体验”

    在梁宁《产品思维30讲》的“用户体验”模块共包含5讲,分别是:用户体验的五个层次怎样绘制用户体验地图服务蓝图的核心要素:峰值、终值上瘾机制:用户激励系统名字是你的文化资产作为一名从未系统学习过用户体验和产品设计的PM来说,这个模块可谓干货多多(具体内容请详见下面的思维导图)。先打好理论基础,从用户/人性的角度出发将用户体验分为五个层次;然后抛出两个方法论,一是绘制用户体验地图用讲故事的形式获取用户情绪曲线;二是考虑到资源和成本控制的约束...

    2018-02-20
  • 用户体验调研活动开启,多重奖励等你拿!(2场公推冲击4连红)

    20180329,星期四,欢迎接收购彩汪官方微信公众号的免费推送。昨天大元复出拿下了两场全红,状态可以说是非常好。两场欧赔1-3-4的深盘,有80%以上的彩民是认为一场正路加上一场下盘。结果两场都打出了1球小胜的结果。大元昨天就是运用了欧赔亚盘结合盘路的分析法,最终命中了2场结果。可以说在实战中盘路对于小联赛都有着不错的效果。今天有4场竞彩比赛,除开早场的澳超,晚上依然有2场英甲(其中包含一场单关深盘)+1场葡超,英系比赛是大元一直擅长...

    2018-03-29
  • D1-交互设计入门

    一阶段:1.交互设计基本原则2.平台特性及其设计规范3.做交互设计的方法,工具4.掌握交互设计的基本流程二阶段:1.特定控件设计,2.特定界面设计3.独立常用功能设计三阶段:1.多项功能设计2.方法研究,总结3.竞品和优秀产品分析4.最新的系统和产品分析5.了解前段技术四阶段:1.产品架构2.设计趋势3.产品发展趋势Windows 用户体验交互设计规范http://www.uxguide.net/wiki/windows:HomeiPh...

    微信热点 2018-04-07
  • 唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06
  • 产品思维~02·用户体验与结婚教练

    今天继续分享《得到》app梁宁的大师课程产品思维30讲,感兴趣可以下载《得到》app继续关注,在文后会附上《得到》app的下载方式。其实梁老师真的很幽默也很形象,来用结婚教练的例子来类比产品的用户体验,同样的结婚也好,创业找合伙人也罢,都是非常重要的长期关系,改变一个人那是非常难的一件事情,那么如何去观察和判断一个人就显得尤为重要。如果没有受过专业训练,那么眼睛看到的很可能是不真实的,你的感觉以及情绪很容易被某个点所牵制,而且在你没有强...

    2018-04-26
  • 随想:智能车人机交互设计三要素

    BYTON拜腾标志性的共享体验屏和触摸式方向盘近期会总结下自己对智能车、自动驾驶人机交互相关的思考,很碎片,想到哪总结到哪。今天先写智能车相关的内容。这里的智能车先缩小范围到还需要人类驾驶员的智能网联汽车。1、总结之前,有个疑问。我很想知道各大车企在研发测试智能车的时候,是否有认真、大量地拿真实用户、真实场景,而非实验室场景去测试其诸如中控大屏这样的智能产品/功能?在我的印象里,或许车企更多的测试依旧在传统意义上汽车这一交通工具的性能、...

    2018-04-22
  • 又是高分!北京林业大学交互设计专业课143分复习方法分享

    又一个高分!北京林业大学交互设计专业课143分复习方法分享-孙跃桐我决定考研大概是在16年的9月份吧,因为决定的时间比较早,我以为我准备的时间很充足。真正开始准备是在17年我先开始报了新东方的英语政治课,想先将公共课的基础打牢,在后期复习专业课的时候会有更多的精力于是我将上半年的精力全部都用在学习公共课上面。想在9月份招生简章出来之后我就开始专心复习专业课。但是当九月份招生简章出来之后,我就开始慌了。我本身想考的就是本校之前也问过考研的...

    2018-04-22
  • 美甲店如何做好用户体验?【下】 | 互联互生

    上周的一篇文章我们说到了“用户体验”对于美甲店铺的重要性,文章中我提出了一个“峰值和终值的一个概念”,以及举了几个服务性的行业的例子,它们是如何利用“多数被遗忘,偶尔特漂亮”这个心理给用户带来不一般的体验感。今天这篇文章我们重点来谈谈咱们美甲店可以怎样在“用户体验”上有一些创新。好客服的法则随着网络越来越普及和重要,大部分美甲店主都开始注重自己的店铺在网络上面的评价,我们就先拿大众点评这个平台作为例子。一个店铺在大众点评上面肯定有很多的...

    2018-05-06
  • 语音交互中的“等待体验”研究

    文 | 叨叨来自雷锋网(leiphone-sz)的报道雷锋网按:本文来自百度人工智能交互设计院,通过实验的方式,研究了语音交互中用户对于智能音箱的“等待体验”。雷锋网编辑在不改变原意的基础上做了精编。回顾人机交互发展史,人类先后经历了基于命令行的CLI 时代,基于鼠标键盘的GUI时代,基于触摸的初级NUI时代。后面每一个阶段比前一个阶段更自然,学习成本更低,综合效率更高。进入AI时代,人工智能给机器带来三种能力:感知能力、认知能力、自然...

    2018-01-30
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-13