隨著技術(shù)以及用戶審美的提升，老版本的滾動瀏覽或者并不是你的內(nèi)容或設(shè)計所需要的東西了。以下我們將推薦七種方式來創(chuàng)建一個瀑布流式的網(wǎng)站設(shè)計，通過這些方法將保持用戶的注意力，并可以讓他們保持滾動。

瀑布流式的滾動方式可以成為吸引用戶的最佳方式。有時最好的視覺呈現(xiàn)可能不完全僅僅是發(fā)生在可見的頁面上。這種方式最簡單的理解就是通過多次滾動來捕獲網(wǎng)站頁面的所有內(nèi)容。不過，讓我們先把經(jīng)常爭論的概念放在一邊，如今的用戶已經(jīng)很了解如何以及何時來滾動頁面。

1.創(chuàng)建引人入勝的內(nèi)容



對于滾動式的網(wǎng)站來說，成功的第1個關(guān)鍵因素是創(chuàng)建有質(zhì)量的內(nèi)容。沒有足夠吸引用戶的內(nèi)容，也就沒有什么真正重要的了。

壞消息是我們并沒有一個通用的標(biāo)準(zhǔn)來告訴你什么內(nèi)容對用戶來說是高質(zhì)量的，也無法告訴你你所創(chuàng)造的是好的還是壞的（不過，用戶的分析數(shù)據(jù)或許可以幫助你獲得這些信息）。

但是你可以做一些事情來幫助創(chuàng)造更好的內(nèi)容，比如：

· 敘述一個有趣的故事，并使它成為你的。

· 使用高分辨率、有趣的視覺效果，如照片、插圖和視頻。

· 給用戶一個滾動的理由（你可以借鑒許多圖書在章節(jié)結(jié)束的懸念設(shè)置，它讓人們懷有足夠的期待來繼續(xù)閱讀）。

· 限制選擇。在設(shè)計中給用戶一些東西，但不要用太多的選項(xiàng)來使他們感覺到困惑。每個滾動操作或故事的階段使用一次調(diào)用就足夠了。

· 嘗試編寫一些“誘人”的文本內(nèi)容。當(dāng)視覺產(chǎn)生第一印象時，文字會讓用戶通過內(nèi)容來保持移動，更多的使用行為動詞來營造一個可操作的、可信的故事。

2.建立視覺主題



強(qiáng)大的視覺主題將幫助用戶理解上一屏或滾動的故事。視覺線索，如普通的彩色線、箭頭和連接線，甚至重疊的屏幕，都可以從滾動到滾動之間創(chuàng)建可視的聯(lián)系。這將有助于整個網(wǎng)站設(shè)計過程中用戶在內(nèi)容或視覺上的關(guān)聯(lián)性。

你如何才能知道滾動設(shè)計是否適合你的網(wǎng)站呢？關(guān)于這點(diǎn)，我們有需要回歸到用戶的數(shù)據(jù)分析中了，在分析中實(shí)時跟蹤站點(diǎn)的停留時間。用戶在新版本的網(wǎng)站上停留的時間是否比以前長？他們是不是或多或少的互相影響？最終的轉(zhuǎn)換動作是增加或減少？

這里其實(shí)并不僅僅只是一個視覺主題的問題，滾動應(yīng)該有助于網(wǎng)站流量。如果不這樣做，用戶可能不理解視覺主題，或者只用他們通過滾動，設(shè)計概念以及想要表達(dá)的內(nèi)容才能真正起到作用（當(dāng)然，滾動不是適用于每個人或每一個網(wǎng)站設(shè)計類型）。

3.通過相互作用保持愉快的操作體驗(yàn)

滾動的一大優(yōu)點(diǎn)是，它可以使用戶身臨其境地般地閱讀或講述一個故事。這通常又涉及大量旨在“取悅”用戶的小交互。

從動畫到幻燈片切換再到滾動技術(shù)，在屏幕上展示圖像的方式或許有很多種形式，這些小的交互可以幫助用戶參與。就好像上面的Beatrate，它的網(wǎng)站設(shè)計及使用了少量的交互動作–視頻、動畫滾動，懸停效果，圖像滑塊等。

滾動的每個不同部分都應(yīng)該包含該內(nèi)容區(qū)域特有的動畫。因?yàn)樵亍⒔换ズ蛢?nèi)容是不同的（但仍然需要遵循好理解的用戶模式），對于鼠標(biāo)的每一個動作都有一些新的東西產(chǎn)生。

4.使用滾動技術(shù)


設(shè)計師喜歡滾動式網(wǎng)站的原因之一是，它們在桌面和移動設(shè)備上都能很好地工作。

相較于在更小的設(shè)備上單擊（或點(diǎn)擊）內(nèi)容，許多用戶實(shí)際上更喜歡滾動的形式，因?yàn)樗械男畔⑷匀辉谝粋€地方，很容易訪問。

使用滾動技術(shù)，如視差、顏色阻塞或混合內(nèi)容類型（交替使用圖像、文本或視頻）以保持設(shè)計的流暢性。通過使用和混合滾動技術(shù)，在保持內(nèi)容有趣的同時，還能夠指引用戶理解和記住這些內(nèi)容。這些效果還可以鼓勵滾動，因?yàn)橛脩粝Ｍ吹浇酉聛頃l(fā)生什么。

通過滾動設(shè)計，所有內(nèi)容（或大部分主要內(nèi)容）都在同一頁上，因此你不必重新考慮彈出或隱藏移動導(dǎo)航。

5.交替使用長距滾動和短距滾動


正如你使用交替滾動技術(shù)在單個滾動頁中創(chuàng)建頁面或屏幕一樣，你也可以嘗試把長和短的滾動混合起來。

這可能包括快速和易于消化的短距滾動元素，如圖像或帶有少數(shù)幾個大單詞的文本塊。然后添加一個較長的滾動元件，如圖或大塊的文本塊，接著就是行動按鈕的轉(zhuǎn)化了。

混合內(nèi)容塊的長度有助于保持對用戶對內(nèi)容和交互的整體流程不易感覺厭煩（這個概念很像寫內(nèi)容，你想混合句子長度來防止單調(diào)乏味或防止讀者感覺厭煩）。

6.提供一個路線圖



當(dāng)涉及到滾動式網(wǎng)站設(shè)計時，用戶希望知道他們在哪里，什么時候能找到他們要去的地方，為此，你或許需要提供一個可供參考的路線圖。

網(wǎng)站用戶的路線圖在表現(xiàn)的形式上也有多種，如：

· 粘性導(dǎo)航；

· 顯示還有多少內(nèi)容或頁面的點(diǎn)或其他指示性元素；

· 通過使用箭頭或符號，告訴用戶下一步要做什么；

· 一個回到起點(diǎn)或跳到終點(diǎn)的快捷操作元素。

7.設(shè)計明確的目標(biāo)



長滾動或無限滾動的網(wǎng)站不應(yīng)該是無窮無盡的。設(shè)計應(yīng)該包括用戶的開始、結(jié)束和明確的目標(biāo)。

不管設(shè)計看起來有多酷，它都需要給用戶一些事情做（這也是你搭建網(wǎng)站的原因，對吧？）。

在你考慮設(shè)計之前，先明確一下最終目標(biāo)是什么。確保滾動式的網(wǎng)頁設(shè)計的每一部分都有助于用戶達(dá)到這個目標(biāo)。看看上面的例子：每一頁和每一個滾動條都包含一個位于設(shè)計中間的、易于查看和點(diǎn)擊的調(diào)用操作按鈕。

在多個位置調(diào)用操作是很重要的，因?yàn)椴皇撬杏脩舳紩L動到結(jié)尾后開頭。不管故事有多好，不管視覺效果有多大，不管交互多么誘人，大多數(shù)用戶的注意力都是短暫的，他們很可能決定是否在幾秒鐘內(nèi)完成整個瀏覽。確保可操作元素從一開始就清晰，并且在設(shè)計交互的每個階段都可以被訪問。

總結(jié)

雖然滾動式的網(wǎng)頁設(shè)計并不是新的設(shè)計表現(xiàn)形式，但增強(qiáng)體驗(yàn)的方法正在演變。它開始與內(nèi)容和，結(jié)束于你實(shí)際的策劃經(jīng)驗(yàn)。

請注意，滾動技術(shù)和概念在設(shè)計和用戶觀念中仍然存在爭議。權(quán)衡利弊，以及這種技術(shù)是否適合你的概念，然后通過有效和真實(shí)的分析，以確保它能夠按照預(yù)期工作。