浮動(dòng)層是網(wǎng)頁(yè)效果中的一種形式，它的表現(xiàn)樣式為其始終顯示在屏幕的特定位置上，不跟隨鼠標(biāo)的滾動(dòng)而滾動(dòng)以達(dá)到強(qiáng)調(diào)其內(nèi)容的或者銜接上下文解釋說明的效果。

浮動(dòng)層在前段時(shí)間沉寂了一下下，現(xiàn)在，又重出江湖，得到了重視，發(fā)揮其巨大的作用（PS：浮動(dòng)廣告不算其列）。

浮動(dòng)層在網(wǎng)頁(yè)中的應(yīng)用主要有以下幾種情況（自己總結(jié)，不全面請(qǐng)補(bǔ)充哦）：

1 導(dǎo)航類浮動(dòng)層：

當(dāng)網(wǎng)友在某一頁(yè)面中瀏覽內(nèi)容時(shí)發(fā)現(xiàn)已沒有興趣或者沒有找到自己想要找到的內(nèi)容的時(shí)候，需要從導(dǎo)航進(jìn)入到另一個(gè)頁(yè)面里繼續(xù)瀏覽或者找尋。故當(dāng)現(xiàn)有的很多導(dǎo)航為固定導(dǎo)航時(shí)，網(wǎng)友需要將頁(yè)面重新拉回到頂端或者結(jié)合“返回頂端”按鈕來進(jìn)行下步操作（沒有“返回頂端”按鈕就比較悲劇了T_T）。但是如果導(dǎo)航做成浮動(dòng)的，這個(gè)問題就比較完美的解決了。

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

2 對(duì)比類浮動(dòng)層

現(xiàn)在各種產(chǎn)品越來越豐富，用戶越來越無從下手，所以各種產(chǎn)品頁(yè)面都增加了對(duì)比的功能，有兩種，三種，四種產(chǎn)品同時(shí)對(duì)比，且對(duì)比的參數(shù)也越來越多，導(dǎo)致對(duì)比的頁(yè)面越來越長(zhǎng)。

如果有4種產(chǎn)品同時(shí)對(duì)比，對(duì)比參數(shù)的列表高度有1屏以上，那么瀏覽到下面，用戶會(huì)有大腦混亂的可能，某個(gè)參數(shù)到底是哪個(gè)產(chǎn)品的？同學(xué)，你有沒有這種情況的發(fā)生？當(dāng)產(chǎn)品的名稱行做成浮動(dòng)的，一直提示用戶某個(gè)參數(shù)對(duì)照某一產(chǎn)品，用戶頭腦會(huì)清晰很多，相應(yīng)的，也能很快的對(duì)產(chǎn)品做出選擇。

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

3 提示類浮動(dòng)層

此類浮動(dòng)層應(yīng)用是最廣泛的，各種客服，返回頁(yè)頂，新版提示等等，都會(huì)采用這種形式。如圖C。

雖然浮動(dòng)層的優(yōu)勢(shì)很多，但是也不能濫用，針對(duì)各種情況要進(jìn)行用戶瀏覽方式的分析，合理的使用浮動(dòng)效果。同時(shí)也要控制浮動(dòng)層的數(shù)量，不是越多越好。Thank you！

作者：文擊每耳

文章來源：365ucd.com

標(biāo)簽： 浮動(dòng) 網(wǎng)頁(yè) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。