將首屏作為設計的重心已經不足以滿足如今的設計需求，有的時候你還是得設計一個長滾動單頁來承載足夠的內容，保持用戶的關注度，讓他們在滾動中獲取足夠的內容和信息。

使用長滾動式網頁確實能夠更為有效地呈現內容。這種輕松的交互方式本身就對用戶有著足夠的吸引力。不過，想要設計足夠優秀的長滾動頁面，單純的視覺設計是不夠的，在不斷的滾動瀏覽過程中如何讓用戶更好地吸收信息才是設計師需要仔細考慮的事情。今天的文章，我們來探討一下，讓長滾動頁面更加優秀的7種策略。

1、創造真正擁有高參與度的內容

ypiyachts

不論如何設計，網頁核心的內容質量首先得過硬。再好的設計也無法掩蓋內容的空洞和素質，所以首先要有高質量的內容。同時，內容還要和整體設計有效得搭配起來。想要創造優質的內容，有幾個方法能夠幫到你：

• 將你的內容轉化為引人入勝的故事。
• 借助高分辨率、高素質的視覺內容，比如高清圖片、視頻和精致的插畫。
• 給用戶一個滾動的理由（比如讓故事在關鍵的位置“未完待續”）。
• 控制選項數量。讓用戶面對的選擇數量盡可能少，不要讓太多的選擇給用戶造成壓力，每個部分盡量只使用一個號召性的文案或者按鈕。
• 采用讓人好奇的文案。視覺效果可以給人良好的第一印象，但是好的內容，勾人的文案就更好了。盡量使用動詞，并且搭配讓人原因沉浸的故事。

2、構建視覺主題

serioverify

風格明顯，鮮明的主題能夠幫助用戶更好地了解故事或者頁面的內容，擁有沉浸式的體驗。主題中可以搭配一些視覺線索，比如箭頭，分割線，或者其他的指引性視覺元素，幫助用戶更為清晰地明白內容之間的關系，在瀏覽過程中，更好地穿梭于內容之間。

視覺化的主題設計和合理的視覺引導機制，能夠讓長滾動網頁這種設計更好地服務于你的網站和內容。同時，你還需要注意數據上的變化。在采用長滾動頁面之前，用戶的留存率是否更高？用戶主要的互動內容是否有所變化？預期的轉化率是否達到了？等等等等。

如果視覺化的設計并沒有有利于整個長滾動頁面，你需要考慮主題是否影響了內容的展示，或者是否同用戶群相匹配。

3、令人愉悅的交互

beatrate

長滾動式的網頁設計往往能夠創造出沉浸式的用戶體驗，而這種沉浸式的體驗很大程度上是得益于其中取悅用戶的各式交互。

從動效到輪播圖，從視差元素到各種漂亮的動畫，微交互和可觸發的宏交互共同創造了其中引人入勝的體驗。就像上面的 Beatrate 這個網站，設計師在其中加入了大量的可交互的元素，包括視頻，滾動式的動畫，懸浮特效，旋轉動效和輪播圖，他們讓整個交互更為優秀。

每個區域當中都采用了獨特的交互，這些交互對應著不同的動畫效果。也正是因為它們的差異，才使得用戶每次滾動查看，都會發現不一樣的東西。

4、充分運用滾動特效和技術

fitbit

長滾動頁面在移動端和桌面端都能夠良好的運作，很大程度上這是設計師喜愛它的原因之一。

許多用戶其實更加喜歡滾動而不是點擊，而在移動端上，這種交互上的傾向表現得更加明顯。使用長滾動頁面，瀏覽獲取信息的體驗更順滑。

使用各種滾動特效和技術比如視差特效，色塊遮蓋和混搭式排版（比如讓文本、視頻、圖片等內容塊混搭，降低用戶瀏覽負荷）來保持整個設計順暢。搭配滾動觸發式的視差特效和滾動動畫，保持用戶的參與性和趣味性，鼓勵用戶繼續滾動瀏覽。

5、讓長滾動內容和短滾動內容交替出現

disasterartist

在長滾動頁面當中，有些內容需要快速滾動瀏覽，而有的內容則需要用戶仔細閱讀，逐步查看，這些長滾動和短滾動的內容應該交替出現，分段搭配。

比如大片的圖片就是易于消化的內容，用戶會快速滾動查看，而包含文本的內容，則常常需要用戶停下來，逐行滾動查看，你需要讓這些不同的內容長短搭配起來，這樣不僅讓交互更加富有韻律，而且讓頁面更加從容地加載。

6、為用戶提供路線圖

le-mugs

長滾動頁面所需要面臨一個非常實際的問題，就是導航和視覺線索，用戶需要知道他們瀏覽到了什么位置，以及他們距離頁面的首位有多遠。

路線圖和導航是非常重要的。目前常見的模式有以下幾種：

• 懸浮導航
• 使用小點或者其他替代元素來告知用戶進度
• 使用箭頭和符號來告訴用戶接下來的操作
• 提供快速跳轉到開頭和結尾的按鈕

7、設計出清晰的目標

laborfit

長滾動頁面不應該是無限的。設計的時候，應該能夠讓用戶明白從哪里開始，以及最終的結束會在什么地方。

無論整個頁面的設計有多酷，總需要讓用戶明確目標和結果。

在你明確整個設計之前，你應該勾畫出最終的目標。確保整個長滾動頁面的每個部分都是為了呈現最終的結果而存在。看看上面的案例，頁面的每個部分都包含一個明確的CTA按鈕，并且帶有明顯的指引性語言，它位于中心的位置，易于查看和點擊。

你必須承認，并不是每個用戶都能夠堅持滾動到整個頁面的界面的結尾。你需要在頁面中插入一些CTA按鈕，讓用戶可以在不同的位置參與交互，達到他們想要的結果。

結語

雖然長滾動頁面已經不再是什么新鮮的東西，但是它的UX設計和交互模式依然還在不斷成長，逐漸成熟。現如今，設計師和網頁設計相關的社區依然在探討它的利弊，作為設計師，你應該仔細衡量你的目標，再選擇是否使用長滾動網頁設計。

【這些趨勢好文，讓你的設計走到用戶心里】

1. 《這3種獨特的趨勢，能讓網頁設計增色不少》
2. 《2017年最后幾個月，網頁設計師值得注意的趨勢》
3. 《這3個流行趨勢雖然好，但依然要注意這些細節》
4. 《看了那么多的設計趨勢，你知道怎么落地實踐嗎？》

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com