首页大屏广告交互设计探讨

很多线上产品由于营销需求，故而要在其主页做广告，而主页的设计风格已经是确定好了的。如果随意乱插广告的话，就会影响原来的整体效果。那么如何添加这一张广告呢？大致有以下注意事项：不要遮盖（弹窗，飘浮等…）、不要晃动、提供关闭功能、不必自动关闭、关闭后提供重新展开功能。

一、使用场景

用于大型活动推广，频率控制在一季度或一年度一次为宜。

二、设计目标

1、效果好！尽量让每位用户都注意到这个活动。
2、干扰小！把对活动不感兴趣的用户的干扰降到最小。

三、设计要点

1、是否要遮盖网站内容？

不要遮盖。从我们监测的历次大屏广告点击数据来看，广告的点击在首页总点击的占比分布在2% – 20%之间。这意味着：有至少80%以上的用户对活动并不感兴趣，他们中大部分是带着明确目的来网站使用特定产品的。如果广告内容遮盖了网站内容，将严重干扰这部分用户的正常使用。他们所能做的是无奈地等待广告收起或立即关闭（如果提供了关闭按钮）。不排除有少量用户会因为你的强制遮挡而被迫点击广告，但我们绝不应该为了这几个少量的转化而得罪大部分用户。

2、如何加载？

比较好的一个方式是在页头上方铺开，这样不会破坏页面整体性，可以大胆使用大尺寸的广告，只要不把页头（LOGO和导航）挤出首屏，都是可接受的，用户总是能快速扫描到网站的页头。广告区域在前端样式中声明高度，特别要强调的是不要使用高度伸缩动画展开方式，使得广告下方的网页正文部分能稳定在窗口的固定位置上，避免被广告的加载过程干扰而变换在窗口的位置让用户无法在广告加载完毕之前精确点击正文部分的链接。总之，大一点没关系，但不要乱晃。

3、是否要提供关闭功能？

必须的。还要在cookie中记录下来，用户再次来到这个页面时不要再次出现。

4、是否需要在一段时间后自动关闭？

不需要。因为用户阅读广告所需时间的个体差异很大，我们不能为用户统一设置这个时间的长度。下图是最近一次我们检测用户主动关闭广告的时间，验证了我们的设想。图中x轴表示时间，y轴表示经过对应时间后关闭广告的用户数。

如果某些特殊情况下需要自动关闭，可以考虑在广告上显示倒计时，让用户预知还有几秒会自动关闭广告。

5、被关闭后，是否要提供重新展开功能？

常规交互原则：操作可撤销，状态可恢复。提供重新展开功能可以给部分用户提供在完成主任务后再点回来看看的机会。关闭和重新展开都可以配合动画，以增强页面变动的平滑度。

四、线框图，供参考