美圖欣賞 | 設為首頁 | 加入收藏 | 網站地圖

當前位置:電腦中國 > 網絡創業 > 網頁(html) >

帶你梳理正在流行的長滾動頁面設計

2018-06-03 20:53|來源:未知 |作者:dnzg |點擊:

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

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

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

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

Twitter

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

Heart Kids NW

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

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

(責任編輯:dnzg)
相關閱讀
足彩半全场是什么意思