翻譯：jzjz
譯文僅供個人學習，不用于任何形式商業目的，轉載請注明原作者、文章來源、翻譯作者及簡書鏈接，版權歸原文作者所有。
你永遠沒有第二次機會來重塑大家對你的第一印象。這就是為什么網站首頁是網站最重要的部分。如果你正在考慮重新設計你的網站或者想知道如何讓你的網站創造更多的商機，那么首先，就要打造一個吸人眼球的網站首頁。
作為公司的虛擬大門，首頁通常肩負著吸引流量的重任。盡管其占據著網站重要的地位，但許多企業很難正確地優化它。
首頁的設計應服務于不同來源、不同類型的訪客，而不是僅僅圍繞著登錄這個功能而已。換句話說，你的首頁需要能夠達到吸引流量、培養潛在客戶、提升轉化率的效果。
1.標題（Headline）
在三秒內一個網站就應該要讓訪客知道自己能提供的產品和服務是什么。這就是首頁標題要起到的作用。為做到這一點，首先就是要保持你的標題簡單明了，不要出錯。
也許會有不同類型的訪客瀏覽你的網站，你很難想出幾句話能夠擊中每類訪客的心。其實考慮標題時大可不必考慮需要取悅每一個人，你設計的首頁標題只要能打動最有可能對你的產品感興趣的那20-35％的人就可以了。
保持標題本身簡單明了，Dropbox的標題是一個很好的例子：“安全共享、同步、合作”（Securely share, sync, and collaborate.）這很簡單，但很有力。不需要用什么解碼的術語來解釋Dropbox是做什么的。另外“安全”一詞正觸及到了尋找文件管理器的這群人的痛點。同時我們可以注意到Dropbox的副標題是如何通過再次重復“安全”這個詞來起到打動訪客的作用的：
2.副標題（Sub-headline）
首頁的副標題應該通過簡短的描述，明確公司是做什么的或者提供的什么樣的產品和服務來補充標題。這樣可以將火力集中在一個常見的痛點上有效地闡釋你的產品或服務。
同時要優化你移動端網頁的標題和文本格式，用更大的字體給訪客更好的體驗。小字體可能會迫使移動端訪客手動放大網頁閱讀和與網站上的內容進行互動。我們的建議是：讓你的標題和幅標題字體大小不小于22px，而正文字體至少14px。
Podio的副標題就是一個很棒的例子：“試試讓領導信任，員工喜愛的可定制工作管理解決方案吧。”（Try the customisable work management solution leaders trust and employees love working on.）它鎖定了工作管理解決方案這類產品幾個常見的痛點并加以闡釋——向訪客保證解決方案是定制的、解決方案是值得信賴以及使用起來是愉快的：
3. 首要行為召喚（Primary Calls-to-Action）
網站首頁的目的是盡力促使訪客深入瀏覽你的網站，并進一步提升漏斗轉化率（譯者注：具體漏洞模型可參考AARRR轉化漏洞模型）。具體的做法包括在首頁的顯著位置體現要召喚訪客做出的動作（可以有2-3個動作引導，以配合在購買周期中處于不同階段的人群）。一定要將行為召喚的部分放在顯著的位置，讓訪客很容易找到。
這些行為召喚功能首先應該是極具視覺沖擊力的，最好其顏色與首頁的顏色形成鮮明對比，但同時還需與首頁顏色整體方案協調。其次要保持每個行為描述的簡短性（不超過五個字），并且是動作導向的。這樣才能達到有效引導用戶點擊的作用。例如“注冊”、“預約”或“免費試用”等等。
同時要優化移動端的行為召喚功能，請確保它足夠大，這樣才能方便訪客用手指點擊。如果你的行為召喚功能是一個按鈕，這個按鈕大小至少要44px *44px，考慮到按鈕周圍的留白，這個尺寸的按鈕能夠被移動端訪客輕松的注意到并且點擊起來很方便，不至于被訪客不小心錯過了。
Uber首頁有幾個面向不同類型訪客的行為召喚功能做的很棒：面向潛在的司機——“成為司機”，面向潛在乘客——“注冊”。同時請注意Uber首頁亮藍色的行動召喚按鈕和黑色背景形成的鮮明對比：
4.支撐圖像（Supporting Image）
大多數人都是視覺動物。請確保使用一個圖像（甚至是一個簡短的視頻）清楚地表明你所提供的是什么。使用圖像最好能夠捕捉情感促使訪客行動，同時要避免使用俗氣的庫存照片圖像。
同時要優化移動端首頁的圖像，優化的重點在于使用高品質的圖形，減小文件的大小。可以給你的圖片添加alt文本，以防移動設備默認阻止任何圖像。
4 Rivers Smokehouse情感意象的首頁是一個很好的例子：在簡潔的標題、副標題以及首要行為召喚背后循環播放著一系列簡短、高清晰度、令人垂涎的視頻：
5.簡潔（Benefits）
在首頁中如何描述你是做什么的很重要，同時描述你為什么這么做也很重要。潛在用戶想了解購買你的產品會有什么好處，這也是他們留下來的動力。
請保持沿用簡短、易讀、客戶化語言的文案。Evernote的首頁做到了這一點：
6.社會證明（Social Proof）
社會證明就是信任的有力指標。你的產品或服務可能是世界上最好的，你的宣傳中也可以運用這樣的說法——但是別人不一定會相信你，除非他們從其他人口中聽到一樣的評價。這就是社會證明。
在首頁展示幾個最好的（或者是簡短的）案例，如果合適的話還可以鏈接到案例的具體網址。附上案例相關人的名字和照片可以增加可信度。下面是Codecademy的做法：
7.導航（Navigation）
首頁導航的內容和設計的差異直接導致的結果就是——訪客是跳出了還是返回了。想要降低跳出率，那么就需要給訪客一個清晰的返回路徑回到網站的首頁，同時將導航菜單設置在頁面的頂部，并將鏈接結構化。
沒有人比搭建這個網站的人更了解網站結構，所以一定要進行用戶測試以確保首頁的導航能夠讓訪客感覺簡單、直觀并能夠幫助訪客尋找到在網站上想找到的內容。
以下是Geek Squad公司首頁結構良好的導航設計的案例：
8.內容提供（Content Offer）
為了訪客能在流量首頁時留下更多的線索，我們可以設計一個很棒的內容提供功能，提供如白皮書、電子書、或指導。也許訪客不是真的想購買產品，但是這樣做可以讓他們了解他們感興趣的話題。
下面是IMPACT首頁的案例。他們提供了四本關于增長黑客秘密的免費電子書：
9.二級行為召喚（Secondary Calls-to-Action）
首頁上的二級行為召喚往往能帶來額外的轉化率，它們有可能會吸引對非主營感興趣的訪客。二級行為召喚有點像應急計劃：它們為那些并非你核心目標人群的訪客提供了另一條路徑。
首要行為召喚要在首頁的顯著位置，二級行為召喚可以折疊放置在首要行為召喚下方或首頁不明顯的位置，這樣訪客向下滾動屏幕時可以看到。例如下面Trustev 的首頁，你會發現三個醒目的首要行為召喚，在首要行為召喚下方為三個二級行為召喚，分別用來吸引零售商、虛擬商品和金融領域的客戶：
10.產品特點（Features）
除了展示使用產品能夠帶來的好處之外，首頁還需要展示產品的一些關鍵特性列表。這能夠使訪客更多的了解你的產品和服務。再一次提醒，要保持沿用簡短、易讀、客戶化語言的文案。以下為Dropbox的業務說明案例：
11. 相關資源（Resources）
大多數訪客訪問網站，并不是準備直接購買產品。但是為正在尋找相關信息的人提供資源，這不僅可以讓他們在網站上停留更長的時間，還可以幫助企業建立信譽以及在行業中的領袖地位。
KnowledgeVision 將資源鏈接設置在二級行為召喚中。請注意，這些二級行為召喚覆蓋了購買周期的多個階段：為計劃購的知情人提供演示案例；為感興趣并希望了解更多信息的人提供示例；例子的人誰是興趣，為處于漏洞頂部的人提供資源：
12.成功指標（Success Indicators）
除了客戶的成功故事，獎項和贊譽也可以幫助激發訪客良好的第一印象。貴公司是一個廣受好評的餐館？你的應用是否被票選為年度最佳應用？讓首頁訪客知道你的成就，如同社會證明，它會使不認識你的人更信任你。
例如Cleanify的首頁上，你會發現著名出版物的名稱,像《紐約時報》和TechCrunch等對他們的報道：
最后：別忘了優化網站移動端的首頁
無論你是在調整自己的首頁或想完全重新設計首頁，請確保這個首頁在移動端也是同步優化的。這不僅因為在移動設備上能夠友好展示的網站能夠更好的提升SEO（這得益2015年4月谷歌算法的變化），同時現在越來越多的訪客會在移動設備上瀏覽網站，優化網站移動端的首頁能夠為訪客帶來更好的用戶體驗。
