用RIA技術改造企業網站門面與服務功能

消費者的購物習慣在改變，因為網站逐漸成為現代人生活的一部分。老一輩的消費模式單純，他們習慣走入實體通路，接觸有血有肉的販售人員，並看到、摸到實際的產品。然而新世代的消費族群購物的第一步，有很大的比例，是先上網找資料，對網站或產品的第一印象不好，走進門市的機率就降低

不景氣更加帶動網路平臺的發展。因為不僅年輕人喜歡上網，失業族為避免花錢，也「宅」在家裡。於是線上遊戲和網路購物，在這個年代異軍突起。例如報載萊爾富便利商店強化網路購物機制，月營業額突破500萬。

「宅經濟」來臨，當使用者習慣「窩」在家裡上網，想要在百家爭鳴的Web平臺，抓住消費者的視覺焦點，網站的設計就格外重要，因此RIA（Rich Internet Application）相關技術受到矚目。而且不論是企業、網站設計業者或獨立軟體開發商，都有實際投入開發並推出服務的案例。

實例1 和泰汽車
改造Toyota官網

和泰汽車資訊部網路通訊室副理張啟厚表示：「Toyota官網是品牌行銷的一環，新版上線一年，會員人數由8萬提升到16萬。」

汽車業的網站早已大量運用Flash，達到賞心悅目的境界，但若停留在產品的陳列、汽車奔馳的動畫，就只是酷炫效果，對於使用者而言，吸引力有限且價值不高。

Toyota總代理和泰汽車，在2006年決定改變Toyota臺灣官方網站的設計風格，因為他們意識到年輕族群消費型態的改變，希望以年輕、創新及多元的概念，設計出高互動網站，以調整家庭房車的定位，搶攻年輕族群的市場。

經過調查分析，Toyota的車主年齡層分布以30~39歲居多，而和泰汽車計畫擴大市場範圍，希望進一步吸引20~29歲年輕族群的青睞。因此和泰汽車資訊部網路通訊室副理張啟厚規畫，他們打算透過網站傳達「年輕」與「高科技」的品牌形象。

新版Toyota網站的開發由米蘭數位設計製作，以Flash/Flex技術設計了心理測驗、音樂盒子、回憶製造機，並與部落客合作刊出文章，以強化Toyota與社群的互動。網站（www.toyota.com.tw）自2007年12月上線至今，一年的時間，和泰汽車表示，會員數由8萬人成長到16萬人，首頁流量也從220萬，成長到353萬人次。

 RIA改造案例1：和泰汽車以Flash/Flex強化Toyota網站質感 

實例2 新光證券
推出網路下單新系統「富貴角7號」

證券業從實體的通路走向虛擬的網路下單平臺，並非新鮮事，但在股市熊氣逼人的現在，實體的營業據點已成為券商沈重的成本，於是他們更寄望沒有租金及人力成本的網路平臺。

新光證券技術總監吳志宏希望藉由Silverlight提升網路下單系統的親和性。「富貴角7號」透過操作的提示、元件的縮放、走勢圖與股價的對照，以及動畫效果，降低使用門檻。上線不到兩個月，新系統的使用人數已占現有客戶的40%。

新光證券技術總監吳志宏，深覺業界行之有年的網路下單介面，既古板又不易使用。因為高深的分析資訊及生硬的版面設計，也許適合專業的投資者，但對於大多數不懂金融專業術語的股民來說，實在太過艱深，於是希望開發一套親和的網路下單系統。

由新光證券資訊部門及北士設計合作，以Silverlight開發的「富貴角7號」，於2008年12月15日上線至今，下單人數已超越現有客戶的40%，而舊有的下單系統人數並沒有減少，吳志宏表示，「富貴角7號」的親和互動介面，吸引了新一批客戶。

 RIA改造案例2：新光證券「富貴角7號」打造親和下單介面 

實例3 聯銓資訊
套裝BI軟體Smart eVision改版

除了消費性市場有RIA的需求，軟體產業也開始注意到使用者介面親和對生產力的正面影響。

商業智慧產品的主要使用者，是企業內部日理萬機的高階經理人，聯銓資訊總經理林健勝為提高系統的直覺與易用性，導入Flash/Flex 與Silverlight 技術，很輕易地做到以前無法想像的動態呈現效果。

臺灣的聯銓資訊是開發報表與商業智慧解決方案的軟體公司，他們也考量到主要的使用者是企業內部日理萬機的高階經理人，因此產品研發的關鍵要務，是運用圖像呈現數據，以強化直覺性，幫助管理者快速分析各項數據，以做出決策。

搭配RIA技術後，Smart eVision在資訊呈現效果上突飛猛進。聯銓資訊總經理林健勝表示，他們從早期就試圖用數學公式搭配繪圖函式庫，動態產生分析圖表，然而呈現效果與執行效能都不盡理想。現在透過Flash/Flex及微軟Silverlight技術，可以輕易做到以前無法想像的動態呈現效果。

更重要的是，這麼做以後，執行效能不降反升。相較於他們過去所開發的ASP.NET版本，必須由伺服器產生分析圖表，再組成網頁及圖檔傳送至用戶端瀏覽器，耗費頻寬500KB是有可能的，但現在只要傳送10多KB的資料就可以了。

 RIA改造案例3：聯銓資訊BI軟體改革換面 

RIA不只是動畫，還包括互動和應用程式

以上3個實例的共通點，是運用Silverlight、Flash/Flex等稱為RIA的技術，提供高互動、不換頁且更友善（User Friendly）的介面。

事實上，RIA的發展已久，米蘭數位設計總經理賀德潤分析:「大約4年以前開始，就有網站使用Flash製作動畫，例如『阿貴』之類的應用。近兩年則與後端資料庫、應用系統及實體服務結合應用持續增溫。」

早期的這類應用，頂多在網站中加入動畫或者影音元素，雖然內容更多元，但仍是單向的資訊提供。現今的「RIA」除了「豐富（Rich）」還要「互動（Interactive）」，甚至有「應用程式（Application）」的成分。

在技術的演進上，也反映這樣的趨勢，Adobe在Flash Player 9的幾次更版中，持續強化開發者的角色，因為「互動」需要程式邏輯在其中扮演關鍵的角色；而2007年微軟推出Silverlight，第2版結合.NET技術，更是將RIA帶至企業級的應用領域。

RIA的好處

RIA不只是動畫，它除了可以呈現更酷炫的效果，在網站整體形象、建置成本和效能上，都有明確的效益。

品牌行銷

網站是公司與產品品牌行銷的一環，以Toyota為例，官方網站也與實體的行銷活動結合，例如2008年舉辦全國熱舞大賽、全國巡迴情歌演唱會線上影音觀賞，和音樂頻道創作等活動。其中熱舞大賽單月吸引16萬人次上網參與。

成本Down，效能Up

讓網站具備高互動、類似桌面應用程式的操作體驗，並不需要以犧牲效能為代價。事實上，採用Flash/Flex或Silverlight開發Web版的應用程式，效能更佳，而且伺服器端的軟硬體成本也更為節省。

剖析原因，傳統網頁的運作模式下，用戶端的要求（Request）送回伺服器，伺服器經過一些邏輯運算並存取資料，回傳（Response）用戶端的是一整頁HTML，用戶端瀏覽器刷新網頁，呈現更新後的資訊。即使僅是少部分資料的改動，也需要刷新網頁，而且所有的點擊行為，都要重複相同的工作。

RIA的架構，則是將圖像、動畫及大部分的運算邏輯，都下載至用戶端，所以內容的更新，只需回傳少量的「資料」即可。

新光證券的經驗是伺服器和頻寬需求都變少了。舊版網路下單系統與新版的「富貴角7號」使用人數相當，但舊系統需要6臺伺服器，而富貴角7號只需2臺；若比較頻寬使用的差距，舊版報價資料約60KB，而「富貴角7號」降至20KB以下，效益都在3倍以上。

易學、易懂、易維護

林健勝非常肯定RIA降低維護成本的效益，他以Silverlight為例分析：「過去開發ASP.NET的系統，Web伺服器的權限執行身份設定複雜，在用戶端也要留意許多安全性和權限設定的調整。而Silverlight透過WCF機制，在伺服器可以用Windows Services模式存取資料及檔案，權限較高，也較統一；而用戶端全部由Silverlight的執行環境（Runtime）中介處理，單純很多。」

一般來說，傳統的Web應用程式，除錯或者抓問題要分成好幾段，Web伺服器和用戶端都可能需要調整設定。比如有一些應用需要調整用戶端瀏覽器的安全性，但Adobe解決方案顧問李彥璋強璋強調：「在瀏覽器修改安全性設定，影響範圍很大，改成低安全性，是所有網站都套用這規則，並不安全。」RIA接近桌面應用程式的開發，瀏覽相容性或權限、安全性設定簡單許多。

Web技術不能偏廢，合著用最好

若考量Silverlight與Flash/Flex的學習及導入成本，那麼Ajax是比較輕量級的RIA解決方案。在當紅之際，IT界也掀起一陣Ajax浪潮。

不過，大量使用Ajax，又會遭遇一些難解的困境，例如瀏覽器支援不一、除錯不易及開發多媒體應用吃力。

然而Ajax就一無是處嗎？米蘭數位設計互動技術部經理曾盈學表示：「Ajax有它的優勢，Flash限制在Flash Player中作用，但Ajax可以在整個瀏覽器的任何地方發揮作用，而且Ajax和Flash可以交互作用。」

有多年Flash/Flex教學經驗的精誠資訊多媒體產品處知識產品事業部產品經理宋志峰強調：「整個網站換成Flash/Flex未必是好的作法。HTML、Ajax和RIA這3種技術，應該合在一起用。」以討論區或新聞列表等為例，此類應用HTML就做得很好，何必換掉？而Ajax在小視窗、AutoComplete及頁籤等小的應用上很適合，因為是簡單的應用，所以也可避開相容性問題。

知名網站FunP的總經理邱繼弘抱持同樣的觀點，他說明：「FunP不可能全系統用Flash，只會拿來做單一的小功能。」雖然整個網站用Flash開發成本很低，也可省去維護伺服器的負擔，使用者只要下載一個Flash檔，就什麼功能都有了。但是網站有一個很大的重點，在SEO（Search Engine Optimization，搜尋引擎最佳化）和交換連結，即使Google開始支援索引Flash內容，但動態以程式載入的資料，沒辦法建索引，因此這種作法將使網站在搜尋引擎上的「能見度」很差。

RIA用在哪裏效果最好？「操作」

至於RIA最佳的應用場域，宋志峰提出：「操作複雜的應用，像ERP就很適合。」RIA給人最鮮明的印象，在酷炫的立體、光暈、漸層及動畫效果，但宋志峰認為真正的重點，是藉由動畫、提示及物件的縮放及閃動等設計，呈現操作變化的軌跡，與前後步驟的關聯性，才能幫助使用者不在網頁的一次次切換中「迷航」。

元件化的設計，改用RIA並不難

既然採用RIA可以避免傳統網頁因為換頁導致的問題，又有諸多好處，那麼既有的網頁加入Flash/Flex或者Silverlight困難嗎？正如宋志峰所言，網站未必需要全部換成RIA，Ajax和HTML都有存在的價值，只有操作複雜的部分，才需要評估RIA方案。

既有以JSP、ASP.NET或PHP開發的網站，如果當初有基本的元件化設計，後端服務以Web Services型式交換資料，那麼，置換前端展示層為RIA，其實改變的幅度並不大，因為RIA鎖定的是前端展示層的應用，伺服器端介接的程式語言類型並沒有限制，也不需要改寫。

如果過去 Web 應用程式開發完全依賴伺服器端技術，而沒有 Web瀏覽器端程式碼，要進入 RIA 應用領域更動幅度較大。

RIA的應用仍未成熟，需改變「換頁」的思維

RIA的架構可以在不換頁的情況下，操作很多功能。不過根據宋志峰的觀察，現階段的應用模式尚未成熟，他說：「很多應用Silverlight或Flash/Flex的網站，動不動就是送出要求，在用戶端與伺服器端之間傳資料。」這表示設計者脫離不了舊有的思維，習慣把所有的工作都丟回伺服器處理。因此開發者改變傳統的網頁開發思維，才能有效減少伺服器及頻寬負擔。

事實上，以RIA的架構，多數的資料和程式邏輯可以放在用戶端，透過本機電腦運算，只有存取資料庫的行為，才需要提交資料由伺服器端處理。以購物車為例，在使用者按「結帳」按鈕之前，商品的增減及費用的計算，都可以透過用戶端的資源處理。

2009年RIA的發展重點：手機

在美國，Flash/Flex的企業應用已經非常成熟，明顯的指標是Oracle和SAP的產品均採用Flex技術，以Oracle的CRM系統為例，是用Adobe AIR和Flex技術設計管理介面，而且可以與手機結合。其他如Yahoo!、Google、BEA、Salesforce及MicroStrategy等應用很多。所以RIA的發展，是後勢看好的。

林健勝對於RIA的想法，有長遠的規畫觀點，他認為：「是要未來所有的使用者介面包含桌面電腦、行動裝置甚至消費性電子用品，都可以採用RIA，它的威力很大。」因為開發者可以同樣的技術，甚至相同的程式版本，透過簡單的部署程序，就可以讓應用程式在Web、桌面甚至手機執行。

RIA朝手機發展，似乎是大勢所趨。微軟與Adobe在2009年都有朝行動裝置發展的規畫。而且上述的3家臺灣企業──聯銓資訊、新光證券及和泰汽車都不約而同地提到，未來希望開發手機版的應用。

Adobe與全球最大的消費性電子晶片廠商ARM合作，聲稱未來ARM的晶片將內建Flash Player 10。這對RIA的手機應用，是一大契機。未來使用者只要透過3G上網，就可以在手機上做很多事。宋志峰大膽預言：「2～3年之後，RIA在手機市場的商機很大。」因為如果在一套軟體平臺上可以做完所有事，很多公司都願意投入。

另一個觀察重點，在於桌面端的應用，相較於嵌入於瀏覽器的RIA，桌面的RIA有更多的好處，例如，可以離線瀏覽、儲存資料於本機、也可以避開瀏覽器相容性問題，導致的版型錯亂問題。再者，單一的桌面應用，也可以避免使用者被其他網站資訊吸引而離開。

Adobe在這方面已經推出AIR，國外有不少應用案例，如eBay Desktop、AOL的影音播放工具、NASDAQ Market Replay、Salesforce及紐約時報等。

微軟在桌面應用方面尚未提出解決方案，不過，林健勝對這部分抱持期待，他舉例：「Silverlight若能與微軟自家的Office產品結合，未來應用方式將更具想像空間。」

技術持續發展，小階段練兵可以開始

隨著技術的進步，RIA在2009年將持續發燒，繼Adobe推出Flash Player 10，支援3D、強化繪圖及硬體加速，微軟也宣稱一下版的Silverlight將支援H.264視訊編碼標準、3D物件、GPU顯示卡加速，並提供更多控制項。

企業未來應用的可能性持續擴大。針對企業導入RIA的策略，林健勝也建議：「現在大舉地導入風險仍高，但小階段的練兵可以開始。」

 RIA能節省伺服器運算與頻寬資源的原因 

【相關報導請參考「宅經濟來臨，RIA網站應用趁勢起飛」專題】