Search
Close this search box.

網站設計:回歸基本的 Scroll 使用行為

Scroll 是一個隨著 HTML5 與 CSS3 逢勃發展和各家瀏覽器提升支援的網頁設計新名詞,但要說新,倒也不是真的那麼新,因為其實不用 HTML5也可以做到。只要巧妙利用新的 CSS3(CSS1、2也行)配合 JavaScript 語法,就可達到當滾動滑鼠滾輪時、多層背景以不同速度移動的 3D/多維垂直運動視覺效果。

從去年國外開始瘋 Parallax Scroll 開始,我就一直在思考:

這樣的視覺效果很炫,但,為什麼非得要 Scroll?Click 不行嗎?

大家有沒有發現,Scroll 是基本的使用者經驗行為?

當你拿到寶特瓶,自己就會逆時鐘把瓶子旋轉開;Scroll 也是同樣的道理。從有網路開始,當你進到一個網站,每個 User 己經被教育成看到 Scroll bar,就會直覺地往下 Scroll,如果再加上提示的話,我相信每個進網站的 User 有 9 成都會自己開始 Scroll。

所以,重點來了!

既然每位 User 都有這樣的直覺行為模式,那為何不利用這種習性,來將User「瀏覽完整內容」與「意想不到的視覺效果」完美結合呢?

一般在開發網站時,都會做 Tracking 追蹤使用者行為,其中很重要的一點是跳脫率(Bounce rate)。看一下你的網站結構(IA、IB),User 要瀏覽到 4.0、5.0,都不知道 Bounce 多少了,而用 Scroll 的好處就是,在驚喜的視覺效果加持下,User 會忍不住一直往下捲,不知不覺就捲到了6.0;這真是太神奇了!

不信你可以自己體驗看看,到了 Parallax Scroll 網站時,會不會自己手賤一直往下 Scroll?

是不是!是不是一不小心就把內容都看完了?這樣不著痕跡地引導體驗,絕對是網頁互動的最高境界。

我只能說,Parallax Scroll 真是高招,我在下意識 Scroll 中驚覺的道理,歡迎大家分享出去,也歡迎一起討論!

最後推薦一下,我個人很愛的品牌所做的 Parallax Scroll 網站,也是唯一今年坎城拿到銅獎的 Parallax Scroll 網站,它甚至支援手機瀏覽達到跟網站相同的使用者體驗:

http://www.nike.com/jumpman23/aj2012/

你看,你是不是不自覺地就把網站看完了!

(圖片來源:abooth202, CC Licensed)