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