Xketch-線稿式原型設計工具於行動應用開發之研究 - 政大學術集成

全文

(1) . 國立政治大學數位內容碩士學位學程 Master’s Program in Digital Content and Technologies National Chengchi University. 碩士論文 Master’s Thesis. 政治大 Xketch-線稿式原型設計工具於行動應用開發之研究立 ‧. ‧ 國. 學. Xketch - A Sketch-Based Prototyping Tool for Mobile App Development. n. er. io. sit. y. Nat. al. Ch. n engchi U. iv. 研究生：徐嘉駿指導教授：余能豪博士林玲遠博士. 中華民國一〇四年六月 June 2015.

(2) . 摘要行動應用程式 App 開發時相當注重於使用者體驗。利用原型進行測試以收集使用者回饋，根據回饋改善原型再進行原型測試，此過程稱之為 Iterative Design Process。本研究從前測與訪談中得知設計師偏好使用線稿式的設計手法做出紙面原型，經過數次上述的循環後再轉換成互動式原型；在反覆設計/重構原型與進行使用者測試的過程中，累積了許多的資料需要被記錄與分析，但目前尚未有服務能支援 Iterative Design Process 中各個階段的需求。本研究提出了一套能加快設計流程的線稿式原型設計工具「Xketch」。在原. 政治大. 立型設計階段，設計師可透過繪製筆畫指令的方式生成元件與設定頁面、元件間的. ‧ 國. 學. 互動行為；當原型設計完成後可以直接發佈給受測者。在原型測試階段時，系統. ‧. 會同步記錄受測者的操作過程與 think-aloud 口述資料。最後，將收集到資料透. sit. y. Nat. er. io. 過時間軸介面重現以協助團隊分析與討論。本研究認為 Xketch 能有效幫助行動. al. n. iv. n 應用程式 App 的開發過程，加速 C Iterative h e Design i UProcess 的循環。 ngch. 第一版 Xketch 的開發目的著重於原型設計階段，設計師可利用筆畫指令生成對應的元件與互動行為，並透過 Storyboard 設定與檢視原型的使用流程。受測者認為 Xketch 整體的操作簡易、容易學習，也相當認同使用線稿圖案作為筆畫指令的概念，並認為 Xketch 能有效幫助設計師快速製作出互動式原型。最後，本研究將分析受測者操作記錄並搭配訪談回饋總結 Xketch 的實驗結果與討論，探討未來 Xketch 在原型設計的改善方向。. 關鍵字：原型製作、開發工具、線稿式設計、迭代設計. . I .

(3) . Abstract Iterative Design Process plays a great role for developing mobile applications with great user experience. Designers create prototypes to collect user feedback and use those feedbacks to improve designs and prototypes for further iterations and testings. From our initial studies, we found out designers tend to use sketch based paper prototypes as their initial prototyping method. Designers go through rounds of paper prototyping, testing and iterations, before moving on to create digital interactive prototypes. During this process, there are a lot of information needs to be recorded. 政治. and analyzed for the iteration loop. However, no integrated service yet can 大. 立. ‧ 國. ‧. analyzing results.. 學. streamlined designers’ process of creating prototypes, recording testing sessions, and. y. Nat. er. io. sit. We developed “Xketch”, a sketch-based mobile application development tool for. n. a l designers can use the iterative designs and testings. First, i v sketching interface on Ch. n engchi U. Xketch to rapidly prototype UI modules and interactions. Designers then can distribute the prototypes through Xketch to testers. During testing sessions, Xketch’s testing environment will record user behavior data and think aloud audios. At last, the collected data will be presented on Xketch’s timeline interface for feedback analysis. We envision Xketch to streamline and optimize the iterative design process when designers design mobile applications. The first version of Xketch contains major features for the prototyping phase. Designers can use simple sketching gestures to generate corresponding on-screen UI modules, and configure interactions of those components. Moreover, designers can. . II .

(4) . also create and review interaction flows through storyboard settings. From our testing for Xketch, participants indicate that Xkecth is easy to use and learn. They also found the concept of using sketching gestures to generate on-screen UI module intuitive. Overall, participants think that Xketch can help them create prototype rapidly and intuitively. To improve for Xketch, we recorded participants’ usage behavior and accompanied with user interviews to give us a holistic view on the future iterative direction for Xketch.. 立. 政治大. ‧. ‧ 國. 學. Keywords: Prototyping, Toolkits, Sketch-Based, Iterative design process. n. er. io. sit. y. Nat al. . Ch. n engchi U. III . iv.

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

(6) . 致謝本論文能順利完成，要感謝我的主指導教授余能豪老師在研究方向給我的諸多指導，鼓勵我勇於嘗試新的想法與技術。感謝副指導教授林玲遠老師一直很支持我的研究，細心叮嚀我在論文寫作上的注意事項。感謝口試委員陳宜秀老師撥空回台參與我的論文口試，以業界與使用者經驗設計的角度提供很多寶貴的意見。感謝大源、松昇、宜璇、Obie 以及許多實驗室的同學們在研究的過程中陪我討論，並給了我許多的建議與幫助。感謝數位內容的各位同學們，讓我在工作後返回校園唸書時仍有許多精彩的體驗與回憶。. 治. 政引領我進入了感謝余能豪老師從 OpenHCI workshop HCI 的世界，讓我從大. 立. ‧ 國. 學. iReach 專案中體會到做研究的喜悅與辛苦，以及研究時必須思考到的問題與解決. ‧. 方法，還帶我參加在德國舉辦的 MobileHCI 研討會，一起享受獲獎的榮譽。除. y. Nat. er. io. sit. 了研究以外，余老師常鼓勵我參加競賽與工作坊，學習如何清楚表達設計概念的. n. al 核心與報告的技巧，而競賽往往都能獲得佳績。感謝推薦我到 StorySense 實習的 iv Ch. n engchi U. 松昇與沛剛，才讓我磨練出具備實作 Xketch 的能力，也很感謝每一位 StorySensor 對我的幫助與關懷。最後要特別感謝我的家人支持我在政大完成研究所的學位，體諒與包容我因為課業忙碌所造成的負面情緒，鼓勵我以自己的步調前進，因為有你們做我的後盾，我才能全心全力的投入學業之中。. 徐嘉駿謹誌於 104 年六月. . V .

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

(8) . 目錄摘要 ............................................................................................................................... I Abstract ....................................................................................................................... II 致謝 .............................................................................................................................. V 目錄 ........................................................................................................................... VII 圖目錄 ........................................................................................................................IX 表目錄 ........................................................................................................................XI 第 1 章緒論 ............................................................................................................... 1 1.1. 1.2. 研究背景與動機 ............................................................................................ 1 1.1.1. Iterative Design Process（迭代設計） ....................................... 1. 1.1.2. 初步研究 ......................................................................................... 7 治. 政. 大. 研究目的 ....................................................................................................... 10 立. ‧ 國. 線稿式設計 .................................................................................................. 12. ‧. 紙面原型 ....................................................................................... 12. 2.1.2. 線稿式設計工具 .......................................................................... 13. 2.1.3. 小結 ............................................................................................... 18 a. io. sit. y. Nat. 2.1.1. n. er. 2.1. 學. 第 2 章文獻及案例探討 ....................................................................................... 12. iv. l. n 2.2 App 原型製作的案例探討C.......................................................................... 18 he i U ngch. 2.2.1. 影像連結式的原型製作工具案例 ........................................... 19. 2.2.2. 元件產生器的原型製作工具案例 ........................................... 22. 2.2.3. 小結 ............................................................................................... 26. 第 3 章系統設計 .................................................................................................... 27 3.1. 3.2. . 概念說明 ....................................................................................................... 27 3.1.1. 原型介面設計 .............................................................................. 28. 3.1.2. 原型測試階段 .............................................................................. 29. 3.1.3. 資料分析階段 .............................................................................. 30. 系統原型設計 .............................................................................................. 31 3.2.1. $P Point-Cloud Recognizer .......................................................... 32. 3.2.2. 筆畫指令 ....................................................................................... 32. 3.2.3. 介面與互動設計 .......................................................................... 36. 3.2.4. 小結 ............................................................................................... 41 VII .

(9) . 第 4 章系統評估 .................................................................................................... 42 4.1. 實驗流程 ....................................................................................................... 42. 4.2. 受測者資訊 .................................................................................................. 44. 4.3. 實驗結果與討論 .......................................................................................... 45. 4.4. 4.3.1. 筆畫指令 ....................................................................................... 45. 4.3.2. 介面與互動設計的觀察結果 .................................................... 50. 小結 ............................................................................................................... 55. 第 5 章結論 ............................................................................................................. 58 5.1. 未來展望 ....................................................................................................... 58. 5.2. 研究貢獻 ....................................................................................................... 62. 參考文獻 .................................................................................................................... 65 附錄一實驗流程說明 ............................................................................................ 68 附錄二問卷與訪談 ................................................................................................ 71 政治. 大. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. . Ch. n engchi U. VIII . iv.

(10) . 圖目錄圖 1 Iterative Design Process 的循環示意圖 ............................................................................ 2 圖 2 原型的流程 ................................................................................................................................ 3 圖 3 Lo-fi 原型的示意圖與測試操作情境 ............................................................................... 3 圖 4 紙面原型測試的人員配置圖 ............................................................................................... 5 圖 5 行走時用 App 的情境 ........................................................................................................... 6 圖 6 躺著時用 App 的情境 ........................................................................................................... 6 圖 7 偶遇受測者的情境 ................................................................................................................. 6 圖 8 鏡頭造成壓力的情境 ............................................................................................................ 6 圖 9 線稿草圖 ..................................................................................................................................... 8 圖 10 紙面原型 .................................................................................................................................. 8 圖 11 互動式原型製作工具 .......................................................................................................... 8 圖 12 紙面原型數位化 .................................................................................................................... 8 治. 政. 大. 圖 13 觀察設計師的草圖設計 .立 .................................................................................................... 9 . ‧ 國. 學. 圖 14 草圖上的文字註解 ............................................................................................................. 10 圖 15 SILK 從線稿模式到執行模式 ........................................................................................ 14 . ‧. 圖 16 SILK 圖樣辨識機制的流程 ............................................................................................. 15 . Nat. sit. y. 圖 17 SILK 的四個操作視窗（Storyboard、Sketch、Controls、Finished） .......... 16 . er. io. 圖 18 系統辨識錯誤的案例 ........................................................................................................ 17 . n. a. v. l C 圖 19 未辨識的筆畫圖樣轉換成元件，與行為定義說明圖 ......................................... 17 ni hengchi U. 圖 20 POP 透過掃描草稿連結各個頁面 ................................................................................ 19 圖 21 FileSquare 透過網站服務設定專案並進行模擬 ...................................................... 20 圖 22 Concept.ly 的 App 編輯與使用者回饋畫面 .............................................................. 21 圖 23 影像連結式工具的使用流程 ......................................................................................... 21 圖 24 Blueprint 提供 iOS 元件樣式，並透過 Storyboard 連接各個頁面 ................ 23 圖 25 Mockups.me 以 Wireframe 方式呈現，可透過 Stroke Gesture 產生元件 ... 24 圖 26 EZoApp 是以 HTML5 為基礎的線上原型製作網站 ............................................ 25 圖 27 元件產生器工具的使用流程 ......................................................................................... 25 圖 28 Sketching Interface 示意圖 ............................................................................................... 29 圖 29 切換元件樣式的示意圖 ................................................................................................... 30 圖 30 選擇原型版本並重現某位受測者的操作資訊進行觀察與討論 ...................... 31 圖 31 記錄區的功能說明圖 ........................................................................................................ 31 圖 32 不同繪製圖樣的方式轉換為 Point Cloud ................................................................. 32 . . IX .

(11) . 圖 33 編輯區－可切換元件列表 .............................................................................................. 37 圖 34 編輯區－元件屬性列表 ................................................................................................... 38 圖 35 編輯區－行為設定列表 ................................................................................................... 38 圖 36 透過 Pinch 手勢切換至 Storyboard 模式 .................................................................. 39 圖 37 頁面浮起代表可移動該頁面 .......................................................................................... 40 圖 38 畫線連結頁面與選擇觸發元件與動畫 ...................................................................... 40 圖 39 取消頁面連結的示意圖 ................................................................................................... 40 圖 40 實驗流程圖 ........................................................................................................................... 42 圖 41 受測者的教學與練習 ........................................................................................................ 43 圖 42 模仿任務的示意圖 ............................................................................................................. 43 圖 43 建立原型使用流程的示意圖 ......................................................................................... 44 圖 44 筆畫指令的易學程度量表 .............................................................................................. 46 圖 45 受測者繪製筆畫指令的圖樣 ......................................................................................... 47 圖 46 筆畫指令的辨識率量表 ................................................................................................... 48 治. 政. 大圖 47 辨識失敗的可能性 .............................................................................................................. 48 . 立. ‧ 國. 學. 圖 48 一致的 Navigation Bar 樣式 ........................................................................................... 51 圖 49 一致的 Tab Bar 連結目標 ............................................................................................... 51 . ‧. 圖 50 展開子元件編輯列表 ........................................................................................................ 52 . sit. y. Nat. 圖 51 動畫（彈跳視窗與讀取資料）效果的示意圖 ....................................................... 54 . er. io. 圖 52 Xketch 的整體性評估量表 ............................................................................................... 56 . a. n. v l C......................................................................................... 58 圖 53 圖片元件的連續性修改行為 ni i U. he. ngch 圖 54 Adobe Comp 可在元件周圍快速修改特定屬性 ..................................................... 59 圖 55 透過元件列表進行元件多選 ......................................................................................... 60 圖 56 母片架構與自動串接頁面連結的示意圖 ................................................................. 61 圖 57 以 Facebook 登入按鈕觸發後續流程的示意圖 ..................................................... 62 . . X .

(12) . 表目錄表 1 原型設計的類型比較表 ....................................................................................................... 4 表 2 元件與圖樣對照表 ................................................................................................................. 9 表 3 影像連結式的原型製作工具之功能比較 ................................................................... 22 表 4 元件產生器的原型製作工具分析 .................................................................................. 25 表 5 線條（Line）的生成元件列表 ........................................................................................ 33 表 6 矩形（Rectangle）的生成元件列表 ............................................................................. 34 表 7 專家模式的筆畫指令列表 ................................................................................................. 35 表 8 進階元件的筆畫指令列表 ................................................................................................. 36 表 9 元件支援的操作行為 .......................................................................................................... 39 表 10 受測者資訊 ........................................................................................................................... 45 . 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. . Ch. n engchi U. XI . iv.

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

(14) . 第1章. 緒論. 1.1 研究背景與動機本研究主要關注的使用族群為行動應用程式 App 設計師（以下簡稱設計師），其在行動應用程式 App 的開發流程中扮演著相當重要的角色。設計師會利用紙筆繪製草稿將概念與使用流程具體化，團隊可以此為基礎進行討論與發想，並製作大量的原型（Prototype）供設計流程中不同階段的使用者測試；原型是一個將設計概念具體化的雛形產品，根據每一次測試後的使用者回饋調整設計以符合目標族群使用者的期望，及早發現可能潛在的問題（例如：網路連線的狀態、資料政治. 大立庫版本衝突⋯⋯等問題），有效降低 App 發生錯誤的風險。. ‧ 國. 學. 對於不同背景的設計師與工程師而言，原型就是將他們的共通語言。設計師. ‧. sit. y. Nat. 設計出 App 的視覺效果與互動方式後，必須跟工程師一同評估技術的可行性，. al. er. io. 甚至經驗較少的設計師也可能需要工程師提醒 App 的設計原則，透過反覆的溝. n. v ni U engchi 通與磨合，才能將 App 真正的視覺與互動設計定案，再由工程師實作出能實際 Ch. 操作的互動式原型，但這樣溝通磨合的過程往往需要耗費相當的時間。. 1.1.1. Iterative Design Process（迭代設計）. 人機介面（Human Computer Interface）是一門探討系統與使用者之間互動關係的學問，而 Iterative Design 經常用於人機介面的可用性評估。主要由原型設計（Prototyping）、測試（Testing）與資料分析（Analyzing）三階段所構成。由於在 App 設計的初期無法確認真正的使用族群與需求，透過 Iterative Design 可以逐步確認目標的使用族群與需求。舉例來說，在 App 的開發初期，設計師會利. . 1 .

(15) . 用紙筆繪製草稿並製作成紙面原型（Paper Prototype），再拿給目標族群的使用者測試與觀察，測試完畢之後會根據使用者回饋修正原型，以製作下一版本的原型再進行測試，這樣反覆進行的循環稱為 Iterative Design Process（圖 1）。透過這樣的循環可使 App 的設計更貼近使用者的需求，並創造較好的使用者體驗。 Gould 的研究中也表示 Iterative Design 對於使用者介面設計是相當重要的，透過建立原型後進行測試，並評估回饋要如何改善原型，然後重複幾次這個過程以驗證不同的想法(Gould & Lewis, 1985)。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 1 Iterative Design Process 的循環示意圖（本研究整理）. 原型設計階段（Prototyping Stage）在開始設計 App 前會先蒐集相關資訊與思考應具備的功能，再製作不同版本的原型以驗證設計的構想，讓設計架構愈來愈清楚（圖 2）。原型可以是用書面或軟體所繪製而成的故事板（Storyboard），也是一個讓使用者可以想像互動情境的雛形產品，並從真實環境中取得某些洞見（Insight）以發掘更多的需求；原型可以測試設計構想的技術可行性與確認一些模糊的需求，進行反覆的測試與以評估設計的方向是否與發展中的系統相符，而這些目的都可能會影響到原型製. . 2 .

(16) . 作的方式，並可分為低擬真（Low-fidelity, Lo-fi）與高擬真（High-fidelity, Hi-fi）兩個類型。. 圖 2 原型的流程（本研究整理）. Lo-fi 原型的特點是容易將一些高階設計理念快速轉換成有形且可檢驗的雛政治. 大. 立. 形產品(Egger, 2000)。Snyder 的研究中指出最常見的 Lo-fi 原型即是紙面原型：. ‧ 國. 學. 在使用者測試時透過草圖介面模擬真實操作行為；並由一個人擔任電腦的角色，. ‧. sit. y. Nat. 負責控制草圖變換的時機與樣式，但並不會向使用者解釋介面是如何運作的. n. al. er. io. (Carolyn Snyder, 2003)。Lo-fi 原型的目的在於快速驗證不同的設計概念與使用流程，但缺乏了真實的互動體驗。. Ch. n engchi U. iv. 圖 3 Lo-fi 原型的示意圖與測試操作情境資料來源：https://flic.kr/p/bBKX5b. . 3 .

(17) . Hi-fi 原型捨棄了製作速度以換得其真實性，並不如 Lo-fi 原型般容易且快速地被製造，而是以呈現最接近產品真實樣貌的原型為目的(Rudd, Stern, & Isensee, 1996)。通常是使用擬真的介面配合上能實際操作的互動功能的原型，舉凡如 Flash、Photoshop、HTML、PowerPoint⋯⋯等都是常見的 Hi-fi 原型製作工具；近年來在行動平台上也有許多的輔助工具（本研究將於第二章的文獻與案例探討中更深入的介紹）。Hi-fi 原型的目的在於測試與驗證使用者對於介面與互動設計的體驗。表 1 原型設計的類型比較表（本研究整理）. 目的. 優點. 缺點. 透過手工的方式實. 1. 低成本且製作快. 1. 介面較為粗糙且. 做與進行驗證：. 治政速大. （紙面原型）. 計概念與使用流程. 2. 修改彈性較佳 3. 測試目標明確. Nat. 透過數位的方式實. y. ‧. ‧ 國. 立快速驗證不同的設. 學. Lo-fi 原型. 體驗不佳. 1. 介面較為細膩且. er. io. sit. 類型. n. 做與驗證： a 互動體驗較完整 iv l C n U 提供完整的介面與h e 2. n g可自行操作 chi （互動式原型）互動體驗 3. 可自動搜集操作 Hi-fi 原型. 資訊. 2. 測試時需要有人扮演電腦角色 3. 需要人工整理資料較繁雜 1. 成本較高且製作較慢 2. 修改較為繁瑣 3. 測試時易受到視覺影響. 從上表可以發現不論是 Lo-fi 或 Hi-fi 的原型都有其存在的必要性，必須根據不同時期的需求與目標選擇適用的原型進行測試與驗證。因為 App 原型需要反覆測試介面與互動體驗，所以在 Hi-fi 原型需求會比較大；但是 Hi-fi 原型在製作與修改上卻較為費時耗工；若可以改善原型轉換的過程或降低開發次數，將能有效降低原型的製作成本與時間。. . 4 .

(18) . 原型測試階段（Testing Stage）. 圖 4 紙面原型測試的人員配置圖資料來源：Rettig, 1994. 治. 政進行紙面原型的測試時，通常需要一檯攝影機負責記錄受測者的操作過程與大. 立. ‧ 國. 學. 口述資料，並由三個人分別扮演主持人、電腦、觀察者的角色確保測試順利，以. ‧. 下將介紹各角色的任務：. Nat. 主持人：負責引導受測者使用原型，並說明原型的概念與功能。. 2.. al 電腦：根據受測者的使用，隨時替換原型呈現的畫面；此角色需要經過 iv. n. er. io. sit. y. 1.. Ch. n engchi U. 事前不斷的練習，以確保受測者不會因為原型的變動而受到影響。 3.. 受測者：根據主持人說明的概念與功能進行操作原型。. 4.. 觀察者：專注觀察並記錄受測者的操作行為與反應。. 上述情境是一個理想的測試環境，但要設計的 App 類型未必適用於這種環境。例如：開發的 App 是在行走時使用的，但行走時較不便於觀察者做記錄與攝影（圖 5）；或者是躺著時很悠閒使用的 App，因為躺著是屬於比較隱私的行為，如果被攝影或被注視著其實很容易影響到受測者的操作（圖 6）；又或者偶遇到符合目標族群的受測者時，該如何一個人扮演主持人與觀察者的角色並完成對應的工作內容可能也是一項困難（圖 7）；攝影機的架設可能會導致受測者無. . 5 .

(19) . 法無法依照自然的方式操控，若排除這些害羞的受測者也可能因此錯失目標族群的重度使用者（圖 8）。因此，本研究認為如何讓受測者能夠在不同的使用情境中測試原型，妥善地記錄使用者的操作行為、聲音與影像，仍有進步的空間。. 圖 5 行走時用 App 的情境. 立. 資料來源：https://flic.kr/p/6doxqn. 圖 6 躺著時用 App 的情境政治資料來源：https://flic.kr/p/6kH8WJ 大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 8 鏡頭造成壓力的情境. 圖 7 偶遇受測者的情境. 資料來源：https://flic.kr/p/bgh3w. 資料來源：https://flic.kr/p/7T4zJ7. 資料分析階段（Analyzing Stage）原型測試完畢後，要如何整合記錄的聲音、影像與觀察者的筆記是一項相當繁瑣的事情。舉例來說，如果要還原受測記錄中某一段的操作行為與聲音時，必須要先找到該位受測者的影像與對照的筆記；若沒有一致的管道彙整這些不同來源的資料時，對於團隊在事後分析與討論可能會造成額外的負擔。此外，設計師未必是負責測試的人員之一，若是這些資料沒有經過有系統地整合與分析，設計. . 6 .

(20) . 師可能會無法瞭解要如何修改下一版本的原型，而花費更多的時間在跟團隊溝通與理解資訊，進而影響到原型開發的速度。因此，本研究認為如何提供有效管理原型版本與受測者操作資訊的工具，讓團隊成員都能夠一同參與整個設計的架構與過程，以降低團隊成員對於設計磨合與溝通的時間，創造更佳的團隊合作體驗是相當重要的。. 1.1.2. 初步研究. 為了瞭解設計師在原型製作時的習慣，本研究邀請了六位有 App 開發經驗的設計師進行了一段訪談與觀察，一位是資歷兩年以上，一位未滿一年，其餘皆. 政治大. 是一年以上未滿兩年。主要是請設計師分享一下自己在製作 App 原型時的開發立. ‧ 國. 學. 流程與經歷、說明在團隊中是如何與人合作以及遇到的問題與常用的工具。本研. ‧. 究從訪談得知設計師在原型設計的流程中，會先以線稿繪製手法將 App 概念具. sit. y. Nat. er. io. 象化於紙面，可讓團隊以此為基礎討論；在確認 App 設計的大方向架構後，會. n. a. iv. l C 將每個頁面獨立剪裁出做成紙面原型以進行測試；當 U n App 的設計概念與流程測 h engchi. 試差不多之後，會轉為注重於使用者介面與互動體驗的設計，並將紙面原型轉為互動式原型，有些設計師會自行使用一些原型製作工具（例如：Axure、POP）做出互動式原型；有些設計師則會利用 Photoshop 或 illustrator 之類的繪圖軟體將紙面原型數位化後，切好圖檔交給工程師製作可以在實機上使用的互動式原型。. . 7 .

(21) . 圖 9 線稿草圖. 圖 10 紙面原型. 資料來源：https://flic.kr/p/raku7p. 資料來源：https://flic.kr/p/bVKhGj. 政治大. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 11 互動式原型製作工具資料來源：http://axurewireframe.com/ 圖 12 紙面原型數位化. 這六位設計師都認為沒必要一開始就製作過於精細與明確介面，因為每一次的團隊討論都可能會重新設計介面，因此比較偏好以草圖方式進行並逐步修正到有共識的版本，再轉化為數位化的形式。其中那位資深的設計師則表示：「基本上一開始都會使用紙筆繪製線稿草圖，並且以此草圖先進行團隊內部測試，直到要對外展示 App 的概念與使用方式，才會做成能在實機運作且有設計過介面的互動式原型；這是因為草圖較適用於團隊內部討論與測試使用，並不適合用於跟. . 8 .

(22) . 客戶進行說明。」。另一位有一年經驗的設計師則表示：「如果可以的話，用 illustrator 畫圖的次數能愈少愈好，比起用紙筆繪製線稿草圖，透過軟體設計與修改真的很費時。」。. 立. 政治大. ‧ 國. 學. 圖 13 觀察設計師的草圖設計（本研究整理）. ‧. 從訪談中發現設計師基本上是較為偏好以繪製線稿的方式進行設計。本研究. Nat. er. io. sit. y. 請這六位設計師於現場繪製了一些草圖（圖 13），根據觀察發現大部份都會使. n. al 用某些圖樣代表元件或樣式。例如：線條跟 XX 代表文字、方塊代表按鈕、三條 iv Ch. n engchi U. 線代表一個文字段落⋯⋯等；若無法透過單一圖樣表達元件或操作行為時，設計師會在旁加上箭頭與文字註解說明。例如：在地圖（Map）上的一個標記代表一個喜愛地點（POI），點下去之後可以編輯這個喜愛地點（操作行為）（圖 14）。表 2 元件與圖樣對照表（本研究整理）. Text. . Button. 9 . Image.

(23) . 學. ‧. 1.2 研究目的. ‧ 國. 圖 14. 政治大草圖上的文字註解（本研究整理）立. sit. y. Nat. er. io. 本研究擬對 Iterative Design Process 各個階段瑣碎或不便的過程，設計一套. n. a. iv. l C 在 iPad 上開發 iPhone App 原型的設計工具「Xketch」，期望將原型設計的過程 Un h engchi. 化繁為簡，輔助團隊記錄使用者測試回饋，統整各個版本的原型與測試紀錄以利團隊後續的討論。本研究針對各階段的研究目的如下： l. 原型設計階段：從初步研究得知設計師習慣從紙面原型開始，並偏好繪製線稿的設計方式。. 故本研究欲彙整設計師對於各式線稿圖樣的認知，以此為基礎設計出簡單易學的筆畫指令，即可生成多數的元件類型；以及如何協助設計師轉換原型的類型以減少開發原型的次數，簡化原型的設計流程。 l. 原型測試階段：本研究欲探討是否能克服測試環境與人員配置的限制，讓受測者可以在較真. . 10 .

(24) . 實的情境下操控 App，且不會受到鏡頭或者觀察者的注視造成的壓力影響，並適用於動態的環境下進行記錄操作過程與 think-aloud 口述資料。 l. 資料分析階段：本研究欲探討如何協助團隊彙整原型的受測者資料（影像、文字、聲音），. 建立完善的原型開發歷程記錄，以利團隊在每一次的討論都能有更佳的效率與合作體驗。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. . Ch. n engchi U. 11 . iv.

(25) . 第2章. 文獻及案例探討. 本研究欲瞭解設計師在紙面原型的線稿式設計，與過去將此設計方式轉移至數位化工具的相關研究，以及分析市面上現有的原型設計工具的優缺點。因此本章將會分為以下兩節進行探討： l. 線稿式設計：探討以線稿圖樣組成的紙面原型所具備的元素與特性，而數位化工具如何將其結合，設計出以線稿圖樣作為生成元件的筆畫指令。. l. App 原型製作的案例探討：本研究將原型製作工具分成「影像連結式」與「元件產生器」兩部分進行探討，並比較其優缺點。. 立. ‧. ‧ 國. 學. 2.1 線稿式設計. 政治大. 線稿是一個相當低門檻的設計手法，可以快速將想法具象化是它最大的優勢，. sit. y. Nat. n. al. er. io. 即便它不是面面俱到的設計手法，但多數的設計師仍偏好在產品設計初期使用它 (Landay & Myers, 1995)。. 2.1.1 . Ch. n engchi U. iv. 紙面原型. 紙面原型可以快速建立雛形產品給使用者測試與驗證設計概念，以較少的時間驗證產品有其市場且能滿足使用者需求。素描線稿（Sketching）草圖可以快速激發與嘗試不同方向的創意發想，以及定義產品的使用流程並幫助團隊成員間的溝通。Goel 則指出草圖的意義模糊性將有利於在設計初期時進行大量的元件調整或轉換(Vinod Goel, 1995)。在紙面上繪製的線稿草圖不易隨著設計的演化進行修改，可能需要頻繁地重新繪製或保留某些功能或樣式再繪製成新的草圖。根據. . 12 .

(26) . Herbsleb 的研究中指出設計師非常依賴在紙面草圖上的註解與設計更動記錄 (Herbsleb & Kuwana, 1993) Goel 將設計分為四個階段：問題結構化、初步設計、改進和細節；即是歸納問題類型後提出具體想法進行設計，並透過較粗糙的元件樣式生成初期的原型，並逐步改善原型的過程。這樣的設計方式是低成本的，而在設計樣式與細節不明確的情況下，在修改上有著很大的彈性；若是直接使用一些具有明確意義的符號作設計，將會明顯地影響修改設計時的彈性。因此，在初期時妥善地使用意義不明確的設計樣式是相當重要的，如果在一開始就有具體的想法並進行設計的話，將會限制設計師探索設計與開發的各種可能性。也就是說，初期透過手繪草稿進. 治. 政行設計在想法上的替換與試驗，後期再用數位化的原型製作工具進行樣式與細節大. 立. ‧ 國. 學. 的設定(Vinod Goel, 1995)。Newman 的研究中則表示設計師將會在某個時刻，將. ‧. 手繪草稿透過如 illustrator 或 photoshop 之類的數位化工具，將其重新創建並轉換. y. Nat. n. (Newman, Lin, Hong, & Landay,a2003)。 l. Ch. er. io. sit. 為數位形式，而轉換之後除了在草稿上的文字註記外，草稿本身就已經失去用途. n engchi U. iv. 在過去的研究中(Coyette, Faulkner, Kolp, Limbourg, & Vanderdonckt, 2004; Walker, Takayama, & Landay, 2002)，也證明了線稿式設計擁有以下的特色：它沒有限於某種的表達方式，設計師可以嘗試各式不同設計的可能性，手繪草稿與數位化工具有著一定的互補性，將手繪草稿組合成紙面原型可以給使用者模擬介面上的樣式或功能。. 2.1.2 . 線稿式設計工具. 本研究從訪談結果與上述的研究中得知，設計師在產品設計初期偏好在紙面上以線稿方式設計原型，繪製特定的圖樣代表元件。本小節將探討過去曾利用線. . 13 .

(27) . 稿圖樣作為生成元件的筆畫指令，其設計規則與使用方式之相關研究。. SILK（Sketching Interfaces Like Krazy）. 圖 15 SILK 從線稿模式到執行模式資料來源：Landay & Myers, 1995. 政治大. Landay 在研究中明確指出設計師偏好使用紙筆素描設計原型，但此方式製立. ‧ 國. 學. 作的原型卻有不易重複修改設計與測試的缺點。為了延續設計師偏好的設計方式，. ‧. 結合數位化工具在元件編輯與可重複使用性較佳的優勢，開發了一款適用於設計. sit. y. Nat. er. io. 初期並運行於 Windows 平台針對視窗應用程式的原型設計工具「SILK」；設計. n. a. iv. l C n 師可透過繪製線稿圖樣的方式生成元件，SILK 會根據圖樣之間的形象或空間判 U h engchi. 定最有可能的元件類型（圖 16）(Landay & Myers, 1995)。Landay 也是首位提出上述之設計規則的研究者。. . 14 .

(28) . 立. 政治大. ‧ 國. 學. 圖 16 SILK 圖樣辨識機制的流程. 資料來源：Landay & Myers, 1995. ‧. 設計師除了利用 SILK 繪製線稿圖樣做介面設計以外，也可透過 Storyboard. sit. y. Nat. er. io. 設定原型的使用流程。SILK 的操作主要由四個視窗（圖 17）構成，：. a. n. l. iv. l C Storyboard：可觀看整個原型的使用流程，在兩頁面間繪製箭頭即可設 Un h engchi. 定換頁的操作行為。 l. Sketch：供設計師進行線稿式設計的視窗。. l. Controls：負責切換線稿元件的狀態（Sketch、Run、Annotate、Decorate），並顯示辨識線稿（Primitive Type）所組成的真實元件類型（Widget Type）。. l. . Finished：透過 Transfrom 將元件的線稿模式轉為真實元件的樣式。. 15 .

(29) . 圖. 政治大 17 SILK 的四個操作視窗（Storyboard、Sketch、Controls、Finished）立. ‧ 國. 學. 資料來源：Landay & Myers, 1995. Controls Window 是 SILK 中最核心的部分，它可以隨時切換選取元件的狀. ‧. sit. y. Nat. 態，Sketch Mode 是線稿設計階段使用的，Run Mode 提供以目前元件的樣式（線. n. al. er. io. 稿或真實）進行測試操作的功能，Annotate Mode 為設計說明時用的註解模式，. n engchi U Decorate Mode 是讓元件可以進行客製化的設定。 Ch. iv. 從研究結果得知，設計師對於 SILK 這個原型設計工具抱持正面的回饋，尤其是 SILK 的筆畫指令是基於象形與空間的關聯所構成，也是延續紙面原型的設計行為模式。此外，可以隨時將元件轉為線稿或真實元件的樣式，以及透過 Storyboard 即可建立頁面連結是方便且有助於設計架構與討論，這些都是設計師所喜好的功能。不過 SILK 仍有些許值得改進的部分。例如：SILK 受限於當時演算法的發展，僅能支援一筆畫的圖樣辨識機制，由於 SILK 並不是畫完線稿即生成元件，而會根據圖樣間與空間的關聯隨時地變動判定生成的元件類型；如圖 18 所示，系統會不知道要生成的元件是 Check-Box 或 TextField。事實上，上述. . 16 .

(30) . 之舉例系統是會判定成 Check-Box，因為 SILK 是以第一個生成的元件類型優先判定，此時若設計師想要的是 TextField，須先選取已生成的 Check-Box，然後按下“New Guess”，才可修正為 TextField 類型。. 圖 18 系統辨識錯誤的案例資料來源：Landay & Myers, 1995. UISKEI（User Interface Sketching and Evaluation Instrument）. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat al. n. v ni U engchi 未辨識的筆畫圖樣轉換成元件，與行為定義說明圖. 圖 19. Ch. 資料來源：Segura, Barbosa, & Simões, 2012. 「UISKEI」是一套以觸控筆操作為主的原型設計工具，透過繪製線稿圖樣以生成元件（圖 19），除了判別線稿圖樣決定元件類型以外，圖樣的尺寸差異也會影響到生成的元件類型，像是小矩形是 Checkbox，大矩形是 Panel，其特別之處在於可以進行第二階段的線稿圖樣編輯，以達到切換元件類型的效果，並可透過邏輯判斷的陳述式自行定義元件的操作行為（Event、Condition、Action , ECA） (Segura et al., 2012)。此研究注重在快速生成元件與建立行為邏輯，僅能使用系統預設的元件樣式。因此，當需要較為客製化的元件樣式時，UISKEI 則稍嫌功能不足；但受測的設計師對於 UISKEI 結合筆與線稿的應用仍抱持正面的評價。. . 17 .

(31) . 2.1.3 . 小結. 在設計初期時，設計師偏好使用紙筆快速地繪製草圖，將設計的概念與流程具體化，再經過數次的討論與修改後才會將其從紙面原型轉化成互動式原型，介面也會從線稿轉化成真實樣式，但是此歷程相當耗時費工。從上述的研究成果得知，當筆畫指令具有一定的設計規則與可聯想性，設計師對於將線稿式設計手法，從紙面轉移至數位化工具有著一定程度的接受度，但是當需要記憶的線稿圖樣與規則太多時，有可能會造成設計師的記憶負擔。舉例來說：SILK 具備四種基礎的線稿圖樣，而圖樣間的搭配將會影響生成元件的類型，當圖樣繪製得愈接近時甚至有可能會出現誤判的狀況，設計師必須記憶圖樣. 政治大. 間的排列組合，以及避開系統可能發生的錯誤，這些都可能影響原型的設計體驗。立. ‧ 國. 學. 而 UISKEI 不考慮圖樣間的關聯性，改成在元件生成後在上方繪製筆畫指令的二. ‧. 次辨識機制，的確能改善誤判的情形，但又需要額外記憶二次辨識所用的圖樣，. sit. y. Nat. er. io. 對於經驗較少的設計師而言，設計的同時要兼顧這些規則可能是不易的。. n. a. iv. l C 本研究欲改善用線稿圖樣生成元件的設計體驗 U n ，當繪製筆畫指令後即生成元 h engchi. 件，並支援多筆畫的圖樣辨識機制，以及參照 iOS 提出的使用者介面設計規範 (“iOS Human Interface Guidelines: Designing for iOS,” 2014)中各式元件生成條件的限制與關聯，預先將元件群組化以供設計師快速切換圖樣對應到的元件類型，即使是經驗較少的設計師也能作出符合設計準則的佈局樣式。. 2.2 App 原型製作的案例探討在現有 App 應用程式開發專用的原型製作工具中，主要可分為影像連結式（Linking Images）與元件產生器（UI Builder）這兩種風格的工具。前者注重於. . 18 .

(32) . 將紙面原型掃描成影像後建立頁面連結，以快速做出互動式原型並改善原先紙面原型的使用體驗；後者提供豐富的元件庫並可從中選取元件加入頁面，可製作較客製化的元件樣式，提供較為一致的介面風格。本節將列出市面上常見的原型製作工具，作為本研究系統設計之參考。. 2.2.1. 影像連結式的原型製作工具案例. POP POP 是一款協助設計師快速將紙面原型轉置到互動式原型的 App。設計師只需透過 POP 建立專案後匯入圖片，再設定圖片之間的連結切換樣式與手勢，即. 政治大. 可快速地建立 Lo-fi 原型讓測試者進行實機模擬或以網址的方式分享給其他人使立. ‧ 國. 學. 用，點擊畫面時會出現操作提示，讓測試者不需要有人在一旁引導也可使用。. ‧. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 20 POP 透過掃描草稿連結各個頁面資料來源：https://popapp.in/. . 19 .

(33) . FileSquare FileSquare 則是一款讓設計師在網站中建立專案與上傳圖片的服務，可以設定頁面轉換時的目的地與動畫，當透過網站設定好專案之後，可以透過線上預覽或手機的 App 直接進行專案功能展示；特別的是，FileSquare 提供了團隊中的協同創作與新增備註的功能，讓團隊進行原型設計時可以保留足夠彈性的討論與修改空間。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 21 FileSquare 透過網站服務設定專案並進行模擬資料來源：https://itunes.apple.com/hk/app/filesq/id578218260. Concept.ly Concept.ly 是 Yodiz 推出的一款原型設計工具，同時提供了網站服務與 App 供設計師進行原型製作。除了具備影像連結的功能外，特別注重於記錄使用回饋的功能，設計者或受測者都可以直接在頁面上選取一個範圍進行回報，並提供了. . 20 .

(34) . 註解、建議、問題、想法四個分類選擇。此外，不同於其他案例的分享功能，它提供了分享整個 App 與分享獨立頁面的兩種選擇，前者可以專注於 App 整體使用流程體驗外，後者可以針對特定的頁面或功能進行測試與改良。. 立. 政治大. ‧. ‧ 國. 學 y. Nat. er. io. sit. 圖 22 Concept.ly 的 App 編輯與使用者回饋畫面資料來源：http://concept.ly/ a. n. iv l C n U hengchi 整體而言，影像連結式的原型本質上其實還是屬於 Lo-fi 原型，只是將其掃描數位化後進行連結，並改善 Lo-fi 原型於測試階段的體驗；Lo-fi 原型需要有受測者、主持者、電腦、觀察者這四個角色，當每個頁面影像都被連結在一起時，在功能層面就相當於是 Hi-fi 原型（取代扮演電腦角色的人），並透過操作提示的輔助，讓受測者可以自行在行動裝置上操作原型。但是在修改原型較為不方便，因為當頁面有做調整時，就必須重新匯入一次頁面圖檔，並重新設定頁面連結。. 圖 23 影像連結式工具的使用流程（本研究整理）. . . 21 .

(35) 表 3 影像連結式的原型製作工具之功能比較（本研究整理）. 產品名稱平台類型. POP iOS / Android / Windows. FileSquare. Concept.ly. iOS. iOS. 受測者回饋. 無. 無. 頁面有獨立回饋. App 服務. 設計＋模擬. 模擬. 設計＋模擬. 網站服務. 無. 有. 有. 協同創作. 否. 網站. 網站＋App. 雲端同步. DropBox. 無. DropBox. . 2.2.2. 元件產生器的原型製作工具案例. Blueprint. 政治大 Blueprint 是由 Groosoft 團隊在 2010 年所開發，特別針對 iOS 平台設計的原立. ‧ 國. 學. 型製作工具，它提供許多 iOS 原生的元件給設計師使用，而元件圖形化的表示法. ‧. 可幫助設計師更直覺地使用，並以拖曳方式新增至頁面。並可以透過動作（Action）. y. Nat. er. io. sit. 設定對應的事件或行為，與其他的頁面進行連結，元件的手繪模式可讓設計師做. n. al v 一些元件額外的設計修改或說明；專案設計完時，可以透過 E-mail、DropBox、 ni C hengchi U. iTunes 匯出成 Blueprint 專有格式、PDF 或圖片，若匯出為 Blueprint 時可以透過另一個 App : Blueprint Viewer 進行開啟與進行原型測試，並回報使用心得。而整個 App 最大的特點莫過於提供了頁面之間的架構流程圖，這一功能讓設計師可以更方便地與開發團隊說明原型的概念與期望的結果。. . 22 .

(36) . 圖 24 Blueprint. 政治大提供 iOS 元件樣式，並透過 Storyboard 連接各個頁面立. ‧. ‧ 國. 學. 資料來源：https://itunes.apple.com/us/app/blueprint-ios-mockup/id405203705?mt=8. Mockups.me Wireframes. sit. y. Nat. er. io. Mockups.me Wireframes 是一款將元件用偏手繪風格呈現的原型製作工具，. n. a. iv. l C 也因為如此它所提供的元件樣式並不會被行動裝置平台限制，元件的設計原則是 Un h engchi. 以常用的樣式當作群組元件（Group Component），甚至還有支援到圖表的樣式，再透過屬性設定元件的文字、數量、條件等…⋯…⋯。相較於其他元件模式的原型製作工具，它是先選取元件再透過選取範圍的方式將元件放置到頁面中，並根據選取範圍設定其預設大小；除此之外，其提供了 “Sketch Mode”可辨識使用者繪製的圖樣，產生出對應的元件，其缺點是圖樣與元件對應關係並不直覺，需要額外記憶這些圖樣，且繪製的位置並不等同元件產生的位置，使得設計師必須多做一個調整的步驟。. . 23 .

(37) . 圖 25 Mockups.me 以 Wireframe 方式呈現，可透過 Stroke Gesture 產生元件資料來源：https://itunes.apple.com/us/app/mockups.me-wireframes/id473617271?ls=1&mt=8. EzoApp EZoApp 是中冠資訊與華碩合作開發的一個前端 UI 設計工具，以 jQuery. 政治大. Mobile Component 為基礎，適合開發行動裝置上的行動應用，以純 HTML5 輸出立. ‧ 國. 學. 原型將不受限於行動裝置的作業系統。目前可以透過網路服務 JQMdesigner 讓設. ‧. 計師可以在線上直接以拖曳的方式將元件加入，並同時於右側可以觀看到 HTML、. sit. y. Nat. er. io. Javascript 和 CSS 的語法已進行進一步的設定，也可透過開發團隊持續在新增額. n. a. iv. l C 和 Google Map 外元件庫中使用圖表、內嵌 YouTube U n 等…⋯…⋯。 h engchi. 開發完畢之後可透過 EZoApp LiveView 掃描 QRCode 直接在行動裝置上測試，亦或者輸出 HTML 程式碼跟產出 Android APK 檔供人測試。而以 Web 為基礎架構的狀況下，可以消除非原生的行動應用工程師額外的學習門檻。此外，透過 ASUS 雲端儲存與共用的服務，可以讓開發團隊中共同編輯，更提供了一個管道讓設計與開發者可以分享自己的作品給他人。但 Web 開發的 App 背後仍有一些困難尚未解決，如硬體支援、網路連線品質要求較高。. . 24 .

(38) . 圖 26 EZoApp 是以 HTML5 為基礎的線上原型製作網站資料來源：https://ezoui.com/app/zh-tw/. 從上述的案例中可發現元件產生器的原型製作工具之核心價值在於元件庫，其提供了一致風格的元件樣式，有些還包含常用的元件組合；而其最大的好處則是元件的可重複利用性與編輯自由度較高。但是這類工具較為要求設計師的背景. 治. 政或經驗，若設計師對於元件的認知不足，則可能會發生找不到需要元件之窘境。大. 立. ‧. ‧ 國. 學 sit. y. Nat. 圖 27 元件產生器工具的使用流程（本研究整理）. er. io. 表 4 元件產生器的原型製作工具分析（本研究整理）. a. v Mockups.me ni. EzoApp. 元件風格. iOS. Wireframe. jQuery Mobile. 開發平台. iOS. iOS / Android. HTML5. 屬性完整度. 高. 低. 中. 筆畫辨識. 無. 有. 無. 網站服務. 無. 有. 有. App 服務. 設計＋模擬. 設計＋模擬. 模擬. 專案共享. 有. 有. 無. 元件自動對齊. 有. 無. 有. 回饋機制. E-Mail. 測試時可加註解. 無. 操作提示. 有. 無. 無. 雲端同步. DropBox. 無. 華碩. n. l C Blueprint. hengchi U. . . 25 .

(39) . 2.2.3. 小結. 從上述的案例探討中可發現影像連結式的原型製作工具比較適用於設計初期，因為它可以快速將紙面原型轉為互動式原型，同時具備紙面原型的設計彈性，又能改善紙面原型測試體驗不佳的問題。而元件產生器的原型製作工具則適用於中後期，因為這個階段比較注重的在於 App 的視覺效果與操作體驗，因此會比較注重在這些細節的設計。這兩種類型的工具都有其各自的使用流程與適用的時期，本研究希望能將這些過程化繁為簡，同時維持手稿繪製的自由度，並可讓設計師只需做一次的設計，即可轉換不同階段需求的介面樣式。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. . Ch. n engchi U. 26 . iv.

(40) . 第3章. 系統設計. 3.1 概念說明行動應用程式開發時如何探索使用族群的類型與需求，設計好的使用者介面與體驗是相當重要的。為此必須反覆地進行原型設計，邀請使用者進行測試後收集回饋，再評估如何修改原型的步驟，此過程即稱為 Iterative Design Process。在過程中原型是不可或缺的要件，必須根據收集到的使用者回饋，快速地設計與修改原型，才能加快 Iterative Design Process 的循環。因此，本研究決定從改善原型設計的體驗開始。. 政治大從文獻與案例探討與實際與設計師訪談的結果得知，設計師在產品設計初期立. ‧ 國. 學. 習慣使用紙筆的設計手法，快速地將各式想法實現在紙面原型，藉此討論產品的. ‧. 各種可能性並進行使用者測試；中後期階段才會選擇將紙面原型數位化，測試使. sit. y. Nat. io. er. 用者喜好的介面樣式與互動體驗；從上述可以瞭解不同型式的原型，具有不同的. n. a. v. l C 製作時機與測試目的。在訪談時有請設計師提出對於現有的 App 原型製作工具 ni hengchi U. 的使用經驗與看法，結果表示影像連結式的工具確實改善了 Lo-fi 原型的使用體驗，而元件產生器的工具則是有較為真實的元件樣式與屬性，但是經驗不足的設計師對於元件的認知不足將是一個問題。因此，本研究提出「Xketch」，一個加速 Iterative Design Process 各階段循環的線稿式原型設計工具，並分別協助原型設計（Prototyping）、測試（Testing）與分析（Analyzing）三個階段的發展。其核心價值在於：讓設計師能維持線稿式設計的習慣，但能降低生成元件的複雜度與時間，並透過容易編輯的屬性與轉換頁面設定，可以快速地製作出互動式原型；其次，可將專案匯出給不同的行動裝置進行測試並提供良好的互動體驗，同時記錄受測者的操作行為與聲音並上傳. . 27 .

(41) . 至雲端；並可在 iPad 上重新審視與管理這些資料，透過時間軸的介面重現使用者的操作行為以進行觀察與討論，創造更佳的團隊合作體驗。. 3.1.1. 原型介面設計. 本研究將利用 iPad 設計 iPhone 行動應用程式的原型。根據 iOS 官方提供的使用者介面設計規範（HIG, Human-Interface Guideline）對元件生成的限制與關聯性，預先將元件類型進行分類，並搭配設計師對元件認知的筆畫指令；筆畫指令所繪製的位置（Position）與外框尺寸（Bounding Size）將決定元件生成的位置與大小，並透過屬性（Property）、行為（Action）、類型（Type）列表設定. 政治大. 元件。部分的筆畫圖樣會根據下筆的位置或長度與生成特定的元件，讓設計師可立. ‧ 國. 學. 以很直覺地在某些位置生成元件，同時符合官方提供的介面設計規範。. ‧. 有些元件在紙面原型上的繪製較為複雜，通常會在旁寫上說明文字解釋用途，. sit. y. Nat. er. io. 像是清單列表、地圖、多欄選擇器…⋯…⋯等無法用簡單或較少的線條與方塊表達的. n. a. iv. l C 元件。因此，本研究延續了這樣的心智模式，以元件英文的字首作為生成的筆畫 Un h engchi. 指令，協助設計師聯想以降低記憶的負擔。本研究認為利用筆畫指令作為生成元件的方式，延續設計師在紙面原型的設計習慣，是非常直覺的操作方式，也是 Xketch 在介面設計階段中相當重要的功能。數位化工具也改善了紙面原型的元件不易重複使用的缺點。例如：縮放、移動、複製、貼上、刪除…⋯…⋯等。這些元件操作功能都能協助設計師快速地設計原型，尤其是在不同頁面都具有相同排版格式的情況下更為明顯。. . 28 .

(42) . 圖 28 Sketching Interface 示意圖（本研究整理）. 原型測試階段. 立. 政治大. 學. ‧ 國. 3.1.2. 當專案設計完成之後可以在 iPad 上直接測試原型，亦或者是匯出至手機上. ‧. 測試；設計師也可在設計完一個頁面後直接模擬該頁面，不一定要等到專案完成. sit. y. Nat. er. io. 才能模擬，以幫助設計師確認對元件的操作想像。然而，為了因應不同時期對原. n. a. iv. l C 型的樣式需求，Xketch 可以在專案設定中選擇元件樣式是 Wireframe 或 Realistic Un h engchi. （圖 29），讓設計師可以快速切換原型樣式進行使用者測試。當使用者在手機上使用原型時，手機將會同步記錄使用者的操作行為並且錄音，測試完畢後會將資料上傳至雲端與專案同步，作為後續分析階段的參考。. . 29 .

(43) . 圖 29 切換元件樣式的示意圖（本研究整理）. 立. 資料分析階段. 學. ‧ 國. 3.1.3. 政治大. ‧. 一般而言，當使用者測試階段結束後，團隊會根據觀察者的紙本筆記與拍攝. y. Nat. er. io. sit. 的影像做進一步的討論與分析，但是要將紙本筆記與影像連結起來往往會耗費許. n. al 多時間，也不是很方便與原型的版本控制進行整合。i然而 v ，本研究希望透過 Xketch Ch. n engchi U. 除了可以設計原型、測試，也希望能幫助到整合記錄的部分。因此，Xketch 將透過時間軸的方式依序重現受測者的操作行為與聲音，並提供一個團隊討論的平台，可以針對不同版號的原型與使用者操作行為進行研究，讓每一位團隊成員都能表達看法進行討論，創造更好的團隊合作體驗。. . 30 .

(44) . 圖 30 選擇原型版本並重現某位受測者的操作資訊進行觀察與討論（本研究整理）. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. 回饋類型 . 認同度 . Ch. n engchi U. iv. 撰寫回饋 . 圖 31 記錄區的功能說明圖（本研究整理）. 3.2 系統原型設計本章首節說明 Xketch 採用的圖樣辨識機制，並於第二節說明初學者、專家模式和進階元件的筆畫指令設計規則。第三節說明 Xketch 的編輯區與 Storyboard 模式的介面與互動方式。第四節說明本研究制定的實驗目的。. . 31 .

(45) . 3.2.1. $P Point-Cloud Recognizer. 為了能正確辨識筆畫指令所代表的圖樣，本研究擬用 Vatavu 提出的$P Point-Cloud Recognizer 作為圖樣辨識的依據。$P 能提供二維手勢的辨識以及適用於快速原型設計，在不限制使用者繪製筆畫的方向與數量的情況下，只要預先建立好圖樣的路徑座標（Point Cloud）資料庫即可提供良好的辨識率。(Vatavu, Anthony, & Wobbrock, 2012). 立. 政治大. ‧. ‧ 國. 學. Nat. n. al. er. io. sit. 資料來源：Vatavu et al., 2012. 3.2.2. 筆畫指令. y. 圖 32 不同繪製圖樣的方式轉換為 Point Cloud. Ch. n engchi U. iv. 本研究從先前的初步研究中觀察發現，設計師習慣利用線條與矩形的圖樣代表元件，對於這兩個圖樣的記憶負擔也非常小。因此，本研究擬用線條（Line）與矩形（Rectangle）的圖樣作為基礎，並將這兩個筆畫指令定義為初學者模式（Novice Mode）（表 5, 表 6）。設計師可以繪製單一線條或矩形生成元件，再透過元件列表切換類型，即可生成多數的元件；在生成元件時也會一併將圖樣的尺寸和下筆位置納入辨識條件，降低搜尋可切換元件類型的範圍與時間。線條與矩形雖然在紙面草稿中很常被使用，但仍屬於意義較不明確的圖樣。舉例來說，矩形這個圖樣在沒有口頭解釋與文字註記的情況下，可能被認定是圖. . 32 .

(46) . 形也可能是按鈕。本研究從初步研究的結果與觀察中也發現，對於部分設計師而言某些圖樣是具備明確的定義，但無法作為設計師間的共識。因此，本研究提出了另一個筆畫指令稱為專家模式（Expert Mode）（表 7）；這類筆畫指令是基於元件本身的形象所設計，比起初學者模式筆畫指令的圖樣，專家模式的圖樣是較為複雜的。這類的筆畫指令會根據元件的形象篩選可切換的元件類型，或是直接生成對應的元件類型，目的都是為了降低切換元件類型的時間。不論是初學者還是專家模式的筆畫指令，其圖樣基本上都還是由少量的線條或矩形所組成，但在紙面草稿中我們仍可發現部分元件較為複雜，無法使用簡單或較少的筆畫完成，取而代之的是加上文字註解說明元件的名稱、用途和樣式以. 治. 政解釋這個圖樣代表何種元件，本研究則將這類元件稱之為進階元件（Advanced 大. 立. ‧ 國. 學. Widget）。. ‧. 本研究擬透過實驗、問卷與訪談評估設計師對於上述的筆畫指令，在易學程. y. Nat. er. io. sit. 度、可記憶性與辨識度的表現，探討如何設計良好的筆畫指令。表 5 線條（Line）的生成元件列表（本研究整理） a. n. iv l C n U 圖樣 h e n g c h i 位置. 元件類型. 寬度. 頂端 Navigation Bar. > 210 pt. 底端 Tab Bar. Navigation Bar 的左/右側 Navigation Bar Item. . 33 .

(47) . Label. Button. 其他. TextField. 立. ‧. ‧ 國. 學. Horizontal-Line. 政治大. io. y sit. 圖樣. n. al. 位置. er. 元件類型. Nat. 表 6 矩形（Rectangle）的生成元件列表（本研究整理）. Ch. n engchi U. iv. View. 任意 Image. TextView. . 34 .

(48) 表 7 專家模式的筆畫指令列表（本研究整理）. 元件類型. 圖樣. 位置. Image. Slider. 立. 政治大. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat TextView. Ch. n engchi U. Segment Control. Switch. Slider. . 35 . iv. 任意.

(49) 表 8 進階元件的筆畫指令列表（本研究整理）元件類型. 圖樣. 備註. TableView. WebView. 立. 政治大. 援元件的生成，並無提供太多可調整的參數。. ‧. ‧ 國. 學. n. al. er. io. sit. y. Nat. MapView. 在第一版 Xketch 僅支. Ch. n engchi U. iv. Picker. 3.2.3. 介面與互動設計. 從過去的文獻探討中發現，設計師認為使用筆畫圖樣作為生成元件的指令，以及透過 Storyboard 模式設定原型的使用流程，都是相當直覺的功能設計；本研究也從案例探討與設計師過去相關的原型製作工具使用經驗中得知，什麼樣的介. . 36 .

(50) . 面與互動設計的接受度較佳。Xketch 將編輯區介面分為三個部分：左側的頁面元件列表、中間的筆畫指令繪製區以及右側的元件設定（屬性、行為、類型）列表；若透過初學者模式的筆畫指令生成之元件會優先顯示可切換類型的列表，而專家模式的筆畫指令生成之元件會直接顯示屬性列表。每個元件都有其特有的屬性，但在原型設計階段時通常不會做太精細的設定，因此 Xketch 目前僅提供一些常用的屬性或樣式；本研究根據屬性內容形式的不同，設計較適用於觸控螢幕的互動方式。例如：利用上下滑動的方式控制數字的變化、狀態切換的開關（0/1）、透過動態預覽圖選擇元件的樣式…⋯…⋯等。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 33 編輯區－可切換元件列表（本研究整理）. . 37 .

(51) . 圖 34 編輯區－元件屬性列表（本研究整理）. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 35 編輯區－行為設定列表（本研究整理）. . 38 .

(52) 表 9 元件支援的操作行為（本研究整理）. 目標. 功能名稱. 觸發方式. 複製剪下貼上. 點選對應的項目. 複製後貼上. 選取的元件. 刪除移動. 單指拖移元件單指拖移水平/垂. 縮放. 直縮放按鈕. 跨頁面行為設定在互動式原型中是相當重要的功能，其關係到是否能串接每個頁面，讓使用者體驗完整的使用流程；透過使用流程的概觀也能有效幫助設計. 政治師檢查原型設計的完整性。設計師在點選元件後可以利用編輯區的行為（Action）. 大. 立. ‧ 國. 學. 列表，設定要連結的頁面與動畫效果；也可在編輯區使用 Pinch 手勢切換至. ‧. Storyboard 模式（圖 36）；在此模式下可以透過長按（Long Pressed）移動頁面. er. io. sit. y. Nat. （圖 37），在 A 頁面觸碰並拖移至 B 頁面後放開，即可選擇要透過 A 頁面的哪. n. 個元件會觸發轉頁至 B 頁面（圖 a 38），在兩頁面間的連線間畫條垂直線即可取 v. i l C hengchi Un 消連結（0.5 秒內）（圖 39）。. 圖 36 透過 Pinch 手勢切換至 Storyboard 模式（本研究整理）. . 39 .

(53) . 圖 37 頁面浮起代表可移動該頁面（本研究整理）. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat al. n. v ni U engchi 畫線連結頁面與選擇觸發元件與動畫（本研究整理）. 圖 38. Ch. 圖 39 取消頁面連結的示意圖（本研究整理）. . 40 .

(54) . 3.2.4. 小結. 本研究擬透過第一版 Xketch 的使用者測試，收集設計師對於操作介面與互動設計的回饋，並於下一個章節對實驗結果進行討論與分析。本次實驗目的為： 1.. 筆畫指令的設計是否容易學習？. 2.. 筆畫指令是否容易記憶的？. 3.. Xketch 整體的介面與互動設計是否適合？. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. . Ch. n engchi U. 41 . iv.

(55) . 第4章. 系統評估. 第一版 Xketch 以支援原型設計階段為主，故將評估重點放於探討筆畫指令的設計規則，以及 Xketch 整體介面與互動方式是否符合設計師的期望。本章第一節為實驗流程說明，定義過程中各個階段欲觀察的重點與進行方式。第二節為受測者資訊說明，將受測者分為初學者與專家兩個族群。第三節論述實驗結果與討論，以及在實驗過程中額外發現到的洞見。第四節說明 Xketch 的整體性評估與假設驗證結果。本研究擬透過問卷、訪談與使用者操作記錄，搭配實驗過程的觀察結果做分. 治. 政析，並預期得到的受測回饋應符合以下幾點假設：大. 立. 筆畫指令生成的元件類型不正確，可以透過元件列表快速地選取修正。. 2.. 設計師經過一定時間的練習，將能使用筆畫指令隨著腦海中的構圖完成. er. io. sit. y. Nat. 頁面設計。. ‧. ‧ 國. 學. 1.. al 設計師經過一定時間的練習，將會偏好使用專家模式的筆畫指令。 iv. 4.. 設計師要建立頁面連結時，將會偏好在 Storyboard 模式下設定。. n. 3.. Ch. n engchi U. 4.1 實驗流程. 圖 40 實驗流程圖. . 42 .

(56) . 本次實驗要求受測者使用觸控筆在 iPad 上操作 Xketch，在邀請受測者時有提醒可自行攜帶慣用的觸控筆。本研究設計的實驗流程可分為四個階段（圖 41）。首先，受測者必須進行 Xketch 的使用教學與練習，學習如何使用初學者、專家模式和進階元件的筆畫指令生成元件、切換元件類型與修改元件屬性；完成生成元件的練習後，引導受測者新增頁面與建立頁面連結，再從編輯模式轉成測試模式實際操作製作的原型。. 立. 政治大. ‧. ‧ 國. 學. 圖 41 受測者的教學與練習（本研究整理）. Nat. er. io. sit. y. 實驗的第二階段將給受測者一份 App 原型的流程圖與功能說明，受測者必. n. a l 上製作一樣的原型。此階段是為了觀察受測者須模仿範例原型，盡量在 Xketch iv Ch. n engchi U. 經過教學跟練習後，是否能夠正確的使用筆畫指令與偏好何種類型的筆畫指令，一旦筆畫指令生成的元件不正確時，可以從元件列表快速地選取修正；以及是否能透過屬性列表修改元件屬性，套用提供的 Design Pattern 快速建立元件樣式。. 圖 42 模仿任務的示意圖（本研究整理）. . 43 .

(57) . 實驗的第三階段則要求受測者設計「UBike 租借 App」的原型，提供數項基本功能的需求與說明，並利用 Xketch 設計自己腦海中想像的 App 原型的佈局與使用流程。由於受測者是當場才知道要設計的主題，而且在初期的原型設計階段，較不注重於內容的真實度與完整性，故於開始此階段測試前，特別向受測者說明不需要拘泥於內容的真實性，只須將內容與使用流程完成即可。本研究希望在此階段時可以觀察到設計師在製作 App 原型時的真實設計流程，是否能使用筆畫指令完成腦海中構思的頁面，並使用元件複製、剪下和貼上的功能加快頁面設計；除此之外，Xketch 會自動記錄受測者的操作行為（生成何種元件、切換至何種元件類型、複製貼上元件的行為…⋯等。）搭配實際觀察的狀況進行後續的探討。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat al. Ch. n engchi U. iv. 圖 43 建立原型使用流程的示意圖（本研究整理）. . 4.2 受測者資訊本研究邀請了七位設計師進行使用者測試，年齡約在 22 至 29 歲間（平均 25 歲），並具備紙面原型與某些數位化原型製作工具的設計經驗，其中三位僅有 3 至 6 個月，剩餘四位則有 1 年以上的經驗；本研究將前者定義為初階設計師，後者為資深設計師。完成主題任務後會給受測者觀看元件圖示，並於紙上繪製出對應的線稿圖樣以驗證筆畫指令的可記憶性；再請受測者填寫關於筆畫指令的認知與 Xketch 整體性評估的問卷，並以 1（非常不同意）至 5（非常同意）分的評. . 44 .