潮流趨勢！帶你梳理正在流行的長滾動頁面設(shè)計

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

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

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

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

Twitter

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

Heart Kids NW

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

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

The Boat

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

MCA Leicester: The Seven Types of Motorcycle Rider

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

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

Thirteen Reasons Why Your Brain Craves Infographics

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

Junko’s Story: Surviving Hiroshima

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

Beagle

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

Bowhead (Tails and Whales)

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

The Kings Arms

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

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

Wall’s Ice Cream & Airpure Car Fresheners

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

Beatrate Band

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

Space Needle

Space Needle網(wǎng)站采用了多向滾動的設(shè)計，也是這類案例中最優(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

結(jié)語

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

【你必須知道的設(shè)計趨勢】

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

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

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

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

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

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

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