網頁浮動層之我見：優勢很多 但也不能濫用

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

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

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

　　1 導航類浮動層：

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

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

　　2 對比類浮動層

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

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

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

　　3 提示類浮動層

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

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

　　作者：文擊每耳

　　文章來源：365ucd.com