淘宝图片轮播尺寸(手机淘宝图片轮播的图片链接哪里找)

漫空客 • 2023年4月24日下午8:27 • 电商 • 阅读 137

Banner轮播图是原型图中最常见的模块之一，只要是互联网产品，基本都会用到轮播图。前一篇文章讲解了如何运用母版实现网站导航的切换，本次教程教大家：如何使用Axure动态面板实现互

Banner轮播图是原型图中最常见的模块之一，只要是互联网产品，基本都会用到轮播图。

前一篇文章讲解了如何运用母版实现网站导航的切换，本次教程教大家：如何使用Axure动态面板实现互联网产品banner轮播图的交互。

Banner轮播图的交互用动态面板来实现，大家把动态面板想象成电视机，每一个banner图片就像是一个个频道，遥控器上的按钮就连接着每一个频道。

也就是说，动态面板是装banner图片的盒子。就像下图这样：黑色框就是动态面板的盒子，里面的不同颜色矩形就是内容，每次根据指令去显示。

本次讲解依然用实战案例为例：购物网站淘宝首页的banner轮播图（这里选取轮播四个做讲解）。

先把4个banner素材准备好：

下面开始正式进入实现步骤：

第一步：创建banner动态面板

拖入动态面板元件 –> 根据素材的大小，调整动态面板的大小：样式中修改长为520，宽为280，并且命名为“banner” –>

双击banner动态面板进入编辑页面 –> 点击“添加状态”添加到共四个状态，并分别命名“banner01”、“banner02”、“banner03”、“banner04” –>

分别点选banner01、02、03、04层，分别把四个banner图片粘贴到四个面板层里 –>

第二步：创建banner底部、侧边按钮

1、底部按钮

拖入矩形元件 –> 样式中尺寸大小改为：长58、宽14 –> 填充颜色改为白色填充，不透明度为24% –> 圆角半径输入一个较大的值，形成两端圆角的矩形条 –>

拖入圆形元件 –> 样式中大小改为8，将线段线宽改为0，去掉描边 –> 复制圆形到4个，排列到圆角矩形条中间 –>

2、侧边按钮

拖入矩形元件 –> 样式中尺寸大小改为：长比宽长一些（如50）、宽30 –> 圆角半径输入一个较大的值，形成两端圆角的矩形条 –> 填充颜色改为黑色填充，不透明度为32% –>

再次拖入矩形元件 –> 放置于圆角矩形上合适位置 –> 框选两个矩形，点击样式中“去除”按钮，将圆角矩形剪切，得到淘宝案例上的按钮形状 –>

再置入箭头图标，鼠标右键将两个图形成组 –> 命名为“right” –>

复制“right”形状组合 –> 鼠标右键分别选择形状，选择“变换形状” –> 选择“水平翻转” –> 命名为“left” –>

按钮的样式完成如下：

第三步：连接交互

1、底部选择按钮交互

点选第一个圆形按钮 –> 交互栏点击“新建交互” –> 选择鼠标“单击时” –> 元件动作选择“设置面板状态” –> 选择“banner”动态面板 –> 选择“banner01” –> “完成” –>

点击“添加动作” –> 元件动作选择“设置选中” –> 目标元件选择“当前元件” –> 值为“真” –> “确定” –>

点选第一个圆形按钮的交互，复制粘贴到第2、3、4的圆形按钮上 –> 分别修改“设置面板状态”交互，对应到相应的banner图片 –>

点击交互栏中：+添加类似“鼠标悬停”的交互样式 –> 选择“元件选中的样式” –> 点选“填充颜色” –> 将颜色改为桔红色 –> “完成” –>

点击“显示全部” –> 选项组命名为“circle_icon” –>

选择元件选中样式，分别复制粘贴到其他圆形按钮上，并且选项组选择“circle_icon” –>

2、侧边按钮交互

点选“right”组合按钮，点击“新建交互” –> 选择鼠标“单击时” –> 元件动作选择“设置面板状态” –> 选择“banner”动态面板 –> 选择“下一项”，点选“向后循环” –> 进入动画和退出动画都选择“向左滑动”，时间为200毫秒 –> “确定” –>

复制“right”交互，粘贴到“left”按钮上 –> 修改交互内容改为“上一项”，勾选“向前循环”，进入动画和推出动画选择“向右滑动” –>

3、页面载入时交互

我们打开淘宝网页时发现，banner广告图默认圆形按钮选择了第一张广告图，这就需要在页面加载时设置选中：

点击axure内容区域的空白处（即：不点选任何元件、图片等） –> 点击“新建交互” –> 页面选择“页面载入时” –> 元件动作选择“设置选中” –> 目标选择第一个圆形 –> 值为“真” –> “确定” –>

到此，基本的banner轮播图交互功能完成了：

有了基本交互功能，我们发现还是有些欠缺，在用户体验上不是很好，还要进一步完善交互。例如，底部按钮转换图片时要有向左或向右的移动过程，点击侧边按钮切换图片时，底部按钮需要对应设置选中状态等等。产品经理在思考用户体验时，这些交互都需要仔细考虑。

因为时间关系，进一步完善教程（进阶篇）下一篇继续讲解。

版权声明：本文图片和内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送联系客服举报，一经查实，本站将立刻删除，请注明出处：https://www.4kpp.com/70334.html

赞 (0)

0

跨境电商怎么开店铺(百度一下)

上一篇 2023年4月24日下午8:27

互刷平台(虾淘淘补单平台)

下一篇 2023年4月24日下午8:27

淘宝客服电话是多少(淘宝商家客服电话)

“客服”要求QQ分享屏幕借此骗钱■早报记者许奕梅通讯员马尘庆文\\??图“请问您是XXX吗？您在XX平台购买的XX产品质量有问题，我们愿意退款，请按照我们的提示操作……”在网

电商 2023年4月28日
16000
电商

我愿化作一座石桥(我愿化作一座石桥,受五百年的风吹)

阿难见一女子，佛陀说你和她今生无缘，阿难说，愿化作石桥，伍佰年等候她路过，再最后看她一眼。世间痴情，莫过于此！相思怎渡，再见无期。不复流连，断杼拆机。佛经古卷，木鱼青衣。石桥不溃，

2023年4月26日
12200
ao史密斯热水器安装迪兰恒进hd6750(a0史密斯热水器安装视频)

(上接C20版）6909海富通基金管理有限公司D890241649海富通消费核心资产混合型证券投资基金5.361100有效报价6910海富通基金管理有限公司D890246152海富

电商 2024年4月26日
2800
电商

淘宝产品怎么上架(淘宝商品怎么上架教程)

大家好，我是易尚客服外包的小易，专注客服外包和店铺运营，避免下次找不到我，记得加个关注哦，喜欢我的内容一定要点赞+收藏！一般情况下，当淘宝网店开起来后，平台对新开店铺都会有相对应的

2023年4月24日
10900
电商

c盘无法格式化(这台电脑不符合)

如果您的无法格式化硬盘并提示您“Windows无法完成格式化”错误怎么办？这篇文章将为您找到有关此问题的原因和解决方案。另外，如果因记忆卡故障而造成的数据丢失，您可以用Bitw

2023年5月2日
17700
电商

多愁善感的男人(多愁善感)

作者：同言01我有一个大学室友，她和前任分手的时候无比纠结。看起来，她的男友很爱她，大学的时候我们就这样认为。男生大她3岁，他们恋爱的时候，我室友大一，男生快大四了。年龄差距，让我

2023年4月26日
15000
电商

街头篮球经验(街头篮球经验宝箱)

球友们都知道开声音玩街头篮球手游有个好处，就是会有三秒警报，当你还在苦思怎么晃断对面脚踝的时候，是它把你拉回现实。其实对手进攻也有三秒提醒，所以关键时刻你不必看他花哨的运球吃晃了，

2023年4月26日
12800
马列原著(马列原著有哪些)

马克思的女儿曾提出一个问题：“爸爸，您一生最喜欢的是什么？”马克思回答道：“读书。”马克思认为，书籍是脑力劳动的工具，而不是装饰品。他力求从最经典最权威的原著中寻求答案，以使自己的

电商 2023年4月26日
25000
电商

爱玩毛线球(爱玩毛线球的小猫)

用钩针编织毛线球,可爱清新,只要两种颜色的搭配就很漂亮了! 可以拿来作为衣物上的装饰,或是用绳子绑起来当挂饰用! 想了解更多物品的针织教程，请点击头像关注，并留意后续内容！每天都有

2023年4月26日
15500
电商

支持4g网络的手机(支持4g网络的手机最便宜的)

IT之家 4 月 3 日消息，据 GIZMOCHINA 报道，vivo 在孟加拉国发布了一款新机 ——vivo Y02A，共有“Cosmic Grey”和“Orchid Blue”

2024年4月26日
1600

发表回复