編者按：封面圖和著陸頁絕對是設計師的必修課，它決定了產品和服務的第一印象，是兼顧呈現和轉化功能的重要設計物料，堪稱是設計的「橋頭堡」。這篇文章出自資深 UX 設計師 Michal Malewicz ，他重新審視了如今很多封面圖和首屏、著陸頁的設計，并且提出了他所認為的更為合理的解決方案。

著陸頁的主要目的是將瀏覽內容的用戶轉化為你的客戶。簡而言之：一切都是為了銷售轉化！

今天，我將用這篇文章來挑戰你們對網頁設計和封面圖設計的的「普遍共識」。

這是基于超過 500 小時的 HotJar 瀏覽時長數據，以及我們在 Squareblack 為幾乎所有產品類別創建的網站案例。

除此之外，我還分析了 X 平臺上創作者提供的 400 多個網站 — 其中一些非常受歡迎。當然，有些也相當不錯。

來自網絡社區的網站設計示例

我收集了 1000 多個這樣的設計，對它們進行了分組，并且已經分析了 400 多個。

我在這篇文章當中不會過度科學數據化，我希望你了解并重新思考你對網站的看法，然后找到自己的方式讓網站變得更好。不過所有的工作都有一個起點。

一切都始于封面圖

封面圖是你的客戶首先看到的東西。第一印象很重要。

好的第一印象應該已經說服客戶 90% 了。一個好的封面圖會幫用戶消除剩下 10 % 的疑慮。

這是高轉換率著陸頁的基礎套路，收藏好

最終的目標

與一些流行觀點相反，在我的觀察當中，封面圖的最終目標并非為了激發好奇心或營造神秘感。你不應該含糊其辭，也不應該裝腔作勢，指望用戶向下滾動瀏覽查看解釋。

大家都很忙，你的潛在客戶更是如此。如果你沒有使用封面圖展示他們想要的東西，他們大概率會關閉頁面看點別的。

結果就是，賣不出去。

封面圖的 8 秒規則：如果在前 8 秒內你的用戶無法確定這是否是他們要的，他們就會離開。

現代封面圖設計的邏輯

這個月我分析了 500 多個現代網頁設計，大部分都是由 X 平臺上的設計師自己做的。其中很多都相當不錯，但也有一些完全的反面案例，卻被當作好的設計受到追捧。

這樣一來，就有問題了。

1、設計師從 AI 生成的圖像開始。它要么是一些風景，要么是抽象形狀。他們通常還會在頂部添加一個玻璃質感菜單，但為了清晰起見，我們先跳過這些設計的步驟。

現代網頁設計流行的背景元素

2、第二步是添加標題、副標題/細節描述和 CTA 按鈕。首先我們來看看樣式。在本文中我特意使用了一種流行的字體，因為大多數時候這些標題都是這樣的。

如果你在網站上看到這些抽象的內容 - 趕緊跑！

3、最重要的是找到合適的、聽起來很巧妙的標題文本，這樣用戶才能立刻被驚艷到。不僅背景中的圖像很漂亮，而且看看那些天衣無縫、變化多端的文字組合！

網站中大量使用的無意義詞語列表

我可以馬上告訴你，如果你看到一個標題包含兩個這樣的詞，那么它是人工撰寫的概率就會降為 0。這是一種看似復雜卻又令人費解的文字游戲，實際上它也只會讓用戶感到困惑。

文字與視覺的匹配

這這設計方式當中，文字是事后才考慮的，并且需要遷就圖片內容。文字的大小、位置和換行方式必須基于圖像構圖。

這就是我們最終看到視覺好看但是信息無意義的封面圖的原因。

我在 X 上設計了一張圖來諷刺這一點——有些人仍然稱贊「它看起來真好看」

開始測試

如果你打算聘請一位作品集里有這類東西的設計師，那么與你之前的「不太復雜的設計」相比，你的銷售轉化率實際上可能還會下降。

現在我們知道什么是壞事，那么我們如何才能使它變好呢？

從版面框架開始而非視覺

在與一些擁有龐大營銷團隊的大客戶合作時，我們很快意識到構建著陸頁的經典方法是行不通的。

主要有兩個風險。一個是立即進行高保真設計，但可能需要浪費大量時間進行徹底的重新設計。

另一種是制作低保真線框圖，大多數甲方營銷人員不明白為什么它這么丑，這會破壞你未來的所有設計努力。

還有第三條路

2016 年某個時候，我創造了 Typeframe （版面框架）這個術語，它是一種低保真線框搭配高保真文本。這意味著所有的文案都已經按層次結構排列好了。所有文本都有合適的大小和間距，以支持層次結構。

以下是一個案例：

版面框架

首先是要弄清楚客戶對什么感興趣。然后制作 3-5 個版本的文案組合，并在本地（而不是在互聯網上）測試，以獲得第一輪的反饋。

網站文案的 A/B/C 測試

所用的確切措辭和文案應根據行業進行調整，這個階段沒有特別的詞語或短語可以起決定性作用。

主要思路是讓目標用戶感到信息是清晰的。他們需要在看到文案的時候，立即了解自己能從這個品牌的產品或服務中獲得哪些好處。如果你沒有透過封面圖展示他們所需要的內容，他們就會點擊離開，轉化失敗。

使用適當的字體大小、層次和間距，確保甲方和客戶的營銷團隊都可以更輕松地理解信息。而這在任何圖片和視覺信息被放到屏幕上之前就要搞定。

視覺效果

只有當這一部分完全弄清楚之后，我們才能開始思考將文案視覺化呈現的最佳方式。

但這與「看上去漂亮」無關，關鍵的視覺設計完全是服務于內容和轉化的。

用戶閱讀你的文案內容，并且視覺元素應該放大這些信息給人的感知。

你會相信一個人還是一個隨機的抽象視覺元素？

人類與抽象元素

99% 的企業都會因在封面圖中使用人類形象而受益。

這是因為我們天生就與其他人保持一致，我們想模仿榜樣所做的事。我們更容易想象自己處于與他們相同的處境。

在某些行業中，這并不重要，但這些人是少數。讓用戶與封面圖產生的情感聯系對于吸引注意力至關重要。

當然，這種構建的方式必須妥帖地完成——根據信息的上下文環境來構建并與之相匹配。

在標題中添加不符合氛圍和內容的隨機人物，會很快分散用戶注意力。

添加知名圖庫人物圖片也會產生「我以前好像在哪里見過」的錯覺，但是這種錯覺并非好事。當照片明顯是圖庫照片時，用戶對品牌的信任度會急劇下降。

最好的方法，是為你自己的品牌單獨準備照片，生成一些經過大量調整后符合你的風格的照片，或者對圖庫網站上的照片進行大幅修改。

優秀封面圖的示例

發揮創造力，但不要含糊其辭。少即是多。

重新為網站上的人物圖片調色

顏色匹配

當你已經有了配色方案時，你可以將圖像的某些部分（例如人物的衣服）重新著色為主 CTA 的淺色調，以加強視覺關聯性。

在 Squareblack 上我們有時甚至會重新著色人物的眼睛，我們有時候在這些事情上非常癡迷。

重新著色時，請確保只突出一件衣服，不要讓人物穿著單色的「制服」。在上面的例子中，這是襯衫，重新著色后會顯得很微妙。

網頁設計中的凝視原則

凝視原則

凝視原則是我之前多次提到過的一個設計原則。簡而言之，這是一種人類的原始本能，大家總想看看別人正在看的東西。基本上就是跟隨其他人的視線來尋找視覺標的。

當照片中的人直視相機時，大部分用戶注意力都會集中在眼睛上。但讓照片中的人看向 CTA 按鈕，可以將注意力轉移到我們想要的地方，也就是 CTA 按鈕。

通過策略性的布局來產生視覺引導線

視覺引導

凝視原則是人們眼睛向標題看的第一個引導。但請注意，在文本的影響下，視線是如何被折斷的。它形成一條不自然的留白和引導線，隔絕了 CTA 按鈕和人物的目光。

以這種方式需要進行更改優化，否則會使整個視覺通路會顯得過于曲折，進而導致失效。

鋸齒狀的視覺引導線破壞了引導，這是失敗的層次結構

內容部分

現在讓我們快速瀏覽一下文案內容的部分，看看它們的結構是否合理。

為此，我使用了我創建的另一種設計方法，我將它稱為「層次標識」。

網站標題上的層次標識，這是封面圖的五個主要的元素。

1. 引子，在這個案例當中，使用的社交認同的邏輯，呈現的是用戶數量，這是最有說服力的技巧之一。
2. 主標題，它必須簡短且非常容易理解，展示你如何解決用戶關心的問題。
3. 一旦用戶發現你可以解決他們的問題，那么請在描述中向用戶展示如何解決。簡短一點，你可以幫助用戶消除一兩個最常見的疑問（比如如果線路繁忙怎么辦）。
4. 對于大多數項目，只需一個 CTA 按鈕即可直接進入購買流程。對于高價、高摩擦行業（昂貴或難以轉化的行業），可以添加額外的按鈕以展示相關的應用案例。
5. 情感聯系（也可以使用小疊加層來顯示已解決的問題 - 例如在這個產品可以在線路繁忙時輔助安排約會）

在開始制作高保真樣機之前規劃你的設計方向

封面圖的設計總結

對于高轉換率的著陸頁，并沒有真正絕對套路。只有一些基本原則需要遵循，并且要有開放的心態來研究和測試假設。

最重要的是保持設計足夠清晰和足夠明確的邏輯結構。首先從版面框架開始進行測試和調研，以便后續視覺效果呈現，和文案能夠產生合理的聯系。

當然還有更多講究，下次我們將介紹不同的設計指導原則。