Web UI Desgin 尺寸問題需求研究與分析


關於尺寸
有關新版網站的UI畫面, 面對未來的使用者畫面為三大部分, Mobile Device (320x240 with touch screen), Ntebook (800x600 / 1024x768), desktop / Notebook ( above 1280x1440 ) , 畫面已經不太可能以一套UI 滿足所有的使用者族群, 因此在未來新版網站的視覺部分將會分三種不同使用者的樣版, 讓相關的使用者來挑選並使用。

關於介面設計規劃

目前初期規劃以1024 x 768為主, 規劃1000pix width 置中的版型為主.後期將會開發大尺寸 ( above 1280x1440 ) 與 Mobile Device 所使用的UI.

關係UI控制
目前滑鼠控制UI比例的比例將會每年以等比級數的方式下降, 除一般NB工作者之外, 平版電腦與Mobile Device, Desktop 的大型螢幕都會搭配觸控版, 因此未來兩年內, User Interface的控制將會慢慢導入拖、拉、點、翻等不同的控制方式取代目前的滑鼠的點擊方式。

另外原本網站多媒體常用的Flash 元件也因為執行內容的多元化, 呼叫的元件與執行條件漸漸使 Client 端產生了極大硬體上的限制, 因此, 目前已經有需多的Netbook, mobile device 漸漸不支援高階版本的 flash player, 因此上述的控制方式也不可能全以flash 動畫或是相關的RIA ( 多媒體應用 )媒介來替代!

因此, 所有的控制將會回歸單純的程式語言來做以上的控制, 因此導入 JavaScript base 的控制語言與單純的HTML/CSS來建構的架構將為本次改版的主架構, 相關技術內容將會採用最新版本的JQTOUCH (http://jqtouch.com/ ) 作延伸的開發基礎!

JQTOUCH說明
jqTouch 是一款為 Mobile Device 當中瀏覽器所設計的 JS 語言,基本上的操作模式沿用 jquery, jquery 強大的 selector 也是可以在 jqTouch 當中使用,僅管目前還在 beta,而裡面所使用的 jquery 版本也不是目前最新版本,不過,光省去查詢 webkit 及寫導覽組件和效果的時間,就讓我覺得拿來開發 RIA 的東西應該是滿夠用了。官網的wiki說明,從入門一直到自訂動作及事件監聽也寫得很詳細,可以快速入門。
Demo: http://i-wander.appspot.com/f/iphone/project/class/index.html

熱門文章