科技部補助專題研究計畫成果報告
期末報告
線稿式原型設計工具於行動應用開發之研究
計 畫 類 別 ： 個別型計畫 計 畫 編 號 ： MOST 104-2221-E-004-011-執 行 期 間 ： 104年08月01日至105年07月31日 執 行 單 位 ： 國立政治大學資訊科學系 計 畫 主 持 人 ： 余能豪 計畫參與人員： 學士級-專任助理人員：林宇軒中 華 民 國 105 年 10 月 31 日
中 文 摘 要 ： 使用者體驗在行動應用App開發中扮演相當重要的角色。欲達到較佳 的使用者體驗，設計人員常利用原型進行測試以收集使用者回饋,並 根據回饋改善原型再進行多次測試，反覆更迭的過程稱之為迭代設 計。本研究分析整理迭代設計流程中設計師常用之工具，發現從低 擬真至高擬真之原型發展階段雖有不同的工具，卻需要設計師花費 許多時間在軟體操作上，無法讓設計師流暢且快地將腦中思考的設 計繪製為數位版本，再者，各階段所使用之工具彼此並不相容，設 計師也需耗費額外的成本轉換各階段的產出。 本研究提出一套加快迭代設計流程的線稿式原型設計工具「 Xketch」。在原型設計階段，設計師可透過繪製筆劃指令的方式生 成元件與設定頁面、元件間的互動行為；當原型設計完成後可直接 發佈給受測者；在測試階段則會同步紀錄受測者的操作過程與 think-aloud口述資料。最後將蒐集到的資料透過時間軸介面重現 ，協助團隊分析與討論。為加速設計團隊更有效率地製作行動應用 app原型，本研究導入行動介面設計模式，設計師能利用本研究整理 之常用設計模式做為流程範本，再做客製化修改，快速完成原型製 作。 中 文 關 鍵 詞 ： 行動應用程式、原型製作、開發工具、線稿式設計、迭代設計、介 面設計模式、使用者經驗
英 文 摘 要 ： Iterative Design Process plays a great role in 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 case studies of iteration design tools, we found many design tools support designers from low fidelity to high fidelity prototyping stage. They would spend a lot of time on manipulating tools, and that makes designer be distracted during the drafting stage. Furthermore, these tools aren‘t compatible with each
other. It increases the cost when designers switch the tool to meet the need of different design stages.
We developed “Xketch”, a sketch-based mobile application development tool for iterative designs and testings. First, designers can use the sketching interface on 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. To accelerate the mobile app prototyping, Xketch includes a catalog of mobile UI design patterns that could enable designers to start design based on patterns. Mobile UI design patterns are flexible so that designers could customize patterns to fit their need.
英 文 關 鍵 詞 ： Mobile App development, Prototyping, Development tool, Sketching, Iterative design process, UI design patterns, User experience
!
MOST 104-2221-E-004-011
2015
8
1
2016
7
31
-1
!
!
!
! ! !
! ! !
! ! !
! ! 105! !
! ! 10! !
! ! 20! !
!
!
!
! ! ! App Xketch think-aloud app
!
Iterative Design Process plays a great role in 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 case studies of iteration design tools, we found many design tools support designers from low fidelity to high fidelity prototyping stage. They would spend a lot of time on manipulating tools, and that makes designer be distracted during the drafting stage. Furthermore, these tools aren't compatible with each other. It increases the cost when designers switch the tool to meet the need of different design stages.
We developed “Xketch”, a sketch-based mobile application development tool for iterative designs and testings. First, designers can use the sketching interface on 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. To accelerate the mobile app prototyping, Xketch includes a catalog of mobile UI design patterns that could enable designers to start design based on patterns. Mobile UI design patterns are flexible so that designers could customize patterns to fit their need.
Keyword: Mobile App development, Prototyping, Development tool, Sketching, Iterative design process, UI design patterns, User experience
目錄
目錄 1
前言 2
低擬真原型（Low-fidelity Prorotype, Lo-fi Prototype） 3 中擬真原型（Mid-fidelity Prorotype, Mi-fi Prototype） 4 高擬真原型（High-fidelity Prototype, Hi-fi Prototype） 5
專家訪談 6 文獻及案例探討 11 原型設計工具案例探討 11 Balsamiq 11 Axure RP、Cacoo 12 Blueprint 13 Proto.io, UXPin 13 POP 15 Concept.ly, inVision 16 Flinto 16
Adobe Experience Design 17
輔助影像聯結式之視覺設計工具 18 小結 20 線稿式設計工具 21 SILK 21 UISKEI 22 小結 23 介面設計庫 24
Yahoo Design Pattern Library 25 Mobile Design Pattern Gallery 25
UXPin 26 Damask 27 小結 28 系統設計 29 系統及介面 31 擬真度轉換 34 筆劃指令 38 模式庫 41 原型測試階段 45 資料分析階段 45
成果自評 48
參考文獻 48
1.前言
當各大頂尖公司喊出行動優先（Mobile First）的口號時，行動應用程式app數量正以 相當快的速度增加中，Apple App Store的App數量由2010年的15萬至2014年成長至110萬 （Ariel, 2015），2016年更已達200萬App（AppShopper, 2015），在六年間App數量成長 13.3倍。行動應用程式（以下簡稱App）相較於桌上型電腦應用程式，行動裝置具備的螢幕 較小、無限網路連線速度、使用情境以及使用時間碎片化等特性，加上提供相似服務的App 太多，良好的使用者體驗成為App成功與否的重要關鍵。 一個App的產出可大致分為前期的設計階段，以及後期的程式開發階段，期間會有許 多不同角色的成員加入，如：互動設計師、視覺設計師、使用者研究員、開發工程師、專案 經理甚至是行銷人員等等，各自皆有其領域之專業語言，為了有效的溝通設計方向並且形成 共識，在進入開發期之前的設計過程中，常利用各種工具建置大量的原型，並且進行使用者 測試、使用者行為分析等等，來逐步確認使用者的真實需求，逐步修正設計，以避免進入程 式開發後進行大幅度更改，造成開發成本提高。而不同領域的成員也可將原型作為共同語言 ，降低溝通磨合所耗費的時間。而此利用原型進行測試與修正的循環，即為人機互動（ Human Computer Interaction）領域中常用的設計方法——迭代設計（Iterative Design Process）。
迭代設計由三個階段構成：設計原型（Prototyping）、測試原型（Testing）與分析 結果（Analyzing）。IDEO的CEO Tim Brown所提出的設計思考（Design Thinking）亦強 調：藉由實地動手製作原型的過程來學習，並且在早期成本與時間投入相對較少的情況下及 早失敗，做出相對應的修正。相較於以往瀑布流的設計開發方式，基於原型迭代的設計過程 ，更能促進跨領域團隊的合作，透過不同觀點的討論，也更容易激發出許多創新的可能。
迭代設計是一個不斷精煉產品的方法，藉由測試原型進行不斷的修正設計，以達到提 升設計的品質的目的以及趨近使用者的真實需求。Cerejo（Cerejo, 2010）以及Engelberg 等人（Engelberg & Seffah, 2002）皆指出依照原型與成品的擬真程度，可分為低擬真原型 （Low-fidelity Prorotype, Lo-fi Prototype）、中擬真原型（Mid-fidelity Prorotype, Mi-fi Prototype）以及高擬真原型（High-fidelity Prototype, Hi-fi Prototype）。
低擬真原型（Low-fidelity Prorotype, Lo-fi Prototype）
Snyder（Snyder, 2003）指出由於紙筆的便利性，在設計使用者介面時最常見的Lo-fi 原型即為紙面原型，是一快速產生以便做為討論基礎的原型。設計師常選擇易於取得且操作 簡便的紙筆作為媒材，將較高階的設計概念繪製成初步的使用介面，也由於在此階段著重快 速建置以便討論、測試主要功能，繪製內容以簡單的線稿為主，故紙面原型仍然屬於較為粗 略、不精細的樣貌，但已有大致上的結構及雛形，並可藉此做初步的設計方向確認。由於在 紙面上傳達的資訊有限，因此以紙面原型進行溝通時，設計師需要進行大量的說明。 圖1 以紙筆繪製的紙面原型。（本研究整理） 以紙面原型進行使用者測試時仰賴人員操作，需安派較多的人力來分別擔任主持人、 觀察者、電腦角色（圖2）——由一人演繹電腦的角色來根據使用者對紙面原型的行為，做 出相對應的反應，如：使用者點擊紙面原型上的按鈕後，更換至該按鈕所連結的下一頁。為
盡可能捕捉真實的使用者反應，擔任電腦的人員須利用多次的練習來保持對紙面原型使用流 程的熟悉度。
圖2 進行紙面原型使用者測試時的人員配置。（資料來源：Rettig, 1994）
中擬真原型（Mid-fidelity Prorotype, Mi-fi Prototype）
Engelberg於2002年提出（Engelberg & Seffah, 2002）Mi-fi原型的概念：在以Lo-fi原 型確立架構及設計方向後，則進入使用數位工具的Mi-fi原型階段。在Lo-fi原型中以框線表示 的物件，在Mi-fi階段則會利用數位原型設計工具加入更多的細節以及互動；在Lo-fi原型階段 僅繪製重點功能而忽略整體架構，Mi-fi原型則會盡可能建立完整的結構，像是前期常忽略應 有但非重點的登入流程等等，進而形成一個流程完整的App線稿（Wireframe）。Mi-fi原型 主要功能在於確立應呈現予使用者的資訊架構、使用流程，因此在Lo-fi原型中以矩形表示的 圖片增加清楚的圖片內容標示，文字亦由線段示意改為真實情境的文字來顯示內容。 Mi-fi原型雖已標示重要說明文字，但視覺上仍屬於概略的樣式，並無法完全傳達最終 產品的視覺效果及感受，其視覺外觀及互動效果可稱之為可點擊式線框稿（Clickable Wirefram）（Treder, 2014）。Mi-fi階段已使用數位工具產出原型，建置成本較Lo-fi原型高 ，但數位工具對測試及分析皆有較佳的支援，故所需人力較Lo-fi原型少，常用數位工具如： Cacoo, Balsamiq（圖3）。
圖3 以Balsamiq設計的Mi-fi原型（資料來源：https://goo.gl/9kyasw）
高擬真原型（High-fidelity Prototype, Hi-fi Prototype）
Hi-fi原型以高擬真程度來測試使用者之互動操作歷程（Rudd, Stern, & Isensee, 1996 ），在行動App設計過程中多為數位原型，使用者體驗已經相當接近成品但並不具備可運作 之要素，如：程式碼或資料庫等（圖4）。其時間成本為三階段的原型最高，目的在於驗證 使用者對於整體原型的介面與互動的體驗。但在此階段的原型設計工具提供大量視覺屬性供 設計師調整，因此建立以及修改都較為繁瑣，不利於初期討論使用。在測試階段，數位的 Hi-fi原型可同時測試受測者對於資訊架構、視覺設計的喜好程度，藉由數位工具的特性可完 整紀錄使用者操作過程。 圖4 inVision製作的高擬真原型可藉由智慧型手機進行互動。 （資料來源：https://goo.gl/TiSdw3 ）
表1 三種原型比較表（本研究整理） 類型 低擬真原型 中擬真原型 高擬真原型 主要 型態 紙面原型 數位原型 數位原型 目的 快速驗證不同的概念並且確立 設計方向 確認結構及主要功能之使用流 程 結合資訊及視覺設計以提供完 整的使用者體驗進行使用者測 試 特性 ● 使用門檻低 ● 低成本，工具易取得 ● 使用者測試成本高 ● 中等成本 ● 使用者測試成本較低 ● 完整的使用者體驗 ● 受測者可自行操作 ● 適合進行易用性測試 ● 製作及修改成本較高 ● 測試重點不明確且易 受到視覺設計影響 支援 工具
紙筆、白板, POP Cacoo, Balsamiq Adobe Experience Design,
Axure RP, Blueprint, Proto.io, UXPin 從上表可發現，三種原型各自有其不同目的，也有不同的原型設計工具支援（本研究 將於第二章的的文獻與案例探討中進行更深入的介紹）。Cerejo於2010年的研究提及：需 要依照不同的設計需求來選擇類別，因此並無一定的標準，如：針對視覺需求較低但著重操 作及使用流程的醫藥相關產業，可能利用白板來繪製原型即可有效溝通；對於視覺效果要求 較高、需直接面大眾的零售業，高擬真原型才能傳達視覺風格及互動方式的交互效果。 專家訪談 為了瞭解設計師在繪製原型時的習慣，本研究邀請了兩位有App設計經驗的設計師， 分別為三年經驗的資深介面設計師及十年經驗的資訊架構師，深入其工作場域進行了訪談與 觀察。訪談的進行方式如下： 1. 請設計師說明所在機構的行動App設計流程、與團隊溝通的狀況以及本身的設計習慣 及常用工具。 2. 請受訪設計師在三十分鐘內完成一行動購物App的原型設計。 3. 請設計師說明該原型設計重點。
本研究從訪談及觀察中得知設計師在得知App主題，會先進行類似App的調查，理解 該類型App可能的功能以便確立建立工作清單（Functional Map）做為原型的架構。當完成 工作清單的條列後，則會利用各種設計資源，如：Pinterest、Behance等等尋找常見的頁面 佈局（圖5），並以手繪方式建構原型。兩位設計師在進行原型設計的任務當中，一致選擇 了手繪作為主要的原型設計方式，並且一致認為：雖後續仍會進入各種慣用工具進行數位原 型的設計，但若要快速建置可討論的原型，手繪仍為首選。 圖5 受訪設計師在完成工作清單後開始參考Pinterest上 的設計資源進行原型繪製。（本研究整理） 圖6 受訪設計師在白板上進行行動App介面手繪。 （本研究整理） 圖7 受訪設計師完成的紙面原型設計（本研究整理） 設計師在繪製過程初期會先利用許多意義不明確的線段、矩形，大致區分出介面佈局 後，再以其他顏色標註該線稿意義為何（圖7）。除了利用簡單的線段代表文字、矩形表示
圖片外，本研究觀察到設計師會繪製較精細的圖示，以代表特定的操作行為，如：以推車的 圖示代表購物App中的購物車功能，或以人像表示會員資料等等。完成手繪介面設計後，設 計師將依照專案需求的不同，選擇不同的數位工具設計數位原型。 表2 圖形與其代表的功能或元件（本研究整理） 線稿類別 線段 矩形 特殊圖形 線稿樣式 、 代表元件或 功能 文字 分隔線段 按鈕、圖 片 圖片 會員資料 購物車及 其後結帳 流程 搜尋功能 十年經驗的資深設計師表示：「如果要設計的流程沒有其他可參考的App，那就一定 會從手繪介面開始，因為手繪比較快速而且對於討論跟建構都比較方便。若是已經很成熟的 App或者服務則不會從手繪開始，可能會直接進行Wireframe的設計。」另一位設計師表示 ：手繪的方式有助於梳理設計脈絡，一旦進入數位工具則位置及樣式都會相當明確。在數位 工具中即使刪除、複製都較手繪來得便利，但手繪的過程也是構思的過程，甚至當設計師擦 去介面這樣反覆而單一的動作時，仍然在進行下一步思考。 設計師的手繪動作可分為三個階段，分別為：構思概念、產生物件、刪除物件（圖8 ）。設計師先在腦中構思欲繪製的種類、位置、尺寸及外觀，因為畫筆繪製後較數位物件不 易修改的特性，同時間亦考量該物件與其他物件之相對應關係，完成構思後方執行極為短暫 的繪製過程。若有修改的需求，設計師則會於上述構思的過程同時擦除物件，完成後即可進 行下一階段的繪製（圖8）。 而數位工具為了能夠將設計師的思緒逐一轉換為實際的操作指令，因此產生了使用數 位工具的五個階段：構思概念、選擇工具、產生物件、調整物件、刪除物件。設計師先在腦 中構思欲繪製的物件種類、位置、尺寸及外觀後，選擇工具產生物件再利用物件的屬性來調 整物件大小、位置及外觀等視覺樣式。
圖8 線稿工具與元件、圖層式工具構思比較圖。 線稿工具由於物件產生迅速，故可較快銜接至下一構思概念階段，避免過多操作導致設計師分心。 （本研究整理） 在建構原型的過程中以手繪或者數位工具來產生物件，兩者的操作方式有相當大的不 同（圖8）。手繪的過程中，在構思階段設計師已完成種類、位置、大小、樣式的構思，因 此繪製物件所花費時間佔整體時間較少。若需要擦除物件，設計師腦中可同時進行下一階段 的概念構思。在使用數位工具的產生物件過程中，系統會依照選擇的工具來產生制式的物件 ，再藉由物件的屬性來逐步調整成理想的佈局，而期間設計師的思緒將因工具所提供的操作 模式而切分成多段，且由構思、繪製、調整或刪除再到構思，數位工具完成一次循環的時間 較手繪工具長，因此即使數位工具進行刪除極為簡便，但建構的整體所需時間仍較手繪原型 長。故在創新性高的發想期間，設計師偏好採取手繪方式進行。 因此相較於其他類型的原型設計工具，手繪模式操作的線稿式原型設計工具（ Sketch-Based Prototyping Tools）更能順暢銜接構思過程，並將低擬真原型轉換為中、高 擬真原型。過去有許多線稿式工具如：提供Windows平台視窗應用程式的原型設計工具 SILK（Landay, 1996）、UISKEI（Segura, Barbosa, & Simões, 2012）等等。前述之研究 已逐步拓展筆畫產生元件的可能性，但截至目前為止，多數線稿式設計工具所能產生的元件
相當有限，且使用者能夠記憶的筆畫數量有限（約為5個），因此如何以線稿式工具提升原 型設計的使用者體驗仍然有待開發。 本研究提出針對行動App原型設計之線稿式設計工具，利用元件的可編輯屬性達成不 同擬真度的轉換，使行動App原型設計可由低擬真的結構、流程設計順暢銜接至高擬真原型 設計。本研究進一步提出符合設計師思維的筆劃與元件、元件與行動介面設計模式的對應規 則，優化設計師的原型設計體驗，提升原型設計速度，儘早進入迭代設計的過程，達成團隊 與使用者的共識。 因此本研究針對原型設計階段的主要研究目的如下： ● 銜接粗略到精細的原型迭代過程： 行動App原型設計的過程中，設計師常由粗略的概念迭代進入精細的設計，而這過程 中常伴隨著工具的轉換，一旦更換工具則不可避免的需要重新建構原型。因此本研究為加速 行動App原型設計流程、減低各階段原型之轉換成本，將數位原型中的中擬真及高擬真階段 藉由模式的切換實作於同一工具之中，並探討在行動App原型工具的擬真程度轉換時設計師 的各階段需求。 ● 更直覺的筆劃與元件之對應規則： 由文獻探討中得知目前以手繪筆劃產生元件，已能滿足設計師從紙面原型轉換為數位 原型的需求，但設計師所能記憶的筆劃及元件對應模式有限，故本研究欲將有限的紙面原型 常用的線稿重新設計對應元件以符合行動App設計所需。 ● 以行動介面設計模式輔助原型建置： 設計師設計行動App原型時，常利用已具備共識之符號代表特定流程，其共識之概念 即為介面設計模式，故本研究將其導入至原型設計工具中，使設計師能以模式作為基礎進行 原型設計，提升原型設計的效率。
2.文獻及案例探討
由專家訪談可得知，設計師在進行App原型設計時可分為三階段，分別為：1) 繪製主 要功能流程之紙面原型，進行產品概念測試、2) 使用數位工具建構較完整的可點擊線稿原 型（Clickable Wireframe），進行功能流程測試， 3) 製作高擬真原型進行操作細節與使用 性測試。本章節第一部分將比較各階段原型設計工具碎片化的狀況，並且藉由不同的原型設 計工具所支援階段，探討該工具在原型設計過程中所扮演的角色。線稿式設計工具自 1995 年James Landay提出 SILK以來，已有多年之發展，本章節第二部分將探討以手繪筆劃線稿 產生元件之相關研究，以及筆劃及元件之間的對應關係。最後一部分則歸納整理行動App常 用之介面設計模式，探討如何利用介面設計模式庫（UI Design Library）以及相關案例提升 原型設計效率。● 原型設計工具案例探討
元件產生式原型設計工具 Balsamiq 圖9 Balsamiq可拖曳上方元件庫中的元件至畫面中進行介面建置。 （資料來源：https://goo.gl/lWCRiN ） Balsamiq是一款適用於設計初期，以手繪風格做為元件樣式的可點擊線稿工具，使用 者可拖曳上方的元件庫中的元件至畫面中以進行原型設計（圖9），設定該元件之屬性以及建立頁面連結，因其簡單易學且能夠快速建置圓形進行溝通而廣受設計師甚至是工程師、專 案經理喜愛。除了手繪風格的Sketch Skin之外，Balsamiq也提供了較為簡潔的Wireframe Skin可供切換（圖10）。Balsamiq元件所能編輯之屬性大多與元件之內容或功能相關，如 ：Label元件的文字屬性、Image元件的說明文字屬性以及iOS中Switch元件的開關等等，鮮 少與樣式相關，如：邊框樣式、背景顏色、文字顏色等等。Balsamiq藉由手繪風格元件以及 限定屬性來使使用者更專注於當設計初期應當專注於流程、介面佈局等App的結構設計，適 用於 Lo-fi 或 Mi-fi階段。 圖10 Balsamiq所提供手繪樣式（左）以及較為清晰的線稿樣式（右）。 （資料來源：https://goo.gl/AzQw1u ） Axure RP、Cacoo 圖11 Axure RP之使用介面。 （資料來源：https://goo.gl/Cao1WB ） 圖12 Cacoo繪製iOS App時的 使用介面及其元件庫。 （資料來源：https://goo.gl/7AonCn ）
以電腦為主要平台的Axure以及Cacoo不僅繪製Clickable Wireframe亦可繪製流程 圖、心智圖等等的多用途工具。兩者皆提供了數個平台的元件庫，如：網頁、iOS、Android 等等，方便設計師進行不同平台之原型設計；兩者也都可支援多人同時協作及使用網頁瀏 覽。Axure基於網頁技術開發，因此除官方提供的元件庫外，亦可由WIDGET LIBRARIES下 載非官方的各種元件來擴充使用；Cacoo甚至網路商店讓使用者購買社群使用者創作之元件 樣式。此類工具適合在Mi-fi或Hi-fi階段使用。 Blueprint
Blueprint由Groosoft於2010年開發，是一款iPad app並且專注於iOS App原型設計， 提供iOS的元件庫供設計師拖曳新增至頁面中使用，並可藉由動作（Action）設定對應的事 件、行為或與其它頁面進行連結。完成原型設計後可利用專屬的應用程式：Blueprint Viewer進行原型測試，並且記錄使用者的文字回饋。而Blueprint最大的特點在於將所有頁面 以及頁面之間的關聯一併於Storyboard中展開（圖14），與設計師進行紙面原型設計時之行 為極為接近，有助於釐清設計架構以及確認使用流程，一覽無遺的呈現方式更可以提升團隊 間的溝通體驗。此工具適合在Mi-fi或Hi-fi階段使用。 圖13 Blueprint的編輯畫面。 （資料來源：https://goo.gl/5NqznH） 圖14 Blueprint的Storyboard有助於團隊溝通。 （資料來源：https://goo.gl/5NqznH ） Proto.io, UXPin Proto.io以及UXPin為兩款相似的線上原型製作工具，設計師可於網頁端程式以以拖 曳元件的方式建構應用程式原型，除了提供常見平台所使用的元件庫外，甚至提供了相同平
台的不同版本。除了可利用拖曳元件來設計原型外，亦可由其他設計軟體如Sketch、Adobe Photoshop匯入檔案進行互動編輯，同時兼具影像連結以及元件產生式工具之特性。 Proto.io為Division of SNQ Digital於2011年推出的應用程式原型設計工具，Proto.io 與其他原型設計工具不同之處在於多數原型工具對於轉場動畫鮮少著墨，而Proto.io可以時 間軸（Timeline）來設計轉場動畫，雖可針對轉場動畫做更多細節的設定但使用門檻也較高 ，適用於Hi-fi階段。完成原型設計後的測試階段，Proto.io可利用專屬應用程式發佈至行動 裝置上供受測者進行測試，同時間系統將利用行動裝置的前置鏡頭錄製使用者的操作狀況。 圖15 Proto.io可藉由拖曳選取元件所產生的閃電符號至其他頁面來建立頁面連結。 （資料來源：https://proto.io/ ） UXPin的元件庫中也提供了整頁的介面佈局作為樣板，讓設計師以此為基礎進行設計 修改，提高原型產出效率，而為了滿足不同設計階段的需求，也針對各個較為普及的裝置或 作業系統版本，如：iPhone、Android Lollipop等設計了Lo-fi元件庫可供選用。由圖16的元 件比較圖可得知，UXPin所提供的灰階元件因移除了色彩偏好，讓使用者測試時可專注在資 訊架構上，適合Mi-fi階段使用。
圖16 UXPin的元件庫中提供相同版本、不同擬真度的整頁樣板供選用。
上圖左側為iPhone 6之樣板，右側為iPhone 6 Lo-fi之樣板。（本研究整理）
影像聯結式原型設計工具 POP POP是一款可將紙面原型轉化為數位原型的行動App。設計師藉由輸入圖片或者拍攝 紙面原型並設定圖片上的觸發區域、前往的頁面以及轉場動畫，進而形成可直接於行動裝置 上進行時機的模擬，當點擊錯誤時也會通知受測者該頁面可點擊及的區域，使受測者即使沒 有旁人指引也可進行測試。 圖17 由左而右為POP的使用方法。先拍攝紙面原型後於照片設定可點擊的位置（綠色框線選取處）以及目標 頁面，及可利用下方的「」進行測試。（資料來原：https://goo.gl/X0MeR ）
Concept.ly, inVision Concept.ly以及inVision則是使用網頁在線上匯入圖片、設定觸發區域、目標頁面以 及轉場動畫的線上服務，完成原型後可邀請團隊成員以網頁或者行動裝置進行測試以及線上 給予回饋、進行討論。經過設計、測試、討論後將會進入修改設計的階段，設計師可利用 Dropbox同步電腦、手機中的特定檔案或者照片，Concept.ly、inVision便可直接讀取 Dropbox中指定之檔案，故此避免設計師在迭代過程中頻繁反覆匯入之問題，而原型迭代的 過程中Concept.ly也會協助記錄迭代的版本。 圖18 inVision的評論模式。團隊成員或使用者可點擊 畫面任一點留下評論，其他人看到後可持續回應以便 團隊討論。 （資料來源：https://goo.gl/kshtyr ） 圖19 Concept.ly的編輯界面。藍色區塊為設計師設 定的可點擊範圍。 （資料來源：https://goo.gl/MUZ0lS ） Flinto 多數的原型工具提供的轉場動畫為作業系統提供的Push、Pull等等，而Flinto除了具 備影像聯結式工具的匯入圖片、設定連結、轉場動畫等基本要素，其最重要之特點在於利用 狀態轉換來達成設計轉場動畫（Screen Transitions）：設計師只需完成起始畫面（Start） 以及結束畫面（End）物件的位置（圖20），當進行轉場時系統會將起始畫面之物件移動至 結束畫面之位置，藉此達成動畫效果，而動畫的加減速則可利用「Timing」進行調整，故不 需設定時間軸或撰寫程式也能製作出與系統預設不同的效果。
圖20 Flinto操作介面。可利用起Start以及End兩狀態物件位置的轉變來達成轉場效果，並且利用右下角的
Timing曲線來調整轉場效果的速率。（資料來源：https://goo.gl/Ja8K91 ）
Adobe Experience Design
為了能夠更專注於介面設計領域，Adobe於2016年推出Adobe Experience Design（ Adobe XD），並且整合Adobe設計主力工具Adobe Illustrator、Adobe Photoshop甚至是 Sketch，進行可互動原型的製作。因此即使Adobe XD中已提供了相當多樣的圖形設計工具 ，但仍然歸類於影像聯結式原型設計工具。以往的Adobe工具較少觸及行動裝置開發， Adobe XD推出後可謂之最後一塊拼圖，完整了以Adobe系列軟體進行行動裝置設計的旅 程。Adobe XD與其他原型設計工具最大的差異是以重複網格（Repeat Grid）解決在製作 App時出現比例相當高的列表資訊：設計師可以選取任意元件並且開啟Repeat Grid後即可 以拖曳控制棒的方式來以水平或垂直方向新增相同的元件（圖21）。
圖21 Adobe XD以Repeat Grid（上圖綠色框線）進行往下增加元件。 （圖片來源：https://goo.gl/8WP1JZ）
輔助影像聯結式之視覺設計工具
不論是哪一領域的設計師都有其應熟悉的基本設計工具，在平面、影像設計則是以 Adobe Illustrator、Adobe Photoshop最為普遍。Adobe Illustrator是一款平面設計專用的軟 體，對於建立標誌、圖示、印刷稿常用的向量圖形有極佳的支援度，有許多設計師以其作為 介面設計之工具。 Adobe Photoshop為影像處理軟體，主要以像素來構成影像，進行影像 的編修如：調整色階及對比、合成影像、套用各種效果濾鏡等等。由於Adobe Illustrator、 Adobe Photoshop在Adobe系列中歷史悠久且繪圖及影像處理功能強大，但對近年逐漸產生 的介面設計需求關注較少，因此後期有許多設計師開始轉移到其他工具上進行介面設計。
隨著行動裝置的普及，Adobe於2015年推出了線稿式工具Adobe Comp CC。在iPad 上利用手繪的線條來產生清晰的圖形後，藉由Adobe Creative Cloud上傳至桌上型電腦的 Adobe Photoshop、Illustrator以進行後續更精細的設計，故Adobe Comp CC可視為快速產 生草稿或Wireframe的工具之一。其操作概念與Adobe Photoshop、Illustrator相同，利用圖 層堆疊以及群組化來建立物件，故本身並無「建立頁面與頁面之間的連結」及測試的概念， 因此僅能視為視覺設計工具。Inspr（圖22）為同樣可在行動裝置上設計介面的視覺設計工 具，讓設計師可直接在iPhone或iPad以拖曳元件來產生高擬真的行動裝置App圖像。由於直
接在目標裝置上進行設計，因此可即時呈現、快速修正設計，但正式的工作仍須交給其他專 業軟體進行向量繪圖以及圖片輸出。 圖22 Inspr 的操作介面。（資料來源：https://goo.gl/in0YHt ） 目前許多介面設計師的工具以Sketch為主。Sketch與Adobe Illustrator相似，兩者皆 以向量繪圖為主，但Sketch捨棄了Adobe Illustrator中為滿足印刷輸出須求的功能，轉為以 介面設計師作為主要的目標族群，並且提出了許多便捷行動介面設計的功能，如： ● 在介面設計中許多重複出現的要素可利用Symbol、Shared Style來統一管理以達成一 致性。 ● 對於物件與物件之間的距離有清楚的標示、拖曳圖層至作業系統的資料夾可將該圖層 進行輸出且可設定不同的輸出規格，以上兩點對於後續進入正式開發時相當進行介面 製作相當重要。 ● 擁有眾多使設計更為便利的外掛功能。如：自動產生假文、假圖或假使用者名稱等 等。 除了以上的付費軟體，亦有許多如Google文件及其提供的Wireframe樣板等免費的網 路設計工具。設計師可至Google文件範本庫中將Wireframe Templates建立副本於自己的 Google帳號之中，但其提供的元件樣式相當有限。
小結 上述的案例探討可依其適用之階段以及支援互動與否進行分類（下表）。可發現影像 聯結式工具根據輸入內容的不同，在其他視覺設計工具的輔助下可支援整個設計流程，如： 產出低擬真原型的POP仍需要拍攝紙面原型，否則沒有構成介面的紙面原型，POP並無法 獨立產生可供受測者辨識的圖像。因此，影像聯結式工具建立可互動原型相當快速，但仍須 由其他設計工具產生的圖像作為基礎，因此整體時間未必較元件產生式工具快速。 表3 各工具之類別及其所產生之原型擬真度（本研究整理） 元件產生式的原型設計工具雖可直接以元件庫建構頁面，但大多為高擬真元件，不適 合運用在設計概念尚不清晰的設計初期。Cacoo以及Balsamiq雖可利用低擬真元件進行畫面 建構，但工具的操作上仍有許多限制，像是Balsamiq無法編輯超過一個畫面的內容、不提供 行動裝置用之轉場效果等，故使用低擬真工具後仍須轉移到高擬真原型工具上。
根據上述案例探討可發現，為滿足階段的重點須使用不同的工具，在階段轉換時設計 師需要進行工具轉換，同時間也將造成介面重新建置的問題。因此如何幫助設計師完成各階 段的設計重點，並且減少設計成本，順暢地由Lo-Fi逐步發展至Hi-fi階段，為本研究之目標。
● 線稿式設計工具
本研究由專家訪談中得知，行動App設計師在進行高創新性發想時，常以手繪為主要 工具，快速將概念繪製於紙面或白板，並藉由不斷繪製、修正的過程將設計概念逐步具體呈 現。但以手繪完成概念的速寫後，不可避免的仍然需要進入數位工具完成數位原型的建置， 因此本節將探討保留手繪的優點，且將其操作方式移植至數位工具的相關研究。 SILK 圖23 Landay指出SILK可支援介面設計的所有階段。 （Landay & Myers, 1995）Landay在SILK（Landay & Myers, 1995）的研究中亦表示使用者介面設計師在構思 初期常以手繪繪製介面雛形，手繪速度極佳，但所產生的靜態畫面有不易進行調整、重複使 用以及進行使用者測試的問題。為了延續設計師在紙面原型上手繪圖形，並且保持修改的彈 性，Landay提出以Mac（Macintosh）平台為主的視窗應用程式原型設計工具「SILK」；設 計師可藉由繪圖筆繪製線稿圖形的方式產生對應的元件，而SILK也會以圖形之間的空間及 組合判斷最有可能的元件類型，如：波浪線段為文字，若在該線段左側新增一圓型，則兩者 將被視為一Radio Button。倘若該線段被一圓形圈起，則兩者將被SILK視為一個Button（圖 24）。
從研究結果得知設計師對於SILK核心概念——以手繪線稿產生元件的操作行為—— 抱持正面評價。其中，以Storyboard進行頁面的連結，成功將紙面原型繪製時的習慣延續至 數位工具之中。但SILK仍然有許多可改進以及發展的部分，例如：SILK會根據線稿之間的 關聯性而改變元生成的元件類型，SILK中多數的圖形由基本的波浪線段搭配圓形、矩形組 成，因此若設計師繪製Checkbox後再於其右側繪製Textfield，線稿中會有部分的元素重複 使用，該狀況將會影響判讀。再者，當時的演算法僅支援一筆劃的辨識且對應之元件較少， 故以線稿式設計原型之概念於今日仍有許多不同面向可供後人深入探討。
圖24 SILK可辨識的線稿以及對應元件（Landay & Myers, 1995）
圖25 以SILK繪製的應用程式介面。
（Landay & Myers, 1995） 圖26 將圖25經由SILK Transformation Process所產生的應用程式介面。
UISKEI
同樣地，UISKEI（Segura, Barbosa, & Simões, 2012a）認為根據使用者回饋來不斷 精練設計，是建立流暢的使用介面相當重要的方法：在原型設計的初期，以畫筆繪製的方式 有助於快速探索各種不同的可能，並使設計師專注於建立架構而繪製精細的元件。因此 UISKEI將迭代的過程分為三階段，分別為：1）介面建置、2）行為定義、3）原型評估。
圖27 UISKEI可根據長寬比的不同來產生對應元件，並可於繪製好的Button上以類似的操作模式作為線稿圖樣，
進行第二次的繪製以產生該元件。（Segura, Barbosa, & Simões, 2012a）
因此以使用觸控筆進行操作的UISKEI不僅可透過線稿繪製快速產生八種元件以及六 種主要圖形，並且藉由所繪製之線／持稿大小不同產出不同的元件，如：小矩形是 Checkbox，大矩形則是Panel。此外更可以第二階段的線稿圖樣編輯，來達到切換元件類型 的效果，以及透過邏輯判斷的陳述式自定義操作元件的行為（ Event 、Condition 、 Action,，ECA ）。由於UISKEI著重於快速生成元件以及建立行為邏輯，且強調在設計初期 並不需要進行細部的形式設定，因此僅能使用系統預設之元件，對於設計後期需要進行樣式 調整時的支援稍顯不足，故僅能支持高擬真原型的階段，但受測設計師們仍然對UISKEI結 合筆與線稿的應用抱持正面評價。
小結 由前述研究可得知，設計師普遍可接受手繪圖形產生對應之數位元件之操作模式，但 需要記憶的圖像太多時，容易造成記憶負擔。SILK利用四種基本線稿來進行組合以代表不 同的元件，線稿之間以空間關係判斷，因此在限定空間的狀況下容易產生誤判。設計師為了 避免誤判產生可能需要花費更多心力在繪製圖形上，因此可能導致使用者體驗大幅下降。而 UISKEI雖可不考慮圖樣間的空間關係，於已產生的元件上進行二次繪製來產生與父元件相 關的子元件，二次繪製的操作方式確實能夠改善圖形誤判的狀況。UISKEI中繪製Button後 可於其上進行第二次繪製，二次繪製所產生的元件，如：DropDown、SpinBox以及TextBox （圖23）皆與Button有形象或名稱上的相似之處，以便於設計師聯想，故此本研究將前者稱 之為父元件，後者為子元件。然而桌上型網頁、行動App之常用元件庫中有許多元件並無法 形成此關聯性且數量眾多，因此如何擴充以及記憶、使用，仍然是一個尚待研究的課題。 基於以上線稿工具在各個原型設計階段的研究，本研究專注於改善線稿生成元件的使 用體驗，並且以繪製出的線稿長寬比例、位置以及面積作為判斷依據，提出最佳元件以及其 他建議元件之建議，使設計師能夠快速的建構原型，並將低擬真原型至高擬真原型的設計過 程作更流暢的整合。
● 介面設計庫
模式（Pattern）最初的概念源自於建築師Alexander, C.（Alexander, 1978），其對 於Pattern的定義為：在一特定情境之下，對於一個問題的解決方法。此概念於1990年代由 Erich Gamma引入至計算機科學中。軟體工程中的設計模式（Design Pattern）意指：針對 軟體設計中普遍存在或反覆出現的問題所提出的解決方案。此概念也逐漸由初始的程式設計 開始擴散至介面設計、互動設計等領域，而形成各種互動設計模式（Interaction Design Pattern）。本研究於初步研究中分析設計師的紙面原型發現：設計師利用特定的符號代表某些流 程，如：頭像代表會員資料、放大鏡是搜尋功能、購物車則代表一連串的結帳流程。上述符 號在行動App使用者中已形成共識，使用者可藉由圖像快速理解代表的功能。此概念即為行 動應用程式介面設計模式（Mobile UI design pattern）。而設計師在設計行動App的原型時 亦會利用各種UI design pattern作為參考。為提升設計師於原型設計過程之體驗，本節將探 討目前常見的設計模式庫（Design pattern library）做為系統設計之參考。
Yahoo Design Pattern Library
Yahoo Design Pattern Library（“Yahoo design pattern library,” n.d.）中的Pattern藉 由一般的設計流程產生後經評估方可進入Pattern library之中。設計研究員與設計師會共同 合作，在問題產生的特定情境之下進行測試以及設計的迭代，確立該UI Design Pattern需具 備的四項要素：標題、問題、情境以及使用方法。當該Pattern成熟後且評估具備普遍性， 則提交進入Pattern library之中供設計師們查閱，而設計研究小組也會定期審查Pattern library中的Pattern並且提出改進建議，因此Yahoo Design Pattern Library是一個因使用行為 改變而不斷更新的模式庫。於Yahoo所提供的模式庫列表當中可發現：即使主題相同，多數 Pattern library都使用不同的名稱來分類，因此設計師在尋找可用Pattern時會花費不少時 間。
Mobile Design Pattern Gallery
Theresa Neil在Mobile Design Pattern Gallery（Neil, 2014）一書中匯集了iOS、 Android以及Windows Phone三大平台的UI Design Pattern，並且將其分類為十大類，以及 一類反模式。書中將類似的Pattern分類後進行討論，其分類僅呈現使用流程中的單一頁面 ，非完整的使用流程（圖29）。藉由此書中蒐集整理的Pattern Library，新手設計師得以學 習並引用至行動App原型設計中，確保產生俱備一定程度可用性與易學性之行動App；而資 深設計師則可透過引用Pattern Library來加速設計的產出，或者激發出新的設計模式。
圖29 Mobile Design Pattern Gallery中Springboard模式的比較圖（Neil, 2014）
UXPin
由UXPin團隊推出的電子書Mobile UI Design Patterns（Bank & Zuberi, 2014）則納 入了基本的手勢及動畫作為THE INTERACTIVE IMPERATIVE分類，再者為傳達使用者動 作的 GETTING INPUT分類，進入至整個行動裝置App的NAVIGATION分類，最終則是產生 回饋的SOCIAL分類，以及顯示資料的 DATA & CONTENT MANAGEMENT分類。每一 Pattern皆概述問題以及使用方法，然此方法對於新手設計師雖可迅速理解該模式之設計概 念，但其文字編排方式較Yahoo Design Pattern Library不易搜尋可用資訊。
圖30 Mobile UI Design Patterns 中以四個不同的App來呈現Social Login模式。（Bank & Zuberi, 2014）
Damask
Damask（Lin & Landay, 2008b）是一款以筆畫進行PC、手機兩種裝置的跨裝置App 原型設計工具，設計師只需對其一進行以筆觸的方式進行原型設計，Damask會同時對另一 裝置產生相同的設計，設計完成後可進入「Run window 」進行測試。Damask提供了90個 模式供設計師使用，每一模式都包含了：名稱、背景、圖像、問題、解決方案，並且提供了 相關模式的顯示。假若設計師正在進行商業網站介面之設計而欲使用「CLEAN PRODUCT DETAILS」模式（圖31），只需進入模式瀏覽器中選取所需的模式名稱，並將其拖曳放置 於畫面之中，Damask則會將該模式就地貼上，供設計師進行後續編輯調整。 在使用者測試中，雖然Damask提供了高達90組模式，且尋找模式所花費的時間約佔 整體時間的16%，但使用模式瀏覽器的受測者相較於未使用的使用者，在完成跨裝置設計之 完成時間縮短20%。可得知在設計工具中提供模式庫，可有效減輕設計師的負擔，若可提升 選擇的效率則效果將更為顯著。
圖31 Damask的使用者需要由左側列出之模式中選取欲使用之模式，邊將其處發元漸由右側中間的指示列拖曳至 畫面當中。（Lin & Landay, 2008b）
小結
根據上述關於介面設計模式之文獻及研究，可得知在設計時引入介面設計模式確實可 有效的提升設計效率，但須考量以下兩點：模式需具備其簡潔、明瞭之樣式及架構，對初學 者產生學習之效，以及保留後續延伸設計之彈性。再者，介面設計模式庫會隨著介面的演進 而進行調整，如何精準的在模式庫中搜尋所需為一重要課題。
3.系統設計
行動App為了提供良好的使用者介面體驗，開發時需要不斷地利用原型進行測試來探 索以及確認使用者的真實需求，獲得使用者的回饋後再評估如何修正原型設計，因此若可提 升原型建置的速度方可加速Iterative Design Process的循環，因此本研究由原型建置的體驗 開始。 由初步訪談得知，設計師於時間有限的狀況下傾向使用紙筆來建構原型，其考量在於 ：1）手繪建構速度較數位工具快、2）不精確的手繪原型有助於發想、3）多功能的數位工 具易導致思考中斷及分心。此時設計師除了繪製概略的線段、矩形代表元件，亦會利用在行 動App設計中，利用具備一定共識的圖示代表特定流程，如：利用購物車的圖示代表該圖示 點擊後會展開一連串結帳流程，但不繪製後續流程，僅以此圖替代。以紙面原型確認架構及 核心概念後，則進入中後期數位原型製作階段，逐一補足缺漏流程，如前述之購物結帳流程 ，以便與開發團隊進行討論以及使用者測試。 在設計初期，設計師傾向將時間花費於確認核心概念，在行動App介面設計中常見的 模式則利用圖示代表；設計後期，則逐一將紙面原型展示的核心功能轉為數位原型，並建立 紙面原型中圖示所代表的流程，然而行動App需要相當數量的頁面才能呈現服務整體，因此 後者的數量可能相當可觀。 本研究為確認筆畫產生元件之可行性，以Xketch的概念版本Xketch ver.0進行驗證。 在原型設計階段，設計師可以透過畫筆指令來產生元件，利用畫筆指令的位置（Position） 與外框尺寸（Bounding Size）決定元件生成的位置與大小，並透過屬性（Property）、行 為（Action）、類型（Type）列表來設定元件以及設定頁面之間的互動行為；當原型設計完 成後也可直接發佈給受測者直接進行測試；在測試階段系統會同步紀錄受測者的操作過程及 放聲思考（Think-aloud）的口述資料。
除了設計師最常見的線段、矩形圖樣外，Xketch ver.0亦觀察到許多在紙面原型上繪 製較為麻煩的元件，如：清單列表、地圖、多欄選擇器等等，設計師會利用文字描述說明。 為了延續此心智模式，Xketch ver.0以元件之英文字首作為生成該元件的筆劃指令，如：Ｍ 可生成地圖、Ｔ可生成表格清單等等。 圖32 Xketch ver.0之操作介面。以繪製線段或圖樣來產生行動應用程式常使用的元件。（本研究整理） 第一版的Xketch ver.0著重於畫筆指令。以畫筆指令產生對應元件後，可於 Storyboard中編輯互動行為及檢視原型使用流程。受測者普遍認為整體操作簡單易學，亦表 示需要記憶的圖像以五個左右為佳，而實驗的觀察結果顯示：在設計初期利用Xketch ver.0 以紙面原型的操作模式產出Hi-fi元件，易使受測者在初期過度關注元件樣式設定。然而設計 是一個漸進式的過程，設計初期應著重的是架構及流程的規劃而非視覺樣式的細節調整，因 此如何以手繪的操作模式進行數位原型設計，並且支援整個前期設計流程仍然有許多可探討 的地方。 為了讓行動app開發人員更方便地製作app原型，本研究以iPad作為主要裝置，並以 線稿筆畫做為主要輸入方式，以設計師在手繪時思考模式為核心提出「Xketch＋」，提升設 計師設計原型時的使用體驗。Xketch核心價值在於：將行動App原型設計以擬真度區分為兩 階段，並且利用元間可編輯的屬性數量，形成不同擬真度，使設計師於設計初期可更專注於
結構及流程設計，並進行低擬真原型測試。確認低擬真原型之可行性後，可於相同工具中轉 換為高擬真模式，降低工具轉換之成本，加速迭代循環。為使設計師能夠有效率的設計原型 ，本研究提出一筆劃與元件之判斷規則，以及元件與行動介面設計模式（Mobile UI Design Pattern）的對應關係，降低原型建置的時間成本，為設計師爭取更多時間設計核心功能之 介面，提升原型設計之體驗。
3.1
系統及介面
根據初步研究及文獻探討可得知設計師慣用紙筆及線段、矩形進行原型繪製，並認為 以畫筆產生元件相當直覺易懂的設計，因此本研究基於Xketch的設計概念：藉由線段、矩 形、部分元件的字首為筆畫基礎，將iOS官方提供的使用者介面設計規範（HIG, Human-Interface Guideline）為元件產生規則，對筆劃所產生的元件進一步分類，讓設計師 可於iPad上以筆畫產生元件的互動模式，設計iPhone行動應用程式的原型。 本研究之原型系統Xketch的檔案結構由大至小為：呈現所有專案的專案列表頁面、每 一專案下有呈現所有頁面的Storyboard，於Storyboard點擊頁面後則進入該頁的編輯頁面 （圖32）。Xketch擬以上述專案結構之由上而下（Top-down）的基礎，以具備指向性的轉 場動畫，如：Slide以及圖標（icon）所提供的預設用途（Affordance），使設計師初次使用 即可流暢的理解互動模，建構使用Xketch的心智模式，降低初次使用的學習門檻。 圖33 Xketch+系統架構圖。（本研究整理）圖34 Xketch+專案列表頁面。以左側加號新增專案。（本研究整理）
圖35 Xketch的Storyboard頁面。
顯示該專案中所有的頁面及其流程，並可利用右上的Menu icon編修專案資訊，以左側加號新增頁面。 （本研究整理）
圖36 Xketch 編輯頁面。中間為畫筆指令繪製區，當指令繪製後，左側的工具區將出現該元件可編輯之屬性、可 操作之功能。右側是預設為收合狀態的圖層列表。（本研究整理） Xketch的編輯頁面包含四個主要的區域，分別為： ● 上方的導覽控制列 由左至右功能依序為：返回 Storyboard、頁面名稱、新增頁面、開啟iPhone 模擬遮罩、進行原型測試、擬真轉換。此區域的控制項多屬對整個專案進行調整，故 一併放置於上方，與下方的頁面編輯區域有所區隔。 ● 左側的工具列 元件產生後，系統會工具列上方顯示可編輯之屬性，點擊後則以工具列下方則 顯示通用的編輯功能，如：複製、貼上、刪除元件等。 ● 中間的繪製區 繪製區分別為：可供暫存、繪製使用的灰色背景區域，以及放置實際內容的白 色顯示區域，兩者皆可進行繪製，但原型測試時僅呈現顯示區域。 ● 右側的圖層列表 顯示畫面中所有元件的垂直關係，可利用右上角的群組圖示將元件進行群組或 者解散群組。圖層列表中分為浮動圖層（Floating layer）以及固定圖層（Fixed layer
）（圖37）。浮動圖層內的元件顧名思義，該元件將浮於內容之上，不論固定圖層的 內容如何垂直捲動，都將保持在螢幕的相對位置，常見的此類元件有：Navigation bar、Tab bar以及Material design guidelines中的Floating Action Button；固定圖層 即為內容圖層，當內容超過一個畫面可顯示的高度時即可垂直滾動。 圖37 Xketch右側工具列與圖層。（本研究整理）
3.2
擬真度轉換
原型設計依據擬真度可分為三個階段，然而本研究由專家訪談發現：設計行動App在 第一個階段，設計師會以白板或紙筆繪製核心頁面進行討論，而非完整流程。確認核心功能 後，隨即進入第二階段——可點擊線稿框（Clickable Wireframe）的製作，為呈現該階段重 點核心概念與操作流程，設計師將以數位工具繪製完整的App流程，作為團隊溝通及使用者 測試的基礎。Clickable Wireframe經過多次迭代完成架構及流程確認後，設計師將以其為基 礎添加視覺設計元素，形成Hi-fi原型進行使用者測試，持續迭代原型直至設計成熟後交付開 發。訪談設計師表示：相較於後兩階段的必要性以及人力考量，紙筆繪製的階段，可能依App屬性不同而選擇性進行，若App屬於已相當成熟的服務，如購物App，紙筆繪製的階段 甚至可完全省略。 由上述過程可得知，App原型設計必然會經歷的兩個階段，分別為確認結構、流程以 及確認視覺及整體效果（圖38），然而為避免工具轉換所造成的成本，設計師們常在設計初 期即選用Hi-fi設計工具進行Lo-fi原型，以順利銜接設計流程。Hi-fi設計工具為滿足高擬真需 求，具備大量可調整的屬性，在設計初期使用易導致設計師分心，這點在Xketch的使用者研 究中同樣獲得證實。 圖38 行動App設計流程。（本研究整裡） 為使Xketch滿足不同階段的需求，本研究將使用Xketch設計行動App的流程分為兩階 段：首先為確定結構及流程的Lo-fi階段，該階段之產出即為Lo-fi原型，及以前者為基礎，添 加視覺設計及互動的Hi-fi階段，產出則為Hi-fi原型。根據第二章文獻探討可得知行動App原 型由介面及互動效果構成，互動效果在各階段的呈現差別較小，因此介面的擬真程度是造成 Lo-fi與Hi-fi原型差異的主要原因。本研究於Xketch中限制元件樣式屬性在不同階段的可編輯 數量，使設計師在Lo-fi階段可避免過多樣式屬性而導致分心，並可利用Xketch中的「擬真度 轉換」功能直接進入Hi-fi階段，避免工具轉換增加時間成本。
● Lo-fi階段 本研究將元件屬性分為視覺樣式屬性、資訊結構屬性兩類別。視覺樣式屬性包 含：文字顏色、背景顏色、邊框樣式、字體等等屬性；資訊結構屬性為：文字內容、 該元件可觸發之設計模式、連結頁面、轉場效果等。前者強調元件所呈現的視覺效果 ，而後者則是以內容為主。 App原型設計由Lo-fi階段開始，該階段重點在於確立App的結構以及流程。為 協助設計師能夠專心於結構與流程，本研究將元件的視覺樣式屬性在Lo-fi時進行限縮 ，如：按鈕元件在Lo-fi模式下僅可編輯按鈕文字、灰階背景色（圖39）。避免顯示過 多不必要的屬性，如：彩色的背景顏色、文字顏色、字體選擇等。 圖39 Xketch於Lo-fi模式下的按鈕（Button）可編輯屬性。上圖僅展開與Hi-fi模式不同處。
● Hi-fi階段 Lo-fi原型經過數次迭代，確認結構及流程可行性後，可利用「擬真度模式」切 換進入Hi-fi階段。進入Hi-fi階段後，所有元件將提供完整的屬性供編輯，如：在Lo-fi 模式下無法變更的：背景顏色、背景圖片、文字顏色、字體選擇、邊框粗細皆可進行 編輯（圖40）。藉此轉換，讓設計師在設計App原型避免工具轉換造成的額外成本。 圖40 Xketch於Hi-fi模式下的按鈕（Button）可編輯屬性。上圖僅展開與Lo-fi模式不同。
圖41 相同的登入頁面在Xketch的Lo-fi模式（左）與Hi-fi模式（右）的樣式差異。
3.3
筆劃指令
為了能正確辨識筆畫指令所代表的圖樣，本研究擬用Vatavu提出的$P Point-Cloud Recognizer作為圖樣辨識的依據。$P能提供二維手勢的辨識以及適用於快速原型設計，在 不限制使用者繪製筆畫的方向與數量的情況下，只要預先建立好圖樣的路徑座標（Point Cloud）資料庫即可提供良好的辨識率。(Vatavu, Anthony, & Wobbrock, 2012)圖 42 不同繪製圖樣的方式轉換為Point Cloud （資料來源：Vatavu et al., 2012）
本研究從先前的初步研究中觀察發現，設計師習慣利用線條與矩形的圖樣代表元件， 對於這兩個圖樣的記憶負擔也非常小。因此，本研究擬用線條（Line）與矩形（Rectangle ）的圖樣作為基礎進行擴增。為了擴增筆畫所代表的元件數量，延續設計師於紙面原型上的
思考模式，本研究僅使用線段與矩形兩種筆勢做為筆畫基礎，除依圖樣位置來產生 Navigation bar以及Tab bar外，將線段、矩形所產生的元件重新定義。
經專家訪談，本研究以線段作為單行文字（Label）、水平線（Horizontal line）、滑 動條（Slider）的辨識圖樣。增加以矩形的長高比、筆畫高度與螢幕解析度高度比例為判斷 條件，使設計師以矩行的形象進行聯想，更直覺的產生出對應的元件，提高固定筆劃圖樣所 能產生的元件數量。根據第二章第二節行動介面設計模式之觀察，本研究提出以下以矩行畫 筆判斷規則：１）矩形圖樣的長高比是否為１、２）矩形圖樣高度是否小於螢幕解析度三分 之一。依以上條件，Xketch＋系統將有以下表四種組合： 表4 筆畫判斷結果及其元件對照表 矩形高度 > 螢幕解析度高度三分之一 矩形高度 < 螢幕解析度高度三分之一 矩形 長高比=1 元件推薦序三：元件推薦順序：圖片 （預設）、形狀、多行文字、文字輸 入框、按鈕。 元件推薦序一：圖片（預設）、按 鈕、多行文字、形狀、文字輸入框。 矩形 長高比≠1 a. b. 元件推薦序三：元件推薦順序：圖片 （預設）、形狀、多行文字、文字輸 入框、按鈕。 元件推薦序二：按鈕（預設）、文字 輸入框、多行文字、圖片、形狀。
根據以上的筆劃位置推測設計師欲使用之元件，本研究提出以下三種元件推薦列表：
1. 元件推薦序一：
● 元件推薦順序：圖片（預設）、按鈕、多行文字、形狀、文字輸入框。 ● 由上表圖示可推測滿足「矩形高度 < 螢幕解析度三分之一」且「矩形長高比
=1」條件多以圖片、按鈕為主，如Theresa Neil在Mobile Design Pattern Gallery（Neil, 2014）所歸納的Springboard模式。 2. 元件推薦序二 ● 元件推薦順序：按鈕（預設）、文字輸入框、多行文字、圖片、形狀。 ● 因智慧型手機的外型，多數行動介面採取單欄的方式垂直顯示資訊，因此許多 操作元件皆以長高比大於一地矩形顯示（上表之圖a），而長高比小於一的矩 行於使用較少，若有使用則多為圖片等，故以此規則歸納為元件推薦序二。 3. 元件推薦序三 ● 元件推薦順序：圖片（預設）、形狀、多行文字、文字輸入框、按鈕。 ● 此推薦序之重點在於：因滿足「矩形高度 > 螢幕解析度三分之一」表示於畫面 中所佔面積相當大，故不論長高比例為何，皆優先認定為圖片，按鈕則放置最 後。 依據以上規則及元件推薦序，當設計師於Xketch的編輯頁面繪製矩形時，系統將依照 該矩形的判斷規則，將圖樣轉換為該推薦序的第一個元件，並避開元件本身的樣式編輯捷徑 （Shortcut），將元件推薦序列於左側供設計師變更使用（圖43）。
圖43 按鈕之元件推薦序。（本研究整理）
3.4
模式庫
App原型設計是一個逐步建構的過程，數個元件構成頁面，數個頁面構成流程，數個 流程構成功能，最終形成完整的App。為了提升原型設計的體驗，有許多元件產生式設計工 具提供元件庫，供拖曳元件快速建構頁面。文獻探討中的介面設計模式庫，則是提供了建構 頁面的參考。Damask的研究則是進一步將此頁面佈局，甚至是使用流程導入至設計工具中 ，設計師可以利用此更快速的完成原型設計，但也面臨設計模式數量龐大，如何使設計師精 準找到所需模式的問題。 本研究於文獻探討以及專家訪談發現：除線段、矩形外，設計師亦常繪製已具備共識 的符號代表某些流程，因此僅繪製重點功能的頁面即可建立App的整體印象，進入數位原型 製作後方逐步繪製後續頁面。為降低設計師於登入流程、搜尋等常用介面、流程的設計時間 ，將可利用於迭代核心設計的時間最大化，本研究將行動介面設計模式（Pattern）導入 Xketch中，並延續上一節以筆畫圖樣產生元件之設計，擬利用元件針對可能的Pattern進行 一次篩選，將較不可能的選項刪除，給予設計師符合該元件使用情境的Pattern供使用。為實驗以上概念之可行性，本研究以「利用Pattern建構一常見購物消費、內容型行 動App」為基準選擇十個Pattern作為第一版本測試使用。此十個Pattern可分為四類：
● 流程類：sign in, checkout, capture, search. ● 導覽類：side bar, scope bar, swipe content. ● 列表類：collection, waterfall. ● 控制項類：picker. 介面設計模式會不斷改變，為了更直覺且有效率的提取使用，Xketch擬以觸發元件分 類Pattern並引用。以登入（Sign in）Pattern為例：當設計師於Xketch中的編輯區域繪製一 矩形，並將其設定為按鈕後，左側的工具列將顯示各種按鈕可編輯之屬性，以及按鈕可觸發 的Pattern（圖44）。在Pattern選擇畫面中，設計師可預覽使用該Pattern後的效果並引用。 當引用登入此Pattern後，系統將產生七頁的登入流程，其中包含：登入頁面、加入會員頁 面、忘記密碼等等，各頁面中的元件皆與設計師手會產生的元件相同，且皆為最低樣式，故 能以此為基礎，修改至符合設計所需。 圖44 Button元件可觸發之Pattern列表（本研究整理） 行動App中常出現的列表型資料，在原型設計時常以繪製一個項目後大量複製，然而 設計師常需以相同資料格式嘗試不同版面配置，以達到最佳使用體驗，但以複製的方式來呈
現列表資料有不易更改版型的問題。因此本研究針對列表資料以形狀（shape）觸發的 collection pattern（圖45）改善列表資料的設計體驗，使設計師能利用collection pattern提 供之佈局作為基礎，修改列表中單一項目的格式（圖46），於編輯結束後同步collection中 的所有項目，以達到編修一次即可完成列表中所有項目的佈局變更。 以App Store介面為參考，使用Xketch可以筆畫快速繪製元件完成類似的原型設計， 但仍無法提供App Store中常使用的左右、垂直滾動效果。引入Pattern的Xketch可使用較少 的筆劃即可產生相同的原型設計，並且達到左右、垂直滾動效果，故設計師能以較有效率的 方式產生原型，進入測試階段，加速迭代過程（圖47）。 圖45 垂直及水平的Collection pattern。（本研究整理）
圖46 Collection pattern的編輯模式。（本研究整理）
a. App Store b. 以Xketch繪製App Store c. 以Xketch繪製App Store
3.5
原型測試階段
當於Xketch上完成專案設計之後可以在iPad上直接測試原型，亦或者是匯出至手機上 測試；設計師也可在設計完一個頁面後直接模擬該頁面，不一定要等到專案完成才能模擬， 以幫助設計師確認對元件的操作想像。然而，為了因應不同時期對原型的樣式需求，Xketch 可以在專案設定中選擇元件樣式是Lo-fi或Hi-fi模式（圖41），讓設計師可以快速切換原型樣 式進行使用者測試。當使用者在手機上使用原型時，手機將會同步記錄使用者的操作行為並 且錄音，測試完畢後會將資料上傳至雲端與專案同步，作為後續分析階段的參考。3.6
資料分析階段
一般而言，當使用者測試階段結束後，團隊會根據觀察者的紙本筆記與拍攝的影像做 進一步的討論與分析，但是要將紙本筆記與影像連結起來往往會耗費許多時間，也不是很方 便與原型的版本控制進行整合。然而，本研究希望透過Xketch除了可以設計原型、測試，也 希望能幫助到整合記錄的部分。因此，Xketch將透過時間軸的方式依序重現受測者的操作行 為與聲音，並提供一個團隊討論的平台，可以針對不同版號的原型與使用者操作行為進行研 究，讓每一位團隊成員都能表達看法進行討論，創造更好的團隊合作體驗。圖48 選擇原型版本並重現某位受測者的操作資訊進行觀察與討論。（本研究整理）
4.未來發展
本研究所提出之線稿式原型設計工具讓設計師快速完成各種擬真程度之原型，然而目 前版本著重在迭代設計流程中的原型設計階段，測試與分析階段仍有許多待開發之功能，例 如測試時自動記錄操作過程、分析時自動摘要使用動線不流暢的點等。在筆劃辨識部分，目 前採用 $P辨識引擎，一次只能辨識一個物件，未來擬採用MyScript之Handwriting
Recognition APIs進行連續書寫之辨識，讓原型繪製過程更為流暢。行動 app開發團隊常需 要協同合作，擴展多人協同運作之功能也會是一大發展方向，例如團隊在smart tv共用編輯 storyboard，或是在原型製作完成後自動產出需求文件，供設計師與開發人員進行後續整合 工作，這些皆能協助開發團隊做更有效的合作。
成果自評
1. 研究並分析行動app開發時之設計發展流程，以及專業團隊常使用之原型設計工具。 2. 綜覧各類原型設計工具並依操作方式來分類，探討其適用之原型階段。 3. 設計並完成一套以「筆畫指令」為基礎之原型設計工具，未來擬上架至 app store供 行動app開發團隊使用。 4. 研究成果發表一篇Poster於台灣人機互動研討會 (Taichi2016)。 5. 研究其間指導學生參加多項國內外競賽，取得各項佳績如下：● 2016 SIGCHI Student Game Competition Award 美國計算機協會人機互動國 際會議 學生遊戲設計競賽冠軍
● 2015 Red Dot Design Award 國際紅點設計大賽新銳設計獎
參考文獻
[1] Alexander, C. 1978. The timeless way of building
. Oxford University Press, USA.
[2] App stores growth accelerates in 2014: 2015.
http://blog.appfigures.com/app-stores-growth-accelerates-in-2014/
. Accessed:
2016-10-21.
[3] Bank, C. and Zuberi, W. 2014. Mobile UI Design Patterns
. UXPin.
[4] Design better and faster with rapid Prototyping – smashing magazine: 2010.
https://www.smashingmagazine.com/2010/06/design-better-faster-with-rapid-prototypi ng/
. Accessed: 2016-09-30.
[5] Engelberg, D. and Seffah, A. 2002. A framework for rapid mid-fidelity Prototyping of
web sites. Usability
. Springer Science + Business Media. 203–215.
[6] IPad Apps, iPhone Apps, deals and discovery at App shopper - popular recent
changes for iOS/: 2015. http://appshopper.com/
[7] Landay, J.A. and Myers, B.A. 1995. Interactive sketching for the early stages of user
interface design. Proceedings of the SIGCHI conference on Human factors in
computing systems - CHI ’95
. (1995).
[8] Lin, J. and Landay, J.A. 2008. Employing patterns and layers for early-stage design
and prototyping of cross-device user interfaces. (Jun. 2008), 1313–1322.
[9] Lin, J. and Landay, J.A. 2008. Employing patterns and layers for early-stage design
and prototyping of cross-device user interfaces. Proceeding of the twenty-sixth
annual CHI conference on Human factors in computing systems - CHI ’08
. (2008).
[10] Neil, T. 2014. Mobile design pattern gallery: Ui patterns for mobile applications
.
O’Reilly Media, Inc, Usa.
[11] Rettig, M. 1994. Prototyping for tiny fingers. Communications of the ACM
. 37, 4 (Apr.
1994), 21–27.
[12] Rudd, J., Stern, K. and Isensee, S. 1996. Low vs. High-fidelity prototyping debate.
interactions
. 3, 1 (Feb. 1996), 76–85.
[13] Segura, V.C.V.B., Barbosa, S.D.J. and Simões, F.P. 2012. UISKEI. Proceedings of
the International Working Conference on Advanced Visual Interfaces - AVI ’12
.
(2012).
[14] Segura, V.C.V.B., Barbosa, S.D.J. and Simões, F.P. 2012. UISKEI: A Sketch-based
Prototyping Tool for Defining and Evaluating User Interface Behavior. Proceedings of
the International Working Conference on Advanced Visual Interfaces - AVI ’12
.
(2012).
[15] Snyder, C.A. 2003. Paper Prototyping: The fast and easy way to design and refine
user interfaces
. Morgan Kaufmann Publishers In.
[16] Wireframes vs. Prototypes: What’s the difference? 2014.
http://sixrevisions.com/user-experience-ux/wireframes-vs-prototypes-difference/
.
Accessed: 2016-10-01.
[17] Yahoo design pattern library: https://developer.yahoo.com/ypatterns/
. Accessed:
2016-10-11.
[18] Vatavu, R.-D., Anthony, L. and Wobbrock, J.O. 2012. Gestures as point clouds.
Proceedings of the 14th ACM international conference on Multimodal interaction - ICMI ’12.
