淘宝轮播图片尺寸是多少（淘宝轮播图制作的3个要点）

来源：互联网
2024-05-09 23:37:05

轮播图、走马灯形式的广告页面展示在我们日常的各种平台上随处可见。也有很多原理在设计中被运用和改进，但如果没有理解交互方面的设计原则，则会让轮播图的效果大打折扣。

一、移动端轮播图

轮播图最广泛运用的地方是电商领域，需要具有一定密度的广告轰炸。在电商app首屏会有一个轮播区域，会显示让用户感知图片当前所在位置的圆点，而且由于移动端没有hover状态，用户在触屏设备上是滑动来进行切换轮播区域，要求轮播的图片能在第一时间抓住用户的注意力，所以轮播图的内容需要额外的注意，在当前移动设备尺寸下，设计轮播图的时候有以下几个注意点：

（1）文案需清晰可见，需具有很强的可读性；阅读不费力，这样才能在有效传递广告主需要传递的核心信息。

（2）主题鲜明，无需过多的辅助干扰因素，少即是多；简易的文案和突出的产品更容易抓住用户的眼球。但不是用过于刺眼的颜色，不然可能会引起反感，适得其反。

（3）符合阅读习惯，尽量是从做往右，或者是从上到下，否则短暂的阅读时间无法抓住用户的注意力，留给这个banner的宿命就是被划走或者是忽略。

（4）重点文字需做突出，用最短时间抓住用户点击欲望；是打折还是上新，折扣力度是多大，有效期是几天等等，摘取重要信息作重点突出和吸引即可。千万别满屏幕都是重点，在有限的空间内做好信息的平衡和协调。

（5）注意画面节奏，信息平衡，主次对比鲜明，突出产品特征，必要的重点文案可以突出，画面适度留白，增加透气感形成内容聚焦，利于阅读。

（6）最好不要直接拿pc端的图直接放进移动端，因为文字的可读性无法保证，需要同风格但要对文字进行调整。

通常首屏轮播banner不常使用动图进行展示，如果首屏的多张图都是动图，用户就会眼花缭乱，找不到重点。通常会在次屏的单张banner展示区域，例如胶囊banner，既不占用过多空间，也能很好的传递宣传的板块信息，并且有的会结合动图或是破格图来吸引用户进行点击等操作，很好的平衡了画面的焦点，以及整个页面的节奏感。

二、PC端的轮播图

PC端的轮播图则规矩多了。但由于PC端和移动端的交互操作方式有很大区别，在轮播区域最主要的两个区别是hover状态区别和banner的展示区域多样化。

PC端特有的hover状态，可以在轮播的图上作悬停。自动轮播已经成为大部分首屏的中心区域，当用户的鼠标移动至轮播区域，轮播交互可以停留在当前，那么体验是比较好的，用户会感觉自己的意愿被尊重；而且轮播的图通常3-5秒切换一个，如果用户注意到其中一张，并作悬停且轮播因此停留，用户点击的可能性就会大大增加。

PC端的轮播区域做切换也会选择箭头这种明确指示切换的图标，操作一目了然。

自动轮播的轮播图如果切换时间太短促也会造成用户的反感从而直接被忽略，那在这个区域展示再多的内容，也无法被用户接收。所以控制自动轮播的时间以及平滑的切换方式也可以提高点击率，从而提高产品转化。

三、轮播图衍生出的用户需求驱动分析

我们可以看出，轮播图大致是位于页面顶部或页面中间。无论是PC端还是移动端，还有的其他的一些互联网终端例如车载屏幕、ipad、智能手表等，轮播图这个视觉焦点部分都是寄予了很多的商业价值期待的。

互联网生态圈以用户为核心，通过产品满足用户需求和获取用户，而互联网的本质是要转化用户价值令其背后的公司获得收入，商业模式决定了寸土寸金的终端屏幕每一寸土地都要发挥它最大的价值。每一个模块每一个元素的设计都要遵循互联网的“用户需求驱动”的思维。

现在产品的推荐都会根据用户的喜好做个性化定制推荐，内容必定是你近期看过的，或者是大数据分析下认为你感兴趣的内容。根据马斯洛需求层次理论人的基本底层需求被满足之后，更高层次的尊重需求就会愈发的强烈，这也就是为什么所有的产品都在强调用户体验，究竟用户体验的是什么，其实就是一种被尊重感，而且这种尊重感需要体现在产品的方方面面细枝末节。这也就是为什么苹果设备在一定程度上备受追捧，没有胡乱弹出的广告，没有不经过你允许就乱开通的权限，没有流氓的牛皮癣广告。