什麼是首屏，為什麼它很重要？ （+10 個令人信服的例子）

當我們導航到一個新網站的主頁時，我們希望我們的瀏覽器窗口充滿漂亮、設計良好的內容。 訪問者對您網站的第一次瀏覽（在滾動之前）是首屏部分，這是您給人留下良好第一印象的機會。

在設計您的網站時，考慮將要查看它的人是至關重要的。 如果您將更多信息放在首位，超出了人類的平均注意力可以處理的範圍，您最終會失去流量。

另一方面，沒有任何有趣內容的網站不會給人留下深刻印象。

在本文中，我們將詳細介紹設計網頁首屏部分的細節。

讓我們開始吧！

“首屏”一詞來自 1700 年代出版的早期。 那時，印刷機印刷在大張紙上，這些紙太大而無法在報攤上展示。 他們將它們折疊起來，因此只有首頁內容的上半部分可見。

這仍然是報業的一部分：當您從攤位購買報紙時，只能看到報紙的上半部分。

這就是為什麼當天所有最重要的新聞都印在首屏的原因。 出版商想要吸引註意力並吸引人們購買他們的報紙！

同樣，廣告商更喜歡報紙的這一部分來展示廣告，因為每個人都會看到它，即使報紙只是坐在架子上。

“首屏”方法也是設計網站的一部分。

在數字世界中，“首屏”是指用戶在滾動之前看到的網頁可見部分。 最終目標是鼓勵訪問者查看頁面的其餘內容。

這種做法不像以前那麼重要，因為如今大多數網絡用戶更喜歡在智能手機屏幕上瀏覽。 這意味著他們習慣於滾動以查看所有重要信息。

訪問者登陸您的網頁時的注意力持續時間非常短——大約8 秒。

明白為什麼盡快集中註意力吸引他們的注意力如此重要嗎？

您需要確保在您的網站首屏上有引人入勝的內容，無論是引人注目的照片或視頻、有趣的標題，還是這些的某種組合。

大多數網頁設計師和 SEO 專業人士建議在首屏添加最有價值的信息，而其他人則聲稱還有其他因素需要關注。

關於這個話題已經有很多激烈的討論，尤其是現在移動用戶在瀏覽量方面已經超過了桌面用戶。 數據告訴我們，移動用戶願意滾動以獲取他們正在尋找的信息。

事實上，一份MOVR 報告得出的結論是，11% 的移動用戶在網頁完成加載後的四秒內開始滾動。 如果頁面還沒有完成加載，無論如何 9% 已經在四秒內開始滾動。

但是無論您的訪問者使用什麼設備，都必須立即向他們展示為什麼您的網站值得他們關注！

以下三個建議可幫助您使首屏內容更強大：

1.讓你的網頁設計響應

響應式網頁設計的重要性超越了美學或遵循“最熱門的網頁設計趨勢”。

響應式網站對整體訪問者體驗、參與度以及最終的轉化率都有積極影響。 當您的網站設計流暢且靈活時，它在訪問者使用的任何屏幕和任何設備上都會看起來很棒。

當它在任何地方看起來都很棒時，訪問者更有可能在您的網站上停留更長時間，與您的內容進行更多互動，並從您那裡購買。 這也使您的全渠道營銷工作更加有效，因為您的消息是針對設備和屏幕尺寸量身定制的。

2. 添加重要的號召性用語

在首屏添加號召性用語 (CTA) 會直接影響轉化率，並可以鼓勵訪問者更快地採取您希望他們採取的行動。 您可以將他們重定向到包含詳細說明的網站的不同頁面，將他們帶到特定類別或產品頁面，或鼓勵他們註冊。

有八種不同類型的 CTA，但最重要的是：

• 領先一代
• “閱讀更多”按鈕
• 產品發現

一個引人注目的號召性用語可以為您帶來驚人的結果並增強訪問者的興趣。 簡而言之，在首屏的正確位置添加 CTA 是讓訪問者做你想做的事的最佳方式！

3. 將重要內容置於首屏

首屏內容是用戶登陸您網站的任何頁面時首先看到的內容，因此必須在此處添加有趣的標題、CTA 或其他重要信息。

切記直截了當：如果您沒有清楚地向訪問者展示該頁面的內容，那麼您很清楚他們的下一步行動將是什麼！

例如，大橫幅看起來很漂亮，但它們不會將重要信息傳遞給訪問者。 這可能會破壞轉化率。

用戶正在尋找與其搜索查詢相關的信息。

您可能認為這意味著您應該全力以赴並在首屏提供詳細信息，但這實際上是個壞主意。 請記住，首屏內容應該吸引用戶的注意力並讓他們向下滾動以深入挖掘。 不要壓倒他們！

在首屏塞滿大量信息也會使您的網站看起來不合標準和混亂。

添加模棱兩可的信息、廣告或任何其他可能擾亂訪問者註意力的東西對你沒有任何好處。

另外，如果你在這個版塊中放置了太多的廣告，你發現敲門的麻煩只是時間問題——谷歌會懲罰你的網站，你會看到越來越少的流量。

如果用戶沒有被您的首屏內容所吸引，那麼該用戶留下來的機會就會直線下降。 他們可能會在幾秒鐘內反彈。

但是等等，這對搜索引擎優化有什麼壞處？

好吧，搜索引擎會記錄用戶在頁面上花費的平均時間，如果算法沒有看到足夠的用戶參與度，它們會慢慢降低您的網頁在搜索引擎結果頁面中的排名。

如果您想降低跳出率，首屏內容是最佳關注點，但這當然並不意味著首屏內容無關緊要。

搜索引擎優化的真正工作始於首屏：這是放置關鍵字和出色標題的地方。 如果首屏內容使您的用戶滾動，請確保他們找到他們期望在首屏看到的內容。

以下是一些頂級電子商務品牌的首屏部分示例。 希望您能為自己的首屏設計找到一些靈感！

1. 全鳥

這些引人注目的圖像將使任何訪問者停下來並註意屏幕上的內容。 更妙的是，巧妙的押韻標題文案與圖像非常吻合。

他們還為“Shop Men”和“Shop Women”提供了一個可點擊的按鈕，幫助用戶立即找到他們想要的東西。

2.絲芙蘭

絲芙蘭專注於突出他們最暢銷的產品。 導航欄下方的圖片可將客戶快速輕鬆地引導至不同的產品類別。

3. 亞瑟王麵粉

亞瑟王麵粉設計精美的網站宣傳他們的一流內容。

除了查看最近的帖子，網站訪問者還可以立即搜索食譜。 再次，首屏設計專注於創造用戶友好的體驗。

4. 沃比·帕克

Warby Parker使用首屏上的黃金地段來大量吸引用戶的注意力。 他們只用幾句話並保持設計簡單，就解釋了他們獨特的賣點。

它們包括三個號召性用語：“購買女性”、“購買男性”和（最有趣的是）“在家免費試用五個”。

5. 購物

您可以看出 Shopify 正在追求更高的轉化率，因為他們將免費試用的註冊字段放在首位。

一旦潛在客戶點擊他們的登陸頁面，他們的注意力就會被引導到 Shopify 希望他們採取的行動。

6.OptiMonk

與 Shopify 一樣，OptiMonk 的首屏內容旨在說服訪問者註冊免費帳戶。

OptiMonk 以獎勵和 Shopify 評論的形式突出了主要承諾（“最強大的電子商務彈出窗口”）和社會證明。

7. Ahrefs

Ahrefs 的網頁設計避免使用圖像，而是使用大膽的顏色和簡短的文案來傳遞一個簡單的信息：他們的產品就是你“排名更高”和“獲得更多流量”所需要的一切。

首屏內容如此之少的事實有助於將客戶的注意力集中在最重要的內容上。

8.然後我遇見了你

Then I Met You 的這個頁面是這個列表中設計最好的登陸頁面之一。

對品牌色彩的巧妙強調與充足的留白、簡短而引人注目的標題文案以及獨特的“立即購買”CTA 相結合，為訪問者的購物體驗提供了一個良好的開端。

9. 快樂盒子店

Happy Box Store 的首屏設計旨在向品牌介紹新訪客。 他們的號召性用語按鈕可以提供有關其核心產品的更多詳細信息：可定制的禮品包。

10. 科頓

Kotn 的網站訪問者立即看到兩張漂亮的照片，介紹了該品牌的外觀和感覺。 在對品牌感到興奮之後，訪問者自然會想要遵循他們的號召性用語並開始購物。

既然我們已經討論了首屏部分並查看了一些示例，現在是時候談談首屏以下區域了。

“首屏”是頁面上只有用戶滾動才能看到的所有內容。 請記住，只有當首屏內容觸髮用戶滾動時，才會看到此內容。 否則，它將保持隱藏狀態，用戶將轉到另一個網站。

您的主要文本塊需要低於首屏……瞄準具有重要標題的易消化部分。 大多數廣告也屬於首屏：Google 的算法不允許在首屏放置太多廣告。

今天，響應式網站勢在必行。 它不僅降低了維護成本，而且大大提高了轉換率。 簡而言之，它增強了用戶體驗，從而降低了跳出率。

好處還不止於此：通過響應式設計，您網站的頁面將加載得更快。 而且您不需要為所有設備創建單獨的網站，這意味著沒有重複的內容。

在 2020 年及以後，您網站的一半以上流量將來自移動設備。 這意味著您需要有一個在任何屏幕尺寸和任何設備上看起來都很棒的響應式網站。

以下是網頁設計師用於響應式網頁的一些最常見的屏幕分辨率：

注意：沒有一種萬能的方法，所以在了解斷點後使用屏幕尺寸。

移動屏幕的標準網站分辨率：

• 360×640
• 375×667
• 414×896
• 360×780
• 375×812

平板電腦屏幕的標準網站分辨率：

• 768×1024
• 1280×800
• 800×128
• 601×962
• 962×601

筆記本電腦屏幕的標準網站分辨率：

• 1920×1080
• 1366×768
• 1440×900
• 1536×864
• 1024×768

第一印像是這裡成功的關鍵。 您希望為常客和首次訪問者提供最佳瀏覽體驗。 如果他們被迫進行大量縮放來閱讀您的頁面內容，他們很可能會放棄它並去尋找一個對用戶更友好的網站。

如果您的頁面內容過多（尤其是首屏），請嘗試減少內容並專注於最重要的信息。 如果您準確地遵循這些步驟，您將順利地為您的用戶提供完美的響應式體驗！

您的首屏內容應該引起訪問者的興趣。 因此，必須在其中添加最具吸引力的內容和強烈的號召性用語。 使用戰略 CTA 將有助於引導訪問者完成銷售/註冊過程。

響應式網頁設計將確保每個用戶都能在您的網站上享受最佳體驗，這從漂亮的首屏部分開始。

請記住，將廣告置於首屏會損害您網站的聲譽並導致難以處理的 SEO 處罰。 避免在此部分添加太多廣告，並確保您遵循 Google 的所有指南。

你有它！ 到目前為止，您應該已經很好地掌握了首屏部分以及如何充分利用它。 祝你好運！