long-scrolling-web-design-trend

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

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

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

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

Twitter

web-trends-long-scrolling-01

web-trends-long-scrolling-02a

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

Heart Kids NW

web-trends-long-scrolling-03a

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

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

The Boat

web-trends-long-scrolling-04

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

MCA Leicester: The Seven Types of Motorcycle Rider

web-trends-long-scrolling-05

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

web-trends-long-scrolling-06

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

Thirteen Reasons Why Your Brain Craves Infographics

web-trends-long-scrolling-07

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

web-trends-long-scrolling-08

Junko’s Story: Surviving Hiroshima

web-trends-long-scrolling-09

web-trends-long-scrolling-10

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

Beagle

web-trends-long-scrolling-11

web-trends-long-scrolling-12

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

Bowhead (Tails and Whales)

web-trends-long-scrolling-13

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

The Kings Arms

web-trends-long-scrolling-14

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

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

Wall’s Ice Cream & Airpure Car Fresheners

web-trends-long-scrolling-15

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

Beatrate Band

web-trends-long-scrolling-16

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

Space Needle

web-trends-long-scrolling-17

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

更多案例:

Keep

web-trends-long-scrolling-18

The Reveal (Lexus)

web-trends-long-scrolling-19

One John St

web-trends-long-scrolling-20

One to See, One to Kill

web-trends-long-scrolling-21

Cameo by Vimeo

web-trends-long-scrolling-22

Squarespace

web-trends-long-scrolling-23

Yep App

web-trends-long-scrolling-24

Beoplay

web-trends-long-scrolling-25

Inbox by Google

web-trends-long-scrolling-26

Be Human by Reebok

web-trends-long-scrolling-27

結語

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

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

用戶體驗設計趨勢:
《設計行業大起底!圖說2015用戶體驗行業調查報告》

配色搭配趨勢:
《業界良心!2015年最優秀的20款網站配色方案(附配色工具)》

網頁設計趨勢:
《你知道了嗎?2015年網頁設計的9大趨勢》

原文地址:speckyboy
優設譯者:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

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

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏