將首屏作為設(shè)計(jì)的重心已經(jīng)不足以滿(mǎn)足如今的設(shè)計(jì)需求，有的時(shí)候你還是得設(shè)計(jì)一個(gè)長(zhǎng)滾動(dòng)單頁(yè)來(lái)承載足夠的內(nèi)容，保持用戶(hù)的關(guān)注度，讓他們?cè)跐L動(dòng)中獲取足夠的內(nèi)容和信息。

使用長(zhǎng)滾動(dòng)式網(wǎng)頁(yè)確實(shí)能夠更為有效地呈現(xiàn)內(nèi)容。這種輕松的交互方式本身就對(duì)用戶(hù)有著足夠的吸引力。不過(guò)，想要設(shè)計(jì)足夠優(yōu)秀的長(zhǎng)滾動(dòng)頁(yè)面，單純的視覺(jué)設(shè)計(jì)是不夠的，在不斷的滾動(dòng)瀏覽過(guò)程中如何讓用戶(hù)更好地吸收信息才是設(shè)計(jì)師需要仔細(xì)考慮的事情。今天的文章，我們來(lái)探討一下，讓長(zhǎng)滾動(dòng)頁(yè)面更加優(yōu)秀的7種策略。

1、創(chuàng)造真正擁有高參與度的內(nèi)容

ypiyachts

不論如何設(shè)計(jì)，網(wǎng)頁(yè)核心的內(nèi)容質(zhì)量首先得過(guò)硬。再好的設(shè)計(jì)也無(wú)法掩蓋內(nèi)容的空洞和素質(zhì)，所以首先要有高質(zhì)量的內(nèi)容。同時(shí)，內(nèi)容還要和整體設(shè)計(jì)有效得搭配起來(lái)。想要?jiǎng)?chuàng)造優(yōu)質(zhì)的內(nèi)容，有幾個(gè)方法能夠幫到你：

• 將你的內(nèi)容轉(zhuǎn)化為引人入勝的故事。

• 借助高分辨率、高素質(zhì)的視覺(jué)內(nèi)容，比如高清圖片、視頻和精致的插畫(huà)。

• 給用戶(hù)一個(gè)滾動(dòng)的理由（比如讓故事在關(guān)鍵的位置“未完待續(xù)”）。

• 控制選項(xiàng)數(shù)量。讓用戶(hù)面對(duì)的選擇數(shù)量盡可能少，不要讓太多的選擇給用戶(hù)造成壓力，每個(gè)部分盡量只使用一個(gè)號(hào)召性的文案或者按鈕。

• 采用讓人好奇的文案。視覺(jué)效果可以給人良好的第一印象，但是好的內(nèi)容，勾人的文案就更好了。盡量使用動(dòng)詞，并且搭配讓人原因沉浸的故事。

2、構(gòu)建視覺(jué)主題

serioverify

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

視覺(jué)化的主題設(shè)計(jì)和合理的視覺(jué)引導(dǎo)機(jī)制，能夠讓長(zhǎng)滾動(dòng)網(wǎng)頁(yè)這種設(shè)計(jì)更好地服務(wù)于你的網(wǎng)站和內(nèi)容。同時(shí)，你還需要注意數(shù)據(jù)上的變化。在采用長(zhǎng)滾動(dòng)頁(yè)面之前，用戶(hù)的留存率是否更高？用戶(hù)主要的互動(dòng)內(nèi)容是否有所變化？預(yù)期的轉(zhuǎn)化率是否達(dá)到了？等等等等。

如果視覺(jué)化的設(shè)計(jì)并沒(méi)有有利于整個(gè)長(zhǎng)滾動(dòng)頁(yè)面，你需要考慮主題是否影響了內(nèi)容的展示，或者是否同用戶(hù)群相匹配。

3、令人愉悅的交互

beatrate

長(zhǎng)滾動(dòng)式的網(wǎng)頁(yè)設(shè)計(jì)往往能夠創(chuàng)造出沉浸式的用戶(hù)體驗(yàn)，而這種沉浸式的體驗(yàn)很大程度上是得益于其中取悅用戶(hù)的各式交互。

從動(dòng)效到輪播圖，從視差元素到各種漂亮的動(dòng)畫(huà)，微交互和可觸發(fā)的宏交互共同創(chuàng)造了其中引人入勝的體驗(yàn)。就像上面的 Beatrate 這個(gè)網(wǎng)站，設(shè)計(jì)師在其中加入了大量的可交互的元素，包括視頻，滾動(dòng)式的動(dòng)畫(huà)，懸浮特效，旋轉(zhuǎn)動(dòng)效和輪播圖，他們讓整個(gè)交互更為優(yōu)秀。

每個(gè)區(qū)域當(dāng)中都采用了獨(dú)特的交互，這些交互對(duì)應(yīng)著不同的動(dòng)畫(huà)效果。也正是因?yàn)樗鼈兊牟町?，才使得用?hù)每次滾動(dòng)查看，都會(huì)發(fā)現(xiàn)不一樣的東西。

4、充分運(yùn)用滾動(dòng)特效和技術(shù)

fitbit

長(zhǎng)滾動(dòng)頁(yè)面在移動(dòng)端和桌面端都能夠良好的運(yùn)作，很大程度上這是設(shè)計(jì)師喜愛(ài)它的原因之一。

許多用戶(hù)其實(shí)更加喜歡滾動(dòng)而不是點(diǎn)擊，而在移動(dòng)端上，這種交互上的傾向表現(xiàn)得更加明顯。使用長(zhǎng)滾動(dòng)頁(yè)面，瀏覽獲取信息的體驗(yàn)更順滑。

使用各種滾動(dòng)特效和技術(shù)比如視差特效，色塊遮蓋和混搭式排版（比如讓文本、視頻、圖片等內(nèi)容塊混搭，降低用戶(hù)瀏覽負(fù)荷）來(lái)保持整個(gè)設(shè)計(jì)順暢。搭配滾動(dòng)觸發(fā)式的視差特效和滾動(dòng)動(dòng)畫(huà)，保持用戶(hù)的參與性和趣味性，鼓勵(lì)用戶(hù)繼續(xù)滾動(dòng)瀏覽。

5、讓長(zhǎng)滾動(dòng)內(nèi)容和短滾動(dòng)內(nèi)容交替出現(xiàn)

disasterartist

在長(zhǎng)滾動(dòng)頁(yè)面當(dāng)中，有些內(nèi)容需要快速滾動(dòng)瀏覽，而有的內(nèi)容則需要用戶(hù)仔細(xì)閱讀，逐步查看，這些長(zhǎng)滾動(dòng)和短滾動(dòng)的內(nèi)容應(yīng)該交替出現(xiàn)，分段搭配。

比如大片的圖片就是易于消化的內(nèi)容，用戶(hù)會(huì)快速滾動(dòng)查看，而包含文本的內(nèi)容，則常常需要用戶(hù)停下來(lái)，逐行滾動(dòng)查看，你需要讓這些不同的內(nèi)容長(zhǎng)短搭配起來(lái)，這樣不僅讓交互更加富有韻律，而且讓頁(yè)面更加從容地加載。

6、為用戶(hù)提供路線(xiàn)圖

le-mugs

長(zhǎng)滾動(dòng)頁(yè)面所需要面臨一個(gè)非常實(shí)際的問(wèn)題，就是導(dǎo)航和視覺(jué)線(xiàn)索，用戶(hù)需要知道他們?yōu)g覽到了什么位置，以及他們距離頁(yè)面的首位有多遠(yuǎn)。

路線(xiàn)圖和導(dǎo)航是非常重要的。目前常見(jiàn)的模式有以下幾種：

• 懸浮導(dǎo)航

• 使用小點(diǎn)或者其他替代元素來(lái)告知用戶(hù)進(jìn)度

• 使用箭頭和符號(hào)來(lái)告訴用戶(hù)接下來(lái)的操作

• 提供快速跳轉(zhuǎn)到開(kāi)頭和結(jié)尾的按鈕

7、設(shè)計(jì)出清晰的目標(biāo)

laborfit

長(zhǎng)滾動(dòng)頁(yè)面不應(yīng)該是無(wú)限的。設(shè)計(jì)的時(shí)候，應(yīng)該能夠讓用戶(hù)明白從哪里開(kāi)始，以及最終的結(jié)束會(huì)在什么地方。

無(wú)論整個(gè)頁(yè)面的設(shè)計(jì)有多酷，總需要讓用戶(hù)明確目標(biāo)和結(jié)果。

在你明確整個(gè)設(shè)計(jì)之前，你應(yīng)該勾畫(huà)出最終的目標(biāo)。確保整個(gè)長(zhǎng)滾動(dòng)頁(yè)面的每個(gè)部分都是為了呈現(xiàn)最終的結(jié)果而存在。看看上面的案例，頁(yè)面的每個(gè)部分都包含一個(gè)明確的CTA按鈕，并且?guī)в忻黠@的指引性語(yǔ)言，它位于中心的位置，易于查看和點(diǎn)擊。

你必須承認(rèn)，并不是每個(gè)用戶(hù)都能夠堅(jiān)持滾動(dòng)到整個(gè)頁(yè)面的界面的結(jié)尾。你需要在頁(yè)面中插入一些CTA按鈕，讓用戶(hù)可以在不同的位置參與交互，達(dá)到他們想要的結(jié)果。

結(jié)語(yǔ)

雖然長(zhǎng)滾動(dòng)頁(yè)面已經(jīng)不再是什么新鮮的東西，但是它的UX設(shè)計(jì)和交互模式依然還在不斷成長(zhǎng)，逐漸成熟。現(xiàn)如今，設(shè)計(jì)師和網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的社區(qū)依然在探討它的利弊，作為設(shè)計(jì)師，你應(yīng)該仔細(xì)衡量你的目標(biāo)，再選擇是否使用長(zhǎng)滾動(dòng)網(wǎng)頁(yè)設(shè)計(jì)。