A君导读:双11和双12终于结束了。每次去这些电商节，我们的主页和手机app主页都会变得比平时更夸张。但是夸张绝对是好事。什么样的主页轮播是科学的？今天看了AppSo分享的这篇文章，你就有答案了。
横幅、图片旋转、滑块、特色内容模块或其他你能想到的类似名称——它们在网页上随处可见。电子商务网站上经常使用横幅，尤其是在其主页上。大多数电子商务网站的桌面主页上都有横幅。
沃尔玛主页横幅
但是首页banner真的对用户有用吗？或者可以把它们看作是一种简单的呈现内容的方式？
以上问题随便问一个人，他们所在的城市告诉你，横幅是一种实证效果很差的反模式。根据Erik Runyon的研究，只有1%的网站访问者会点击并浏览banner——其中84%的人只会点击第一张旋转图片。
贾里德·史密斯制作了一个名为“我应该使用横幅吗？”来说服大家“即使可以用，也不要用横幅。”但也许贾里德网站上最好的解释是李·杜德尔说的:
横幅的用处在于，你可以用它来告诉营销领域或高管“你的最新想法已经出现在主页上了”。要么使用横幅把用户忽略的东西放在你的主页上，要么如果你愿意就永远不要使用横幅。
事实上，如果我们能够坚持一些主要的操作规则，主页横幅可以获得良好的宣传效果，对用户非常有帮助。本文将讨论这些操作规则，并简要介绍如何设计一个好的横幅。
什么是横幅
横幅是一种在主页上显示营销信息的促销形式。设计师可以通过横幅最大化信息密度(指一条信息所能提供的相关信息的相对指数)，而不会让用户旋转浏览剩下的页面。横幅以各种形式和大小出现，但一般来说，横幅(如本文所述)具有以下特征:
它出现在主页靠上部门，占有了「折叠以上部门」（显眼位置）绝大部门区域。
在统一个位置展示一条以上的推广，即便实际上一次只能展示一条；每条推广都包含了图像和少许文字。
在统一横幅中，能看出有不止一条主题内容。
“折叠以上部门”是页面的上半部分，是用户点击网站后直接看到的页面。图片来源:userex.co
横幅的优势
通过横幅，可以在主页统一块黄金区域显示多条内容。
越靠近页面顶端的信息更越可能获得更多的关注。
横幅的缺点
人们经常忽略横幅，同时忽略掉的还包罗所有或部门横幅里的内容（纵然横幅可以自动转动）——访客基本上不会在页面顶端逗留过久。因此，不要指望人们消化掉横幅的所有信息。
设计师通常将横幅视为一系列图片的集合体，但众多用户通常只看了其中的一张图片。看完横幅中的一系列图片能给人留下精准的印象，使人领会相关服务或产物，但若是一个人只看到其中的一张图的话，他可能就无法明了你想转达的营业信息。
优质横幅设计指南
1. 内容第一
有一句话我们听过无数遍:内容是王。横幅形式的优雅不如其内容与用户的相关性重要。
如果横幅的内容无关紧要，无论它与用户的交互多么简单，它的用户体验仍然会极其糟糕。这里要提到一些主要规则:
若是内容对访客不够有吸引力、或没有辅助的话，好比是人们不想关注的推广信息，那就不要用横幅。这些横幅大多数情况下只会涣散用户的注重力，而不能指引用户至一个简朴明了的行为招呼。
横幅内容不能像广告（或者与广告花样内容一样）。若是内容看起来像广告，大多数用户会选择直接忽视。缘故原由就在于旌旗盲点（网页使用中的一种征象，指网站访问者自觉或不自觉地忽略横幅样的信息，又可称为广告的盲目性）。以是，选择合适的字体和图像使得横幅和页面其他内容相匹配就显得异常主要。这样的话，横幅才会像整个网站的一部门，而不是网页上被强加的广告。
不建议使用树模式。Drugstore.com横幅类似于广告。
转动图片的顺序需要仔细斟酌。要记着，越是靠前的图片，越能获得更多曝光机遇。以是，第一张图片永远是最主要的，它还能吸引访客去看下一张图。后续图片都应该按主要性排序。
绝对不能把横幅图片看成领会网站特色和内容的唯一途径。建议将出现在横幅的主要信息另放在页面的其他部门，这样就更容易被网站访客瞥见。
若是你想让访客看到所有内容，那就不要使用横幅。哪怕横幅是有用的，但要记着，大多数访客不会浏览每一张横幅图片。
2. 限制转动图片的数目
横幅中最多可以有五张图片。如果多了，用户可能就不去看了。限制旋转图片数量的另一个好处是帮助访问者更好地理解网站的内容，并在将来再次找到横幅中的相关内容。
3. 提供进度提醒
让用户知道有几个旋转图，需要看哪一个是现在的“进度”。这样可以让人觉得一切尽在掌握。
圆点或者类似的符号可以显示旋转的图片总数，让用户知道自己现在看的是哪张图片。
4. 确保转动图片的内容在手机上清晰易读
随着对手机的重视程度越来越高，优化banner内容是手机客户端查看的首要任务。文字和图片显示得越清晰，用户就越有可能有兴趣去理解相关内容。
因此，保证旋转图片的文字在各种屏幕上清晰可辨是非常重要的。即使屏幕内容缩小到异常小的界面，也要清晰地显示在屏幕上。另外，如果把桌面网站的插图重复到手机页面，一定要检查文字是否清晰易读。
不建议使用树模式。手机配备的旋转图片字体清晰度不高。图片来源:Baymard
5. 设计适当的导航按钮
导航按钮应该帮助用户识别各种选择，以便用户在焦点转向图片中看到相关内容时能够回忆起这些选择。
确保导航按钮存在并出现在标题中，而不是在标题下或其他区域。这样就可以杜绝显示不佳的问题。这里有两个桌面网站的例子:
在戴尔主页上几乎看不到下一个/上一个横幅按钮。导航选项出现在横幅下方异常小的框中。
火车票订票网站12306，网上火车票订票操作步骤
不建议使用
树模式。
苹果的主页提供了下一个/上一个按钮，可视性高，易于识别。
推荐的树模型
链接和按钮应该具有很高的可识别性，并且足够大以便于识别和点击。如果按钮(下一个/上一个和旋转图片选择器)小而紧凑，或者在杂乱的靠山之外，其辨识度不高，不容易点击。
在天梭的主页上，横幅左右两端的箭头在浅色靠山地图的映衬下辨识度很高，很容易点击，但在深色靠山地图上箭头辨识度极低。
不建议使用树模式
手机设备支持滑动手势。这并不是否定传统的横幅控制方式(比如下一页/上一页按钮)，而是在支持滑动手势的基础上增加了这些控制方式。
推荐树型。手机设备支持滑动手势。图片来源:Dribbble
自动转动（或自动轮换）小技巧
横幅中不同图片的自动旋转允许访问者浏览相关信息。但是，为了使自动旋转顺利进行，我们应该注意以下四个细节:
1。不要在手机设备上加载自动旋转功能。当用户点击屏幕时，可能会因为横幅图片自动旋转而不小心点击了一个不想点击的图片。
2。保证自动旋转切换速度不要太快。有时候横幅旋转切换太快，用户看不清信息，会让他们失望。当然，太慢的自动旋转切换也有响应的问题——用户会对这些旋转的图片感到厌倦。
建议测试一下最佳停留时间，或者至少估算一下普通用户浏览和消化相关文字内容和图片信息的平均时间。
如果你明白不同旋转图片的信息需要不同的时间量，你也要考虑单个旋转图片的单次停留时间。如果不能准确把握停留时长，不推荐横幅。
3。让用户处于可控状态(控制给人信任)。鼠标放在横幅上方暂停自动旋转，可以停止自动切换到用户即将看到或点击的旋转图片。在任何自动用户交互(例如点击横幅按钮)完成后，自动旋转功能终止。因为一次点击代表了用户的自动请求，这说明用户对它非常感兴趣，很感兴趣。
4。翻到最后一张图就不要停了。继续循环播放所有图片，显示用户正在浏览的旋转图片。
除横幅之外的最佳选择
首页banners最常见的问题是缺乏后盾:通常用户对下一张旋转图片的内容只是略知一二，基本没有理由说服他们关注下一张图片。因此，他们不愿意查看这些内容。要解决这个问题，除了横幅，还可以考虑主图(大型宣传图片)。
与横幅相比，主图片有以下优点:
用户可以专注于这一张图，而不再将其注重力涣散到其他的转动图片。相比转动，静态主图能更少地涣散用户的注重力。
若设计师明了其只能选择仅此一张图片，图片还要表达其情绪，他们更可能会选择出现更能代表相关服务或产物的内容。
可以用有用的方式对内容进行优先排序，抛弃横幅，使用有用有用的主图，在横幅中加入与行为问候相关的元素。
就像下面亚马逊主页的截图，设计师通过主图设计突出了它的缺货产品——Kindle paper white。这张主图既极其醒目，又极具表现力。
亚马逊主图的字体和颜色与主菜单栏的字体和颜色相匹配。这张主图看起来像是整个网站的一部分，而不是强加的广告。
再比如——新百伦公布了它的新鞋，通过一条留下快速闪光痕迹的路径吸引参观者的注意力，让参观者各取所需。
新百伦既有缺货目录，也有缺货产品。
竣事语
如果用户不能和你设计的横幅互动，可能不是横幅模式。就像布局中的其他内容一样，横幅需要有吸引力，并被称为有用。不要仅仅为了给屏幕添加内容而添加横幅。记住横幅永远不可能比它们的内容更好——如果内容无关紧要，用户体验就会很奇怪，很糟糕。
但是，如果横幅内容符合质量标准，则横幅可以体面地向用户突出网站的受欢迎和有特色的内容。因此，对于“我该不该用横幅？这个问题的准确答案应该是:如果对目标用户的体验有帮助，那就用。
