某某机械有限公司
呼和浩特乾安开发公司 | Tel : 49060978 | E-mail:308993508@QQ.COM
关于我们 产品中心 新闻中心 客户案例 在线留言 联系我们 新闻 行业快讯
产品大类1 产品大类2 产品大类3
怎样设计轮播图?Axure教程:
发布者:admin浏览次数:

大家设计轮播图的时候,是怎么操!作的呢?本文作者分享了自己的做法,来看看~。

轮者,循环也,姿势者,知识、形态也,故此文;乃探究循“环知?识乎?非也,循环播:放姿”势也。

吾日三“省”吾身:传授姿:势的时候,有说!人话乎?一开头,就发!现没有,于是,吾再省”吾身,决心悔改,接下来便开始好好讲讲在做轮、播图时候的一些!东西。

其实,提到”轮播图,大家?可能各!种回忆。就!涌上了心头,“痛苦”的回;忆一般来!的最快,比如!

还有你点开朋友圈里某个不是朋友的家伙分;享的链接,发现是个:可以上下滑动循环观看但你并不感?兴趣的广?告页,然后你?默默地或:者烦躁地点了左上角的X。

你点进了某个电商App首页”轮播广告位。的一则限量免费、抢购?广告并成功”抢?到了你心仪的商品?

你因为通过XX佳缘网首页优质会员轮播推荐位成功找到你的另一半甚至此刻你看到这里还和你的另一半会心的对视一笑?

在朋友圈,你点开了某个你的好友分享的:链接,在一幕!一幕轮播的图片和鸡汤文案中,你不争气?地留下了乡愁的泪水,想起独自在外已经好久没有跟家里人打过电话了,于是默默的拨通。了那个号码。

刚才的这些有好有坏,而从产品角度来说,一个好的“轮播”页面,除了它”本身的内;容、设计、交互外,也与它出。现的渠道、场景、时间、人群等:有关。

有的时:候,所有一切都设计”的很”完美,精准的:目标用:户在对、的时间对”的?地点进入了对的页、面,结果,手机没电了……等手“机充好电,用户可能已然忘却了刚才去了“哪个页面,所以有的时候不得不!说“谋事”在人成”事在天”。

扯远了,言归正传,这篇文”章我主:要是”想聊聊从Ax!ure软件“制作的角、度,怎么样去实现,一个常见的轮播图,我觉得大部。分轮播图?可以分为两大类,即横!向轮播以及纵向轮播,有的人可,能会说那我看有一些轮播图做的很炫酷,每个页面都可以后空翻360度接转体180度落地接托马斯回旋,但如果我们透过现象去看本质,绝大部分依然可以归为这两种(、至少我见过的?),无非就是在轮播基础上加了一些特?效。

今天就?来找个”案例,先实际看看效果大概是怎样的,比如淘宝App首页就包含横向和纵向的两种轮播,在这先以顶部的横向轮播图来讲下做这个东西的思路,毕竟授人以鱼不如授人以渔,具体的软件操作看的再多,如果没有形成一种解决问题的思路,可能下次遇到一个原型制作案例,还是无从下手只好需求“度娘”帮助。

那对“于原型制,作,一般我的;思路,首先可能会倾向于去观察、它(基于已有的东西去做),或者是去想象它(基于眼前没有,但脑海中可能成形的)。

观察的目的在、于看清楚它的结构和规律,是否可以进行拆解,拆解的目的是在于化解看”起来不能。解决的大?问题,是否可以变成其实可“以解决的小;问题。

与你去手动触发的次数有关,例如,你手动”去左”滑或者右滑了几次,那么轮播图就会先就往相应的方向滑动几次,即操作是一对一的,一次操作只会带来一次结果影响,而且你手速极快的时候,就算滑动会滞后,但依然是你操作了几次就会滑动几次。

在图片”自动?轮播时,强行手?动左滑,图片随之。滑动到”下一张“图片,如果没!有继续手动干”预,图片就又开始按照原方?向自动轮播,指示器的选,中状态也是与图片位置对应!

在图片?自动,轮播时,强行;手动右滑,图片先随之滑动到上一张,图片,如果,没有继续手动;干预,图片就又开始按照原方向自动!轮播,指示器的选中状态也是与图片位置对应。

要实现滑动,可能如果你是经常使用Axure的人,马上就“会想到用动“态面板,然后每个页面分别在不同的状态里面。

那如果你是一个刚用Axure不久的人,可能还不知道动态面板这个神奇的东西,只知道拖框框,那可!能你的思路就是想办法移动框框,至于怎?么自,动移动,可能就是!设置。给框:框添加移、动的动作?至于怎么!循环,可能给框框添加显示隐藏的相关动作?对于初学者,其实都可以按你的想法去试试,看看能不能得到你想要的一个结果,哪怕得不到,又何妨,人生不就、是要勇于!尝试嘛。

指示器部分的话,其实就是几个小圆点,放在滑动部分上方,设置好以后,如下?

上一步,我们把所需要的元件。已经摆放到、位,看上去已然有模!有样,但你要是预“览一下,就会“发现它。还没有“轮”起来,那要怎,么去“轮”呢,怎样设计轮播图?其实“如果使;用的是:动,态面板,这个功”能就很,容易实“现。

这部分的话,按照前。面观察拆解出来的,我们需要搞定的就是让圆点:处于选”中状,态是根;据图片的切“换来变动。的,而上一步我们;设置;了图片切换就是切换动态面板的各个状态,那只需要根据状态的不,同,去设置圆,点的状态即可!

到了这一个环节,已经离大功告成又近了一步,而既然这:里是横向的轮播图,那其实对于手动的这;种滑动,我们也只需要去考虑手动左滑和右滑的场景。了,毕竟一个横向自动轮!播图,是断然不需要;你去“上下其手”了,就算:你这“么做了,也是徒劳。

所以那;我们,其实对动态、面板去向左拖动和向右拖动结束时,对应的面板状态就好了,即向左拖完、了,面板状态就切?换为下一个,向右拖完“了,面板?状态就切换、为上一个!

。然后预览,会发现能;够正:常的自动!轮?播,手动向左拖动后也能够正常滑动,但如果手动向右拖动后,就会发现,拖了一次以、后,轮播:图就不“轮了,停那、了……,场面一度十分尴尬,那么问题出在哪呢?到底是道德的沦丧还是人性的扭曲呢?

这里,就有个东西需要讲一下了,在动态面板的属性里面有一些系统自带的事件,而刚才我们。在三个事件里面(,载入时、向左拖,动结!束时、向右拖动结束时)、添,加了用例以及:对应的动作,而问题恰好就出,在事件这块,对于“载入时”这个事件,它其实只、会执行一、次,也就是刚打开页面时(或刷新页面时),会执行这个事件添加的用例。以及对应设置的,动作,执行结束?就!停、止:执行,直到“再次触:发,那我们分!析一“下在打、开这个神“奇的”原型时,到底代码!逻,辑是怎么,走的。

首先,打开页;面就“执行了“载入时”的事件里:添加,的动作,即循环向左“滑动,如果!不对页面做其他操作,那理论上就会一直循环左滑,但因为?我们为“向左、拖动结束”时”也添加了;动作,所以”手动!去向左滑动时,这个时候,就跳出了“载入时”的动作,只不过因为我们为“向左拖动结束时”添加的动作也是循环左滑,所以维持了之前的表面状态。

再看看“向右拖动结束时”这个事件,我们为它添加的用例里的动作是向右滑动并勾选上了向前循环(勾上它的原因是因为如果恰好在1号位置向前滑时,如果没有“勾上,则没法滑动。到最;后一号位置),但也就是因为这个事件!里的小动作,使得逻辑跳出了之前事件里的动作,而是走到这个事件里面来,而这个事件向前移动一页就停止了,所以页面处于;停止状态。

知道了原因,那么解决办法就”好说了,就在“向右拖动”结束时”这个事件对应的用例结尾,添加能够让页面循环左滑的逻辑即可。

最后,如果说我?们”做了这样的轮播图,当要去把它用到实际工作中时,发现涉及到的尺寸不一样,所以“每次改的时候,必须把外面的尺寸以及动态面板里的每一个状态尺寸都去更改才行,Axure教程:着实让人十分的崩溃,因为它并没有成为一个方便快捷可以直接拿来简单修改就通,用的组件。

所以我的。问题是,如果想要在上;面的基础?上,使得这个轮播图组件更简单的改变尺寸,比如改变最外层即可,那你能想到的方法是什么,按照我文中提到的观察-想象-拆解-各个击破-组合的?方法,你可以想到多少种做法?

本文由 @Jess。e K!ing 原创发布于人人“都是产品经!理。未经许可,禁止转载。

人人都是产品经理(是以产品、经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为!一体,全方?位服务产品人和!运营人,成立9年”举办在线+期,线+场,产品”经理大会、运营大:会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的“影响力和知;名度。平台聚集了众多BAT美团京东滴滴360小米网易?等知名互联网公司产品总监和运营总监,他们、在这里与!你一?起成长。