麻豆视传媒短视频黄入 帶你梳理正在流行的長滾動頁面設計

在內容一定的情況下，屏幕越小，頁面自然就越長。長滾動頁面的興起并不是沒有理由的，移動端對桌面端市場份額的擠壓，可穿戴設備等小屏幕的流行，所有的這些變化都在促使這一趨勢更加流行。

長滾動頁面的流行促使設計師在新需求下探索新的導航模式和獨到的視覺設計，故事的講述也有了新的方式，瀏覽體驗也將截然不同。在這樣的語境下，我們可以從設計、技術和策略的角度總結出如下特征：

視差滾動圖片：圖片素材以不同的速度運動創造出類似3D的視覺效果，為用戶帶來愉悅的視覺效果和頗為有效的互動；

屏幕尺寸分頁：將長滾動頁面分割成屏幕尺寸大小相同的分頁，這是一種頗為有效的內容分割組織的方式，可以使頁面內容更有凝聚力；

常駐導航：用戶在瀏覽長滾動頁面的時候容易迷失，常駐的導航欄能夠讓用戶感受到可控性和安全感，避免迷失；

動畫互動：在滾動過程中觸發動畫會為用戶帶來樂趣，這會讓用戶享受滾動的過程；

多向滾動翻頁：這是單頁滾動和長滾動頁面發展這么久之后發展出來的新風尚，頁面可以橫向、縱向，從上下左右各種方向滾動；

交互信息提示：有些用戶不會主動滾動頁面，這個時候需要給予適當的心思提示，比如“向下滾動”的文本和箭頭，避免他們迷惑。也可以使用行動召喚按鈕（CTA）等設計方法來提示。

下面的長滾動頁面的案例大多采用了這些設計和技術，這也是為什么這些頁面會躋身今年最值得學習的網頁的行列。

作為社交網站中的巨頭，Twitter的設計自是不會差。但是它更加值得注意的是，它是首個打破翻頁設計的先驅，也是目前最典型的長滾動頁面設計之一。對于Twitter這樣的用戶產生內容的網站，長滾動頁面設計不僅時尚，而且實用。無限滾動加載內容不僅可以保證瀏覽的體驗，而且有利于內容的組織。

這個頁面是針對Podio的工具Beagle而設計的長滾動頁面。設計師將內容分割成屏幕大小的分頁，用來展示不同的內容，動效被拿來銜接頁面，將用戶的吸引力從一個分頁轉移到下一個分頁。

并非所有的長滾動頁面都是華而不實的，倫敦的The Kings Arms 酒吧就采用了固定背景設計，頁面之間的切換也并未采用華麗的過度動效。然而背景中的視覺元素采用了視差圖像，額外的動效消減了瀏覽過程中固定背景的單調性，使得網站保持著活力。

Space Needle網站采用了多向滾動的設計，也是這類案例中最優秀且最值得借鑒的一個。

結語

從這些優秀的頁面可以看出來，長滾動頁面是有其獨到之處，對頁面設計有著非常實際的好處。長滾動頁面的優勢是明顯的：梳理雜亂無章的信息、提升頁面交互性、自由合理的導航設計、更為漂亮有趣的視覺設計，以及更加豐富的內容呈現。當然，考慮到它“長”的特征容易讓用戶迷惑，內容的信息量其實應當進行合理的控制。