分析使用者瀏覽方式合理的使用浮動效果

來源:互聯網
上載者:User

文章描述:網頁浮動層之我見.

浮動層是網頁效果中的一種形式,它的表現樣式為其始終顯示在螢幕的特定位置上,不跟隨滑鼠的滾動而滾動以達到強調其內容的或者銜接上下文解釋說明的效果。

浮動層在前段時間沉寂了一下下,現在,又重出江湖,得到了重視,發揮其巨大的作用(PS:浮動廣告不算其列)。

浮動層在網頁中的應用主要有以下幾種情況(自己總結,不全面請補充哦):

1 導航類浮動層:

當網友在某一頁面中瀏覽內容時發現已沒有興趣或者沒有找到自己想要找到的內容的時候,需要從導航進入到另一個頁面裡繼續瀏覽或者找尋。故當現有的很多導航為固定導航時,網友需要將頁面重新拉回到頂端或者結合“返回頂端”按鈕來進行下步操作(沒有“返回頂端”按鈕就比較悲劇了T_T)。但是如果導航做成浮動的,這個問題就比較完美的解決了。

如圖A。 新版的新浪微博的頁頂一級導航採用了浮動的效果,符合微博使用者的心理(很少微博使用者能一頁一頁耐心仔細的翻看微博,微博的瀏覽是跳躍式的),跳轉更方便。與此同時,淘寶的商品詳情頁也進行了細微的改版,商品詳情切換導航才用了浮動層得效果,也和從前就存在的“返回頂部”做了整合,切合現在商品展示越來越細,頁面越來越長的實際情況。

2 對比類浮動層

現在各種產品越來越豐富,使用者越來越無從下手,所以各種產品頁面都增加了對比的功能,有兩種,三種,四種產品同時對比,且對比的參數也越來越多,導致對比的頁面越來越長。

如果有4種產品同時對比,對比參數的列表高度有1屏以上,那麼瀏覽到下面,使用者會有大腦混亂的可能,某個參數到底是哪個產品的?同學,你有沒有這種情況的發生?當產品的名稱行做成浮動的,一直提示使用者某個參數對照某一產品,使用者頭腦會清晰很多,相應的,也能很快的對產品做出選擇。

例如圖B中的QQ汽車對比頁面,汽車的參數有很多,所以這個對比頁面的高度很高,還有正在規劃設計中的365商業地產單鋪對比頁面,最多同時有4個商鋪進行對比,頁面單位資訊量太大,所以此類對比頁面產品名稱行做成浮動是比較合適的,讓使用者一目瞭然,不再有參數與產品對不上的感覺。

3 提示類浮動層

此類浮動層應用是最廣泛的,各種客服,返回頁頂,新版提示等等,都會採用這種形式。如圖C。

雖然浮動層的優勢很多,但是也不能濫用,針對各種情況要進行使用者瀏覽方式的分析,合理的使用浮動效果。同時也要控制浮動層的數量,不是越多越好。Thank you!

作者:文擊每耳



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。