結合實體物件與行動載具之開發套件設計 - 政大學術集成

全文

(1)國立政治大學資訊科學系 Department of Computer Science National Chengchi University 碩士論文. 立. Master’s 政治Thesis. 大. ‧ 國. 學. 結合實體物件與行動載具之開發套件設計. ‧. A Tangible UI Toolkit. y. Nat. er. io. sit. for. n. al Capacitive Touch Devices iv Ch. n U engchi. 研究生：黃奕誠指導教授：余能豪. 中華民國一百零三年七月 July 2014.

(2) 結合實體物件與行動載具之開發套件設計. A Tangible UI Toolkit for Capacitive Touch Devices 研究生：黃奕誠. Student：I-Cheng Huang. Yu 政治 Advisor：Nen-Hao 大. 指導教授：余能豪. 立. ‧ 國. er. io. sit. y. Nat. 碩士論文. ‧. 資訊科學系. 學. 國立政治大學. al. n. A Thesis v i n submitted toC Department Science U h e n g c hofi Computer National ChengChi University in partial fulfillment of the Requirements for the degree of Master in Computer Science 中華民國一百零三年七月 July 2014.

(3) 致謝辭在政大研究生涯，隨著論文的完成即將告一段落。在政大資科所的所思所學，也隨著這本論文的完成有了很好的整理與回饋。於我而言，研究所短短時間，很辛苦也很豐富，也是最精彩的一段時光。能夠順利的完成本論文，首先最要感謝我的指導教授余能豪博士。過. 政治大. 去大學的資工背景讓我培養對這個領域的興趣，進入了政大資科所在老師. 立. 的帶領下，我除了更加深入於理論學習外，也有了更多的機會參與實作專. ‧ 國. 學. 案，並在老師的指導下多次參與競賽獲得佳績。感謝老師您不只給予我理. ‧. 論與實務並重的指導，更鼓勵我多元嘗試，讓我有了更開闊的眼界，同時. y. Nat. er. io. sit. 也因為有您耐心的支持與關心，讓學生在徬徨時刻依然能夠勇往直前，完成這項挑戰，也感謝口試委員廖文宏老師、廖峻鋒老師撥冗前來給予我最. n. al. C. i n U. hengchi 寶貴的建議，您們的不吝賜教，讓我受益良多。. v. 感謝我最親愛的父母與家人們。您們這些年來給予我的每一份教導，讓我在求學生涯中有個溫暖的後盾，也培養了對人對事良好的態度。因為有你們的鼓勵，我總是能夠無後顧之憂地朝著自己的夢想前進，並且更加堅定與堅強。論文的完成也要感謝一直以來最支持我的朋友與同學們。在 Lab104 的生活，像溫暖的家總是有大家的陪伴，讓這間研究室從無到有，感謝宏.

(4) 哲、家奇、莞柔、廷達、韻如、幼庭、逸清、志毓、煜泓、珮君、彥妤、宜璇、嘉駿，這份革命情感是獨一無二的。感謝我多年的好友們涵宇、捷宇、雅祺、Joyce、Connie、冠嫺、文崎、忠儒、立徳，總是在我身邊陪我一起開心、低潮，聽我發牢騷，每個喜樂都有你們一起分享，讓我生活更加精采與充實。. 政治大. 也感謝在這過去兩年中認識的 MBA 好友們文豪、逸婷、秋芸、方妘、. 立. 美賢、宛臻、筠樺、娉儀、逸竹，雖然和你們不同研究所，但也讓我融入. ‧ 國. 學. 了你們的生活當中，有你們的陪伴讓我在政大奮鬥的日子裡不孤單。. ‧. 於我而言，論文路上的每位家人、師長、夥伴，都是我面臨論文時最. y. Nat. er. io. sit. 大的動力，這份感動筆墨難以形容，讓我將這份感動與感激放在我心中，謝謝你們，有你們真好。. n. al. Ch. engchi. i n U. v.

(5) 摘要過去，感知物件的互動方式大多發展於大型互動桌上，其技術主要是採用影像辨識來進行互動偵測，隨著平板的普及，我們希望能將大型互動桌的實體互動體驗帶到平板世界，然而現今平板使用之電容式觸控技術有別於大型互動桌之影像偵測技術，無法直接應用影像式的物件辨識方法，因此設計出一套結合平板電腦與感知物件的開發工具，目的是要讓互動設計的開發者能夠快速開發感知物件的互動模式。而電容式實體互動物件設計較為複雜，對於互動設計的開發者而言，要去製作、開. 治政發這些互動物件不論是在電路或是實體物件都是有一定的難度，並不是所有的開發者都大立擁有相關的背景或是資源。而為了讓原型製作更加的簡單在軟體上我們設計了一套 SDK， ‧ 國. 學. 在硬體上結合了樂高積木和導電的膠帶，不僅製作快速、成本低，在組裝上也能擁有一. ‧. 致的規格以減少誤差的發生。藉由其底座組合方式的差異也就代表著不同的感知物件。因此開發者只需套用我們所設計的 SDK 就可以將原有的作品加上實體互動物件的互動. n. al. er. io. sit. y. Nat. 模式。. Ch. engchi. i n U. v. 關鍵字:實體使用者介面、開發套件、平板電腦、人機互動、原型製作. i.

(6) Abstract The Tangible User Interface (TUI) has been widely adopted on interactive tabletops by using optical sensing techniques and fiducial markers. With the huge growth of smartphone and tablet market, we hope to expand the tangible interaction experience to the off-the-shelf touch devices. However, most touch devices use capacitive sensing techniques that can only detect human fingers. We create a tangible hardware toolkit base on capacitive touch devices so developers can use it to build tangible interactions in a fast way. We put conductive. 治政 adhesive tape on LEGO blocks to form an identifiable footprint. 大 The footprint could be 立 attached onto a tangible object. And the pattern of the footprint could be easily arranged to ‧ 國. 學. represent different identities. We also provide a flash SDK that can be quickly integrated into. ‧. a developer’s project and then enable tangible interactions. We expect our hardware toolkit and software SDK can benefit more developers to create tangible UI applications on the. y. Nat. n. al. er. io. sit. capacitive touch devices.. Ch. engchi. i n U. v. Keyword： Tangible User Interface, Tablet, Toolkit, SDK, Prototype, Human Computer Interaction. ii.

(7) Table of Contents 第一章緒論 .......................................................................................................................... 8 1.1. 研究背景與動機 ........................................................................................................ 8 1.1.1. 實體互動物件的發展狀況 ............................................................................ 8 1.1.2. 實體互動物件製作上的技術瓶頸 ................................................................ 9 1.2. 研究目的 .................................................................................................................. 10 1.3. 研究問題 .................................................................................................................. 10. 治政 1.4. 研究架構與流程 ...................................................................................................... 11 大立第二章文獻探討 ................................................................................................................ 12 ‧ 國. 學. 2.1 Tangible User Interface 的發展 .............................................................................. 12. ‧. 2.2 現有 TUI 的應用發展 ............................................................................................. 16 2.2.1. TUI 常用辨識方式 ...................................................................................... 16. y. Nat. io. sit. 2.2.2. 相關應用 ...................................................................................................... 23. n. al. er. 2.3 行動裝置上 TUI 發展所遇見的問題及現有之解決方法 ..................................... 26. Ch. i n U. v. 第三章研究方法 ................................................................................................................ 27. engchi. 3.1 電容式行動裝置如何偵測觸控 ............................................................................... 27 3.2 感知物件(Tangible Object)設計 ............................................................................... 28 3.3. Event 介紹 ............................................................................................................. 30. 3.4 開發套件辨識方法及流程 ....................................................................................... 31 3.4.1 辨識方法 ........................................................................................................ 31 3.4.2 辨識流程 ......................................................................................................... 32 3.4.3 相關辨識程式碼解說 .................................................................................... 34 第四章系統評估 ................................................................................................................ 35. iii.

(8) 4.1 系統評估方式 .......................................................................................................... 35 4.2 受測對象與流程 ...................................................................................................... 36 4.2.1. 受測對象 ....................................................................................................... 36 4.2.2. 參與人員 ....................................................................................................... 36 4.2.3. 系統評估環境及設備 ................................................................................... 36 4.2.3. 系統評估流程 .............................................................................................. 37 4.3 使用者回饋 (user feedback) ................................................................................... 38. 政治大. 4.3.1. 使用難易度回饋-軟體 ................................................................................. 38. 立. 4.3.2. 使用難易度回饋-硬體 ................................................................................. 38. ‧ 國. 學. 4.3.3. 結合原有專案使用回饋 .............................................................................. 39 4.4.. Tangible UI Toolkit 相關合作案例 ................................................................. 42. ‧. 4.4.1 案例介紹 ........................................................................................................ 42. Nat. sit. y. 4.4.2 案例分析 ........................................................................................................ 44. n. al. er. io. 第五章結論與未來展望 ........................................................................................................ 45. i n U. v. 5.1 研究貢獻與設計建議 ............................................................................................... 45. Ch. engchi. 5.2 限制 .......................................................................................................................... 46 5.3 未來展望 ................................................................................................................... 46 參考文獻 .................................................................................................................................. 48 附錄 .......................................................................................................................................... 51. iv.

(9) 圖目錄圖 1-1 (左) 紅外線攝影機偵測手指是否有接觸桌面. (右) 使用者在觸控桌使用情形 ............................... 9. 圖 1-2 利用攝影機偵測平板上的互動示意圖 ..................................................................................................... 9 圖 1-3 研究架構與流程 ...................................................................................................................................... 11 圖 2-1 TUI 運作概念圖 ...................................................................................................................................... 12 圖 2-2 METADESK 中各種 TUI 物件所代表的含意對照 ................................................................................ 13 圖 2-3 (左)METADESK 中使用放大鏡效果的情形. (右)METADESK 系統流程示意圖 .............. 13. 圖 2-4 URP 建築物擺設模擬情形 ..................................................................................................................... 14 圖 2-5. (左)使用者拼湊 ACTIVECUBE. (右)將拼湊好的飛機進行互動遊戲 .................................... 14. 政治大. 圖 2-6 TANGIBLE JUEKEBOX 選擇唱片示意圖 ............................................................................................. 15 圖 2-7 MICROSOFT PIXELSENSE 操作情形 .................................................................................................. 16. 立. 圖 2-8 DOMINO TAG 實體(左)，DOMINO TAG 底部排列編號方式(右) ................................................... 17 圖 2-9 DOMINO TAG 編號示意圖.................................................................................................................... 17. ‧ 國. 學. 圖 2-10 LUMINO 堆疊前後反射差異 ............................................................................................................... 18 圖 2-11 LUMINO 堆疊效果示意圖 ................................................................................................................... 18. ‧. 圖 2-12 PORTICO 操作示意圖 ........................................................................................................................... 19 圖 2-13 (左)TIC TAC TOE 應用，斑馬與平板互動應用 ................................................................................. 19. sit. y. Nat. 圖 2-14 (左) QR-CODE, (中) TUIC 4-BIT , (右) TUIC 9-BIT ........................................................................... 20 圖 2-15 (左)TUIC 實體, (右)TUIC 底部編碼方式 ............................................................................................. 20. er. io. 圖 2-16 SKETCH-A-TUI 製作情形 ................................................................................................................... 21. al. n. v i n 圖 2-18 SKETCH-A-TUI 使用示意圖C ............................................................................................................... 21 hengchi U 圖 2-19 各種 MAGNETIC APPCESSORIES ..................................................................................................... 22. 圖 2-17 SKETCH-A-TUI 結構介紹 ................................................................................................................... 21. 圖 2-20 MAGNETIC APPCESSORIES 中所含磁鐵量不同作為辨識依據 ..................................................... 22 圖 2-21 DOMINO TAG ....................................................................................................................................... 23 圖 2-22 MICROSOFT PIXELSENSE 使用情形 ................................................................................................ 23 圖 2-23 CAPSTONES 堆疊效果示意圖 ............................................................................................................ 24 圖 2-24 CAPSTONES 結構 ................................................................................................................................ 24 圖 2-25 CAPSTONES 使用示意圖 .................................................................................................................... 24 圖 2-26 TOUCHPLANSVS LITE 使用示意圖 .................................................................................................. 25 圖 2-27 實體 AIR HOCKEY 操作示意圖........................................................................................................ 25 圖 3-1 電容式觸控螢幕偵測示意圖 .................................................................................................................. 28 圖 3-2 TUIC 硬體結構 ....................................................................................................................................... 28 圖 3-3 （左）1X1 樂高 PIN 腳和導電膠帶結合. （右）本研究之感知物件實體圖 ...................... 29. v.

(10) 圖 3-4 (左)ID 0 , (中)ID 1, (右)ID 2 .................................................................................................................... 31 圖 3-5 SDK 辨識流程 ......................................................................................................................................... 32 圖 3-6 三邊長辨識流程 ...................................................................................................................................... 33 圖 3-7 DEBUGMODE 示意圖 ........................................................................................................................... 34 圖 4-1. 測試者使用情形(1) ............................................................................................................................... 38. 圖 4-2 測試人員使用情形(2) ............................................................................................................................. 39 圖 4-3 測試人員使用情形(3) ............................................................................................................................. 39 圖 4-4 (左)代表太陽的 TAG , (右) 放上雲朵的 TAG ....................................................................................... 40 圖 4-5 太陽與雲朵的 TAG 同時放上的結合效果 ............................................................................................ 40 圖 4-6 測試人員完成專案整合 .......................................................................................................................... 41. 政治大. 圖 4-7 作品 MOVIEDREAMER 互動示意圖 ................................................................................................. 41 圖 4-8 (左)大樹 TAG 在草地,(右) 大樹 TAG 在院子 ....................................................................................... 42. 立. 圖 4-9 ZOOTOY 剪貼簿模式互動示意圖 ....................................................................................................... 43 圖 4-10 單字動畫模式流程圖 ............................................................................................................................ 43. ‧ 國. 學. 圖 4-11 孩童試玩 ZOOTOY 情形 .................................................................................................................... 44 圖 5-1 硬體改善示意圖 ...................................................................................................................................... 47. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. vi. i n U. v.

(11) 表目錄表 2-1 TUI 辨識方式比較表 ............................................................................................................................... 26 表 3-1 TAGEVENT 之 EVENT & PROPERTY ................................................................................................. 30 表 3-2 TUICTOUCHEVENT EVENT & PROPERTY ........................................................................................ 30 表 4-1 受測者基本資料紀錄卡 ........................................................................................................................... 36 表 4-2 系統評估流程 .......................................................................................................................................... 37. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vii. i n U. v.

(12) 1 第一章緒論 1.1. 研究背景與動機在過去的二十年中，實體使用者介面(TUI: Tangible User Interface) 的互動模式在人機互動(Human-Computer Interaction)領域中蓬勃發展，不論是在相關的設計及研究上都有許多創新的表現。TUI 早期的互動發展大多是透過影像辨識在互動桌上進行，但在行. 治政動裝置卻礙於硬體設備的限制使得這樣的互動模式無法在平板電腦上呈現。大立然而，當一名程式開發者、動畫設計師要將原有的專案加入 TUI 互動模式時，卻因 ‧ 國. 學. 為缺乏相關的硬體製作技術及硬體的偵測方法，使得他們必須要同時去面對「如何設計、. ‧. 。有鑑於此，製作一個 TUI 物件」和「如何將 TUI 物件與平板電腦進行互動連結的難題」本研究將針對這些問題設計一套 SDK 和 TUI 硬體設備，讓開發人員能在開發 TUI 的互. y. Nat. io. sit. 動作品時能夠更加的簡單、快速。. n. al. er. 1.1.1. 實體互動物件的發展狀況. Ch. i n U. v. 大型觸控桌上的 TUI 互動方式目前已經相當成熟，不論是在音樂、遊戲、商業的應. engchi. 用都，TUI 在早期是利用影像辨識的方式進行，但在行動裝置上卻因為其硬體上的限制而無法將其技術從觸控桌移植到行動裝置上。. 8.

(13) 圖 1-1 (左) 紅外線攝影機偵測手指是否有接觸桌面. (右) 使用者在觸控桌使用情形. 政治大近年來也有許多開發者將額外的偵測裝置[1](e.g. 攝影機)附加在平板上方，使其透立. ‧ 國. 學. 過外部的裝置達到偵測實體物件的效果，但附加的裝置過於笨重且攜帶不便，使得這樣的互動方式不利於使用者及開發者方便使用。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 1-2 利用攝影機偵測平板上的互動示意圖. 1.1.2. 實體互動物件製作上的技術瓶頸從過去的研究發現，TUI 互動最常應用於電子書、遊戲、多媒體方面，其開發人員在製作互動物件時都會需要了解電容式技術的原理及硬體設計能力，抑或是在製作的過程中需要耗費較多時間去摸索這些不熟悉的事物，這樣都會造成其開發上的困難度及順暢度。. 9.

(14) 1.2. 研究目的本研究以 Flash 做為開發工具，以解決動畫設計師在製作與實體互動物件相關的電子書及相關應用為出發點，利用我們所製作的 SDK 及配合的實體互動物件，發展出一套結合平板和實體互動物件的工具，在製作過程上也毋需受限於相關電子電路知識背景，即可快速完成互動作品，激發人們對互動科技的興趣，製作出更多有趣的互動產品，以下兩項為本研究的主要目的:. 政治大. a. 降低使用門檻:降低製作實體互動物件所需硬體製作及硬體偵測的門檻，使動畫設計. 立. 師能夠輕易上手。. ‧ 國. 學. b. 快速原型開發:動畫設計師可將原有的作品立即加入實體互動物件的互動模式來增進使用者在操作上的體驗效果。. ‧. 1.3. 研究問題. sit. y. Nat. b.. 如何用最簡單、快速的方式讓開發人員將原有作品加入 TUI 的互動模式?. n. al. er. 如何能讓開發人員加速實體互動物件製作的過程?. io. a.. Ch. engchi. 10. i n U. v.

(15) 1.4. 研究架構與流程研究背景與動機本研究為解決非電子電路背景之動畫設計師在製作觸控裝置上實體互動 prototype 時所面臨到的技術問題，而發展出一套 SDK 以及硬體設備供設計師以減少開發所需的時間及步驟。. 研究目的與問題. 政治大. a.如何加速實體互動物件的製作過程 ? b.如何用最簡單的方式將原有作品加入 TUI 的互動方式?. 立. ‧ 國. 學 ‧. 文獻探討. n. al. er. io. sit. y. Nat. a.Tangible User Interface 的發展 b.現有的 TUI 應用及設計方法. Ch. 研究方法. engchi. a. 感知物件設計方法 b. TagEvent、TuicTouchEvent 介紹 c. SDK 辨識方法與運作流程. i n U. 系統評估. 研究結果與分析. 結論圖 1-3 研究架構與流程 11. v.

(16) 2 第二章文獻探討本研究在探討如何利用我們所設計的 SDK 及硬體裝置，以降低非電子電路背景之動畫設計師其作品在加入實體互動時所需的門檻，並且增加在未來作品開發上能激發出更多的創意及互動方式。本章將文獻探討分為以下三個小節進行探討:. . 第一節探討 Tangible User Interface 的發展過程，藉此了解 TUI 在不同領域上的設計與應用。. 政治大. 立. 第二節研究過往在觸控桌、行動裝置上 TUI 的互動方式。. . 第三節經由整理現有行動裝置上相關的 TUI 應用之優缺點，以改進我們所設計的. ‧ 國. 學. . ‧. SDK 及硬體設備的方便性。. io. sit. y. Nat. 2.1 Tangible User Interface 的發展. n. al. er. 實體使用者介面(Tangible User Interface) 是一種直覺的互動模式，由 MIT 的 Hiroshi. Ch. i n U. v. Ishii 教授在 1997 年時所提出，其最主要的概念是利用有形的實體物件來代表不同的指. engchi. 令或能，讓使用者不需透過外加的鍵盤、滑鼠等輸入裝置，也不需記住繁雜的指令（e.g. 繪圖軟體中的鍵盤輸入組合指令），就能以最直覺、自然的方式與電腦進行溝通[2] [3]。. 圖 2-1 TUI 運作概念圖. 12.

(17) 例如 Metadesk 研究如何透過放置不同的實體物件在觸控桌上後會在畫面上能有不同的對應效果出現，如圖 6 所示各種造型的實體物件會依照其功能性的不同做出相似的操控方式讓使用者能快速上手，圖 5 當中就可看到具有放大鏡形體的實體物件就能夠讓使用者以最直覺的方式去降低使用上的學習門檻[4]。. 立. 政治大. ‧ 國. 學圖 2-2 Metadesk 中各種 TUI 物件所代表的含意對照. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. 圖 2-3 (左)Metadesk 中使用放大鏡效果的情形. i n U. v. (右)Metadesk 系統流程示意圖. 13.

(18) Urp 利用實體物件製作出縮小版的建築物模型，當這些實體物件被擺放在桌上時，使用者可以藉由其擺放的位置不同，來模擬出建築物之間所產生的風的流動方向。. 立. 政治大. 圖 2-4 Urp 建築物擺設模擬情形. ‧ 國. 學. Active Cube 利用正方體的實體物件作為基底，讓使用者將其組合成指定的模型，使用者在選擇他所想要拼湊的對象後，畫面中就會出現拼湊的模型圖讓使用者去拼湊出. ‧. 對應的實體物件，當拼湊的結果與畫面中相符時使用者就能透過實體物件與畫面中的虛. Nat. n. al. er. io. sit. y. 擬世界進行互動[5]。. 圖 2-5. Ch. engchi. (左)使用者拼湊 ActiveCube. 14. i n U. v. (右)將拼湊好的飛機進行互動遊戲.

(19) Tangible jukebox，隨著現在音樂數位化的發展，過去的實體唱片也隨之沒落，藉由實體物件操作來選擇音樂的類型、演唱者，讓使用者在互動桌的畫面上體驗過去自動唱片點唱機的操作方式。 [6]. 立. 政治大. ‧ 國. 學. 圖 2-6 Tangible Juekebox 選擇唱片示意圖. ‧. 而多指觸控的互動方式在近年來蓬勃發展，透過不同的觸控偵測技術，讓使用者直接用手指的操作就能與電腦溝通達到互動的效果，而實體使用者介面與多指觸控皆具有. y. Nat. io. sit. 直接操作的特性，結合兩者的互動將會對使用者在相關的應用上帶來許多的便利性[7][8]。. n. al. er. 但因為過去在觸控桌上大多都是採光學辨識的方式來偵測手指觸控和實體物件，現. Ch. i n U. v. 在普遍的平板電腦都是採電容式觸控，無法像光學式的系統一樣進行影像辨識讀取時體. engchi. 物件下方的辨識圖形，使得 TUI 在平板電腦上相關研究及作品較為稀少。. 15.

(20) 2.2 現有 TUI 的應用發展目前多點觸控的裝置上已經發展了許多不同類型的應用作品，有繪圖工具、桌上遊戲、音樂創作、互動教學、商業應用…等等，將會在本節的子小節中列出較為重要的例子進行說明。. 2.2.1. TUI 常用辨識方式 a.光學影像辨識 Microsoft PixelSense. 立. 政治大. Microsoft PixelSense（舊稱：Microsoft Surface ），是微軟於 2007 年研發出的第. ‧ 國. 學. 一個多點觸控電腦，結合硬體與軟體技術，搭配 30 吋光學式觸控螢幕，當一個觸控點放在螢幕上時，底部的紅外線感應器會發出光線在觸控點上，經過反射傳遞到底部的接. ‧. 收器當中，再透過系統處理轉換成相關的圖像、訊息在畫面當中。透過手勢、觸控點讓. Nat. n. al. er. io. sit. y. 單人或是多人(multi-user)同時使用，使用起來更為直覺。. Ch. engchi. i n U. v. 圖 2-7 Microsoft PixelSense 操作情形. 16.

(21) 除了 PixelSense 的多點觸控(multi-touch)功能，能讓多人同時使用一台電腦以外，還有物體辨識功能(Object recognition)，將不同物體放上桌面時，讀取螢幕上的"Domino Tag”，以啟動不同類型的數位反應。而 Domino Tag 同時也是在觸控桌上時常被使用的工具之一，透過其底部的三個 position-dots 及中央的 central-dot 協助辨識方向及位置，再運用周圍的八個 byte-dots(b0~b7)的變化來進行編碼，可編譯出 2^8=256（0～255）種不同的組合。. 立. 政治大. ‧. ‧ 國. 學 sit. y. Nat. n. al. er. io. 圖 2-8 Domino Tag 實體(左)，Domino Tag 底部排列編號方式(右). Ch. engchi. i n U. v. 圖 2-9 Domino Tag 編號示意圖. 17.

(22) Lumino Lumino 不同於以往只能透過平面的影像辨識來分辨出 Tangible 物件的不同，立體造型的 Lumino 利用使用光纖材質將上層 marker 映射在下層的不同位置上，做為立體結構的編碼，使得位於觸控桌底部的紅外線發光體投射於 Tangible 物件上後會反射出不同的效果給接收的偵測攝影機，藉此達到辨識的效果，而 Lumino 也能利用堆疊造成光反射結果的不同拼湊出相異組合，讓 Tangible 物件又有了更多的組合性可以使用[9]。. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 圖 2-10 Lumino 堆疊前後反射差異. Ch. engchi. i n U. v. 圖 2-11 Lumino 堆疊效果示意圖. 18.

(23) PORTICO Portico 是一套結合平板與感知物件的互動系統，其架構是採用兩個裝在支架上的鏡頭放置在平板的上方，也因為裝上了支架使其辨識範圍比平板的畫面大了六倍以利辨識各種在平板上或是周遭實體物品的即時變化。[1]. 立. 政治大. ‧ 國. 學圖 2-12 Portico 操作示意圖. ‧. 下圖中 Portico 透過其應用程式「Tabletgotchi」中的「Tic Tac Toe」遊戲，由玩家放. sit. y. Nat. 上不同的代表道具讓系統辨識出來 X 與 O 的放置位置，以協助玩家判斷是否違反遊戲. io. er. 規則及最後的遊戲結果。. al. 另一個應用則是將一個斑馬的感知物件放置在平板周遭，可以將斑馬放在水池旁喝. n. v i n Ch 水、吃胡蘿蔔等互動，而畫面上就會顯示出互動後的結果。 engchi U. 圖 2-13 (左)Tic Tac Toe 應用，斑馬與平板互動應用. 19.

(24) b.電容式辨識 TUIC 以傳統互動桌利用視覺標籤(QR-Code 或是 Domino Tag)置於實體物件底部使互動桌上能偵測其上方擺放之物件的概念作為基礎，利用簡單的材料(螺絲、鋁箔紙)製作出電容式的互動物件以模擬手指觸控，藉由不同的觸控點排列組合方式達到編碼效果，使得目前主流的電容式行動觸控裝置在不需要外加任何感應器之下就能透過辨識觸控點監所組合的排列來追蹤、辨識出實體互動物件[10]。. 立. 政治大. ‧. ‧ 國. 學. 圖 2-14 (左) QR-Code, (中) TUIC 4-bit , (右) TUIC 9-bit. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-15 (左)TUIC 實體, (右)TUIC 底部編碼方式. 20.

(25) Sketch-a-TUI Sketch-a-TUI 主要是研究如何快速製作可運用在行動觸控裝置上的互動物件，運用導電墨水畫在他們所設計的紙板上，搭配其所製作的 SDK 就能達到辨識不同物件的效果，而他們的紙板也有許多不同的造型以供開發者結合使用[11]。. 立. 政治大. 圖 2-16 Sketch-a-TUI 製作情形. ‧. ‧ 國. 學. n. er. io. al. sit. y. Nat 圖 2-17 Sketch-a-TUI 結構介紹. Ch. engchi. i n U. v. 圖 2-18 Sketch-a-TUI 使用示意圖. 21.

(26) c.磁力感應辨識 Designing Tangible Magnetic Appcessories 為了要解決互動性物件在行動裝置上的技術門檻，利用行動裝置中原生的內建磁力感應器作為主要的偵測方式，透過互動性物件其中之磁力值改變，藉此知道其物件的所在位置以及所產生的變化[12]。由下列圖中可看到其相關功能的 Tangible Tool 造型，像是 Scroll Bar、沙漏、調節旋鈕……等等，使用者不需再額外學習複雜的指令就可以用很直覺的方式去操作這些互. 政治大. 動性物件，將實體的互動物件與虛擬的數位內容作結合。. 立. ‧. ‧ 國. 學 y. sit. io. n. al. er. Nat. 圖 2-19 各種 Magnetic Appcessories. Ch. engchi. i n U. v. 圖 2-20 Magnetic Appcessories 中所含磁鐵量不同作為辨識依據. 22.

(27) 2.2.2. 相關應用 a.音樂領域 ReacTIVision Reactable 將辨識的圖形繪製於方塊的每一面，當各種形狀的特製方塊放上 Reatable 的桌面時，桌面下的鏡頭就會捕捉它們的相互位置和接觸面等資訊並傳給中央電腦，電腦會將這些資訊轉化成各種聲音採樣並播放出來，大多運用在音樂相關的場合上。像是 2014 年的 iTunes Festival 就透過這樣的方式呈現出控制音樂旋律、音量……等在音樂 Remix 播放的便利性[13]。. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 圖 2-21 Domino Tag. Ch. engchi. i n U. v. 圖 2-22 Microsoft PixelSense 使用情形. 23.

(28) b.堆疊組合應用 Capstones Capstones，類似 Lumino 的應用可以讓底層的電容式觸控螢幕顯示出實際上的 3D 排列。方塊的底層使用 2×2 觸控點的設計。這些觸控點電容可以在觸控螢幕上識別出不同的區塊以及顯示出堆疊的高度。透過其每個 Block 裡面的線路連結，使得堆疊時讓底層顯是給螢幕感應的觸控點有所改變，而堆疊效果如下圖所示依序為一、二、三個 Block 的排列方式[14]。. 立. 政治大. ‧ 國. 學圖 2-23 Capstones 堆疊效果示意圖. ‧. n. er. io. sit. y. Nat. al. i n U. C h圖 2-24 Capstones 結構 engchi. 圖 2-25 Capstones 使用示意圖. 24. v.

(29) c.調整數值應用 TouchPlansVS Lite 本身的材質是採用鋁(Aluminum)，感應方式也是藉由電容感應的改變來進行模擬觸控點的產生，在藉由下方觸控點的位置變化作為辨識依據。下圖中所看到的應用是利用旋鈕的旋轉來達到互動的效果[15]。. 立. ‧ 國. 學圖 2-26 TouchPlansVS Lite 使用示意圖. Nat. y. ‧. d.遊戲互動. 政治大. sit. Physical Games Pieces on Touch Based Tablets. er. io. 為了增加在行動觸控裝置上的實體回饋，此研究利用金屬導體作為模擬觸控. n. a l 的操作桿，由下圖中金屬操作桿的旋轉角度變化讓系點的媒介製作成 Air Hockey iv. n U en 統偵測到其改變來影響 Air Hockey 的方向，讓使用者能透過實體操作的方式進行 gchi. Ch. 遊戲增加互動感[16]。. 圖 2-27 實體 Air Hockey 操作示意圖. 25.

(30) 行動裝置上 TUI 發展所遇見的問題及現有之解決方法. 2.3. 過往的 TUI 裝置都是運用在觸控桌上，這樣的概念移植到行動裝置上後所遇到的最大的問題就是如何用其他方法來替代觸控桌所運用的影像辨識方式，在先前的介紹當中我們可以看到各種透過外加裝置、電容變化、磁力變化的偵測方式。以下我們藉由表格的整理出各個作品中的優缺點。表 2-1 TUI 辨識方式比較表. 立. 方更多，互動的效果可. 利用編碼的方式能創造. io. 出更多元化的組合及運. n. al. 缺乏便利性. 在感知物件製作上的步驟及零件的取得較為複雜，欠. 用. Ch. engchi. i n U. v 缺及時組裝的方便性. 技術門檻低，不需要多. 感知物件在製作之後就無. 餘的學習就可以按照指. 法變更其辨識組合，在操作. 示製作出感知物件. 上需要改變時較不便. 能夠在感知物件上做出. 需具備相關磁力變化應用. Magnetic. 更多不同的變化，文中. 的技術才能在製作感知物. Appcessories. 所提的漏斗操作上就相. 件時利用，且在物件移動時. 當直觀. 的偵測較不精確(e.g.旋轉). Sketch-a-TUI. 電容感應. 本較高，開發者在使用時較. ‧. 以佳更豐富. 電容感應. 器材攜帶不便，且在所需成. 學. 螢幕上方，能操作的地. Nat. TUIC. 政治大. 攝影機辨識活動的範圍不被侷限在. ‧ 國. P ort i c o. 缺點. y. 名稱. 優點. sit. 辨識方式. er. 分析. 磁力感應. 26.

(31) 3 第三章研究方法本章節要介紹的是如何將我們所設計的 Tangible 物件與電容式的行動裝置進行互動。第一節先介紹電容式的行動裝置是怎麼去偵測觸控的事件發生，第二節介紹我們如何製作 Tangible 物件，最後在第三節介紹我們 SDK 在 Tangible 物件放上螢幕後怎麼進行運算而判斷出其對應的物件。. 政治大. 3.1 電容式行動裝置如何偵測觸控. 立. 電容式觸控的原理是：當導電的ITO玻璃在四角提供電壓下形成均勻電場，而由於. ‧ 國. 學. 人體是電的導體，因此在接觸觸控面板硬化玻璃表面時會造成耦合電容，吸走下方ITO. ‧. 玻璃的部份電流造成電壓下降，而IC即經由計算電壓下降的座標判斷觸控的位置。電容電容式觸控面板又可分為表面式電容和投射式電容。其中投射式電容的特色在於. y. Nat. io. sit. ITO層以蝕刻方式形成矩陣，使得人體在接觸時除了表面會形成電容之外，也會造成X. n. al. er. 軸交會處之間電容值的變化。. Ch. i n U. v. 投射式電容由於被iPhone所採用，具有耐用性高(不需直接接觸就能感應、漂移現象. engchi. 較表面式電容小，因此被視為是未來電容式的主流技術。而在透光率、反應速度、耐用性、外觀方面都大幅優於電阻式觸控面板，更有具有多點觸控能力的優點，所以市場普遍看好有機會逐漸取代傳統電阻式觸控技術。因此我們利用電容式觸控螢幕的特性，將具有導電性的材料製作成感知物件，利用導電材料產生出的電容效果來觸發模擬觸控的產生。. 27.

(32) 政治大. 圖 3-1 電容式觸控螢幕偵測示意圖. 立. 3.2 感知物件(Tangible Object)設計. ‧ 國. 學. 在 TUI 的設計上往往會碰到的問題就是如何去製作實體互動物件，從過去許多文獻. ‧. 當中就可看出，在大多數的製作過程中會需要相關的硬體設計背景及技術，或是需要耗. Nat. sit. y. 費較多資源及金錢以完成實體互動物件，這樣的製作過程都增加了作品開發所需的時間. n. al. er. io. 及複雜度，使得開發者無法以最快的時間取得 prototype[17]。. i n U. v. 而為了解決這些問題，我們參考了 TUIC 的設計概念，利用其藉由導電性材質所產. Ch. engchi. 生之電容效應變化值而使電容式觸控面板感應的方法做為基礎進行改良[10]。. 圖 3-2 TUIC 硬體結構. 28.

(33) 首先我們從尋找新的組合材料來改善感知物件的製作過程，在測試過多種材質(e.g. 黏土、壓克力板、光碟片……)後，我們使用樂高積木作為整體的主要結構，原因是我們發現了一些以往設計人員在製作感知物件時常會遇見的問題： a. 在製作新的感知物件時容易因其長度、大小需要量測的誤差。 b. 材質耗損率高，使得感知物件容易因頻繁操作後而造成不堪使用。 c. 若須改變其原有的組合方式(底座的辨識圖形)較為麻煩。基於上述三點問題，樂高積木的好處在於其耐用、規格一致，減少其耗損率以及製. 政治大. 作感知物件過程中需要量測的步驟，透過其容易組裝的特性，也使得我們在改變底座的. 立. 組合方式時更加的便利，且樂高積木的組合方式相當多元，也使得我們藉由樂高積木所. ‧ 國. 學. 製作的感知物件更加豐富有趣。. 而在感應的部分，TUIC 當中使用了螺絲及鋁箔紙作為導電的主體，但其在調整高. ‧. 度及位置上較為不便，因此在測試了許多組合方式後我們採用導電的銅箔、鋁箔膠帶作. Nat. sit. y. 為主體上各 Pin 角之間的連通，結合 1x1 的樂高積木取代原有的螺絲，不僅取得方便、. n. al. er. io. 價格便宜，也使體積變小，在製作的過程上更能夠增加互動物件的可塑性，能夠快速拆. i n U. v. 卸且平均製作一組互動物件只需要花費一分鐘即可完成。. Ch. engchi. 圖 3-3 （左）1X1 樂高 Pin 腳和導電膠帶結合. 29. （右）本研究之感知物件實體圖.

(34) 3.3 Event 介紹為了要使觸控裝置能偵測到我們所放置在於上方的感知物件，我們設計了 TagEvent 做為 SDK 與開發人員之間溝通的方法。在 TagEvent 中我們能取得 Tag 的座標位置、旋轉角度、ID，在偵測的事件當中我們能運用 Tag 的放置與否、移動、旋轉，來運用在開發的 App 當中。目前 TagEvent 中 property 的 angle 計算方式為當感知物件擺放在平板上時，取任兩. 政治大. 點的連線做為基準去計算旋轉的變化量，而表現方式為 0 度~360 度(順時鐘遞增)。. 立. 表 3-1 TagEvent 之 Event & Property. Property. ‧ 國. 學. Event. ON_TAG. y. OFF_TAG. id. MOVE_TAG. angle. ROTATE_TAG. ‧. x. sit. y. Nat. n. al. er. io. 當感知物件放置觸控裝置上時會產生出模擬觸控，而這樣的模擬觸控的產生會影響. i n U. v. 到畫面中預設只能被手指所移動的物件，因此我們設計了 TuicTouchEvent 來避免掉這樣. Ch. engchi. 的情形發生，我們設定一段判定的時間(30ms)，來讓系統知道現在的觸控點是否為感知物件所擁有，若不是就會向外發出我們所設計的 TuicTouchEvent，詳細的辨識流程會下一小節當中呈現。表 3-2 TuicTouchEvent Event & Property Event. Property. TUIC_TOUCH_BEGIN. x. TUIC_TOUCH_MOVE. y. TUIC_TOUCH_END. touch_id. 30.

(35) 3.4 開發套件辨識方法及流程 3.4.1 辨識方法本研究所使用之辨識方法為利用觸控裝置上於 30ms 內所接收到的三個點所連成的三角形之三邊長做為判斷的基礎，首先我們會將三邊長進行排序找出最大邊長，再依序由最大邊長做比較，對應到我們預設或是使用者自訂的邊長組合，如果三個邊的邊長有符合到我們所預設的標準當中就會發出 Event 給系統。. 政治大. 將底部 pattern 作移動後就能改變所產生之三角形之三邊長，使得系統能藉此辨識出. 立. 不同的排列組合。. sit. y. ‧. ‧ 國. 學. Nat. 圖 3-4 (左)ID 0 , (中)ID 1, (右)ID 2. n. al. er. io. 以 ID 0 的範圍為例，若是 ID 0 的預設邊長上下限依序是 125pixels~135 pixels、115. i n U. v. pixels ~125 pixels、45 pixels ~55 pixels，而觸控裝置所接收到的三邊長分別為 130 pixels、. Ch. engchi. 120 pixels、50 pixels，就有符合其預設的範圍，這時系統就會發出 Tag ID 為 0 的事件出去，以傳遞到相對應的功能。我們現在所使用的底座是 4X4(以樂高為單位，實際長度約為 3.2cm)的排列組合，在測試底部可使用的排列方式過程當中，我們發現了當兩點之間過於靠近時，會因為硬體上的限制造成兩點合而為一的情形使得辨識上受到影響[16]，因此目前能夠被穩定偵測的組合有六種排列方式(見附錄一)，在之後擴增底座的發展上(e.g. 5X5、6X6)，可參考既有的排列將兩點之間的距離做調整，像是將原有排列的三角形等比例放大調整後即可增加更多組合可供使用者做運用。. 31.

(36) 3.4.2 辨識流程. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 3-5 SDK 辨識流程. 32. v.

(37) 立. 政治大. ‧. ‧ 國. 學. n. Ch. engchi. 33. er. io. al. sit. y. Nat 圖 3-6 三邊長辨識流程. i n U. v.

(38) 3.4.3 相關辨識程式碼解說 a.環境設定當開發人員要將原有的專案加入我們所設計的 SDK 時，必須將專案中加入下列 CODE 方能使用。 1.. import flash.events.TouchEvent;. 2.. import tw.tuic.TagEvnt. 治政 4. var detector:TUICdetector = new TUICdetector(0,0,768,1024,true); 大立 Line 1 ：確認專案中是否能接收觸控事件 Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;. 學. ‧ 國. 3.. Line 2 ：加入我們所設計的 TagEvent 以偵測感知物件的放置. ‧. Line 3 ：設定多點觸控模式為接收觸控點(另一種為接收手勢)，如此一來我們才能利用觸控點的相關資訊。. y. Nat. 始 X、Y、寬、高以及最後 DebugMode 的開啟與否。. al. n. b.. DebugMode 用法. Ch. engchi. er. io. sit. Line 4 ：在畫面上加入感知物件的偵測區域，括號中所設定的數值分別是偵測區域的起. i n U. v. 當 DebugMode 的 Boolean 值為 true 時，將會在感知物件位於畫面中的位置旁加入一個資訊欄，上面會列出，感知物件的所代表的 id、座標值和旋轉角度。. 圖 3-7 DebugMode 示意圖. 34.

(39) 4 第. 四. 章系統評估. 在第三章的設計概念成型後，本研究藉由相關領域使用者之經驗和不斷地測試及修正後，在第四章將分為硬體及軟體的部分做介紹，並透過使用者測試後的使用取得使用者回饋。我們透過改良後的開發工具，進行設計上的測試，以獲得使用者對於我們在硬體、軟體在實際使用上的回饋與意見，以利於往我們及往後相關領域的開發者在設計. 政治大. 和開發上能有更多的想法及創意，也帶給使用我們開發工具的設計人員更多的便利性。. 系統評估方式. 學. . 立. ‧ 國. 4.1. 第一階段：透過練習來熟悉設定 TUIC-2D Flash SDK 的操作環境。. ‧. 本階段主要是讓使用者能了解如何運用 TagEvent，環境上可以設定其偵測的範圍大. sit. y. Nat. 小、位置，也可透過 Debug Mode 的開啟來顯示出 Tag 在畫面上的相關資訊。能夠更進. io. al. 第二階段：透過練習在互動當中加入手指觸控，與 Tangible Object 在 iPad 上互. n. . er. 一步的了解 Tag 的操作方式及可運用的資訊。. 動。. Ch. engchi. i n U. v. 本階段為了讓使用者能在 Tag 在移動的同時也可以加入手部操作，透過我們所設計的 TuicTouchEvent 以增加 App 操作上的互動及功能。 . 第三階段：經過前兩個階段的練習之後，將 TUIC-2D Flash SDK 加入原有的 Flash. 專案當中。本階段透過前面兩個範例的練習(見附錄三)，使用者能更加了解此 SDK 的使用方式，藉由實際應用在自己的專案當中，以利未來在開發相關專案時能更加快速。. 35.

(40) 4.2. 受測對象與流程. 4.2.1. 受測對象由於本研究所設計之開發工具目標為能讓設計人員能快速的將 SDK 加入其原有作品當中，因此我們邀請了五位具有 Flash 使用經驗的受測者，在過去都有使用 Flash 為開發工具來製作互動作品的案例，我們也在測試前先提供受測者相關 TUI 的介紹及應用 (見附錄二)，希望能藉由他們實際的操作給予我們最直接的建議。. 治政受測者基本資料紀錄卡大. 表 4-1 受測者基本資料紀錄卡. 立. 學. ‧ 國. 姓名年齡. ‧. 性別. Flash 使用經驗. y. Nat. n. al. er. io 4.2.2. 參與人員. sit. 是否有使用 Flash 開發過行動裝置上的 App. Ch. engchi. i n U. v. 使用者一名，指導人員一名，攝影人員一名。. 4.2.3. 系統評估環境及設備位於安靜的研究室或是會議室當中，讓測試者能在舒適的環境下完成指定的任務。皆使用指導人員所提供之 MacBookPro 13”以 Adobe Flash CC 2014 進行程式設計，完成後發佈於 iPad Air 進行測試。. 36.

(41) 4.2.3. 系統評估流程透過循序漸進的方式(見附錄三)，分別學習 SDK 的使用方式、Tag 的使用方式以及加入手指觸控的互動，最後再將這些功能結合原有的專案後，立即進行使用者訪談以取得最直接的回饋。表 4-2 系統評估流程. 系統評估流程實驗評估項目. 所需時間. 15 分鐘. 完成 example 1. 5 分鐘. ‧ 國. 介紹 Tag Event 的用法. ‧. 5 分鐘. 完成 example 2. 15 分鐘. io. al. n. 訪談總計時間. Ch. y. 5 分鐘. Nat. 介紹 TuicTouch Event 的用法. 將 SDK 加入準備好的專案中運用. 學. 講解如何將 SDK 加入 code 中使用. 30 分鐘. sit. 立. 介紹 TUIC 硬體構造、使用方式. 5 分鐘政治大 5 分鐘. er. 說明實驗流程. i n U. v. i e n g c10h分鐘. 1 小時 35 分鐘. 37.

(42) 4.3. 使用者回饋 (user feedback) 在使用者測試完之後，我們藉由簡單的訪談與問卷的方式取得使用者在使用 SDK. 時的回饋(見附錄四、五)，我們將從幾個角度做整理，以利本 SDK 的修正及未來相關的開發人員作為參考。. 4.3.1. 使用難易度回饋-軟體根據使用者在訪談過程中指出，本 SDK 的的使用方式好理解，由於以前的作品是. 政治大整一些相關的設定，其餘的使用方式與系統原生的 MouseEvent、TouchEvent 相似，在立. 在電腦上執行，除了在設定環境的地方是之前較不熟悉，以及發佈到 iPad 上時會需要調. ‧. ‧ 國. 功能。. 學. 指導人員講解時即可理解並馬上運用，使用上按照說明皆可完成指定任務及想要完成的. n. er. io. sit. y. Nat. al. Ch. engchi. 圖 4-1. i n U. v. 測試者使用情形(1). 4.3.2. 使用難易度回饋-硬體使用者在以前皆有玩過樂高的經驗，在操作上組裝上不需要額外的教學就能輕易上手，對於樂高與導電膠帶結合之後能放在 iPad 上做結合應用皆表示相當有趣，之前也沒想過會有這樣的方法來運用在互動作品當中。有使用者表示希望能將 Tag 的底座造型做得更多元一點，更能夠凸顯出不同 ID 之間的差異性，在使用上會更加直覺，且由於 iPad 的螢幕大小有限，在主體結構上可以考 38.

(43) 慮使用 Nano Block 來取代樂高積木，透過較小的單位組合來製作出更精細的底座，增加畫面上可以容納的 Tangible 物件。. 立. 政治大圖 4-2 測試人員使用情形(2). ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-3 測試人員使用情形(3). 4.3.3. 結合原有專案使用回饋在使用者將 SDK 加入各自的專案的過程當中，大部分的時間會花在將原有的輸入指令轉換成 Tag 輸入的過程，結合後皆表示操作起來會比單純使用鍵盤、滑鼠或是點擊之輸入方式來的生動，在控制上也多了一種方式來進行，搭配影音效果能使的作品更加有趣，並且藉由 Tag 的組合與應用，在互動的畫面設計上能夠減少放置一些不必要的按鈕，使得畫面更加簡潔，能展現出更多不同的效果。. 39.

(44) 一名使用者的背景為動畫設計師，他將自行創作的動畫作為本次測試所用，畫面當中會透過太陽、風、雲朵的出現而產生相對應的動畫(e.g.花朵盛開、風車轉動、下雨)，在藉由加入 Tangible 的互動後即可將這些所須操作的元素實體化，在運用上能大幅提升互動性，該名使用者表示這樣的應用對於未來在電子書操作與創意發想上會有更進一步的發展。. 立. 政治大. ‧. ‧ 國. 學 sit. y. Nat. n. al. er. io. 圖 4-4 (左)代表太陽的 Tag , (右) 放上雲朵的 Tag. Ch. engchi. i n U. v. 圖 4-5 太陽與雲朵的 Tag 同時放上的結合效果. 40.

(45) 另外一名使用者的背景是廣電系的學生，他將之前於成是設計課當中的期末專案做為本次測試所用，主題為 Movie Dreamer，內容是透過闖關遊戲的方式來學習一些在拍片現場所需注意的事項，原本是單純的使用滑鼠及鍵盤操作，在玩遊戲時比較枯燥乏味，在加入了 Tangible 的互動之後，該名使用者表示這樣的操作方式能使得片場新進人員在正式操作器材前對於使用流程會有更深的印象，於實際上手時較不容易出錯。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. al. sit. y. Nat. 圖 4-6 測試人員完成專案整合. Ch. engchi. i n U. v. 圖 4-7 作品 MovieDreamer 互動示意圖. 41.

(46) 4.4. Tangible UI Toolkit 相關合作案例. 4.4.1 案例介紹近年來平板電腦的興起，其簡單直覺的觸控操作方式學習曲線較低，而 TUI 的互動也同樣具備了直覺性的操作，兩者都很適合用於幼童教育當中，且相關的幼童教育學家福祿貝爾與蒙特梭利都曾說過，手部操作對於幼童的學習是非常重要的，因此本 SDK. 政治大 (Tangible Toys)與觸控平板的電子書，目的是為了要讓 3~6 歲的小朋友能夠藉由操作感立. 除了透過使用者測試，與動畫設計師合作了一款 App”Zoo Toy”，這是一款結合感知玩具. ‧ 國. . 學. 知玩具與 iPad 作互動，達到寓教於樂的目的，電子書當中的應用可以分為兩個互動模式: 模式一：剪貼簿模式. ‧. 由我們所預設的感知玩具代表著不同的角色，放置在剪貼簿中不同的場景就會出. sit. y. Nat. 現不同類型的互動角色，透過拖拉至剪貼簿中的角色可經由點擊的方式於畫面上出現其. io. n. al. er. 英文單字並播放該單字之念法。. Ch. engchi. i n U. v. 圖 4-8 (左)大樹 Tag 在草地,(右) 大樹 Tag 在院子. 42.

(47) 圖 4-9 ZooToy 剪貼簿模式互動示意圖. . 政治大讓小朋友將自行拼湊指定的感知玩具角色(e.g.公雞、燈塔)加上感知玩具的底座立模式二：單字動畫模式. ‧ 國. 學. ，放置在指定的感應區就會出現相關該單字發音以及動畫或是小遊戲，透過虛實整合的互動及自行拼湊玩具的過程，增進小朋友學習單字的印象及興趣。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. 圖 4-10 單字動畫模式流程圖. 43. v.

(48) 4.4.2 案例分析在此電子書之案例當中，我們找了幼稚園的小朋友做為我們的使用者進行分組測試，這些學齡前的小朋友皆有使用過行動觸控裝置，也有些小朋友是有玩過樂高積木的經驗，因此對於測試的操作並不陌生。在測試及訪談的過程中，我們可以發現小朋友對於這樣的學習模式非常具有興趣，也在平時有進行相關的英語學習，而在此電子書中的單字動畫模式所要學習的單字都是他們之前未學習過的因此在學習過程當中，他們也藉由自行拼湊樂. 治政高積木及單字動畫的虛實結合方式加深了他們學習的印象，也能跟著電子書中所大立發出的讀法一起念，尤其是在將 Tangible Toy 放置在 iPad 上時出現的影音效果， ‧ 國. 學. 更是讓他們覺得興奮不已。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-11 孩童試玩 ZooToy 情形. 在剪貼簿模式當中，小朋友拿著我們事先所製作好的感知玩具(大樹、兔子) 放置在不同的環境當中所出現的相關角色，藉由重複點擊畫面上角色所產生的發音加以學習念法，使得他們透過環境、角色之間的關聯性來加深對單字的記憶性。經過了此次的實驗，我們可以看到小朋友透過這樣虛實整合的模式，把他們平時所玩的積木、iPad 結合在一起使用，進而組合出一種新的遊戲、學習方式，而此電子書也藉由感知玩具的操作增加了寓教於樂的效果。 44.

(49) 5 第五章. 結論與未來展望. . 第一小節：討論 Toolkit 在使用上的設計貢獻與建議。. . 第二小節：描述感知物件在操作上的不足之處。. . 第三小節：對未來設計及發展提出新的想法。. 5.1 研究貢獻與設計建議. 治政本研究之製作宗旨為讓程式開發人員、動畫設計師在不需要具備相關電子電路背景大立之下，能夠透過最簡單、輕鬆的方式將原有的動畫專案、遊戲加入感知物件的互動。 ‧ 國. 學. 在硬體方面，我們突破了以往製作感知物件的方式，在第二章的案例當中我們可以. ‧. 發現幾個問題會造成使用者在製作上的困擾，像是需要電子電路的背景、製作的過程及時間過於繁雜、不方便任意改變組合方式、材質易耗損……等等，而我們所使用的樂高. y. Nat. io. sit. 積木和導電膠帶的結合就解決了這樣的問題，在組合上能夠輕易的拆裝，且由於樂高積. n. al. er. 木的規格一致，在組裝上也不須再考慮量測上的誤差，可以直接以樂高積木的最小單位. Ch. i n U. v. 做為基準來設計，且其耐用度極佳，這樣的製作材料不僅方便取得也降低了許多不必要的耗損。. engchi. 由於我們所製作的感知物件只需採用三個觸控點所產生之三角形邊長不同來做為判別依據，如此一來可以減少感知物件的大小，讓感知物件放在 iPad 上後所呈現的效果能夠更佳明顯。而在軟體上為了要避免感知物件放在畫面上後對於可點擊物件產生誤觸的情形，透過我們所製作的 TuicTouchEvent 就能夠加以解決。. 45.

(50) 限制. 5.2. 在本 Toolkit 的操作當中出現了一些使用上的限制，像是有使用者詢問是否可以使用 Nano Block 來取代原有的樂高積木，但由於觸控裝置上的點與點之間有一定的距離限制，當兩點間的距離過於靠近時會造成兩點合而為一的情形發生，因此當使用者於作品當中加入了手指的互動或是兩個感知物件位置過於相近時，太過靠近就會對其造成影響。在使用者測試時的專案設計，由於測試者對於本 Toolkit 的操作並不了解，所以在. 治政第三階段的練習當中會造成他們無法在短時間內將我們所提供的功能加以應用到原有大立的專案當中，若是能先學習如何使用 Toolkit 後再給予較長時間的做發想，也許會增加 ‧ 國. 學. 使用者在專案創作上更多的創意。. ‧. 在硬體上的操作，由於感知物件放置於平板上時會因為其導體不夠大，當其中兩個觸控點的 X or Y 座標相同時會使得系統將其判斷成雜訊過濾掉，這樣的情形會造成平板. y. Nat. n. al. er. io. 度。. sit. 上無法抓取到感知物件的存在，目前都必須由手碰觸著導體才能確保感知物件的靈敏. 5.3 未來展望. Ch. engchi. i n U. v. 上一小節中所提到兩點互相影響而合成一點的問題，目前我們所想到的做法是從硬體下手，將感知物件的底座加大為 6X6，在外圍之處增加一道防護措施將其觸控點給包圍起來，而不受到其他觸控點的干擾。. 46.

(51) 圖 5-1 硬體改善示意圖. 但這樣的做法確與我們先前所提之減少感知物件所佔的體積背道而馳，因此在未來. 政治大. 希望能夠透過以其他排列組合方式或是程式內部判斷的改善來減少點與點之間互相影. 立. 響的問題發生。. ‧ 國. 學. 在未來，為了要讓使用者在毋須手指碰觸到感知物件就能增加其在平板上的靈敏度，我們將會從底座下手，在不增加其體積的情況之下而提升導體所佔的比例，這樣就能夠. ‧. 減少感知物件觸控點消失的情形，增加互動上的流暢度。. Nat. sit. y. 礙於目前感知物件的設計方式無法產生出堆疊的效果，所以在接下來的發展當中，. n. al. er. io. 我們也會以增加堆疊的組合方式來做為感知物件本體設計的考量之一。. i n U. v. 在過往許多電子書及遊戲動畫都是由 Flash 所製作，因此本研究以 Flash 為開發工. Ch. engchi. 具來設計此 ToolKit，但現今 Flash 的開發市場漸漸萎縮，許多新興的開發工具(e.g.Swift、 Unity)深受開發者喜愛，所以我們在未來將會利用設計好的硬體設備及 SDK 當中的辨識邏輯移植到其他開發平台當中，讓更多的開發人員能夠受惠。本研究的宗旨在於降低開發人員在平板電腦上製作相關互動專案時所需要的門檻，隨著開發工具與硬體設備不斷地推陳出新，在未來我們也將繼續從硬體的設計、軟體的使用上進行優化，讓感知物件的互動模式能夠更加蓬勃發展。. 47.

(52) 參考文獻 [1]. D. Avrahami, J. O. Wobbrock, and S. Izadi, “Portico: Tangible Interaction on and around a Tablet,” in Proceedings of the 24th annual ACM symposium on User interface software and technology - UIST ’11, 2011, p. 347.. [2]. [3]. H. Ishii and B. Ullmer, “Tangible Bits: Towards Seamless Interfaces between People, Bits and Atoms,” in Proceedings of the SIGCHI conference on Human factors in computing systems - CHI ’97, 1997, pp. 234–241.. 治政大 Nature,” in Proceedings of the E. Hornecker, “Beyond Affordance: Tangibles’ Hybrid 立 on Tangible, Embedded and Embodied Interaction Sixth International Conference ‧ 國. 學. TEI ’12, 2012, p. 175.. B. Ullmer and H. Ishii, “The metaDESK,” in Proceedings of the 10th annual ACM symposium on User interface software and technology - UIST ’97, 1997, pp. 223–232.. [5]. R. Watanabe, Y. Itoh, Y. Kitamura, F. Kishino, and H. Kikuchi, “Distributed autonomous interface using ActiveCube for interactive multimedia contents,” in. ‧. [4]. sit. y. Nat. n. al. er. io. Proceedings of the 2005 international conference on Augmented tele-existence ICAT ’05, 2005, p. 22.. Ch. engchi. i n U. v. [6]. D. Gallardo and S. Jordà, “Tangible jukebox,” in Proceedings of the fourth international conference on Tangible, embedded, and embodied interaction - TEI ’10, 2010, p. 199.. [7]. D. Ledo, M. A. Nacenta, N. Marquardt, S. Boring, and S. Greenberg, “The HAPTICTOUCH Toolkit: Enabling Exploration of Haptic Interactions,” in Proceedings of the Sixth International Conference on Tangible, Embedded and Embodied Interaction - TEI ’12, 2012, p. 115.. [8]. J. Marco, E. Cerezo, and S. Baldassarri, “ToyVision : A Toolkit for Prototyping Tabletop Tangible Games,” pp. 71–80, 2012.. 48.

(53) [9]. P. Baudisch, T. Becker, and F. Rudeck, “Lumino: Tangible Blocks for Tabletop Computers Based on Glass Fiber Bundles,” in Proceedings of the 28th international conference on Human factors in computing systems - CHI ’10, 2010, p. 1165.. [10] N.-H. Yu, P. Huang, Y.-P. Hung, L.-W. Chan, S. Y. Lau, S.-S. Tsai, I.-C. Hsiao, D.-J. Tsai, F.-I. Hsiao, L.-P. Cheng, and M. Chen, “TUIC: Enabling Tangible Interaction on Capacitive Multi-touch Display,” in Proceedings of the 2011 annual conference on Human factors in computing systems - CHI ’11, 2011, p. 2995. [11] A. Wiethoff, H. Schneider, M. Rohs, A. Butz, and S. Greenberg, “Sketch-a-TUI: Low Cost Prototyping of Tangible Interactions Using Cardboard and Conductive Ink,” in Proceedings of the Sixth International Conference on Tangible, Embedded and Embodied Interaction - TEI ’12, 2012, p. 309.. 立. 政治大. ‧. ‧ 國. 學. [12] A. Bianchi and I. Oakley, “Designing tangible magnetic appcessories,” in Proceedings of the 7th International Conference on Tangible, Embedded and Embodied Interaction - TEI ’13, 2013, p. 255.. al. er. io. sit. y. Nat. [13] M. Kaltenbrunner, “reacTIVision and TUIO: A Tangible Tabletop Toolkit,” in Proceedings of the ACM International Conference on Interactive Tabletops and Surfaces - ITS ’09, 2009, p. 9.. v. n. [14] L. Chan, S. Müller, A. Roudaut, and P. Baudisch, “CapStones and ZebraWidgets,” in Proceedings of the 2012 ACM annual conference on Human Factors in Computing Systems - CHI ’12, 2012, p. 2189.. Ch. engchi. i n U. [15] C. Brosda, J. Daemen, S. Djuderija, S. Joeres, O. Langer, A. Schweitzer, A. Wilhelm, and J. Herder, “TouchPlanVS lite,” in Proceedings of the 2012 Joint International Conference on Human-Centered Computer Environments - HCCE ’12, 2012, p. 64. [16] D. Burnett, P. Coulton, and A. Lewis, “Providing both physical and perceived affordances using physical games pieces on touch based tablets,” in Proceedings of The 8th Australasian Conference on Interactive Entertainment Playing the System - IE ’12, 2012, pp. 1–7. [17] D. Avrahami and S. E. Hudson, “Forming Interactivity: A Tool for Rapid Prototyping of Physical Interactive Products,” in Proceedings of the conference on Designing. 49.

(54) interactive systems processes, practices, methods, and techniques - DIS ’02, 2002, p. 141.. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 50. i n U. v.

(55) 附錄附錄一現有可供穩定偵測之底座排列方式. 立. 政治大. ‧ 國. 學 TAG_1. ‧. TAG_0. n. al. er. io. sit. y. Nat TAG_3. TAG_2. Ch. engchi TAG_4. 51. i n U. v. TAG_5.

(56) 附錄二使用者測試前參考資料. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 52. i n U. v.

(57) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 53. i n U. v.

(58) 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 54. i n U. v.

(59) 附錄三使用者測試說明文件. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 55. i n U. v.

(60) 附錄四使用者測試訪談問卷內容. 1. 在將 SDK 加入範例及專案的過程中,哪個部分讓你花費最多時間理解?又為什麼?. 2. 是否有使用過其他 SDK（請舉例）相較之下本 SDK 的使用難易度為何，是否容易上手？政. 治. 立. 大. ‧ 國. 學. 3. 將 SDK 加入您原有的專案後，使用效果如何?. n. sit. er. io. al. y. ‧. Nat. 4. 有什麼功能你想要做,但是目前辦不到?. i n U. C. v. hengchi 5. 對於此 SDK 是否還有其他意見及建議?. 56.

(61) 附錄五使用者意見回饋紀錄使用者-1 1. 2. 3. 4. 5.. 還滿容易理解的，一開始會需要看如何加入程式碼，但使用過一遍後就熟悉了無，滿容易上手的，說明詳細無基本的操作功能滿齊全的，其他功能比較會是需要由 User 自行發展衍生出來可以考慮做出更多不同 Size 的 Tangible 物件. 使用者-2. 立. 政治大. 1. Debug 模式的使用方式，因為不知道會從哪裡出現資訊，但講解過後就清楚了. ‧ 國. 學. 2. jQuery 等等，使用難度不高，只需簡單知道大概使用方式，即可簡單上手。 3. 多一種互動的方式，不是死板的點擊 4. 無. ‧. 5. 多個 Tag 的互動方式受限於 iPad 的畫面大小，如果 Tag 的大小能再小一點應該可以. 有比較多的發展. n. al. er. io. sit. y. Nat. 使用者-3 1. 2. 3. 4. 5.. Ch. i n U. v. 操作上基本上淺顯易懂，能夠一開始就掌握使用訣竅，不用花費太多時間理解沒有，使用上容易上手能夠讓原本的專案更加豐富，效果比較多樣化沒有硬體造型可以更加多元化，會增加使用上的趣味. engchi. 使用者-4 1. 因為平時使用 AS3 的機會較少，在使用語法上會比較多地方會需要複習一下 2. 沒有使用過。SDK 容易上手，算是簡單 3. 原本的期末專案只有在電腦上操作，在控制上使用滑鼠和鍵盤，比較死板安裝到 iPad 上後的操作改為 Tangible 的應用之後，控制起來就生動許多，比較有實際感。 4. 無。. 57.

(62) 5. 沒有，滿好使用的。. 使用者-5 無。很容易就可以使用了，簡單好用。很有趣，多了一些實體的玩具操作起來很有趣。無。在 Tangible 的大小上如果能再做小一點、扁一點會更好好攜帶，或是用 nanoblock 來試試看。. 立. 政治大. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 1. 2. 3. 4. 5.. Ch. engchi. 58. i n U. v.

(63)