標籤:

視差滾動效果設計的網頁跟傳統的點擊樣式對比有何優勢?


Parallax Scrolling,從字面上嚴格的講其實應該是指一個頁面的內容被分成幾個不同層分布在不同的 z depth 上,所以就像坐在火車上看窗外,最近的景色移動得最快,遠處的移動的很緩慢。

這樣做主要的目的(我的揣測)是為了讓內容本身有豐富的層次感,後來一些設計師也嘗試用類似的原則和技巧,讓scroll成了觸發主要導航元素的主要方式。(比如 Mac Pro 和很多近期 Apple 的產品頁面)

這種瀏覽導航方式的流行,我覺得很大程度上得益於觸屏設備的流行。劃手機/平板的屏幕這個動作已經變得如此自然,滑鼠滾輪應該是羨慕嫉妒恨的。

它的優點我覺得主要在於effortless。使用者不需要去辨認下一頁按鈕,不需要做精確的點擊,輕輕鬆鬆的就把內容大概掃完了,很符合現在人獲取信息的偏好。所以很多micro site,產品介紹頁都喜歡做這種形式,盡量減少信息傳播的摩擦力。

但是這種方式也有被濫用的時候,而且執行不當也會給使用者帶來很多麻煩。所以我建議決定使用這種導航方式前先看一些best practice。(也許是另外一個話題?)


「視差滾動效果設計」無疑就是新一代專題的呈現形態。

優點:

  • 酷炫
  • 容易賣錢
  • 消耗前端

缺點:

  • 載入慢
  • 信息流混亂
  • 對電腦配置要求較高


謝邀?難得有人隨機邀請邀請到一個我能回答的問題......

視差滾動我覺得對於用戶的影響小於它本身的意義,它關鍵在於展示了它可以干更多,它可以做出傳統技術有的功能(flash),並且可以用更少的資源做到。

當然,對於用戶的意義,它也是很大的。

先說它的缺點吧,關鍵在於載入太慢。經常看一些視差滾動的網頁都得把它掛在後台慢慢載入,這對於用戶體驗來說是致命的。當然這隨著互聯網的發展也會不斷解決,就像當年多圖殺貓的情況也會成為歷史。

但是它仍然不算什麼革命性的改變,它並沒有解決什麼剛需,但是作為錦上添花卻是不錯的。然後我們分析一下它幾個可能的應用:

1,產品介紹

毋庸置疑,視差滾動的效果是非常酷炫的,所以很多產品展示都是用了視差滾動,比如曾經的QQ瀏覽器8官方網站(現在改掉了),或者Tinké | Take The Tour , Madwell | A Tiny Little Giant Agency ,還有我以前看過一個特別酷炫的索尼的一個頁面,可惜找不到了(謝 @wanghuayu 提醒,鏈接:Sony USA - Consumer Electronics Products, Movies, Music, Games and Services)。

所以對於產品展示,非常適合這樣的模式,特別有張力,生動。當然缺點也是由於載入慢,所以應用比較少。

2,趣味遊戲

傳統的網頁是線性一維的,而視差滾動可以變成平面二維的,如很經典的馬里奧賽車Mario Kart Wii Experience ,稍加加工,便可以變成一個有趣的HTML5遊戲。

3,設計師創作

其實我們根據上面的分析已經可以感覺出來了,視差滾動對普通用戶的影響不大,頂多會是讓用戶們覺得很酷炫,但是並沒有帶來很多好處。但是對於設計師們這可以造出很多有趣的東西,比如這個Intacto 2013 FLAT DESIGN vs REALISM ,還有我們所見到的那些創意網站。

所以以我目前所判斷,視差滾動沒有什麼商業優點(也許是我眼界不夠吧),但是卻仍然是個好東西。可惜,,,,我還不會做Orz


瀉藥。

設計上的好處:

  1. 強制用戶分屏瀏覽,設計和體驗一致。

  2. 加速瀏覽,這種類翻頁的設計,比滑鼠滾動瀏覽要快。

  3. 搭配響應式設計,pc手機體驗一致,且個人認為這種設計對移動端更友好。

  4. 展示空間大增(尤其是橫向),不需要為不太大的頁面如何塞入更多東西苦惱。話說,這有點類似 DNF這種橫版過關遊戲的地圖,將來肯定是有多行多列的實現,說不定也有人會這麼實現橫版過關遊戲。

我個人認為的壞處,或者說是需要規避的:

  1. 底部的都在底部,元素之間的關注權重可能更加懸殊。因為用戶無法將某頁底部的元素滾動到窗口中央,這點在布局時,可能需要比過去更加考量。

  2. 空間變大,滑鼠需要移動的就越遠,這是不友好的,如何合理的設計規避這些。用戶需要的操作越少越好,到按鈕的距離越短越好。

實現上,難度不比傳統方案大,多幾個事件的綁定和處理。動態效果加上transition就是了。

要說明的是:雖然我認為移動端這種設計方案是要優於傳統方案的,但是具體實現上,卻是不會直接載入全部html的。pc上可以這麼做。放在移動端,還是在滾動或點擊發生時載入,或預先緩存一頁也可(但在多行多列下可能就有問題了)。


我覺得大家都說得挺對了

我說一點吧

視差滾動,適合講故事

傳統方式,適合呈現多信息


從前端開發的意義來說就是增加工作量,可能我水平低沒理解到視差滾動的真正優勢吧。只是覺得對於前端開發來說看到別人做出來了自己也要做出來才夠屌炸天,哈哈。


不知道這個符不符合。看漫畫的時候。現在很多漫畫網站有這種滾動式預先載入完一集所有圖片的觀看選擇…一滾看到底。傳統的點擊如果網速慢半天載入不到下一頁真挺鬧心!


比較好看一點,但是如果3秒時間載入不完我一般都直接關掉。


說白了,就是博得用戶眼球,其它的並沒有什麼卵用!


推薦閱讀:

Web 前端分為哪幾個大方向,工資待遇如何,辛苦嗎?
CSS 定位體系中的 Normal flow 應該如何翻譯比較好?
CSS中屬性的快捷寫法是如何被識別的?
Adobe Muse 會改變前端設計師這個職業嗎?
為什麼要用刪除線,刪除線意義何在?

TAG:網頁設計 |