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

相关推荐

  • 在WEB/UI的交互设计中运用格式塔心理学理论

    UI或UX分析需求主要是以人机交互界面为主,而这个需求不仅仅是一些设计、视觉使用体验,在这里体验当中,我们可适当运用一些心理学,比如格式塔理论就是一个很好的分析法。[图片]格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学。由马科斯·韦特墨(1880-194

    微信热点 2018-02-04
  • 性爱机器人为什么这么火?用户体验称比真人舒服

    来源:环球网【9月9日消息】据外媒称,由于受顾客欢迎,整个欧洲大陆的妓院正在大量抢购性爱机器人。欧洲各地的性玩偶公司也纷纷表示正与“感兴趣的投资者”进行谈判,以在全球范围内扩大业务。荷兰:价值23000英镑的性爱机器人被盗!近日,窃贼闯入了荷兰南部布雷达的一家大型性用品商店,将店里所有的性爱机器人都被偷走了。据悉,这些性玩偶价值23,000英镑。对于经营这家失窃的成人用品商店的老板尼尔斯·范德沃特称,这起看似普通的盗窃行为给他的公司造成...

    2018-04-07
  • Axure RP 8软件和安装教程

    Axure RP 8(64位)下载链接:百度网盘:https://pan.baidu.com/s/1hsfD3Kg提取密码:ivma软件简介:Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。(仅供学习交流使用)安装前须知:1.解压和安装前请关闭...

    2018-04-17
  • 纽约视觉艺术学院SVA交互设计硕士毕业展 | 点赞按钮背后的学问

    SVA的交互设计专业汇集享有国际盛誉的设计师及其当今各大领域的专业人士,学生背景来自不同行业,有交互、数字媒体、纯艺、产品、平面、家居、建筑、计算机、社会学等等,学生之间能互补知识,拓展思路。要你设计一个点赞按钮,你会怎么设计?交互设计是什么?不知道的话,你可以回顾「谷歌UX交互设计师丨郑嘉」的分享会:用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX,她认为交互设计思维是用逻辑支持你的设计决定。SVA交互设计看点读交互的学生,...

    2018-05-04
  • 网络心理学与用户体验:如何使用户爱上我们的产品?

    什么是网络心理学?网络心理学(Cyberpsychology)是研究人与科技交互的背景下人们的心理与行为的新兴学科。它关注网络世界以及网络对人们行为产生的影响。近年来,网络心理学逐渐脱离其他研究人类行为的学科(如社会心理学),形成了自己专门的心理学研究领域。了解来自这个新领域的研究可以帮助设计人员更准确地预测人类在使用不同技术时会如何反应。因此,在思考如何使用户爱上我们的产品时,了解网络心理学是一个非常有用的手段。通过更好地理解用户与技...

    2018-02-23
  • 嘿,快点!这些小程序岗位正在被疯抢...

    招聘旺季,很多人都在考虑是不是要换(炒)个(老)新(板)环(鱿)境(鱼)。听说小程序很火,但小程序公司实在太多太杂,万一遇到“小程序教母”可肿么办!我们花了整整两天时间,综合参考企业规模、融资情况及阿拉丁排名指数优选整理出来第一期12家优秀小程序企业招聘岗位,希望能够帮助优秀的人才快速找到优秀的企业。何必东奔西走,这里可能就有!美团点评北京三快科技有限公司美团点评公司是全球领先的一站式生活服务平台,为超过6亿消费者和和超过450万的优质...

    2018-03-12
  • Axure原型管理与展示

    因为墨刀是自带生成分享链接以及分享二维码功能,这里主要写关于Axure的原型管理与展示。AxureShareAxureShare是Axure RP官方的免费原型托管网站,可以直接在Axure中共享发布。发布后Axure的源文件也会保存在官网的地址中,在其中还可以设置访问密码。But, 这么好用为什么用的人少呢?因为访问的时候,会慢的你心碎。2. 产品大牛产品大牛是济南公司开发的产品托管网站,解决了Axureshare连接速度慢,访问体验...

    2018-03-24
  • 【用户体验.春节特辑】我的家史馆,我的“义务”馆(总第267期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第267期使用我的家史馆APP以来,起初家谱树状图深深吸引了我,在不断完善添加家族成员的同时,越来越觉得只是单纯的成员图像和姓名显得很单薄,已不能满足我对家族每个成员的情感。想到我的后代、我的子孙后代将来看到的只是家族长辈的照片、姓名,这和见到一些陌生的照片姓名难道不一样吗?越想越觉得应该让家族人物更丰富起来。之后就仔...

    2018-02-21
  • 创新与用户体验---工业设计的双驱动力

    4月18日上午深圳融一凤巢设计发展有限公司创始人兼深圳市工业设计协会副会长仪永杰在PDC设计廊会场与到场展客商分享并探讨了现今智能硬件和消费电子类领域的设计发展趋势。仪永杰认为在消费升级的市场导向下,供方市场慢慢转化为需方市场,消费者不仅满足于产品的存在,更多的是产品在消费者内心中碰撞出情感。以小米科技为例,现今决定设计生命力延伸的是创新意识,是对工业设计创新的重视程度。从设计服务到产品化和供应链都需要整合创新满足用户对产品日益增长的功...

    2018-04-18
  • 清华美院交互设计考研相关问答

    分享考研资料集:你的问题我来答!一考研资料福利贴这是新蕾北京公众号第001篇资料帖今天分享的是清美交互设计考研相关资料汇总针对此专业考研相关问题我们一一作出解答01进入通道报考清华大学美术学院交互设计研究生,可以报考两个方向,一个是信息艺术系的交叉学科硕士的交互设计方向,另外一个是信息艺术设计系的信息艺术设计的普通硕士,但是他们的考试内容有较大差异,进校后都可以学习交互设计,导师组基本相同,由于近年来大部分招生名额倾向于交叉学科,本文重...

    2018-04-28