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

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

• 視差滾動圖片：圖片素材以不同的速度運動創(chuàng)造出類似3D的視覺效果，為用戶帶來愉悅的視覺效果和頗為有效的互動
• 屏幕尺寸分頁：將長滾動頁面分割成屏幕尺寸大小相同的分頁，這是一種頗為有效的內(nèi)容分割組織的方式，可以使頁面內(nèi)容更有凝聚力
• 常駐導航：用戶在瀏覽長滾動頁面的時候容易迷失，常駐的導航欄能夠讓用戶感受到可控性和安全感，避免迷失
• 動畫互動：在滾動過程中觸發(fā)動畫會為用戶帶來樂趣，這會讓用戶享受滾動的過程
• 多向滾動翻頁：這是單頁滾動和長滾動頁面發(fā)展這么久之后發(fā)展出來的新風尚，頁面可以橫向、縱向，從上下左右各種方向滾動
• 交互信息提示：有些用戶不會主動滾動頁面，這個時候需要給予適當?shù)男乃继崾荆热纭跋蛳聺L動”的文本和箭頭，避免他們迷惑。也可以使用行動召喚按鈕（CTA）等設計方法來提示。

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

Twitter

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

Heart Kids NW

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

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

The Boat

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

MCA Leicester: The Seven Types of Motorcycle Rider

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

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

Thirteen Reasons Why Your Brain Craves Infographics

不同的概念和組件自然協(xié)調于一個頁面中的時候，用信息圖來中和并協(xié)調所有是一個不錯選擇。這個網(wǎng)頁也正是如此處理的，更小的元素自由協(xié)調地在這個長滾動單頁中流動、呈現(xiàn)。配合恰當?shù)膭赢嫼瓦^渡效果，單調的數(shù)據(jù)擁有了生命。

Junko’s Story: Surviving Hiroshima

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

Beagle

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

Bowhead (Tails and Whales)

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

The Kings Arms

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

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

Wall’s Ice Cream & Airpure Car Fresheners

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

Beatrate Band

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

Space Needle

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

更多案例：

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

結語

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

【你必須知道的設計趨勢】

用戶體驗設計趨勢：
《設計行業(yè)大起底！圖說2015用戶體驗行業(yè)調查報告》

配色搭配趨勢：
《業(yè)界良心！2015年最優(yōu)秀的20款網(wǎng)站配色方案（附配色工具）》

網(wǎng)頁設計趨勢：
《你知道了嗎？2015年網(wǎng)頁設計的9大趨勢》

原文地址：speckyboy
優(yōu)設譯者：@陳子木

本文由優(yōu)設網(wǎng)原創(chuàng)翻譯，請尊重版權和譯者成果，轉摘請附上優(yōu)設鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量102萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com