Posted on 2006-09-25 20:53
Nomad 閱讀(3264)
評(píng)論(9) 編輯 收藏 所屬分類:
UI設(shè)計(jì)
為什么使用彈出窗口？
?? ?彈出窗口是在以前的Web開(kāi)發(fā)中與用戶交互簡(jiǎn)便手段。彈出窗口可以方便將用戶的焦點(diǎn)轉(zhuǎn)至我們需要的地方。開(kāi)發(fā)中的實(shí)現(xiàn)難度也很低，一條簡(jiǎn)單的JavaScript語(yǔ)句就能實(shí)現(xiàn)。還有一個(gè)好處是可以自定義長(zhǎng)寬，對(duì)于少量信息的交互，可以將實(shí)用的交互放在小空間里，避免了整個(gè)頁(yè)面耗時(shí)的刷新。正是因?yàn)橐陨系姆N種優(yōu)點(diǎn)，在以前的互聯(lián)網(wǎng)世界里彈出窗口大行其道，任何依靠廣告為生的網(wǎng)站都不會(huì)放過(guò)這個(gè)好辦法。
為什么放棄？
?? ?當(dāng)彈出窗口被各類網(wǎng)站濫用的時(shí)候，彈出窗口就和彈出廣告劃上等號(hào)了，用戶也逐漸開(kāi)始厭惡彈出窗口。各瀏覽器提供者紛紛將自己的瀏覽器中加入阻止彈出窗口的功能。當(dāng)瀏覽器開(kāi)始流行標(biāo)簽方式時(shí)，彈出窗口更加沒(méi)有生存的余地了。
什么是替代品？
?? ?答案很簡(jiǎn)單，就是DIV。基本的原理就是先把DIV層載入頁(yè)面中設(shè)visible為false，按鈕觸發(fā)事件后再將他顯示出來(lái)。因?yàn)镈IV有隱藏顯示和絕對(duì)定位的功能，將它作為彈出窗口的替代品是絕佳之選。
?? ?將DIV作為彈出窗口與用戶交互一般要注意幾點(diǎn)：
??? 1.尊重用戶的習(xí)慣。比如有標(biāo)題欄、右上角有關(guān)閉X按鈕。
?? ?2.當(dāng)作為輸入交互或提供閱讀時(shí)，應(yīng)該提供拖拽的功能，以此提高用戶的體驗(yàn)。
?? ?3.輕量級(jí)。DIV隱藏在頁(yè)面中已經(jīng)是多出來(lái)的數(shù)據(jù)，如果DIV中圖片復(fù)雜，會(huì)更加長(zhǎng)用戶的等待時(shí)間。所以DIV的設(shè)計(jì)應(yīng)該是簡(jiǎn)約的，圖片鏈接可以定義在CSS上，這樣可以減少第一次加載的時(shí)間。
有沒(méi)有傻瓜式的工具？
?? ?顯而易見(jiàn)，用DIV代替彈出窗口增加了網(wǎng)站的技術(shù)含量，恐怕一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師已經(jīng)搞不定了，公司得再請(qǐng)上一個(gè)JavaScript程序員。那么現(xiàn)在有沒(méi)有使用簡(jiǎn)易的程序庫(kù)呢？答案是：有，而且很多。我就介紹兩個(gè)很酷的工具：
?? ?
Qooxdoo:
?? ?Qooxdoo的特點(diǎn)就是完全設(shè)計(jì)成了窗口程序的UI界面，甚至連編碼的方式都向窗口程序靠攏。它的UI非常豐富，這種完全拋棄傳統(tǒng)Web設(shè)計(jì)的東西屬于比較前衛(wèi)的。
?? ?
Yahoo UI:
?? ?Yahoo UI與Qooxdoo等不同的是，它還是基于傳統(tǒng)的Web設(shè)計(jì)。它可以很方便的和原始的HTML網(wǎng)頁(yè)集成起來(lái)。對(duì)話框也集成了Ajax方法。
?? ?
附：
?? ?Qooxdoo：
http://qooxdoo.org/?? ?Yahoo UI：
http://developer.yahoo.com/yui/