- 《著陸頁：比起飛更危險的是著陸》
- 《數字行銷中的心理學，利用認知偏誤提高轉化率》
- 《SEM，為什麼我的轉化率那麼低？ 》
- 《一個合格的互聯網美工必須了解的入門知識》
其中，我們多次提到了選圖、圖片元素對轉化率的影響。一幅好的圖片顯然有助於抓住讀者的興趣並增加轉化率。
認識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的共性：
- 有衝擊力，在第一時刻抓住訪客注意力
- 傳達“一個”概念、觀點
- 正確的配色，符合品牌形象和人群對品牌熟知的認同感
- 正確的對比度，與“行動號召”元素相區別，襯托而不喧賓奪主
- 匹配頁面主題，幫助標題直達瀏覽者最關注的問題
除此之外HubSpot One還想提醒各位行銷者和設計師的是要避免影響瀏覽體驗，速度至上，慎重使用背景影片，幻燈片。
背景影片現在越來越流行了，但是使用背景影片帶來的優勢和其造成的損害相比要小得多。它會讓頁面加載速度變慢，也會影響手機設備上的瀏覽體驗。相對來講給影片一個播放按鈕將會起到非常大的正面作用。讀者可以閱讀Unbounce的優秀影片著陸頁集。
幻燈片更是一無是處。在SearchEngineLand，我們可以延伸閱讀《Homepage Sliders: Bad For SEO, Bad For Usability》。這些“豪華高清美圖”的點擊率不到1%。
上圖的視線跟踪的熱力圖很好地證明了，用戶對幻燈片已經非常自然地進行忽略了。
選擇Hero Image是行銷者和設計師共同的工作，在追求美的同時我們要把握好使用上的科學性。希望本篇能給你一些啟示。
感謝閱讀，感謝關注HubSpot One！