您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

網(wǎng)頁設(shè)計(jì)中浮窗的使用實(shí)例

不動浮窗是網(wǎng)頁設(shè)計(jì)中常用的技巧,指一定區(qū)塊不動的在瀏覽器的響應(yīng)位置而不隨滾動條的移動而改變位置的設(shè)計(jì)。
最常見的不動的浮窗設(shè)計(jì)是不動的在瀏覽器底部的彈窗廣告,比如新浪首頁會有新浪視窗的彈窗廣告。


 

最近當(dāng)當(dāng)網(wǎng)首頁廣告力度很大,其中大部分都是不動的在瀏覽器底部和兩邊。


 

由于不動的浮窗總是顯示在網(wǎng)頁內(nèi)容的最上端,有時(shí)候甚至覆蓋了用戶想要的價(jià)值內(nèi)容,這種設(shè)計(jì)確實(shí)不討人喜歡。有時(shí)候,有的不動的浮窗會提供“關(guān)閉”按鈕,但是這明顯不能消除用戶的反感情緒,因?yàn)樵谝黄瑥V告上找關(guān)閉,也是一種煎熬,而且關(guān)閉按鈕總是很小,不注意就會點(diǎn)到廣告鏈接上,有時(shí)候這個(gè)“關(guān)閉”還有可能是假的關(guān)閉,點(diǎn)上去之后反而跳到了廣告頁面。


以上這些都是負(fù)面的甚至流氓的設(shè)計(jì)行為,我們不予討論,今天主要來討論不動的浮窗在設(shè)計(jì)中的良性使用。在此之前,我們淺談過如何提升網(wǎng)站用戶體驗(yàn),這里先分析一下不動的浮窗的特點(diǎn):不隨滾動條移動而移動,出現(xiàn)在瀏覽器的不動的位置。如何利用這種特性呢?我們或許可以從桌面軟件的設(shè)計(jì)中找找靈感。
第一個(gè)例子,福昕閱讀器的標(biāo)簽?zāi)夸涰?,它有什么作用?在一篇長文中,用戶可以點(diǎn)擊標(biāo)簽到達(dá)文章的特定部分。在團(tuán)800網(wǎng)站左邊,有一分類團(tuán)購的錨鏈,點(diǎn)擊了解就能到達(dá)相應(yīng)的分類團(tuán)購部分。


 

第二個(gè)例子,是WPS2012的工具欄和底部的數(shù)據(jù)顯示。作用很明顯,用戶隨時(shí)需要或者隨時(shí)可能需要使用的功能或者看到的信息,用不動的的模塊展示出來。在新浪微博頂部、新浪微博右邊“回到頂部”按鈕、人人網(wǎng)底部、美麗說登陸框,都有這樣的模塊。當(dāng)然,從網(wǎng)站而非用戶的角度講,不動的浮窗廣告也是希望用戶能夠隨時(shí)注意到廣告信息。


 

因此,使用不動的浮窗必須具備的條件就是,頁面很長或者很寬(一般不可能很寬吧?!)的情況下,用戶有需要隨時(shí)或者隨時(shí)可能有需要在不同段落之間跳轉(zhuǎn)閱讀,或者有一些功能和信息隨時(shí)需要或隨時(shí)可能需要提供給用戶。

在整理一些合理使用了不動的浮窗設(shè)計(jì)的案例之后,我同時(shí)也發(fā)現(xiàn)了一些網(wǎng)站引入不動的浮窗設(shè)計(jì)的必要性。第一個(gè)是Godaddy的域名購物車,在用戶選購很多域名并且滾動條下移一定程度后,購物車?yán)锏木唧w信息不可見,影響了用戶體驗(yàn)。第二個(gè)是GoogleCalender的添加事件界面,當(dāng)垂直分辨率不足,用戶在滑動到設(shè)置界面下部之后,保存時(shí)需要重新滾動至上部。

綜上,圖趣總結(jié)出來:浮窗并不都是垃圾廣告、流氓代名詞,一個(gè)好的浮窗設(shè)計(jì),能夠不僅提升網(wǎng)站用戶的體驗(yàn)度,還能增加網(wǎng)站的專業(yè)性,那么,好好的設(shè)計(jì)和利用浮窗吧。
 

[教程作者:圖趣]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/id985.html
出色的交互設(shè)計(jì)師:設(shè)計(jì)一個(gè)偉大的品牌
網(wǎng)站交互設(shè)計(jì):從淘寶網(wǎng)首頁看內(nèi)容隨機(jī)展示應(yīng)用
圖趣網(wǎng)微信
建議反饋
×