选对Hero Image，增强转化率并吸引受众
极诣曾经在过去的几年中多次介绍着陆页优化技巧，我们来回顾一下：
其中，我们多次提到了选图、图片元素对转化率的影响。一幅好的图片显然有助于抓住读者的兴趣并增加转化率。
认识Hero Image
近日，KissMetrics的博文详细探讨了如何选择Hero Image。Hero Image在Wikipedia的释义如下：
Hero Image是用于网络设计中描述一种特定Web Banner的专业术语。Hero Image是一种大尺寸横幅图片，通常放在靠前并居中的位置。Hero Image经常是访客第一眼看到的视觉效果，它的用意是呈现网站最重要内容概要。Hero Image往往由图像和文字构成，可以是静态或动态（如幻灯片）的内容。
中文Wikipedia把Hero Image翻译成主页横幅，笔者更倾向于翻译成主题图片，也可以称为Main Picture。这样更适合我们在研究着陆页时进行探讨。
我们知道访客只需要50毫秒就可以对访问的网站产生第一印象。而人类眨眼一瞬间却需要100~400毫秒。一点不夸张地说，50毫秒的视觉冲击最多只够我们眨半次眼。今天我们要讲的Hero Image就很大程度需要对这50毫秒或者说二十分之一秒负责。
第一印象在第一屏（Fold）。研究表明用户在第一屏花费的注意力占到了80.3%。在《完美的着陆页 Landing Page的终极攻略》中我们通过热力图说明了第一屏的重要性。
Hero Image唯一可以出现的地方就是第一屏，它通常占据了第一屏的大部分区域。尽管Hero Image是为“眼缘”负责的重要元素，但是许多时候我们的设计师却没有花太多精力在上面。
上图中假设屏幕高度是800像素，我们看到很明显的是800以下外的页面内容获得的关注度要远远少于800以内。
在关注度分布的这个显著区别以外，我们在另一个研究中发现在不信任网站的访客中有94%是由于网站设计相关的原因。
这让我们不得不再重新重视起Hero Image来。因为它正是网站设计的“颜值担当”。
Hero Image的分类
Hero Image大致可以分为三类，这三类又相互交错：
产品类，包括产品最精美的细节和产品在应用场景中的展现。
上图的可口可乐和下图的苹果笔记本都是该类Hero Image的典型。
意境类，包含示意图、场景图、抽象插图等
对于一些非实体产品或服务，这类Hero Image可以非常及时地概括产品特性。
人物类，传递身份、可靠性，代言。传递使用产品带来的心情愉悦；传递成功、轻松、快乐
通过表情和眼神的交流，Ashley Madison的着陆页很好地传达了偷情的快感。[捂脸]
接下来我们要深入讨论了。
怎样选取好的Hero Image？
我们先来看去年美帝让大家津津乐道的大选。
与之针锋相对的……
这几张Hero Image或者说Heroine Image都是经过精心挑选的。其中正面宣传的两张，人物的视线都指向注册表单。Stop Trump的那张特朗普的手指同样指向表单。最后一幅笔者个人认为表单放在右边会更好。
当我们看过上面这些Hero Image之后我们可以获得一些结论，这些是优秀Hero Image的共性：
- 有冲击力，在第一时刻抓住访客注意力
- 传达“一个”概念、观点
- 正确的配色，符合品牌形象和人群对品牌熟知的认同感
- 正确的对比度，与“行动号召”元素相区别，衬托而不喧宾夺主
- 匹配页面主题，帮助标题直达浏览者最关注的问题
除此之外极诣还想提醒各位营销者和设计师的是要避免影响浏览体验，速度至上，慎重使用背景视频，幻灯片。
背景视频现在越来越流行了，但是使用背景视频带来的优势和其造成的损害相比要小得多。它会让页面加载速度变慢，也会影响手机设备上的浏览体验。相对来讲给视频一个播放按钮将会起到非常大的正面作用。读者可以阅读Unbounce的优秀视频着陆页集。
幻灯片更是一无是处。在SearchEngineLand，我们可以延伸阅读《Homepage Sliders: Bad For SEO, Bad For Usability》。这些“豪华高清美图”的点击率不到1%。
上图的视线跟踪的热力图很好地证明了，用户对幻灯片已经非常自然地进行忽略了。
选择Hero Image是营销者和设计师共同的工作，在追求美的同时我们要把握好使用上的科学性。希望本篇能给你一些启示。
感谢阅读，感谢关注极诣！
