Web UI

WebUI是網路產品界面設計(Website User Interface）的意思，設計範圍包括常見的網站設計（如電商網站、社交網站）、網路軟體設計（如信箱、Saas產品）等。WUI設計與常見網站建設 的區別是，WUI注重人與網站的互動和體驗，以人為中心進行設計，而傳統的網站建設是以功能為中心進行設計，隨著用戶對網站體驗的日漸挑剔，網站建設的思想逐漸被淘汰。故學WUI是網站設計的未來趨勢。

基本介紹

• 中文名：網路產品界面設計
• 外文名：Web UI
• 全名：Website User Interface
• 注重：人與網站的互動和體驗

發展歷程

Web 1.0的UI技術

在HTML規範發展的過程中，以HTML標籤為基礎來構建的頁面一直是Web UI的主流技術。

1.1.1 純文本網頁

1989年，英國人Tim Berners Lee發明了www（World Wide Web），全球資訊網誕生。通過www，分散在網路上各處的資源可以相互訪問。最開始的網頁沒有UI的概念，只包含純文本的數據和跳轉的超連結。

1.1.2 靜態HTML頁面

隨著越來越多的數據被放置到了網際網路上，純文本的HTML已經不能滿足人們的期望。Marc Andreessen在1993年引入了圖片。隨後，字型、背景、框架和一些特效（marquee、blink）等元素相繼被引入了HTML中。

1993年6月，網際網路工程工作小組 （IETF，Internet Engineering Task Force）發布了HTML草案；1995年11月，提出了HTML2.0規範。

此時的web UI已經具有較強的靜態展示能力，豐富多彩的展示效果，被越來越多的人所接受。Web UI技術逐漸形成。

1.1.3 Web UI的成熟期

1996年是HTML發展的一個里程碑，JavaScript和疊樣式表（CSS，Cascading Style Sheets）相繼誕生，W3c（World Wide Web Consorium）制定的HTML3.2規範出爐。

此時的web UI可以在展現後，與用戶的操作互動，根據用戶的行為方便地修改UI元素和調整樣式，從而實現動態的DHTML頁面。至此，傳統的HTML Web UI技術發展到成熟期。後來的發展中，HTML標準沒再有大的改動。

從這個時期開始，一般的web站點或是web套用系統的實現都是從界面設計人員使用Photoshop或是Dreamweaver等工具設計出效果圖或是界面原型開始。此時的內容還都是所謂的靜態頁面，無法根據不同的外部條件展示不同的內容。

1.1.4 伺服器端技術

隨 後，CGI、ASP(Active Server Page)、JSP(Java Server Pages)、PHP(Personal home page Hypertext Preprocessor)等伺服器端腳本技術相繼湧現，真正的動態頁面出現了。伺服器端代碼分析用戶提交的請求參數，從資料庫伺服器獲取相應的業務數 據，動態地將網頁和數據組合拼裝出網頁的HTML文本輸出到客戶端瀏覽器。

此時的伺服器端頁面不再是一個單純的UI模型，而只是一個伺服器端腳本引擎來處理生成客戶端UI模型的模板，其中包括HTML片段、腳本塊和標籤等元素。比如Struts、Tapestry和WebWork等基於JavaEE技術的web框架就是此類技術的集大成者。

隨 著web開發技術的進一步發展，又出現伺服器端UI組件技術。例如asp中的伺服器端UI組件和JSP中的JSF組件。其使用伺服器端腳本技術， 封裝部分HTML、JavaScript和CSS片段構建一個完整的UI組件模型，在運行期間解釋並與數據進行整合，最終輸出為實際的HTML代碼。

Web 2.0的UI技術

Web2.0 是2003年之後網際網路的熱門概念之一，不過對什麼是Web2.0並沒有很嚴格的定義。一般來說Web2.0是相對Web1.0的新的一代網際網路技術 的統稱。Web1.0的主要特點在於用戶通過瀏覽器獲取信息，Web2.0則更注重用戶的互動作用，用戶既是網站內容的瀏覽者，也是網站內容的製造者。

但業務系統與商業網站有著巨大的區別，業務系統主要使用web2.0來改善用戶體驗，而極少關注部落格（BLOG）、百科全書(Wiki)、社會網路（SNS）等用戶互動和參與技術。

1.2.1 Ajax進入21世紀後，Ajax（Asynchronous JavaScript And Xml）技術的崛起絕對是網際網路套用的一個劃時代的變革。簡單地說，Ajax就是為瀏覽器提供了在不提交整個頁面的情況下動態的與伺服器簡單互動的能力。 這樣，就可以通過使用JavaScript腳本來提交數據和刷新或是渲染頁面中的某些部分，此後人們就不必在頁面提交和顯示之間的空白狀態等待，web應 用的用戶體驗得到巨大增強。

Ajax技術通過在JavaScript語言環境中使用XmlHttpRequest對象與伺服器端數據和業務互動，並從UI界面獲取用戶輸入和將伺服器端處理結果通過UI界面展現出來。

主流的客戶端Ajax框架有：Jquery，Dojo，MooTools，Prototype等等。伺服器端的Ajax框架有DWR，Buffalo，Ajax4jsf等等。

1.2.2 基於JavaScript的UI技術

基於JavaScript的UI技術的出現，將web UI的控制權從界面設計人員遞交給了程式設計師，即可以直接在web的前端使用JavaScript腳本來描述一個UI組件模型，然後在運行時，由瀏覽器的腳 本解釋器調用核心的UI技術框架來將其轉換成HTML的UI界面。

此類UI技術框架跟伺服器端UI技術的思路一致，只是在客戶端瀏覽器中 封裝了一套UI模型。這樣界面設計不需要伺服器端的支持，在開發期間能更好的展示和測試界面效果。同時由於UI界面的構建和控制都在客戶端，只需要和服務 器端傳遞請求參數和數據，這樣就能比伺服器端UI技術大大的降低伺服器端的壓力和網路數據的傳遞量。

此類技術有Ext JS，Yahoo UI，qooxdoo等等。其中Ext JS框架比較完善並且易用的。

Ext JS最初是一個基於YUI(Yahoo！UI)的擴展，已經完全獨立。Ext JS是最好的純JavaScript UI展示框架，其提供了一整套的基於JavaScript和CSS的組件體系，以及整合了許多web UI的其他功能。

桌面程式化

隨著web技術和網路套用的發展、CPU處理器和瀏覽器能力的提高，人們對於web程式的期望值也越來越高，希望把越來越多的桌面程式的特性和能力移 植到了web系統來實現，（與客戶端作業系統和軟硬體互動，操作二進制數據，訪問網路，渲染圖形等等），純文本的HTML已經不能滿足要求。於是各大廠商 紛紛推出自己的解決方案，典型的技術有Microsoft的ActiveX技術、Sun的Applet技術和Macromedia的Flash技術等。

由於以上開發技術都很專業，需要較強的技術水平和人力投入，因此往往只用於解決特定技術問題（如檔案斷點續傳、單據套打等），不可能將整個業務系統完全基於上述技術來實現。

RIA技術

隨 著ActiveX等桌面套用元素融入到web系統中，web UI的開發技術進入了多元化時代。但是ActiveX的安全性和開發維護的技術門檻一直被人們所詬病。Flash在相對長的一段時間內被作為美工們點綴網 站和美化界面的技巧性工具。Applet也因為種種原因也淡出人們的視野。然而伴隨著Ajax技術給web UI帶來的驚喜，越來越多內容豐富、效果絢麗的頁面湧現出來，人們對於良好用戶體驗的UI界面的期待越來越高。在這種背景下，RIA（Rich Internet Applications，富網際網路套用）技術出現，它們在提供強大UI構建和展現功能的同時，也提供了安全性保證、面向開發人員的模式和易用性、方便簡 單的一致性部署方式等等。RIA概念深入人心。

1.4.1 Flex

Adobe Flex是最初由Macromedia公司在2004年3月發布的，基於其專有的Macromedia Flash平台，它是涵蓋了支持RIA的開發和部署的一系列技術組合。Flex的目標是讓程式設計師更快更簡單地開發RIA套用。Flex SDK使用基於XML的MXML語言，提供多種常用的組件，可實現Web Services，遠程對象，drag and drop，列排序，圖表等功能；FLEX內建動畫效果和其它簡單互動界面等。

1.4.2 Silverlight

2007年9月5日，Microsoft Silverlight1.0正式版發布。Microsoft Silverlight是一個跨瀏覽器、跨客戶平台的技術，能夠設計、開發和發布有多媒體體驗的RIA程式。　Silverlight提供了強大的開發、運行平台和設計工具，能夠開發出具有專業圖形、音頻和視頻的Web應用程式。：

1.4.3 JavaFx

2008年底的SunOne大會上，Sun發布了JavaFx 1.0正式版本，旨在基於jvm環境和通過函式式編程的JavaFx腳本來簡化RIA開發。JavaFx技術具有可以直接調用Java API的能力，可以調用java第三方類庫，方便地與j2ee系統集成和互動。