第一個屏幕作為設(shè)計(jì)的焦點(diǎn)不足以滿足當(dāng)今的設(shè)計(jì)需求，有時(shí)你必須設(shè)計(jì)一個長滾動的單頁來攜帶足夠的內(nèi)容，保持用戶的注意力，讓他們在滾動和信息中獲得足夠的內(nèi)容。

使用長滾動網(wǎng)頁確實(shí)可以提高內(nèi)容的效率。這種簡單的交互方式本身就吸引了用戶。但是，如果您想設(shè)計(jì)一個足夠好的長滾動頁面，純粹的視覺設(shè)計(jì)是不夠的。如何讓用戶在連續(xù)滾動過程中更好地吸收信息是設(shè)計(jì)師需要仔細(xì)考慮的。在今天的文章中，讓我們探討使長滾動頁面更好的七種策略。

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

Yyiyachts

無論設(shè)計(jì)如何，網(wǎng)頁核心內(nèi)容的質(zhì)量都是首要的。無論設(shè)計(jì)有多好，它都無法掩蓋內(nèi)容的空白和質(zhì)量，因此我們必須首先擁有高質(zhì)量的內(nèi)容。同時(shí)，內(nèi)容必須與整體設(shè)計(jì)有效匹配。有幾種方法可以幫助您創(chuàng)建出色的內(nèi)容：

將您的內(nèi)容變成一個迷人的故事。

高分辨率，高品質(zhì)的視覺內(nèi)容，如高清照片，視頻和精致插圖。

為用戶提供滾動的理由（例如將故事保持在關(guān)鍵位置&“未完成”）。

控制選項(xiàng)的數(shù)量。讓用戶面對盡可能少的選擇。不要讓太多的選擇給用戶帶來壓力。嘗試每個部分只使用一個號召性用語副本或按鈕。

使用好奇的文案。視覺效果可以給人留下良好的第一印象，但是好的內(nèi)容，迷人的副本甚至更好。嘗試使用動詞和匹配沉浸式的故事。

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

Serioverify

清晰的風(fēng)格，清晰的主題可以幫助用戶更好地理解故事或頁面內(nèi)容，帶來身臨其境的體驗(yàn)。主題可以與諸如箭頭，分隔線或其他引導(dǎo)視覺元素的視覺提示組合，以幫助用戶更清楚地理解內(nèi)容之間的關(guān)系，并且在瀏覽過程期間更好地在內(nèi)容之間導(dǎo)航。

可視化的主題設(shè)計(jì)和合理的視覺引導(dǎo)機(jī)制使長滾動網(wǎng)頁能夠更好地為您的網(wǎng)站和內(nèi)容提供服務(wù)。同時(shí)，您還需要注意數(shù)據(jù)的變化。在使用長滾動頁面之前，用戶的保留率是否更高？用戶的主要互動內(nèi)容是否已更改？是否達(dá)到了預(yù)期的轉(zhuǎn)換率？等等。

如果視覺設(shè)計(jì)對整個長滾動頁面沒有幫助，則需要考慮主題是否影響內(nèi)容的呈現(xiàn)，或者是否與用戶群匹配。

　　3、令人愉悅的交互

Beatrate

長滾動網(wǎng)頁設(shè)計(jì)通常會創(chuàng)建一種身臨其境的用戶體驗(yàn)，這主要?dú)w功于令用戶滿意的各種交互。

從運(yùn)動效果到旋轉(zhuǎn)木馬，從視差元素到美麗的動畫，微互動和可觸發(fā)的宏觀互動創(chuàng)造了令人信服的體驗(yàn)。與上面的Beatrate網(wǎng)站一樣，設(shè)計(jì)師添加了許多互動元素，包括視頻，滾動動畫，懸停效果，旋轉(zhuǎn)效果和旋轉(zhuǎn)木馬，這使整個互動更加完美。

每個區(qū)域都使用獨(dú)特的交互，這些交互對應(yīng)不同的動畫效果。這也是因?yàn)樗麄兊牟町?，用戶每次滾動和查看時(shí)都會發(fā)現(xiàn)不同的東西。

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

Fitbit

長卷軸頁面在移動和桌面兩方面都很好用，這也是設(shè)計(jì)師喜歡它的原因之一。

許多用戶實(shí)際上更喜歡滾動而不是點(diǎn)擊，而在移動端，這種交互的趨勢更加明顯。使用長滾動頁面，瀏覽信息的體驗(yàn)更加順暢。

使用各種滾動效果和技術(shù)，如視差效果，顏色塊屏蔽和混搭排版（如拼接文本，視頻，圖像等，以減少用戶瀏覽負(fù)載），以保持整個設(shè)計(jì)流暢。通過滾動觸發(fā)的視差效果和滾動動畫，用戶的參與和樂趣得以維持，鼓勵用戶繼續(xù)滾動。

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

Disasterartist

在長滾動頁面中，某些內(nèi)容需要快速滾動，而某些內(nèi)容需要用戶仔細(xì)閱讀并逐步閱讀。這些長滾動和短滾動內(nèi)容應(yīng)交替出現(xiàn)并且分段匹配。

例如，大圖片易于消化，用戶將快速滾動，包含文本的內(nèi)容通常要求用戶停止并滾動該行。您需要匹配這些不同的內(nèi)容長度，這不僅使交互更富有節(jié)奏，而且讓頁面更加平靜地加載。

　6、為用戶提供路線圖

樂杯

長滾動頁面的一個非常實(shí)際的問題是導(dǎo)航和視覺提示，用戶需要知道他們在哪里瀏覽以及他們離頁面頂部的距離。

路線圖和導(dǎo)航非常重要。目前常見的模式如下：

浮動導(dǎo)航

使用小點(diǎn)或其他替代元素來告知用戶進(jìn)度

使用箭頭和符號告訴用戶下一步該做什么

快速跳轉(zhuǎn)到按鈕的開頭和結(jié)尾

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

Laborfit

長滾動頁面不應(yīng)無限制。在設(shè)計(jì)時(shí)，您應(yīng)該能夠讓用戶知道從哪里開始以及最終結(jié)束的位置。

無論整個頁面的設(shè)計(jì)有多酷，總是需要讓用戶了解目標(biāo)和結(jié)果。

在定義整個設(shè)計(jì)之前，您應(yīng)該概述最終目標(biāo)。確保整個長滾動頁面的每個部分都存在以顯示最終結(jié)果。查看上面的案例，頁面的每個部分都包含一個帶有明確指導(dǎo)語言的顯式CTA按鈕，該按鈕位于中央位置，便于查看和單擊。

您必須承認(rèn)并非每個用戶都可以堅(jiān)持滾動整個頁面的界面的末尾。您需要在頁面中插入一些CTA按鈕，以便用戶可以在不同位置進(jìn)行交互以獲得他們想要的結(jié)果。

　結(jié)語

雖然長滾動頁面不再是新的，但其UX設(shè)計(jì)和交互模型仍在不斷發(fā)展和成熟。如今，設(shè)計(jì)師和網(wǎng)頁設(shè)計(jì)相關(guān)社區(qū)仍在探索其優(yōu)缺點(diǎn)。作為設(shè)計(jì)師，您應(yīng)該仔細(xì)衡量目標(biāo)并選擇是否使用長滾動網(wǎng)頁設(shè)計(jì)。

« H5混亂：如何知道如何實(shí)現(xiàn) | 建立專業(yè)的企業(yè)網(wǎng)站如何選擇專業(yè)的企業(yè)網(wǎng)站系統(tǒng) »