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

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

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

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

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

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

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

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

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

Twitter

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

Heart Kids NW

這是新西蘭慈善組織Heart Kits 的網站。長滾動頁面設計和動畫結合到一起，滾動操作可以激活動畫，令人驚艷的色調，凄美的意象，組織到一起宣揚拯救生命的信息。

值得注意的是，頁面上并不顯眼的滾動圖標和著陸頁上的指示文字，頂部還有常駐的懸停顯示的導航欄。

The Boat

SBS旗下的The Boat網頁是目前最有創意的長滾動頁面之一，它的設計像互動小說一樣有趣。長滾動式設計賦予頁面更加身臨其境的閱讀體驗，連續的動畫和視差的存在令它徹底區別于傳統的頁面。

MCA Leicester: The Seven Types of Motorcycle Rider

這個長滾動頁面在左側使用灰色的頭盔來作為導航和提示，用戶向下滾動可以看到堆疊的頁面逐步翻看，呈現內容。

也正是這種堆疊式的頁面，將長滾動設計和分頁設計結合到一起，非常有趣。

Thirteen Reasons Why Your Brain Craves Infographics

不同的概念和組件自然協調于一個頁面中的時候，用信息圖來中和并協調所有是一個不錯選擇。這個網頁也正是如此處理的，更小的元素自由協調地在這個長滾動單頁中流動、呈現。配合恰當的動畫和過渡效果，單調的數據擁有了生命。

Junko’s Story: Surviving Hiroshima

這個網站也是SBS旗下的，Junko’s Story 借由信息圖來講述故事，展現了廣島核彈爆炸之后幸存者們的悲慘遭遇。由于內容的嚴肅性，網站的展現形式采用了傳統的圖文混排，不過整體配色和風格上依然采用的是現代的設計。

Beagle

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

Bowhead (Tails and Whales)

就像上面的Beagle的網站，Bowbead 的頁面設計充分運用了長滾動頁面的優勢，將他們的價值觀逐個清晰地展現出來——盡管整個頁面是針對單個產品而設計。網站借助動效淡化了幻燈片式的展現手法，保持內容的吸引力。

The Kings Arms

并非所有的長滾動頁面都是華而不實的，倫敦的The Kings Arms 酒吧就采用了固定背景設計，頁面之間的切換也并未采用華麗的過度動效。

然而背景中的視覺元素采用了視差圖像，額外的動效消減了瀏覽過程中固定背景的單調性，使得網站保持著活力。

Wall’s Ice Cream & Airpure Car Fresheners

與上一個案例截然相反，這個名為Wall’s Ice Cream & Airpure Car Fresheners 的網頁采用了華麗的設計，色彩鮮艷變化多端的小雪糕被設計成導航，隨著頁面向下滾動你會看到有趣的動畫。注意底部進度條的色彩變化和固定的導航設計。

Beatrate Band

Beatrate Band 的頁面同樣采用了長滾動頁面設計，其中包含了幾個實驗性的設計，包括視頻自動播放和水平旋轉圖像。

Space Needle

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

更多案例：

Keep

The Reveal (Lexus)

One John St

One to See, One to Kill

Cameo by Vimeo

Squarespace

Yep App

Beoplay

Inbox by Google

Be Human by Reebok

結語

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

本文作者：@陳子木?編譯

轉載自：優設網?