網頁設計:回歸基本的 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?
是不是!是不是一不小心就把內容都看完了?這樣不著痕跡地引導體驗,絕對是網頁互動的最高境界。
http://www.nike.com/jumpman23/aj2012/
你看,你是不是不自覺地就把網站看完了!
我只能說,Parallax Scroll 真是高招,我在下意識 Scroll 中驚覺的道理,歡迎大家分享出去,也歡迎一起討論!
轉貼來源:TechOrange
參考文獻:
1.Deaux, K.; Dane, F. C.; Wrightsman, L. S.(著)楊語芸(譯) (1997), 九O年代社會心理學(Social psychology in the 90s), 台北市: 五南圖書出版.
2.蔡東峻、李奇勳、駱德治 (2001), 品牌延伸與品牌聯盟對消費者品牌轉換意願之影響─以市內電話和國際電話為例, 國家科學委員會研究彙刊:人文及社會科學, 11(4), 345-355.
3.劉仲矩、陳昱如 (2006), 影響網路購物忠誠因素性別差異之比較研究, 電子商務研究, 4(4), 429-450.
相關文章
網頁設計,如何做~最美?從1990年至今的網頁設計歷史演變(下)從1990年至今的網頁設計歷史演變(上)電子報與網頁設計的行銷預算代價越高電子報版型網頁設計建議
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了