跳到主要內容區塊

計資中心電子報C&INC E-paper

專題報導

友善的人機互動介面--淺談多點觸控與未來行動應用
  • 卷期:v0013
  • 出版日期:2010-06-20

作者:唐瑤瑤 / 臺灣大學計算機及資訊網路中心程式設計組程式設計師


傳統的觸控技術只能辨識一點,但多點觸控技術是可以透過數隻手指輸入的技術,使我們進入了嶄新的人機互動新時代。多點觸控技術濫觴於1991年貝爾實驗室,當時有一重大突破—Digital Desk;而帶領這項技術進入主流應用則要到2007年的Apple Inc.推出iPhone 產品及微軟提出Surface Computing計畫。

 

前言

記得在2002年[關鍵報告Minority Report] 電影中,阿湯哥雙手在空中帥氣又自信的操控著多個電腦資料畫面,真是令人印象深刻!而今日隨著軟硬體技術的進步,這種人機互動方式已經不是在科幻電影中才會出現的情節囉!


傳統的觸控技術只能辨識一點,像這樣使用者可以透過數隻手指的輸入技術,讓我們進入了人機互動的新時代。多點觸控技術濫觴於1991年貝爾實驗室,當時有一重大突破—Digital Desk;而帶領這項技術進入主流應用則要到2007年的Apple Inc.推出iPhone 產品及微軟提出Surface Computing 計畫。

從硬體角度來看,多點觸控(Multi-touch)的技術應用範圍包含小至滑鼠、觸控筆電,到寬達5公尺長的大型多點觸控投影牆皆有;另外,根據微軟測試報告指出,多點觸控硬體開發現況則是從2指到32指,也就是同時支援多人多指行為。
 

高階應用:資訊戰情室、校園導覽展示空間

用多點觸控的直觀方式展現各種數據,整合各項議題,即時呈現重點資訊,協助來賓了解全貌,並更容易幫助主管們做決策。這類的應用還包括多點觸控互動桌、餐廳點餐桌及多點觸控牆等。最佳示範的例子就是CNN 在2008年的美國總統大選時一戰成名的Perceptive Pixel所研發的大型觸控螢幕。


一般應用:娛樂、教育

用你的智慧型手機吹陶笛?不是搞笑喔!除了基本的放大、縮小、捲動及翻頁以外,先進的多點觸控技術還可以讓玩家學習作曲、打鼓、彈吉他及彈鋼琴喔,的確達到寓教於樂的目的呢。

硬體支援

大致暸解多點觸控應用之後,我們再回頭來看看目前支援多點觸控技術的硬體有哪些:
(一) Microsoft Windows Touch PCs - Notebook, AIO, Displays.
(二) Apple Inc. - Mouse, Touch pad, iPhone, iPad.
(三) 客製化解決方案 - 多點觸控互動桌、多點觸控牆。


作業系統支援

目前支援多點觸控技術的有:Windows 7、iPhone OS、Mac OS、Google Android 及 Linux Multi-Pointer X 等。
 

Native Application or Web-based Application?

以軟體開發者角度來看,若要開發支援多點觸控的應用程式,我們馬上就會碰到跨Device、跨平台及跨瀏覽器的問題。
(一) 建立多點觸控 Native Application:

必須針對不同之作業系統開發。例如:Visual Studio .NET 2010 for Microsoft Windows, iPhone SDK for Apple.或是 Android Framework for Google。

(二) 建立多點觸控 Web-based Application:

  1. 只要系統有Web Browser (IE, Firefox, Safari, Chrome 及Opera),標準HTML、CSS及Javascript 程式皆可正常執行放大、縮小、頁面上下捲動等功能。若想要同時支援iPhone及Android 等行動裝置,只需要維護一份程式碼。
  2. 但若要執行高階多點觸控特效,例如翻轉圖片,預計仍須針對不同瀏覽器做程式改寫。


臺大資訊服務支援多點觸控之現況:

臺大資訊服務目前多是以網頁應用程式--Web Application技術開發為主,也就是使用者只需經由資訊裝置的網頁瀏覽器(Web Browser)連線即可使用,如此才能符合校園內不同屬性使用者對於跨平台、跨作業系統及跨瀏覽器的需求。

(一) Windows 7 + IE:基本多點觸控功能應該可以執行。若須高階功能,可以考慮Microsoft SilverLight。
(二) iPhone (iPad) + Safari:不支援Flash,所以某些Flex 開發之網頁應用程式無法執行。Mozilla發佈的第一版行動版Firefox直接不支援Flash、Opera Mini (目前最多手機採用的瀏覽器)不支援Flash。
(三) 其他行動裝置:例如google smart phone 等,沒有實機測試過,無法提出報告。

經幾項簡單測試(智慧型手機iPhone 3Gs、acer Aspire NB)顯示,網頁應用程式只要符合標準HTML及JavaScript就可以在多點觸控產品上正常顯示。您只需善用雙手即可隨心所欲的操控!
 

未來的Web Application標準?

若希望一套資訊系統能符合所有人的需求,到底標準在哪裡?
也許我們可以考慮採用下一代HTML5/CSS3/JavaScript標準:因為這是由蘋果、Opera、Mozilla、 微軟IE 9 和Google等瀏覽器製造商共同參與研擬的標準。

  1. 內建聲音和影音支援。

  2.  改善2D圖像的Canvas。

  3. 推動其他新標準,如3D圖像加速技術 WebGL、透過CSS(層疊樣式表)與網路字型改善網頁排版,如SVG(可縮放向量圖形),和提升以JavaScript 製作網路程式的效能。

參考資料

  1. 維基百科—多點觸控:http://zh.wikipedia.org/zh-tw/%E5%A4%9A%E9%BB%9E%E8%A7%B8%E6%8E%A7

  2. HTML5 規格書:http://dev.w3.org/html5/spec/Overview.html

  3. Windows 7 創新應用中心http://www.microsoft.com/taiwan/windows/innovation/default.mspx

  4. Apple 提供iPhone Web App 開發指南:http://developer.apple.com/safari/library
    /referencelibrary/GettingStarted/GS_iPhoneWebApp/index.html

  5. Google 提供Android 開發指南:http://developer.android.com/index.html

  6. 摩托羅拉實驗室展示互動螢幕概念:http://taiwan.cnet.com/crave/0,2000088746,20137919,00.htm

  7. Opera Mini不支援Flash:Yahoo News!

  8. Mozilla發佈第一版行動Firefox瀏覽器 不支援Flash:http://www.zdnet.com.tw/news/web/0,2000085679,20144080,00.htm

  9. 用 HTML5 開發 Mobile Web App http://blog.ericsk.org/archives/1398