結合電子電路與觸控平板之原型設計工具 - 政大學術集成

全文

(1)國立政治大學數位內容碩士學位學程 Master's Program in Digital Content & Technologies National Chengchi University. 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. 結合電子電路與觸控平板之原型設計工具. ‧. Designing a visual programming toolkit for prototyping. Nat. n. al. er. io. sit. y. electronics with mobile devices. Ch. i n U. v. e n g c Ting-Ta hi 研究生：林廷達 Lin. 指導教授：余能豪 Neng-Hao Yu 張寶芳 Pao-Fang Chang 中華民國一百零二年八月 August 2013.

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

(3) 摘要近年互動設計、產品設計、設計思考等學門，無不重視原型設計，透過使用者快速的測試回饋，反覆修正，使產品更符合使用者的需求。如今科技產品不斷推陳出新，與無所不在運算的普及，科技產品以及感知互動的服務與日俱增；設計團隊須了解電子電機相關技術，以完成各種測試原型。但對於一般的設計師而言，必須額外費時學習電路設計、焊接與程式設計等專業技術，已成為原型製作. 政治大許多研究學者注意到這樣的需求，針對不同的使用族群發展各種電子電路創立. 的一項門檻。. ‧ 國. 學. 作工具，希望降低互動產品的創作門檻，舉凡 Arduino、Phidgets 與 Gadgeteer 等，但使用者仍須具備基本電路知識或參與訓練課程；近兩年推出的 Littlebits. ‧. 與 Atoms 選擇捨去電路設計、焊接與程式設計的過程，讓沒有電子電路經驗的. y. Nat. io. sit. 使用者也可輕易使用，卻降低了創作時的彈性，侷限了原型製作的變化性。. n. al. er. 本研究將針對非電子相關背景的設計師，設計一套電子電路創作工具. Ch. i n U. v. 「Rapid Prototype」，藉由分析過去電子電路創作工具的使用族群與設計思維，. engchi. 結合電子電路物件與智慧型載具，設計一套圖型化編輯器，透過物件順序的編排，及物件行為的選擇，快速製作出原型產品，降低設計師學習門檻及提昇創作自由度。本研究原型設計工具，有以下功能： •. 增加智慧型載具的支援：智慧型載具提供圖型化的編輯器與電子電路互動模組結合增加製作彈性。. •. 降低學習門檻：降低電子電路相關知識需求，且透過圖形化編輯比傳統程式語言更容易學習。 i .

(4) •. 擴展創作空間：核心物件與行動載具無線溝通，減少距離限制。. •. 分析使用經驗：分析使用者在電子電路互動模組的使用經驗與操作，作為未來電子電路原型製作工具的參考。. 關鍵字：電子電路、互動設計、原型製作、圖型化編輯器、開發工具. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. ii . i n U. v.

(5) Abstract. As the demands for interaction design with electronics increase, it is necessary for design groups to understand the technology related to electronic and electrical engineering in order to produce different kinds of prototypes. However, there is a large gap between concept design and prototyping. Designers have to spend a lot of time to learn electrical circuit design, welding, programming, and other professional skills. More researchers have noticed the aforementioned demands and have thus developed various creative tools for use by different groups working in this field in. 政治大 has already been seen in Arduino, Phidgets, Gadgeteer products and so on. These 立 toolkits are target on developers that have basic knowledge on electronics and. the hopes of lowering the degree of creativity required for interactive products. This. ‧ 國. 學. programming. In the last two years, meanwhile, Littlebits and Atoms have decided to abandon the need for designing electrical circuits, welding, programming, and other. ‧. sophisticated processes. Instead, they have opened the way for young people to be able to use their tools easily, despite the fact that doing so has also limited flexibility. Nat. sit. y. in terms of the creativity and variability of prototypes. In this thesis, we present. er. io. RapidPrototype: a tool for designers without electronic engineering backgrounds and programming skill. By using RapidPrototype, users can transform their creative ideas. n. al. i n U. v. into a workable prototype easily and quickly. In addition, the study sought to. Ch. engchi. determine how RapidPrototype combines with electronic and electrical circuit objects, visual programming toolkit, and tools that practically meet designers’ demands to enhance the degree of freedom in terms of creativity and lowering the basic skills demanded. Keyword：electrical , interactive design, prototyping ,visual programming ,Toolkits. iii .

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

(7) 致謝感謝余能豪老師這兩年來的教導及鼓勵，給予我 HCI 領域的啟蒙，並且在尋找研究題目之時與我多次討論及修正，使我結合過往的經驗與興趣，完成此篇碩士論文。也感謝張寶芳老師給我論文方向上的指導，及撰寫上的諸多建議，使我研究邏輯更為明確，也謝謝兩位老師這段日子時間以及心力上的付出。也感謝口試委員侯君昊老師，過去您指導學生的研究方向，給予我這次題目的靈感及補足我本身的相關知識的缺乏，並在論文初審以及口試時，給予明確精. 政治大. 準的意見與鼓勵，讓我更有繼續本研究的動力。. 立. 在研究進行期間，參與我程式撰寫的兩位政大資科所學弟林震軒與劉康平，. ‧ 國. 學. 感謝你們的大力協助，每天陪我熬夜才讓本研究可以在展覽及口試時可以完整呈. ‧. 現，在你們身上我學到很多，也希望這次的合作對未來你們的發展方向有幫助。. sit. y. Nat. 也感謝 RapidPrototype Logo 主視覺以及表版設計的森田達子，這次沒有機會讓. n. al. er. io. 你好好發揮，下次合作一定讓你盡情揮灑。. v. 以及感謝 IUILab 全體夥伴黃奕誠、林逸清、蔡宜璇、徐嘉駿、陳彥妤，大. Ch. engchi. i n U. 家給予我在研究上的幫助及建議，讓我論文製作期間並不寂寞。也感謝數位內容碩士第二屆學長姊以及第三屆同學們的幫助與陪伴，讓我有自信可以完成我的研究，也在我無助時拉我一把。並也感謝 Yahoo!的好同事曾韻如、林威宇、李亞芝，成為我論文疑難雜症的諮詢師。最後更感謝我的家人，讓我研究所兩年衣食無慮、任意揮灑，研究所兩年使我視野更為寬廣。. v .

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

(9) 目錄摘要 ............................................................................................................................................................ i Abstract ................................................................................................................................................... iii 致謝 ........................................................................................................................................................... v 目錄 ......................................................................................................................................................... vii 圖目錄 ..................................................................................................................................................... ix 表目錄 .................................................................................................................................................. xiii 第 1 章緒論 .......................................................................................................................................... 1 1.1 研究背景與動機 .................................................................................................................. 1 . 政治大. 1.1.1 電子電路的設計需求 .......................................................................................... 1 1.1.2 電子電路創作工具的興起 ................................................................................. 2 . 立. 1.1.3 圖型化編寫程式環境 .......................................................................................... 3 . ‧ 國. 學. 1.2 研究目的 ................................................................................................................................ 5 1.3 研究問題 ................................................................................................................................ 5 . ‧. 1.4 研究架構與流程 .................................................................................................................. 6 第 2 章文獻探討 ................................................................................................................................ 7 . y. Nat. 2.1 設計思考之原型設計 ....................................................................................................... 7 . sit. 2.1.1 設計流程 ................................................................................................................... 8 . er. io. 2.1.2 設計活動觀察及參與 .......................................................................................... 9 . al. n. v i n C h........................................................................................... 2.3 圖型化程式語言環境案例 32 engchi U 2.4 小結 ....................................................................................................................................... 45 . 2.2 電子電路創作工具案例 ................................................................................................ 13 . 第 3 章系統設計 ............................................................................................................................. 47 3.1 概念說明 ............................................................................................................................. 47 3.2 電子電路物件設計 .......................................................................................................... 49 3.3 圖型化編輯器設計 .......................................................................................................... 52 3.3.1 介面區域劃分 ...................................................................................................... 53 3.3.2 圖型化物件設計 ................................................................................................. 54 3.3.3 操作互動設計 ...................................................................................................... 57 3.3.4 操作流程步驟 ...................................................................................................... 59 3.4 系統設計前測 ................................................................................................................... 59 3.4.1 測試概念原型 ...................................................................................................... 60 3.4.3 測試結果與修正 ................................................................................................. 66 vii .

(10) 第 4 章系統實作 ............................................................................................................................. 69 4.1 硬體實作 ............................................................................................................................. 69 4.2 軟體實作 ............................................................................................................................. 72 4.2.1 軟體功能實作 ...................................................................................................... 72 4.2.2 實際案例示範 ...................................................................................................... 77 4.3 系統原型評估 ................................................................................................................... 80 第 5 章結論與未來展望 ............................................................................................................... 83 5.1 研究貢獻與設計建議 ..................................................................................................... 83 5.2 限制 ....................................................................................................................................... 88 5.3 未來展望 ............................................................................................................................. 89 參考文獻 .............................................................................................................................................. 93 . 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. viii . i n U. v.

(11) 圖目錄圖 1 透過 Arduino 開發版讓 LED 發亮 ................................................................................... 2 圖 2 Littlebits 工具組 ........................................................................................................................ 3 圖 3 NXT-G Programming 的圖型化程式編寫頁面 ............................................................ 4 圖 4 研究架構與流程 ....................................................................................................................... 6 圖 5 設計思考流程的五步驟 ........................................................................................................ 8 圖 6 Lo-fi 原型製作材料 .................................................................................................................. 9 圖 7 左上為作品光音，右上為 Shaking Taipei，下方為 FollowMe ........................ 11 圖 8 觸控介面設計第四組的作品，小偷剋星 ................................................................... 12 圖 9 Arduino 一系列的電子電路開發版 ............................................................................... 14 . 政治大圖 11 GROVE - Starter Kit 立........................................................................................................... 15 . 圖 10 Phidgets 電路開發套件 ..................................................................................................... 15 . 圖 12 Microsoft .NET 所開發的 Gadgeteer 開發模組以及.NET Micro Framework. ‧ 國. 學. 的程式撰寫畫面 ................................................................................................................................ 16 圖 13 LEGO® MINDSTORMS® NXT 2.0 主機與各種感測器 ..................................... 16 . ‧. 圖 14 roBlocks 基本的建構組成 ................................................................................................ 17 . y. Nat. 圖 15 TOPAOKO 互動組合工具的各種組件以及厚紙板材料 .................................... 19 . sit. 圖 16 TOPAOKO 中「力」的內部構造，包含馬達、三色 LED 以及可塑性金屬. er. io. .................................................................................................................................................................. 19 . al. 圖 17 INTERACTIVE DESIGN TOOLKIT 的可變電阻元件 ........................................ 20 . n. v i n 圖 18 Littlebits 工具簡易操作 C .................................................................................................... 21 hengchi U 圖 19 Atoms 透過藍牙模組與 iphone 溝通的示意圖 ....................................................... 21 . 圖 20 Cubelets 可藉由智慧型手機的藍牙控制以及監測六個物件模組 .................. 22 圖 21 利用 PICL 學習偵測到不同光敏電阻數值時，會輸出不同的電壓 ............. 23 圖 22 The VoodooIO gaming kit 的硬體組成 VoodooPins 與平台 ............................. 24 圖 23 Snap Circuts 的組合套件，包含風扇、電池、開關、電壓測量等等元件 25 圖 24 利用 LightUp 組成的基礎 RC 電路以及二極體與電容的元件 ....................... 25 圖 25 電阻並聯與串聯在立體面呈現 .................................................................................... 26 圖 26 右側為 labView 的圖型化程式編寫空間，左側為使用者介面 ...................... 32 圖 27 G 程式語言簡單將兩輸入數值相加 ............................................................................ 33 圖 28 Max 的編寫環境，左半邊是編輯區，右半邊是可使用的物件 ..................... 34 圖 29 利用 Max 與 Kinect 結合，做到肢體互動的表演 ................................................ 34 圖 30 利用 PureData 製造聲響且同時與影像互動 .......................................................... 35 ix .

(12) 圖 31 Synthmaker 的編輯環境，圖型設計上利用很多實體物件 .............................. 36 圖 32 利用 Lily 抓取 xml 網頁的照片 ................................................................................... 36 圖 33 Scratch 的動畫編輯環境 .................................................................................................. 37 圖 34 Modkit 可透過圖型化設計設定電子電路連接的腳位 ........................................ 38 圖 35 利用 Modkit 撰寫基本 LED 閃爍程式 ...................................................................... 38 圖 36 Alice 3D 編輯環境 .............................................................................................................. 39 圖 37 LEGO MINDESTORMS Education NXT Software 編輯環境 ........................... 39 圖 38 App Inventor 的軟體開發流程 ....................................................................................... 40 圖 39 App Inventor Block Editor 的開發畫面 ...................................................................... 41 圖 41 核心物件可插上分支物件擁有獨立電力、藍牙通訊的能力 .......................... 50 圖 42 輸入、輸出分支物件 ........................................................................................................ 51 . 政治大. 圖 44 物件在物件區與編輯區的設計 .................................................................................... 54 圖 45 輸出物件在行為類型不同時，配色所呈現的差異 ............................................. 55 . 立. 圖 46 物件被附著上流程主線 .................................................................................................... 57 . ‧ 國. 學. 圖 49 圖型化編輯器與硬體使用流程 ..................................................................................... 59 圖 50 利用傳統媒材製作的軟體介面以及實際應用的硬體 ......................................... 60 . ‧. 圖 51 透過紙質的交錯，製作出物件區 ScrollView 的效果 ......................................... 60 圖 52 使用者選擇一個物件，並且將它拖曳出 .................................................................. 61 . y. Nat. 圖 53 使用者點擊編輯區的物件，跳出 Popover 行為設定視窗 ................................ 61 . sit. 圖 54 使用者可依照自己需求，調換物件間的順序 ........................................................ 62 . er. io. 圖 55 使用者按下 Play 準備執行專案，跳出接腳示意圖 ............................................. 62 . al. n. v i n Ch 圖 57 系統設計評估流程圖 ......................................................................................................... 65 engchi U 圖 58 測試案例 1，要有最後一個閘道物件，才不會直接回到感測光源的邏輯67 圖 56 使用者按照示意圖將分支物件插上核心物件 ........................................................ 62 . 圖 61 電子電路物件與行動載具溝通狀態圖 ....................................................................... 71 圖 62 Rapid Prototype 首頁畫面 ............................................................................................... 72 圖 63 新增專案，輸入專案名稱 ............................................................................................... 73 圖 64 進入專案後，選擇 LED 物件使用，拖曳到想要的位置 .................................. 73 圖 65 LED 物件放置於第一個位置上，預設行為是 Off ............................................... 74 圖 66 選擇 LED 的行為 Blink 並且選擇頻率 ...................................................................... 74 圖 67 增加物件、改變物件順序 ............................................................................................... 75 圖 68 物件刪除時的動畫 .............................................................................................................. 75 圖 69 點擊 Play 後產生的接腳示意圖 .................................................................................... 76 圖 70 連線中的旋轉動畫 .............................................................................................................. 76 圖 72 設定震動馬達為間隔性震動 ......................................................................................... 77 x .

(13) 圖 73 設定 Speaker 行為 Alram ................................................................................................ 78 圖 74 將震動馬達改為持續震動 .............................................................................................. 78 圖 75 最後再按下一次按鈕就關閉 Speaker 跟震動馬達的行為 ................................ 79 圖 76 最後產生接腳示意圖 ........................................................................................................ 79 圖 78 執行時，眼睛符號代表可觀察目前感測到的數值變化 ..................................... 84 圖 79 重複多物件使用時，透過右上角的顏色辨別物件的不同 ................................ 85 圖 80 透過圖型化編輯區的分類，協助使用者找到想使用的物件 ........................... 85 圖 81 將不使用的物件拖曳至物件區刪除 ............................................................................ 86 圖 82 Reset 物件改為 Turn All Off，且透過圖示意會將所有輸出分支物件關閉 .................................................................................................................................................................. 86 圖 83 將專案名稱與執行按鈕移至上方 ............................................................................... 87 . 政治大. 圖 84 在未來增加更多虛擬物件，像是播放影片、與 Facebook 連結的物件 ..... 90 . 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. xi . i n U. v.

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

(15) 表目錄表 1 常見互動情境與物件整理 ................................................................................................. 12 表 2 電子電路創作工具依使用族群分析 .............................................................................. 27 表 3 圖型化程式編輯軟體依設計類型分析 ......................................................................... 42 表 4 分支物件常見使用方式統整 ............................................................................................ 51 表 5 分支物件行為、參數統整 ................................................................................................. 56 表 6 iPad 互動物件，行為一欄表 ............................................................................................ 57 表 7 受測者基本資料記錄表 ...................................................................................................... 63 表 8 系統設計評估流程……………………………………………………………64 表 9 訪談問題………………………………………………………………………65 . 立. 政治大 . ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. xiii . i n U. v.

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

(17) 第 1 章緒論. 1.1 研究背景與動機以往，非電子電機背景的設計師，難以想像靠著自己的力量，可在短時間內，就完成控制燈泡明暗、馬達運轉、甚至環境聲光感測，給予聽覺、視覺回饋的裝置。為了降低電子電路的創作門檻，讓設計師能夠專注於產品的開發，而不用花. 治政費大量的時間，進行互動技術的學習，是本研究的發展動機。大立. ‧. ‧ 國. 學. 1.1.1 電子電路的設計需求. 電子電路知識的養成，在過去，是一種專業學門，專屬於電子相關科系的領. sit. y. Nat. 域，才有可能略知一二；各種電路學、電子學、微算機原理以及嵌入式系統的設. n. al. er. io. 計課程等等，往往也讓一般非相關背景的設計師無法輕易進入電子電路的世界。. i n U. v. 然而，因應時代的變化，科技產品的日新月異以及人們的需求，電子電路科技不. Ch. engchi. 再只是專業人員的工具，而是各種設計領域都會應用到的技術，像是產品設計，漸漸加入新型態的科技元素，不再只是重視產品的人體工學與外觀表現，以致於在設計流程當中，要有電子電路的相關知識，做出與實際產品相似度高的實驗原型，才能獲得使用者更正確的回饋。又像是互動設計，追求科技與人類行為的互相牽引，與無所不在的運算，任何無論是感測光、感測溫度，甚至是人體的動態行為，都會需要電子電機的相關知識才有辦法實踐。電子電路甚至延展到藝術的領域，國外利用科技來進行藝術創作的案例也早在十幾年前開始，台灣現今也不斷的蓬勃發展，在各大美術館都有科技藝術為主題的展覽或是以科技藝術為主要 1 .

(18) 推廣目標的美術館興起。在許多兒童的教具設計當中，也將電子電路的觀念以及操作放入教材當中，經許多研究證實，能有效刺激小孩子的創造力，獲取相關知識。. 1.1.2 電子電路創作工具的興起因應這樣一波的需求，門檻較低的電子電路開發工具在五年內興起，過去不管在程式撰寫、電路設計、到電路焊接，每一門都是一個重要的科目，但是在 Arduino 等簡易開發版的出現後，讓實作電子電路的門檻可以透過單一開發版，. 治政大結合軟體的設計，就可以做出設計原型或小型互動作品。但經過各種科技藝術與立 ‧ 國. 學. 互動設計的工作坊與學校所開辦的課程觀察以來，即使是再簡單的電子電路開發工具，只要仍然牽扯到程式撰寫，電路連接，對於沒有電路設計、線路焊接、程. ‧. 式設計等等背景的學生，還是必須花上好幾週甚至好幾個月的時間才能夠上手。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 1 透過 Arduino 開發版讓 LED 發亮. 因為這樣的門檻以及不同年齡層的需求，造就後來 LittleBits 與 Atoms 等等電子電路創作工具的出現，他們不需要線路焊接、程式設計，讓非電子電機背景的設計師可以輕易上手，有些也將目標族群轉向為九歲以上的兒童，成為新型態的互動教具以及創作工具。在我們的生活環境當中到處充斥著電子電路的產品，與過去比起來，我們創 2 .

(19) 造，消耗，拋棄越來越多的電子工具。而你的創意如今也可透過電子零件，如同紙、彩色筆、紙板等等一般，成為原型設計或是小型互動元件的的材料。電子工程是艱深的一門科目，就如同黑盒子一般，你的創造力會被應用的工具或經訓練後才可使用的素材給限制住。如今當設計師們可如同傳統素材，像是紙、紙板、螺絲，使用電子電路時，創意的產生將會源源不絕。(Bdeir & Rothman, 2012). 政治大. 立. 圖 2 Littlebits 工具組 . ‧ 國. 學. 又如同 Atoms 創辦人 Michael Rosenblatt 所描述:「若有人想要嘗試做一支魔. ‧. 法棒，輕輕一揮就可以將房間內的燈開關自如，應該如何達成呢？市面上似乎找. sit. y. Nat. 不到可以滿足這種想法的工具。」(Rosenblatt,2012). io. al. er. 於是，我們期望本研究可以降低設計師在創意發想、原型設計時的電子電路. v. n. 技術負擔，能夠使沒有經驗的設計師也可以輕易上手，進而讓不同年齡層的創作. Ch. engchi. i n U. 者都可以將電子電路轉化為一般日常生活當中創意發想的工具，產生更多有趣的作品。. 1.1.3 圖型化編寫程式環境在電腦運算當中，視覺化程式語言(visual programming language)，又被稱作「圖型化程式語言」，是使使用者可利用圖形化元素來進行程式設計，而非文字式的撰寫程式，許多圖型化程式語言是由方塊(Boxes)以及箭頭(Arrows)的概念所組成，以方塊為物件本體，並且由箭頭相互連結成邏輯順序。. 3 .

(20) 圖形化的程式編寫，可以讓程式設計的初學者更容易上手，像是提供給科技藝術家使用的 Max 的圖型化式語言開發環境，在 Max 環境下運作，他將物件圖型化，且每個物件都有其獨立功能像是能產生噪音、做出視覺特效、數學計算或是邏輯判斷的工作。操作時將物件拉到被稱作畫布的工作區域，用連接線連接在一起，不用寫任何程式碼，就能夠創造出互動且獨特的軟體，降低沒程式背景初學者的學習門檻。(Zicarelli,2003) 另一款圖型化程式語言是由 LEGO MindStorms NXT 機器人所使用的程式語言 NXT-G Programming，使用族群針對 10~14 歲的兒童，利用圖型化語言的特. 治政大性，將每個 NXT 機器人控制功能封裝為一個個物件，讓創作者可以透過簡易的立 ‧. ‧ 國. 學. 圖形介面做各種感測裝置，像是光、聲音等等物理感測的邏輯操作。(Lego,2006). n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3 NXT-G Programming 的圖型化程式編寫頁面 . 比起傳統文字化的程式語言，圖型化程式語言，針對沒有程式設計背景的創作者，或是較低年齡層的創作者造就初期較低的學習門檻。本研究期望在降低設計師原型設計時，電子電路技術難易度以外，仍要保留創作邏輯時的自由度，因此我們使用圖型化的編輯器作為輔助各個電子電路物件間的溝通工具，加強電子電路互動模組的邏輯設計。. 4 .

(21) 1.2 研究目的本研究以設計師原型製作時的需求為基礎，將每個單一功能的電子電路感測以及輸出元件整合為電子電路互動模組，利用智慧型載具相互連結，透過圖型化的程式編寫，安排物件間的邏輯順序，發展出可利用電子電路開發、設計的工具，不再受到電子電機知識背景的限制，完成電子電路技術的設計原型，或是小型的互動作品，激發人們對於電子科技的創意，造就更多創新想法。以下三項是本研究主要目的： a.. 治政大降低使用門檻：降低電子電路元件使用門檻，讓非本科系創作者也可以立 ‧ 國. 學. 輕易上手。. 創意實踐：讓電子電路創作工具融入設計流程中，提昇實作效率。. c.. 互動體驗：當原型製作或互動作品有包含電子科技元素時，都可透過電. ‧. b.. sit. y. Nat. 子電路創作工具完成小型互動的創作作品。. n. al. er. io. 整合以上三點，本研究期望以電子電路創作工具的方式，讓創作者能夠對電. i n U. v. 子電路元件的互動感到興趣，進而運用電子科技完成自己的創意設計，且對電子電路不再感到陌生與害怕。. Ch. engchi. 1.3 研究問題電子電路創作工具，用於科技、互動相關原型設計時： a.. 如何能加速設計原型的製作？. b.. 在智慧型載具，圖型化編輯器的操作下，如何能提高創作自由度？. c.. 探討非電子電機背景的設計師在設計原型的製作過程中，使用工具的使用經驗為何？以供日後研究人員參考。 5 .

(22) 1.4 研究架構與流程. 研究背景與動機本研究針對非電子電機背景的設計師，設計一套電子電路創作工具，以降低技術門檻為宗旨，省略焊接、接單心線、與傳統程式設計的方式，且利用智慧型載具無線連結各電子電路元件，利用圖型化編輯器，達到簡易但又不失創作自由度的創作體驗。. 研究目的與問題如何能加速設計原型的製作？在智慧型載具，圖型化編輯器的操作下，如何能提高創作自由度？探討非電子電機背景的設計師在設計原型的製作過程中，使用工具的的使用經驗為何？以供日後研究人員參考。. 立. 政治大. ‧ 國. 學文獻探討. ‧. n. al. er. io. sit. y. Nat. 1.設計思考之原型設計 2.電子電路創作工具案例 3.圖型化程式設計環境案例. 1.電子電路物件設計 2.圖型編輯器設計 3.電子電路設計案例 . Ch. 設計實作. engchi. i n U. 系統設計評估研究結果與分析結論圖 4 研究架構與流程 . 6 . v.

(23) 第 2 章文獻探討. 本研究期望利用新型態的電子電路創作工具，結合在智慧型載具上的圖型化編輯器，降低非電子電機背景的設計師，在科技產品原型製作時的困難度，並且給予更多創新發揮的空間。因此將文獻探討分為以下四節進行探討： •. 第一節. 設計思考之原型設計：我們將從設計理論「設計思考」，來探. 討整個設計的流程，針對原型製作的過程，進行觀察且提出問題。 •. 第二節. 政治大. 電子電路創作工具案例：將近十年來，15 種提供給不同族群，. 立. 達到不同教學目標的電子電路相關的工具，進行探討與分析。. ‧ 國. 學. •. 第三節. 圖型化程式設計環境案例：分析 10 種圖型化程式設計工具，. 所針對的目標、族群，與表現形式，進行分類及探討。第四節. ‧. •. 小結：將對前三節所分析的案例以及趨勢，進一步加深思考，. y. Nat. er. io. a. sit. 運用在之後的設計當中。. n. 2.1l 設計思考之原型設計i v. Ch. n U engchi. 近年來「Design Thinking」這個創意與設計的方法論在國內外廣為流傳，目的在為生活當中各種議題尋求創新的解決方案，以使用者的觀看角度出發，試著了解他們所處的環境、當下的情緒、面臨的問題等等。洞悉問題背後的意涵，不斷提出可行的想法，試著用自己的技術與能力來解決問題，並且製作出能夠讓使用者測試的設計原型，反覆接受試驗，以達到最符合需求的結果，為未來創造更多的可能性。(提姆‧．布朗著，吳莉君譯，2010) 然而在整個設計流程當中，我們所希望幫助的關鍵點，是在原型設計的過程；以往將原型設計分為兩種，一種是 lo-fi 的原型製作，利用到各種傳統素材，像 7 .

(24) 是瓦楞紙、各種傳統裝飾媒材、樂高積木等，而另一種是 hi-fi 的原型製作，通常製作材質已經跟產品相似，還可模擬產品實際上的使用方式。. 2.1.1 設計流程設計思考的流程被分為五個步驟，在這不斷發散與收斂的歷程，透過這五種不同的方法，設計師們可試著找出問題的核心與解決的方法。整個流程是個可不斷動態回溯的循環，只為達到最好的結果。步驟分為以下五點：. 政治大. 立. ‧ 國. 學 ‧. 同理(Empathy)：以人為本的方式，設身處地為人著想，試著站在不同. sit. y. Nat. a.. 圖 5 設計思考流程的五步驟 . io. al. er. 的角度，仔細聆聽對方的故事，甚至透過深入訪談的方式，探查使用者. n. 真正的需求是什麼。 b.. Ch. engchi. i n U. v. 定義問題(Define)：訪問過程中，會發現到很多，不同使用者的需求。透過聚焦在某特定群體的使用者，描述他們的心理狀態，最後定義出他們問題背後真正的需求。. c.. 發想(Ideate)：透過腦力激盪等等的方式，小組間提出各自的意見。在過程中也以不批評別人的意見，而是延續對方的想法繼續發展下去，由此不僅可以消除被否定的失落感，還可增長出更多新的想法，使成員更加投入發想的過程。最離譜、最瘋狂的想法也能夠在發想的初期就被納入參考，而這也往往是找到創新解決方案的基礎。. 8 .

(25) d.. 原型製作(Prototype)：在原型製作的部份，則要利用手邊隨手可得的材料，可能是各種傳統紙料媒材，或是各種生活中的道具。要在短時間內製作出產品。若原型的製作不夠精準，則會透過講解或是表演的方式幫助其他人了解。. e.. 測試(Test)：這是發想接受使用者驗證的步驟，在這階段透過設計師所製作的原型，讓使用者進行測試。過程中，不過度引導使用者操作，或是推銷產品，而是觀察使用者的使用經驗，操作行為，獲得最原始的感受，才會對接下來的設計更有幫助。. 政治大. 立. ‧. ‧ 國. 學. n. er. io. al. sit. y. Nat 圖 6 Lo-fi 原型製作材料 . i n U. v. 從流程當中我們可以了解原型製作的重要性，然而電子電路相關的 hi-fi 原. Ch. engchi. 型，對於設計師來說有製作門檻。在許多問題都嘗試用各種科技來做為解決方式的今日，應該要有更簡單更容易製作 hi-fi 原型的工具，甚至可如同 lo-fi 原型素材一樣簡易使用。. 2.1.2 設計活動觀察及參與本研究藉由 OpenHCI2012 人機介面工作坊與政大數位內容碩士所開設的觸控介面設計課程，在當中擔任隊輔以及助教的角色，從問題的觀察、同理、定義問題、發想、到原型設計與測試，都全程參與，並且特別針對原型製作工具的教 9 .

(26) 學以及原型製作的過程，對學生進行觀察，找出原型製作工具未來可能的發展方向。 OpenHCI2012以推廣HCI學門為主要宗旨，由台大資訊學群、台科大設計學群以及政大數位內容碩士學位學程等學校的籌辦參與，從跨領域的溝通與合作當中，探索人類生活周遭環境、物件或工具的新互動模式，體察日常經驗裡的缺口，培養解決問題的能力，進而思考更和諧互惠的人機互動遠景。參加學員於活動中學習到軟硬體互動技術、快速原形製作以及產品設計流程。在工作坊當中，lo-fi 原型工具以及材料，採用各種傳統紙類、塑膠類的媒材，以及樂高積木等等，而. 治政大 hi-fi的原型製作採較專業的電子電路原型工具Arduino電路開發板。（OpenHCI, 立 ‧ 國. 學. 2012）. 在教導Arduino電子電路開發板時，會發現背景不同的使用者，學習效果上. ‧. 的差異，往往設計背景的學生，會無法在此階段跟上整體的教學進度，而擁有資. sit. y. Nat. 訊背景，或是電子電路設計背景的學生，學習的效率則較好。這是因為Arduino. n. al. er. io. 電子電路的教學當中，會需要程式的知識，與電子電路的實作經驗，而設計背景. i n U. v. 的學生，往往同時缺乏兩樣背景知識，造成學習時的障礙。資訊或是電子電路背. Ch. engchi. 景的學生，他們過去已擁有程式設計或是電子電路，一樣或是兩樣的知識背景及實作經驗，使他們在學習過程當中，較為順利。. 10 .

(27) 治政大在發想以及原型製作的過程中會發現，許多設計提案，可能是一個結合空間立圖 7 左上為作品光音，右上為 Shaking Taipei，下方為 FollowMe . ‧ 國. 學. 的互動概念，或是一個小型的科技互動產品，而這些設計在原型製作的過程當中，往往不必有完備的系統，只要透過簡單的感測與回饋來製作hi-fi原型，傳達設計. ‧. 的理念，便能進行使用者測試。. sit. y. Nat. 以光音作品為例，設計者期望在旋轉水龍頭的同時，會有六段變化的音樂以. n. al. er. io. 及LED的燈光，在製作的過程中只需要用到可變電阻、LED燈、喇叭與簡單邏輯。. i n U. v. 以Shaking Taipei為例，他們期望在吸管插入瓶中時啟動音樂與LED燈光，在. Ch. engchi. 旋轉吸管時，可以調變音樂的速度，這裡需要用到的元件有可變電阻、按鈕、喇叭、以及LED燈光與簡單的邏輯，以FollowMe的作品為例，實作系統需要與台北捷運系統結合，載距裝置上可切換不同顏色LED燈光，這只需使用到開關以及三色LED燈就可製作完成。本研究進一步將近幾年各種設計、互動工作坊參與經驗的觀察，將常使用到的設計情境與物件統合整理，列出了十種物件在下表呈現：. 11 .

(28) 表 1 常見互動情境與物件整理 . 物件. 原型設計可能應用情境. LED 燈. 照明、提示燈、訊號傳達。. 震動馬達. 物體移動、物理撞擊聲響。. 喇叭. 警告音、旋律、操作時的聲音回饋。. 按鈕. 啟動開關、狀態切換。. 傾斜感測. 偵測傾斜，物體是否水平。. 液體偵測. 偵測是否有液體外漏，液體位置偵測。. 光感測. 亮度偵測、亮度變化。. 壓力感測. 重量偵測、移動偵測。. 旋扭開關. 控制器、類比調變。. 聲音感測. 擊掌偵測、聲音觸發開關。. 立. 政治大. ‧ 國. 學. 我們會發現這些原型製作的成果，往往不會需要使用到太複雜的電路概念，. ‧. 但在這樣的設計過程當中，設計背景的學員仍無法完成電路製作；hi-fi原型設計. y. Nat. n. er. io. al. sit. 是否有更容易的製作方式，是很值得思考的地方。. Ch. engchi. i n U. v. 圖 8 觸控介面設計第四組的作品，小偷剋星. 觸控介面設計課程中運用設計思考訓練，來進行專案設計，課程內容主要針對設計的方法，沒有原型設計工具的教學，是由跨領域的學生來自行學習製作。期末發表當中，其中一組的作品「小偷剋星」，設定的情境是當使用者單獨在咖. 12 .

(29) 啡廳用餐時，若需暫時離開座位，又不放心放置於座位的筆電、包包等貴重物品的狀況下使用，利用一個能夠感測重量的裝置，在使用者要離開時將所有物品放置在上方，並且與手機連通，當有人移動物品時，裝置會發出警報聲，同時傳遞訊息給手機，警告使用者。整個系統利用了壓力感側、喇叭以及裝置與智慧型手機連通，在實作上，他們使用Arduino與電腦連通來完成設計原型。在這課程當中，電子電路原型製作的複雜度太高，需與智慧型載具結合，讓設計背景的學生無法參與，必須仰賴其他擁有電子電路背景的組員；然而有沒有更簡單的工具可以讓設計師也可以參與，甚至更簡便的讓觸控載具可以跟電子電路互動。. 治政大從近幾年的科技脈絡當中，也可看出現代科技因觸控裝置的普及，使各種感立 ‧ 國. 學. 知互動元件在設計上出現需與智慧型載具連線的功能。但市面上卻沒有可以輕易整合兩種產品的工具出現。. ‧. 從設計思考的設計流程到設計課程的觀察，可看出原型製作在當中扮演的重. sit. y. Nat. 要性，以及可以深入思考的一些議題，在此整理為以下幾點：. n. al. er. io. a. 非電子電路背景的設計師，如何更簡易的進行hi-fi原型製作。. i n U. v. b. 現今觸控裝置與生活的連結密度高，如何讓原型設計的電子電路感測硬. Ch. engchi. 體與智慧型載具更容易連結。. 而下一節的電子電路創作工具，將會整理許多不同目標族群、不同目的的電子電路創作工具，也對以上問題有所探討，提出各種解決方式。 . 2.2 電子電路創作工具案例電子電路創作工具種類繁多，針對的族群也有所差異，像是非電子電機背景的設計師、互動建築設計師、電子電機科系的學生、自學電子電路的創作者或是. 13 .

(30) 小朋友。目的也有所差異，有針對電子電路的技術磨練的，有些針對原理以及知識的，或是只著重操作到電子電路感知環境的，而產生各種設計方式的差異。部分工具也為不同電子電路創作工具的加強套件，相輔相成。以下介紹分析十五款電子電路創作工具的案例：. 圖 9 Arduino 一系列的電子電路開發版 . 學. ‧ 國. 立. 政治大. ‧. Arduino 是開放原始碼的微控制板加上整合開發環境(Integrated development. sit. y. Nat. environment)共同組成的工具套件，是由義大利的互動設計職業學校「Interaction. io. al. er. Design Institute Ivrea」所率先開發的套件，除了可以控制開關、感測器、LED、. n. 步進馬達或其他輸出裝置等，另一個優勢是 Arduino 也可以獨立運作，快速成為. Ch. engchi. i n U. v. 可跟互動軟體溝通的介面，例如 Adobe Flash, Processing, Max/MSP, PureData, VVVV 等等。(小林茂著，許郁文譯，2012) 製作團隊也採用創用 CC 許可。創用 CC 是為保護開放版權行為而出現的一種許可（license）。在創用 CC 許可下，任何人都被允許生產電路板的複製品，還能重新設計，甚至銷售原設計的複製品，讓對於 Arduino 有開發興趣的專家，也可以繼續發展更多相關的產品。 Arduino 所針對的族群，比較偏向精緻化的設計原型，或是互動展示裝置與科技藝術作品，複雜度雖然比過去電子電路低，但為了創作的自由度，Arduino. 14 .

(31) 仍須使用它所提供的程式語言 Arduino 來撰寫，並且焊接與電路設計的部分也沒有因此減少，使 Arduino 的教學課程比較常出現在大學教育當中。（Banzi , Cuartielles , Igoe , Martino , Mellis , &Zambetti,2005）網站. 立. 政治大圖 10 Phidgets 電路開發套件 . ‧ 國. 學. Phidgets 是一種電子電路的互動模組，從 2001 年就開始發展，Phidgets 將線. ‧. 路插槽模組化，很簡易的將各種電子元件與主版連接，再透過 USB 與電腦軟體. sit. y. Nat. 溝通，使用者可利用官方所提供的 API 進行硬體與軟體互動的開發，可以支援. io. al. er. 相當多不同類型的語言， C/C++, C#, Cocoa, Delphi, Flash AS3, Flex AS3, Java,. n. LabVIEW, MATLAB, Max/MSP 等等，成為 Phidgets 的最大特色。讓許多擁有程. Ch. engchi. i n U. v. 式基礎的使用者，可以很容易的進入到感知現實環境與互動的世界。(Greenberg & Fitchett, 2001). 圖 11 GROVE - Starter Kit . 15 .

(32) Grove 系統是一種外加模組，可與Arduino電子電路開發版結合，整合新手入門所會使用到的感測元件以及輸出元件，並將所有插槽模組化，使創作者可安全且簡單的操作，減少線路焊接，正負電接反的問題，讓使用者專注在程式語言的撰寫上。(Seeed Studio,2010). 立. 政治大. ‧ 國. 學. 圖 12 Microsoft .NET 所開發的 Gadgeteer 開發模組以及.NET Micro Framework 的程式撰寫畫面 . .NET Gadgeteer 是 Microsoft 所開發的開放原碼的工具，他結合了上述 Grove. ‧. 系統的特性，適合用來建構小型電子電路設計原型，擁有基本的按鈕、LED 燈. sit. y. Nat. 模組以外，還有 LCD 觸控螢幕以及攝影機，電路連接全部都已插槽模組化，不. n. al. er. io. 用自己焊接線路，簡化了電路連接上的困難度，程式撰寫使用 C#語言，在編寫. i n U. v. 程式的過程當中 IDE 可以搭配模組面板的圖示操作。(Villar, Scott, Hodges, Hammil, & Miller, 2012). Ch. engchi. 圖 13 LEGO® MINDSTORMS® NXT 2.0 主機與各種感測器 . LEGO Mindstorms NXT，是由樂高教育事業部門與麻省理工學院於 1998 年. 16 .

(33) 共同研發的樂高可程式化機器人套件，針對 10 至 14 歲的兒童所設計。這套積木結合了各種物理、機械原理與電腦程式設計，使組裝出的機器自動完成目標工作。除了一般積木以外，還有動力零件，包括各種長度的傳動軸、齒輪與滑輪，可配合馬達使用，以及電子零件，包含了外形很像 iPod 的樂高 NXT 主機、馬達之外，還有各式各樣的感應器，像碰觸、光線、聲音、超音波、角度、色彩、陀螺儀、磁力、向量、加速度、溫度、甚至是攝影鏡頭。主要的圖形化編輯軟體有 LEGO MINDESTORMS Education NXT Software，圖形化編輯軟體以圖形為主要編輯介面，只要選擇所要的程式圖形並組合起來，NXT 機器人就會依照順序進行程式。. 治政大整體系統的封裝程度很高，即使擁有很強大的功能搭配上圖型化的程式語言，仍立 ‧ 國. 學. 對設計原型製作有所限制，且主機以及各零件的價格與原型設計工具比起，價格相對高了許多。(Lego, 2006). ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 14 roBlocks 基本的建構組成 . roBlocks 利用組合工具(construction kit)的重要性來論述其作品的發展脈絡，當時許多研究證實當小孩子透過 construction kit 的訓練像是 LEGO、Erector Sets、 Lincoln Logs 等等，會提昇他們的創造力。知名的美國建築學家 Frank Lloyd Wright 也讚揚由 Friedrich Froebeln 所設計的幾何物件玩具 Froebels-gifts，對他未來的職業有深遠的影響。許多的研究者也不斷發展類似案例，並且在商業市場上販售，可見其影響力。而隨著科技的快速發展，各種材料成本的降低以及大小的 17 .

(34) 縮減，作者認為 construction kit 應該有更新的發展方向，給年輕的發明家們。而當時現存的 LEGO Mindstorms、VEX Robotics 兩個系統產品，雖然都擁有豐富的功能可以完成小孩的創意，但仍然需要一定程度的數學、電子電路以及程式設計的知識，於是 roBlocks 就期望來支撐這樣的基礎知識。 roBlocks 將目標族群設定為兩類，一種是九歲的小孩子，他們可操作 roBlocks 元件來做基本的工具建構以及拼接互動，另一種是本科系的大學生，因為當時的大學教育缺乏建構操作的課程，透過 roBlocks 可以更引起他們學習基礎控原理的動力，進而透過程式的方式來改寫 roBlocks。整個 construction kits 包含了工具. 治政以及軟體兩部分，硬體部分為多個獨立嵌入磁鐵的大 40mm 的塑膠立體方形，彼此立 ‧ 國. 學. 間可以擁有物理以及電力訊號上的連結，每個物件也包含一個微處理器以及點對點的傳輸，一共有十九的種類的 block，被分為 Sensors, Actuators, Logic, and. ‧. Utility blocks。(Schweikardt & Gross, 2006). sit. y. Nat. 也有研究者同樣以組合工具的觀點出發，去設計跟電子電路相關的設備，研. n. al. er. io. 究名稱為 TOPAOKO，作者認為早在二十年前，行為組合工具(behavior. i n U. v. construction kits)的出現，像是樂高的積木，就已經能夠讓小朋友自己組裝機器，. Ch. engchi. 學習建構的概念，並且開始擴展到他們的世界觀，這些組合工具不只用在工藝類型的教育當中來培養小孩的創造力，也是一個可以支持工程以及設計內含的工具。. 18 .

(35) 圖 15 TOPAOKO 互動組合工具的各種組件以及厚紙板材料 . 所以他針對高中生以及大學新鮮人為目標族群，設計了一個新時代的互動組. 政治大. 合工具「TOPAOKO」，因為在這個年齡層當中，他們是擁有創造力以及足夠的. 立. 經驗去創造一些物品。學生可以在操作 TOPAOKO 的過程中學習電子電路，建. ‧ 國. 學. 構一個機器，甚至創造自己的工具。TOPAOKO 每個組合都是由 3mm 厚度的後. n. al. er. io. sit. y. Nat. 己的組合工具。. ‧. 紙板所拼裝而成，學生可以利用雷射切割機用紙板或是塑膠板為材料，來製造自. Ch. engchi. i n U. v. 圖 16 TOPAOKO 中「力」的內部構造，包含馬達、三色 LED 以及可塑性金屬. TOPAOKO 的每個組合元件都以中文名稱來命名，利用中文字的意涵來帶出每個元件的功能，像是元件「心」是代表可以控制邏輯的微處理器，也是最重要的核心，利用「氣」這個字代表由人體內散發出能量，來代表組合工具的電力來 19 .

(36) 源，電池。利用「力」這個字所隱含的各種外顯行為表徵，來代表輸出元件，像是馬達、三色 LED 燈以及可塑型金屬。最後利用「光」這個意象，代表光的亮暗與距離，利用光敏電阻，以及紅外線距離感測器。而每個組合元件之間的電力以及訊號流通，都是利用貼在厚紙板上的銅薄片來溝通，在配上每個接觸面裡所隱藏的磁鐵，讓組合時更加穩固，且擁有磁力拼接的回饋。最後研究人員將 TOPAOKO 設計出各種結合運作的方式，並且在各高中以及大學進行測試、訪談。 (Wu & Gross, 2010). 立. 政治大. ‧. ‧ 國. 學. 圖 17 INTERACTIVE DESIGN TOOLKIT 的可變電阻元件 . y. Nat. io. sit. 互動建築設計中，利用空間隱藏各種不同的動態控制元件，是實作動態空間. er. 所需的元素，而互動建築設計師為了設計出更符合人真正需求的環境，也必須實. al. n. v i n Ch 地試驗與感受。但互動設計的過程中，去實作動態空間並實作出模擬用的動態實 engchi U 體模型，設計者必須要擁有程式語言以及電子電路的知識背景，使得智慧空間與互動建築的設計充滿了技術門檻，為了解決這樣的需求，INTERACTIVE DESIGN TOOLKIT 因應而生，它的設計由各互動建築案例以及設計師的需求當中去規劃應該擁有的互動元件與特性，將它們單元模組化，並且利用立體耳機線為資料傳輸媒介來簡化過去需要接正電、負電、與訊號線路連接的繁雜過程。在操作過程中，也結合了光的視覺回饋，提高設計師操作的直覺性，並且省略了程式撰寫，利用邏輯物件來替代，降低操作門檻，達到互動設計師的需求，使他們能專注於想法的發展上，而不是技術的實作。(吳冠穎, 2009) 20 .

(37) 圖 18 Littlebits 工具簡易操作. littleBits 是一個開放原碼的電子電路創作工具，目標是由簡單的元件，組成. 政治大. 複雜的電路，像是 LEGOs 一般，讓各年齡層的創作者都可以使用，透過非常少. 立. 的工程知識，組成複雜電路結構。排除焊接、接線、寫程式等過程，每一個元件. ‧ 國. 學. 都擁有一個簡單且唯一的功能，像是 light 、sound、sensor…⋯等等，且利用顏色. ‧. 來區分功能，綠色是輸出、藍色是電源、粉紅是輸入、橘色是連接線，假設藍接. sit. y. Nat. 到綠，就能夠成為一個燈，藍跟綠中間接一個紅色的旋扭，就可以控制燈的亮暗。. io. al. er. 每個元件也如同 roBlocks 般，擁有小型磁鐵讓物件間互相緊扣，使電子元件組. v. n. 裝時產生瞬間回饋，當正負極接反時，也會有互斥的回饋。體積小、簡單、直覺. Ch. engchi. i n U. 就是他們的最大特色，但相對也不能有太複雜的邏輯變化。(Bdeir & Rothman, 2012). 圖 19 Atoms 透過藍牙模組與 iphone 溝通的示意圖 . 21 .

(38) Atoms 的發展初衷與 littlebits 類似，提供能讓小孩子自由創作的電子電路工具，無程式設計、電路設計、電路焊接的操作，結合如同 INTERACTIVE DESIGN TOOLKIT 模組間的傳輸方式，使用立體耳機線。獨特之出處是，他們將各個電子互動玩具都結合了能與樂高積木組合的基底中，並且提供 iOS device 透過 Bluetooth 4.0 的方式與一個藍牙模組結合，因此可以做到像是控制無線遙控車的互動。也將現在廣泛用於行動載具的 accelerometer 模組化於元件當中，提供創作者更多的創作可能性。操作上的回饋也是設計的重點，每當訊號傳輸時，就會有燈號閃爍的提示，讓創作者直覺了解，Atoms 是否組裝成功。. 治政大創辦人 Michael Rosenblatt 也分享一個故事，來表達他的創作初衷。一位工立 ‧ 國. 學. 程學教授，多年來一直想讓她女兒對電子學產生興趣，但都沒有效果，直到女兒在接觸到 Atoms 之後出現了變化，她表示，現在她女兒甚至開始問她有關加速. ‧. 度計設計的細節，這是 Atoms 對於教育以及創造力的貢獻。也是捨去程式設計. n. al. er. io. sit. y. Nat. 的電子電路創作工具，首次與行動載具的結合。(Rosenblatt,2012). Ch. engchi. i n U. v. 圖 20 Cubelets 可藉由智慧型手機的藍牙控制以及監測六個物件模組. Cubelets 是 roBlocks 研究，產品後的成果，他將使用族群專注在小朋友，並且進而強調沒有程式設計、沒有電子線路連接的概念，整體操作行為更加流暢簡易，也因應時代智慧型時代的來臨，加上智慧手機可透過藍牙操控以及監測感測. 22 .

(39) 元件數值的方式。（Cubelets, 2012）. 圖 21 利用 PICL 學習偵測到不同光敏電阻數值時，會輸出不同的電壓 . PICL 是 Portable In-Circuit Learner 的簡稱，PICL 為電子電路的原型製作提. 治政大供一個可獨立運作、低成本、programming-by-demonstration、機器學習的工具。立 ‧ 國. 學. 作者經由許多 prototyping 以及 Design 的模組工具案例以及近年不斷增加的機器. 學習工具的激發，期望整合兩領域，讓機器學習的能力具體化在單獨的學習機器. ‧. 上，可以與電子電路元件以及各種電子電路模組結合。在操作上，設計師或是發. sit. y. Nat. 明家裝上不同的感測 sensors，像是光敏元件、熱敏元件，教導學習硬體在輸入. n. al. er. io. 感測值為何時，要輸出多少的電壓如何，輸出的電子電路元件可以是喇叭、LED. i n U. v. 等等，操作過程中不需要電腦或是任何的程式設計來實作。他提供兩種模式，一. Ch. engchi. 種是提供輸出 0V 或是 5V 的二分法，另一種是依照輸入的範圍，對比為輸出的電壓在 0V 到 5V 之間。PICL 的簡易設計也讓學習 PICL 的操作，只需要少至一個範例即可被擴展到控制各種不同的輸入輸出裝置，並且也能與 littlebits 等電子電路模組工具結合。(Fourney & Terry, 2012). 23 .

(40) 圖 22 The VoodooIO gaming kit 的硬體組成 VoodooPins 與平台 . The VoodooIO gaming kit 是針對利用控制器操作電腦的族群，是個可即時調. 政治大. 配各種按鈕位置與功能的控制器產品，概念是將各個稱之為 VoodooPins 的按鈕、. 立. 可變電阻模組化，最後插在專屬的平台上，成為可以自由調配的遊戲控制器。因. ‧ 國. 學. 現行遊戲控制器都無法完美滿足不同遊戲以及不同使用者的需求，而使用者必須. ‧. 去花更多的時間適應，甚至讓操作上的效率減低。為補足現行遊戲控制器的缺陷，. sit. y. Nat. The VoodooIO gaming kit 讓使用者自己動態的重新設定，定義自己的遊戲操作空. io. al. er. 間，最後達到滿足不同遊戲以及不同使用者需求操作方式。這是將不同電子電路. n. 模組化後，可快速塑造互動原型的案例之一。(Villar, Gilleade, Ramdunyellis, & Gellersen, 2007). Ch. engchi. i n U. v. Snap Circuts 是一款已商品化專門針對小朋友的電子電路教具，以一個如同麵包版的塑膠殼為基底，將每個電子電路元件放大且簡單化的設計，將元件透過壓扣的方式與基底結合形成電路連通，使操作上更容易。雖然組裝簡單，但也保留傳統電子電路的符號以及單位的意象在其中，讓小朋友提早對這些電子電路符號有所認知。模組中包含風扇、廣播、喇叭、燈泡、電池、7 段顯示器等等，也有較基本的元件單元，例如電阻、電容、以及二極體，不只單純將操作最簡化，基礎的電子電路元件知識也有保留，讓小朋友可以透過教具模擬各種電子電路的. 24 .

(41) 運作過程。Snap Circuts 屢次獲得 ASTRA 最佳玩具大獎，已針對不同的實驗發展出各種版本以及補充包。(Elenco® Electronics, 2011). 政治大. 圖 23 Snap Circuts 的組合套件，包含風扇、電池、開關、電壓測量等等元件 . 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. i n U. v. 圖 24 利用 LightUp 組成的基礎 RC 電路以及二極體與電容的元件 . Ch. engchi. 在 littlebits 與 Snap Circuit 發展之後，史丹佛大學的研究生發展出一套新概念的電子電路工具，稱為 LightUp。他們期望為想要自主學習電子電路的初學者，或是對於快速原型製作有需求的進階使用者，提供一套學習門檻低，但是擁有能更深入了解電子電路彈性的工具。他的特色在於，結合 Snap Circuit 在一個平台上實作的操作概念，擁有一個塑膠基版，上面有格狀分布的金屬節點，可將各個電子元件，放在上方形成電路連通，連通的方式也可透過電子元件的堆疊形成並聯電路，透過連續串接形成串聯電路，並且搭配 littlebits 所用，磁力連接的方法，讓整體的操作更容易。. 25 .

(42) 圖 25 電阻並聯與串聯在立體面呈現. 與 InteractiveDesign Tookit、littlebits、atoms 等等研究不同的是，LightUp 不是將每個電子電路元件封裝到模組內，讓使用者只了解電子電路他所能產生的效. 政治大實呈現每個電子元件的腳位連接，讓使用者對於電子電路擁有更透徹的了解，也立. 果以及感知的回饋，而是每個電子電路元件，各成為單元的在整個工具當中，忠. ‧ 國. 學. 造就他可以組合出更複雜的電路組合，並且與 Arduino 等等電子電路開發版結合，作者稱 LightUp 是能夠從初學者，一路伴隨使用者成長，到原型設計師的電子電. ‧. 路工具。(Asgar, Chan, Liu, & Blikstein, 2011). n. er. io. sit. y. Nat. al. Ch. engchi. 26 . i n U. v.

(43) 表 2-1 電子電路創作工具依使用族群分析. 兒童. 主要使用族群名稱建議使用. NXT. littleBits. Atoms. Cubelets. Snap Circuts. 10~14. 8 歲以上的兒兒童、有電子兒童。. 8 歲以上的. 歲兒童. 童、有電子電電路需求的創. 兒童. 族群. 路需求的創作作者。者。機器人讓無經驗的創讓無經驗的創讓無經驗電子電路學設計. 作者都可以使作者都可以使的創作者習。. 目標. 用電子電路創用電子電路創都可以使. 政作。治大用電子電路創作。. 作。. 立. 需求是否需要電路設. 否. 否. 否. 否. 否. 否. 否. y. al. n. 學習時間. io. 是. 程式撰寫. 一週價. 是. Ch. 一天. 一天. engchi. sit. 是否需要. 是. 否. 無. 一天. 一週. er. 計、焊接. 否. 否. Nat. 否. ‧. 基本知識. 學. ‧ 國. 電子電路. i n U. v. 格利用各種顏色可與樂高結可利用價錢高、體. 高、體積代表不同特性合、以及利用 Android 大。. 的元件。. 籃牙結合 IOS 系統的載系統做無線操具，籃牙. 其他特性. 控。. 控制輸出元件以及讀取感測元件的值。. 27 . 積大。.

(44) 表 2-2 電子電路創作工具依使用族群分析. 主要使用. 高中以上的電子電路創作者. 族群 The 名稱. LightUp. Arduino. Phidgets. Grove. VoodooIO gaming kit. 建議使用族群. 有電子電路有電子電路有電子電路有電子電路期望自行設學習需求的需求的創作需求的創作需求的創作計控制器的創作者. 者。. 者。. 者。. 使用者. 電子電路學較精緻的原原型設計、互減. 習、原型製型設計、互動設計、科技 Arduino 操板作時的電路治政大連接負擔技藝術。立. 作。. 動設計、科藝術。. 是. 是. 否. 否. 是. 是. Nat. 計、焊接是否需要. io. 無. 程式撰寫. 一週. 注重基本原. 無. 無. 是. a l 二個月 v 一天 i 二個月 n Ch 使用族群廣支還須搭配 e n官方 g c hAPIi U. n. 學習時間. 是. y. 電路設. 是. ‧ 國. 是否需要. 是. ‧. 需求. 是. 學. 基本知識. sit. 電子電路. er. 目標. 少自訂操控面. 無一週專注在遙控. 理，可與其大，已發展援多種程式 Arduino 才器原型設計其他特性. 他電子電路多種適合不語言。創作工具結同情境的開合。. 發版. 28 . 能使用。. 的案例。.

(45) 表 2-3 電子電路創作工具依使用族群分析. 主要使用. 高中以上的電子電路創作者. 族群名稱. INTERACTIVE. .NET. roBlocks. Gadgeteer. TOPAOKO. DESIGN. PICL. TOOLKIT. 原型設計兒童、電高中生、大互動建築設計有電子電路建議使用師等. 子電機相學生. 族群. 師. 需求的創作. 關科系的. 者. 大學生設計原型擴展使用讓無經驗減少設計師的透過機器學. 治政大科技、工都可以使時的負擔。立程、數學用電子電. 製作. 者科學、的創作者互動設計實作習增加原型. 目標. ‧ 國否. 程式撰寫學習時間. 否. 否. 可有可無. 否. 否. 否. 否. 否. 一天. 一天. y. al. n. 計、焊接是否需要. 否. sit. io. 電路設. 否. er. 是否需要. 是. Nat. 需求. 識. ‧. 基本知識. 邏輯性。. 學. 電子電路. 的相關知路創作。. 設計工具的. Ch. 是. 可有可無. e 可有可無 ngchi. 二個月. 一個月. 一個月. i n U. v. 第一款利結合中文利用立體音源將機器學習用磁力連字的意線，代替正電、的概念結合其他特性. 結的電子象，成為各負電、以及訊號原型設計工電路創作組合元件。線。工具. 29 . 具。.

(46) 電子電路創作工具，需要電路設計、電路焊接及程式設計三個部分，但因不同的使用目標及族群，會有不一樣的設計方式。Arduino、roBlocks、TOPAOKO、 LightUp 對有經驗者提供有彈性的電路設計，經線路連接、電路焊接來完成作品。而 Arduinio 的加強模組 Grove 系統，幫助創作者專注於程式設計上，減輕電路設計上的負擔，roBlocks 與 TOPAOKO 在面對無經驗的使用者時，也提供直接拼接連通的方式完成互動，不致於讓創作者在使用初期就信心受挫。不用專注學習電子電路原理的工具如 Phidgets、.NET Gadgeteer 與 Mindstorms NXT，看出讓. 政治大. 使用者不必思考電路設計的先後順序，直接透過插槽式的線路連接，完成硬體的. 立. 設置，可以降低使用者在技術學習上的負擔。而我們的研究目標是讓使用者在短. ‧ 國. 學. 時間內學習創作工具，來完成電子電路初步原型製作，電子電路技術細節由模組. ‧. 化取代。. sit. y. Nat. 儘管電路設計在許多案例已被隱藏，模組間彼此的溝通方式，也各有其創意，. io. al. er. 像 roBlocks、TOPAOKO、Cubelets 利用磁力的方式輔助連接，接反則會有同極. v. n. 排斥來提醒使用者，但因沒有延伸模組物件連接的設計，使每個物件需在緊密相. Ch. engchi. i n U. 連下才可以運作，會有距離上的限制。Snap Circuits 與 LightUp 的系統設計，必須將電路元件放置在同一個創作平台上才可運行，而使創作被侷限於此平面上，也對原型設計空間有所限制。Interactive Design Tookit 與 Atoms 連接，代替傳統線材，無正、負電接錯問題。littleBits 則透過磁力，加上延長線路的設計，讓原型製作的彈性加大。今日因智慧型載具的普及化，Atoms、Cubelets 都已加入可透過智慧型載具的籃牙傳輸，以無線控制模組物件讀取感測元件的數值，讓創作以及控制上更有彈性。我們相信，將電子電路互動模組加上智慧型載具無線連結，減少空間上的局限，再結合高效運算特性，將產生更多精彩的創作。. 30 .

(47) 在程式撰寫部分，Arduino、Phidgets、以及 NET Gadgeteer，使用程式語言的撰寫，讓創作可以擁有很多的細部邏輯設計，然而卻需要擁有程式設計的基礎，或是經過幾週或是幾個月的訓練才可上手，對於設計師來講是個沈重的負擔。 littleBits、Atoms、以及 Cubelets 嘗試以排除程式設計的方式來簡化操作難度，讓較低年齡層的使用者也可以透過電子電路創作，完成小型的創意作品，但邏輯設計表現有限，像是 littleBits 在整個系統中，只提供 and、or 以及反向的的邏輯物件使用，也因此讓 PICL 研究的創意產生，使用機器學習的方式讓現有的電子電路創作工具加上依照輸入數值的不同而影響數位或是類比的輸出電壓，但在有. 治政大PICL 的控制範圍，創作仍多個輸入物件、或是更複雜的邏輯狀況下，就會超出立 ‧ 國. 學. 然有限。Mindstorms NXT 雖保留程式設計，但採用圖型化的邏輯撰寫，使 10~14 歲的兒童，可以在學習過後，完成自己的控制機器人，圖型化程式不只降低程式. ‧. 學習的門檻，與不提供程式撰寫的創作工具相較起來，所能做的邏輯變化相當豐. sit. y. Nat. 富。而我們認為在電子電路原型製作的過程中，不僅要讓程式的負擔降低，也要. n. al. er. io. 保持邏輯編輯的特性，才不致於讓創作受限。所以我們在智慧型載具上，將嘗試. i n U. v. 採用圖型化編輯器操控電子電路物件，不僅可以排除程式語言的學習門檻，在增. Ch. engchi. 加創作自由度上也有很大的幫助。. 31 .

(48) 2.3 圖型化程式語言環境案例圖型化程式語言的工具，常針對科學家、設計師、藝術家、音樂家、兒童等族群，被運用在科學運算、機器人控制、影像處理、聲音處理、甚至是 3D 遊戲與手機程式設計等領域。不需閱讀厚重的程式語言書籍，不用寫任何一行程式的前提下完成工作，減少程式知識上的負擔。以下介紹 10 款圖型化編寫工具的案例：. 立. 政治大. ‧. ‧ 國. 學 y. Nat. sit. 圖 26 右側為 labView 的圖型化程式編寫空間，左側為使用者介面. n. al. er. io. LabVIEW 為 Laboratory Virtual Instrument Engineering Workbench 的簡稱，. i n U. v. 是由美國國家儀器公司所開發的圖形化程式編譯平台，軟體最初於 1986 年在蘋. Ch. engchi. 果電腦上發表。LabVIEW 早期是為了儀器自動控制所設計，至今轉變成為一種逐漸成熟的高階程式語言。 20多年來，LabVIEW 已超過數百萬名的工程師與科學家使用，它可用來設計圖形化程式，整合各種硬體測量設備，有助於快速設計開發，完整佈署量測與控制應用。LabVIEW 主要有二種特點，它所使用的G程式語言是運用圖型式程式模組相連結，可被直接編譯為 Machine code，讓電腦處理器執行之。G語言雖然是以圖形化的方式替代文字，但仍具備大多數傳統程式語言的程式設計概念。. 32 .

(49) 舉例來說，G包含所有標準結構，有資料類型、迴圈、事件處理、變數、遞迴，與物件導向程式設計等。另一特點，即是可根據資料流的規則而執行，不同於 C 與 C++ 的大多數文字架構程式設計語言，必須依序執行指令。如 G 的資料流程式語言，均可於所有程式背景之後將資料推升為主要概念。程式節點之間的資料流，將決定執行作業的順序，而非文字行列的順序所決定。. 立. 政治大. ‧ 國. 學圖 27 G 程式語言簡單將兩輸入數值相加. ‧. 而在校園中，大多數的程式設計語言，學生均需耗時了解特定語法，再對應. y. Nat. 直覺觀察並處理圖像，而不需耗時建置大量程式碼。. al. er. io. sit. 該語言的架構，才能解決問題。G 圖型化程式設計有更好的處理方法，以人的. n. v i n Ch 另外，LabVIEW也率先引入特別的虛擬儀表概念，使用者可透過虛擬人機 engchi U. 介面直接控制自行開發之儀器，LabVIEW也包含眾多函式庫，像是訊號擷取、訊號分析、機器視覺、數值運算、邏輯運算、聲音震動分析、資料儲存...等。目前也被廣泛的應用於工業自動化之領域上，受到系統開發及研究人員的喜愛。 (Labview,1986). 33 .