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