Xketch+以線稿式原型設計工具加速行動應用程式之設計流程 - 政大學術集成

全文

(1)國立政治大學數位內容碩士學位學程 Master's Program in Digital Contents and Technologies National Chengchi University. 碩士論文 Master’s Thesis. Xketch+以線稿式原型設計工具加速行動應用程式之設計流程 Xketch+: Accelerating Mobile App Design Process by Using a Sketch-Based Prototyping Tool. 研究生：利淑惠撰指導教授：余能豪博士陳百齡博士. 中華民國一〇六年八月 August 2017.

(2) 摘要使用者體驗在行動應用 app 開發中扮演相當重要的角色。欲達到較佳的使用者體驗，設計師常利用原型進行測試以收集使用者回饋，並根據回饋改善原型再進行多次測試，反覆更迭的過程稱之為迭代設計。本創作分析整理迭代設計流程中設計師常用之工具，發現從低擬真至高擬真之原型發展階段雖有不同的工具，卻需要設計師花費許多時間在軟體操作上，無法讓設計師流暢且快速地將腦中思考的設計繪製為數位版本，再者，各階段所使用之工具彼此並不相容，設計師也需耗費額外的成本轉換各階段的產出。本創作提出一套提升原型建置速度，促進迭代過程的線稿式原型設計工具「Xketch+」。在原型設計階段，設計師可利用紙面原型的繪製經驗，以繪製筆劃指令生成元件並設定頁面、元件間的互動行為。此外，本創作導入行動介面設計模式，設計師能利用已具備共識的之介面設計模式做為範本，進行自定義修改，滿足設計任務，快速完成原型製作，儘早進入測試及修正的流程，提升原型迭代速度，設計出更符合使用者需求的行動應用程式。. 關鍵詞：行動應用程式、原型製作、開發工具、線稿式設計、迭代設計、介面設計模式、使用者經驗. i.

(3) 目錄摘要. i. 目錄. ii. 表目錄. vi. 圖目錄. vii. 第一章. 緒論 .......................................................................................................... 1. 第一節. 創作背景 .................................................................................................... 1. 第二節. 原型（Prototypes） ................................................................................... 2. 低擬真原型（Low-fidelity Prototype, Lo-fi Prototype） ....................................... 3 中擬真原型（Mid-fidelity Prototype, Mi-fi Prototype） ....................................... 4 高擬真原型（High-fidelity Prototype, Hi-fi Prototype） ...................................... 5 第三節. 先期專家訪談 ............................................................................................ 8. 第四節. 創作目的 .................................................................................................. 13. 第⼆章. 相關案例探討 ........................................................................................ 15. 第一節. 元件產生式原型設計工具 ....................................................................... 15. Balsamiq ................................................................................................................ 15 Axure RP、Cacoo ................................................................................................. 17 Blueprint ................................................................................................................ 18 Proto.io, UXPin ...................................................................................................... 19 小結 ....................................................................................................................... 20 第二節. 影像聯結式原型設計工具 ....................................................................... 21. 介面設計工具 ....................................................................................................... 21 POP ........................................................................................................................ 23 Concept.ly, inVision ............................................................................................... 24. ii.

(4) Flinto ...................................................................................................................... 25 Adobe Experience Design ...................................................................................... 25 小結 ....................................................................................................................... 26 第三節. 線稿式設計工具 ....................................................................................... 27. SILK ...................................................................................................................... 28 UISKEI .................................................................................................................. 30 Xketch .................................................................................................................... 31 小結 ....................................................................................................................... 32 第四節. 介面設計庫 .............................................................................................. 34. Yahoo Design Pattern Library ................................................................................ 34 Mobile Design Pattern Gallery .............................................................................. 35 UXPin .................................................................................................................... 36 Damask .................................................................................................................. 37 小結 ....................................................................................................................... 38. 第三章. Xketch+ .................................................................................................... 39. 第一節. 概念說明 .................................................................................................. 39. 第二節. 系統及介面 .............................................................................................. 41. 第二節. 擬真度轉換 .............................................................................................. 44. Lo-fi 階段 .............................................................................................................. 46 Hi-fi 階段 ............................................................................................................... 47 第三節. 筆劃指令 .................................................................................................. 49. 基礎元件 ............................................................................................................... 49 複合元件（一）表格 ............................................................................................ 57 複合元件（二）地圖 ............................................................................................ 60. iii.

(5) 複合元件（三）彈出控制項 ................................................................................ 62 自定義彈出視窗（Custom Pop View） ....................................................................... 62 操作列表（Action Sheet） ........................................................................................... 63 通知（Alert） ................................................................................................................ 64 選擇器（Picker） .......................................................................................................... 65. 第四節. 模式庫 ...................................................................................................... 67. 流程模式（Flow Pattern） ................................................................................... 68 導覽模式（Navigation Pattern） .......................................................................... 72 列表模式（List Pattern） ..................................................................................... 73 第五節. 第四章. 小結 .......................................................................................................... 76. 結論與討論 ............................................................................................ 77. 第一節. 設計建議 .................................................................................................. 77. 筆劃與元件連結性 ................................................................................................ 78 筆劃擴充 ............................................................................................................... 79 具備方向性的筆劃辨識 ................................................................................................ 79 繪製簡易圖標 ................................................................................................................ 80 刪除筆劃 ........................................................................................................................ 80. 第二節. 限制 .......................................................................................................... 82. 元件及樣式 ........................................................................................................... 82 筆畫彈性 ............................................................................................................... 83 第三節. 未來展望 .................................................................................................. 84. 流程模式的增刪與分享 ........................................................................................ 84 測試與分析 ........................................................................................................... 84 自由手繪 ............................................................................................................... 85. iv.

(6) 參考⽂獻 86. v.

(7) 表目錄表格 1. 三種原型比較表........................................................................................ 6. 表格 2. 圖形與其代表的功能或元件.................................................................. 10. 表格 3. 表格左側資訊區常見元件佈局及 Xketch+的對應筆劃 ....................... 59. vi.

(8) 圖目錄圖 1. 以紙筆繪製的低擬真紙面原型 ................................................................... 3. 圖 2 . 進行紙面原型使用者測試時的人員配置.................................................... 4. 圖 3 . 以 Balsamiq 設計的 Mi-fi 原型 .................................................................... 5. 圖 4 . 由 inVision 製作的高擬真原型 .................................................................... 6. 圖 5 . 受訪設計師參考 Pinterest 上的設計資源 ................................................... 9. 圖 6 . 受訪設計師在白板上手繪行動 app 介面 .................................................. 9. 圖 7 . 受訪設計師完成的紙面原型設計................................................................ 9. 圖 8 . 線稿式工具與元件、圖層式工具構思比較圖.......................................... 11. 圖 9 . Balsamiq 手繪樣式元件庫 ......................................................................... 16. 圖 10 Balsamiq 提供 Sketch Skin 以及Ｗireframe Skin ...................................... 17 圖 11 . Axure RP 之使用介面................................................................................. 17. 圖 12. Cacoo 繪製 iOS app 時的使用介面及其元件庫 ....................................... 17. 圖 13 Blueprint 編輯畫面 ..................................................................................... 18 圖 14 Blueprint Storyboard.................................................................................... 18 圖 15 Proto.io 藉由拖曳閃電符號至其他頁面以建立連結 ................................ 19 圖 16 UXPin 不同擬真度的整頁樣板 ................................................................. 20 vii.

(9) 圖 17. Inspr 的操作介面 ........................................................................................ 22. 圖 18. POP 的使用示意 ......................................................................................... 24. 圖 19. inVision 的評論模式 ................................................................................... 24. 圖 20. Concept.ly 的編輯界面 ............................................................................... 24. 圖 21. Flinto 操作介面 ........................................................................................... 25. 圖 22. Adobe XD 中的 Repeat Grid ...................................................................... 26. 圖 23. 行動 app 原型開發各階段支援工具 .......................................................... 27. 圖 24. SILK 可支援介面設計的階段 ..................................................................... 28. 圖 25. SILK 可辨識的線稿以及對應元件（Landay & Myers, 1995） .............. 29. 圖 26. SILK 繪製的應用程式介面........................................................................ 30. 圖 27. 將圖 26 經由 SILK Transformation Process 所產生的應用程式介面 ...... 30. 圖 28. UISKEI 的圖形以及對應元件 ................................................................... 31. 圖 29. Xketch 之操作介面 ..................................................................................... 32. 圖 30. Yahoo Design Pattern Library ....................................................................... 35. 圖 31. Mobile Design Pattern Gallery 中 Springboard 模式的比較圖 ................... 36. 圖 32. Mobile UI Design Patterns 的 Social Login 模式......................................... 37. 圖 33. Damask 的模式選擇畫面 ............................................................................. 38 viii.

(10) 圖 34. Xketch+頁面流程架構 .................................................................................. 41. 圖 35. Xketch+專案列表頁面 .................................................................................. 42. 圖 36. Xketch+ Storyboard 頁面 .............................................................................. 42. 圖 37. Xketch+編輯頁面 .......................................................................................... 42. 圖 38. Xketch+左側工具列與右側的圖層 .............................................................. 44. 圖 39. 應用程式開發階段及頁面數量 ................................................................... 45. 圖 40. Xketch+於 Lo-fi 模式下的按鈕（Button）可編輯屬性 ............................. 47. 圖 41. Xketch+於 Lo-fi 模式下的按鈕（Button）可編輯屬性 ........................... 48. 圖 42. Xketch+的 Lo-fi 模式（左）與 Hi-fi 模式（右）的樣式差異 ................ 48. 圖 43. 預設元件及備選清單示意.......................................................................... 50. 圖 44. 分析按鈕與裝置螢幕之高度比.................................................................. 50. 圖 45. 高度大於一單位之寬矩形及其規則.......................................................... 51. 圖 46. 高度小於一單位之寬矩形及其規則.......................................................... 52. 圖 47. 高度大於一單位之高矩形及其規則.......................................................... 53. 圖 48. 高度大於一單位之高矩形及其規則.......................................................... 54. 圖 49. 高度大於一單位之正方形及其規則.......................................................... 55. 圖 50. 高度小於一單位之正方形及其規則.......................................................... 56 ix.

(11) 圖 51. 重複清單繪製流程概念.............................................................................. 58. 圖 52. 不重複清單繪製流程概念.......................................................................... 58. 圖 53 表格右側顯示元件及控制項元件 ................................................................. 60 圖 54 表格右側的控制項元件 ................................................................................. 60 圖 55 複合元件地圖的初始狀態 ............................................................................. 61 圖 56 複合元件地圖的編輯模式 ............................................................................. 61 圖 57 Action 中的轉頁動畫、彈出控制項 ............................................................. 62 圖 58 自定義彈出視窗繪製內容示意 ..................................................................... 63 圖 59 以繪製線段增加 iOS action sheet 的項目 .................................................... 63 圖 60 通知顯示的筆劃規則 ..................................................................................... 65 圖 61 選擇器（Picker）及元件筆劃規則 .............................................................. 66 圖 62. 元件初次設定流程...................................................................................... 69. 圖 63 依照元件的文字欄位提醒是否使用相關 pattern......................................... 69 圖 64 Xketch+提供的 capture pattern 流程示意 ...................................................... 70 圖 65 Xketch+提供的 Checkout pattern 示意 .......................................................... 71 圖 66 引用 side bar 的菜單圖標以及 side bar 編輯器............................................ 72 圖 67 Swipe container 四種不同的指示器 .............................................................. 73 x.

(12) 圖 68 Swipe container 的編輯模式 ......................................................................... 73 圖 69 垂直及水平的 collection ................................................................................ 74 圖 70 編輯 collection item 的寬高 ........................................................................... 75 圖 71 於台灣邀請設計師使用時的主要觀察筆劃 ................................................. 77 圖 72 Xketch+參與 DIS 2017 ................................................................................... 78 圖 73 設計師於網頁版本的繪製情形 ..................................................................... 79 圖 74 塗銷紙面原型 ................................................................................................. 81. xi.

(13) 第一章. 緒論. 第一節創作背景. 當各大頂尖公司喊出行動優先（Mobile First）的口號時，行動應用程式 app 數量正以相當快的速度增加中，行動應用程式（以下簡稱 app）相較於桌上型電腦應用程式，行動裝置具備的螢幕較小、網路連線以及使用時間碎片化等特性， Apple App Store 的 app 數量由 2010 年的 15 萬至 2014 年成長至 110 萬（Ariel, 2015），2015 年更已達 200 萬 app（appShopper, 2015），在六年間 app 數量成長 13.3 倍。，也因此提供相似服務的 app 太多，良好的使用者體驗成為 app 成功與否的重要關鍵。一個 app 的產出可大致分為前期的設計階段，以及後期的程式開發階段，期間會有許多不同角色的成員加入，如：互動設計師、視覺設計師、使用者研究員、開發工程師、專案經理甚至是行銷人員等等，各自皆有其領域之專業語言。為了整合不同領域之意見來創造具備優良使用者體驗的 app，在正式開發前的設計階段，設計師常利用各種工具建置大量原型（Prototype）以建立團隊共識，降低溝通磨合所耗費的時間。此外，也會利用原型反覆進行測試、分析使用者行為，逐步確認使用者的真實需求。藉由儘早修正使用者反應不佳的原型設計，也可避免在進入程式開發階段大幅度變更設計，導致提高開發成本。此利用原型進行測試與修正的循環，即為人機互動（Human Computer Interaction）領域中常用的設計方法——迭代設計（Iterative Design Process）。. 1.

(14) 由上述的開發過程中，可將迭代設計分為三個階段：設計原型（Prototyping）、測試原型（Testing）與分析結果（Analyzing）。IDEO 的 CEO Tim Brown 所提出的設計思考（Design Thinking）亦強調：藉由實地動手製作原型的過程來學習，可在早期時間與開發成本投入較少的情況下及早失敗，做出相對應的修正。相較於以往瀑布流的設計開發方式，基於原型迭代的設計過程，更能促進跨領域團隊的合作，透過不同觀點的討論，也更容易激發出許多創新的可能，提升 app 的使用體驗。. 第二節. 原型（Prototypes）. 迭代設計是藉由測試原型進行不斷的修正設計，以達到提升設計的品質的目的以及趨近使用者的真實需求的設計方法。Cerejo（Cerejo, 2010）以及 Engelberg 等人（Engelberg & Seffah, 2002）皆指出依照原型與成品的擬真程度，可分為低擬真原型（Low-fidelity Prototype, Lo-fi Prototype）、中擬真原型（Mid-fidelity Prototype, Mi-fi Prototype ）以及高擬真原型（ High-fidelity Prototype, Hi-fi Prototype）。為了深入了解設計師在介面設計不同階段的設計須求，以下逐一探討不同擬真度原型之特性。. 2.

(15) 低擬真原型（Low-fidelity Prototype, Lo-fi Prototype）. 圖 1. 以紙筆繪製的低擬真紙面原型. （本創作整理）. Snyder（Snyder, 2003）指出由於紙筆的便利性，在設計使用者介面時最常見的 Lo-fi 原型即為紙面原型，是一快速產生以便做為討論基礎的原型。設計師常選擇易於取得且操作簡便的紙筆作為媒材，將較高階的設計概念繪製成初步的使用介面。也由於在此階段著重快速建置以便討論、測試主要功能，繪製內容以簡單的線稿為主，故紙面原型仍然屬於較為粗略、省略細節的樣貌，但已有大致上的結構及雛形，可藉此做初步的設計方向確認。由於在紙面上傳達的資訊有限，因此以紙面原型進行溝通時，設計師需要進行大量的說明。紙面原型的仰賴人員操作，若以紙面原型進行使用者測試時，需安派較多 3.

(16) 的人力來分別擔任主持人、觀察者、電腦角色（圖 2）——由一人演繹電腦的角色來根據使用者對紙面原型的行為，做出相對應的反應，如：使用者點擊紙面原型上的按鈕後，更換至該按鈕所連結的下一頁。為盡可能捕捉真實的使用者反應，擔任電腦的人員須利用多次的練習來保持對紙面原型使用流程的熟悉度。. 圖 2 進行紙面原型使用者測試時的人員配置（Rettig, 1994）. 中擬真原型（Mid-fidelity Prototype, 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 原型主要功能在於確立應呈現予使用者的資訊架構、使用流程，因此在 Lofi 原型中以矩形表示的圖片增加清楚的圖片內容標示，文字亦由線段示意改為真. 4.

(17) 實情境的文字來顯示內容。 Mi-fi 原型雖已標示重要說明文字，但視覺上仍屬於概略的樣式，並無法完全傳達最終產品的視覺效果及感受，其視覺外觀及互動效果可稱之為可點擊式線框稿（Clickable Wireframe）（Treder, 2014）。Mi-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 原型可同時測試受測者對於資訊架構、視覺設計的喜好程度，藉由數位工具的特性可完整紀錄使用者操作過程。. 5.

(18) 圖 4 由 inVision 製作的高擬真原型（資料來源：https://goo.gl/TiSdw3 ）. 表格 1. 類型主要型態目的. 低擬真原型紙面原型. 支援工具. 中擬真原型數位原型. 快速驗證不同的概念確認結構及完整並且確立設計方向使用流程 l l. 特性. 三種原型比較表. l. 使用門檻低 l 低成本，工具取 l 得容易使用者測試成本高. 紙筆、白板、POP. 中等成本使用者測試成本較低. Cacoo, Balsamiq. 高擬真原型數位原型結合資訊及視覺設計以提供完整的使用者體驗進行使用者測試 l 完整的使用者體驗 l 受測者可自行操作 l 適合進行易用性測試 l 製作及修改成本較高 l 測試重點不明確且易受到視覺設計影響 Adobe Experience Design, Axure RP, Blueprint, Proto.io, UXPin. 從上表可發現，三種原型各自有其不同目的，也有不同的原型設計工具支援（本創作將於第二章的的文獻與案例探討中進行更深入的介紹）。Cerejo 於 2010 年的研究提及：需要依照不同的設計需求來選擇類別，並無一定的標準，如：針對視覺需求較低但著重操作及使用流程的醫藥相關產業，可能利用白板來繪製原. 6.

(19) 型即可有效溝通；對於視覺效果要求較高、需直接面大眾的零售業，高擬真原型才能傳達視覺風格及互動方式的交互效果。. 7.

(20) 第三節. 先期專家訪談. 為了瞭解設計師在製作 app 原型時選擇工具要素以及製作時的習慣，本創作邀請了兩位有 app 設計經驗的設計師，分別為三年經驗的資深介面設計師及十年經驗的資訊架構師，深入其工作場域進行了訪談與觀察。訪談的進行方式如下： 1.. 請設計師說明所在機構的行動 app 設計流程、與團隊溝通的狀況以及本身的設計習慣及常用工具。. 2.. 請受訪設計師在三十分鐘內完成一行動購物 app 的原型設計。. 3.. 請設計師說明該原型設計重點。本創作從訪談及觀察中得知設計師在得知 app 主題，會先進行類似 app 的調查，理解該類型 app 可能的功能以便確立建立工作清單（Functional Map）做為原型的架構。當完成工作清單的條列後，則會利用各種設計資源，如：Pinterest、 Behance 等等尋找常見的頁面佈局（圖 5），並以手繪方式建構原型。兩位設計師在進行原型設計的任務當中，一致選擇了手繪作為主要的原型設計方式，並且認為：雖後續仍會進入各種慣用工具進行數位原型的設計，但若要快速建置可討論的原型，手繪仍為首選。. 8.

(21) 圖 5 受訪設計師參考 Pinterest 上的設計資源. 圖 6 受訪設計師在白板上手繪行動 app 介面. 圖 7 受訪設計師完成的紙面原型設計. 設計師在繪製過程初期會先利用許多意義不明確的線段、矩形，大致區分出介面佈局後，再以其他顏色標註該線稿意義為何（圖 7）。除了利用簡單的線段代表文字、矩形表示圖片外，本創作觀察到設計師會繪製較精細的圖示，以代表特定的操作行為，如：以推車的圖示代表購物 app 中的購物車功能，或以人像表示會員資料等等。完成手繪介面設計後，設計師將依照專案需求的不同，選擇不同的數位工具設計數位原型。. 9.

(22) 表格 2. 線稿類別線段. 圖形與其代表的功能或元件. 線稿樣式. 代表元件或功能文字. 、. 分隔線段按鈕、圖片矩形圖片. 會員資料特殊圖形. 購物車及其後結帳流程搜尋功能. 十年經驗的資深設計師表示：「如果要設計的流程沒有其他可參考的 app，那就一定會從手繪介面開始，因為手繪比較快速而且對於討論跟建構都比較方便。若是已經很成熟的 app 或者服務則不會從手繪開始，可能會直接進行線稿（wireframe）的設計。」另一位設計師表示：手繪的方式有助於梳理設計脈絡，一旦進入數位工具，則元件的擺放位置、樣式都會相當明確。數位工具的優點在於刪除、複製都較手繪便利，但手繪的過程也是構思的過程，甚至當設計師擦去手繪介面這樣反覆而單一的動作時，仍然在進行下一步思考。本創作進一步探討設計師的手繪的過程，該動作可分為三個階段：構思概念、產生物件、刪除物件。設計師先在腦中構思欲繪製的種類、位置、尺寸及外觀，因為畫筆繪製後較數位物件不易修改的特性，同時間亦考量該物件與其他物件之 10.

(23) 相對應關係，完成構思後方執行極為短暫的繪製過程。若有修改的需求，設計師則會於上述構思的過程同時擦除物件，完成後即可進行下一階段的繪製（圖 8）。. 圖 8 線稿式工具與元件、圖層式工具構思比較圖. 元件式數位工具為了能夠將設計師的思緒逐一轉換為實際的操作指令，因此產生了使用數位工具的五個階段：構思概念、選擇工具、產生物件、調整物件、刪除物件。設計師先在腦中構思欲繪製的物件種類、位置、尺寸及外觀後，選擇工具產生物件再利用物件的屬性來調整物件大小、位置及外觀等視覺樣式。在建構原型的過程中以手繪或者數位工具來產生物件，兩者的操作方式有相當大的不同（圖 8）。手繪的過程中，在構思階段設計師已完成種類、位置、大小、樣式的構思，因此繪製物件所花費時間佔整體時間較少。若需要重製物件，設計師腦中可同時進行下一階段的概念構思。在使用數位工具的產生物件過程中，系統會依照選擇的工具來產生制式的物件，再藉由物件的屬性來逐步調整成理想的佈局，而期間設計師的思緒將因工具所提供的操作模式而切分成多段，且由構思、繪製、調整或刪除再到構思，數位工具完成一次循環的時間較手繪工具長，因此即使數位工具進行刪除極為簡便，但建構的整體所需時間仍較手繪原型長。故在 11.

(24) 創新性高的發想期間，設計師偏好採取手繪方式進行。因此相較於其他類型的原型設計工具，手繪模式操作的線稿式原型設計工具（Sketch-Based Prototyping Tools）更能順暢銜接構思過程，並將低擬真原型轉換為中、高擬真原型。過去有許多線稿式工具如：提供 Mac 平台視窗應用程式的原型設計工具 SILK（Landay, 1996）、UISKEI（Segura, Barbosa, & Simões, 2012）以及提供行動 app 原型設計工具的 Xketch（徐嘉駿，2014）等等。前述之研究已逐步拓展筆畫產生元件的可能性，但截至目前為止，多數線稿式設計工具所能產生的元件相當有限，且使用者能夠記憶的筆畫數量有限（約為 5 個），因此如何以線稿式工具提升原型設計的使用者體驗仍然有待開發。. 12.

(25) 第四節. 創作目的. 目前設計師在不同階段偏好使用不同類型的工具，使得設計工作碎片化，在專案時間有限的狀況下，相較於設計建構的工作，測試是相對容易被簡化的部份，無形之中限制了迭代次數。而由前三小節的討論中可發現：加速原型迭代可儘早發現錯誤、儘早修正，創造良好使用者體驗的 app，因此如何提升迭代的效率則是 app 原型設計工具的設計重點。本創作提出針對行動 app 原型設計之線稿式設計工具。根據先期專家訪談觀察到設計師在有限時間內，偏好以手繪的方式繪製可供討論的原型。因此本創作根據設計師的習慣以及工作階段銜接的問題，擴充手繪筆劃所能產生的數位元件類型，且利用元件的可編輯屬性達成不同擬真度的轉換，使原型可由低擬真的結構、流程設計順暢銜接至高擬真原型設計。在延續紙面原型的繪製體驗至數位工具的過程中，同時降低工作碎片化，提升原型設計速度，儘早進入迭代過程。因此本創作針對原型設計階段的主要設計方法的如下： l. 銜接粗略到精細的原型迭代過程. 行動 app 原型設計的過程中，設計師常由粗略的概念迭代進入精細的設計，而這過程中常伴隨著工具的轉換，一旦更換工具則不可避免的需要重新建構原型，導致設計工作碎片化。因此本創作為加速行動 app 原型設計流程、減低各階段原型之轉換成本，將數位原型中的中擬真及高擬真階段藉由模式的切換實作於同一工具之中，並探討在行動 app 原型工具的擬真程度轉換時設計師的各階段需求。. 13.

(26) l. 直覺的筆劃與元件之對應規則. 由文獻探討中得知目前以手繪筆劃產生元件，已能滿足設計師從紙面原型轉換為數位原型的需求，但設計師所能記憶的筆劃及對應元件模式有限，故本創作將紙面原型常用的線稿重新設計對應元件，以求更貼近設計師在手繪介面時的繪製習慣。 l. 以行動介面設計模式輔助原型建置. 設計師設計行動 app 原型時，常利用已具備共識之符號代表特定流程，其概念可推演為介面設計模式，故本創作將其導入至原型設計工具中，使設計師能以符號、文字快速引用相關的介面設計模式，完成原型的基礎建置，以便將主要的時間使用在重點設計上，提升原型設計的效率。. 14.

(27) 第二章. 相關案例探討. 由專家訪談可得知，設計師在進行 app 原型設計時可分為三階段，分別為：1) 繪製主要功能流程之紙面原型，進行產品概念測試、2) 使用數位工具建構較完整的可點擊線稿原型（Clickable Wireframe），進行功能流程測試、 3) 製作高擬真原型進行操作細節與使用性測試。數位原型設計工具種類繁多，故本章節將比較各階段原型設計工具碎片化設計流程之狀況，並且探討該工具所支援的階段，及該工具在設計過程中所扮演的角色，以提出對應的改善設計。本章將原型製作工具分成「元件產生式」以及「影像聯結式」兩類，探討在各季過程中，各自所扮演的角色以及重點。. 第一節. 元件產生式原型設計工具. Balsamiq Balsamiq 是一款適用於設計初期，以手繪風格做為元件樣式的可點擊線稿工具，使用者可拖曳上方的元件庫中的元件至畫面中以進行原型設計（圖 9），設定該元件之屬性以及建立頁面連結，因其簡單易學且能夠快速建置圓形進行溝通而廣受設計師甚至是工程師、專案經理喜愛。除了手繪風格的 Sketch Skin 之外， Balsamiq 也提供了較為簡潔的 Wireframe Skin 可供切換（圖 10）。. 15.

(28) Balsamiq 雖元件可供設計師編輯但其屬性相當有限，且多數可編輯之屬性多與內容或功能相關，如：Label 元件的文字屬性、Image 元件的說明文字屬性以及 iOS 中 Switch 元件的開關等等，鮮少與樣式相關的屬性，如：邊框樣式、背景顏色、文字顏色等等。Balsamiq 藉由手繪風格元件以及限定屬性來使使用者更專注於當設計初期應當專注於流程、大致介面佈局等 app 的結構設計，而非進行細節樣式設計。. 圖 9 Balsamiq 手繪樣式元件庫（資料來源：https://goo.gl/lWCRiN ）. 16.

(29) 圖 10. Balsamiq 提供 Sketch Skin 以及Ｗireframe Skin （資料來源：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 基於網頁技術開發，因此除官方提供的元 17.

(30) 件庫外，亦可由 WIDGET LIBRARIES 下載非官方的各種元件來擴充使用；Cacoo 甚至網路商店讓使用者購買社群使用者創作之元件樣式。此類工具適合在 Mi-fi 或 Hi-fi 階段使用。. Blueprint. 圖 14 Blueprint Storyboard （資料來源：https://goo.gl/5NqznH ）. 圖 13 Blueprint 編輯畫面（資料來源：https://goo.gl/5NqznH ）. Blueprint 由 Groosoft 於 2010 年開發，是一款 iPad app 並且專注於 iOS app 原型設計，提供 iOS 的元件庫供設計師拖曳新增至頁面中使用，並可藉由動作（Action）設定對應的事件、行為或與其它頁面進行連結。完成原型設計後可利用專屬的應用程式：Blueprint Viewer 進行原型測試，並且記錄使用者的文字回饋。而 Blueprint 最大的特點在於將所有頁面以及頁面之間的關聯一併於 Storyboard 中展開（圖 14），與設計師進行紙面原型設計時之行為極為接近，有助於釐清設計架構以及確認使用流程，一覽無遺的呈現方式更可以提升團隊間的溝通體驗。此工具適合在 Mi-fi 或 Hi-fi 階段使用。. 18.

(31) Proto.io, UXPin Proto.io 以及 UXPin 為兩款相似的線上原型製作工具，設計師可於網頁端程式以拖曳元件的方式建構應用程式原型，除常見平台使用的元件庫外，甚至提供了相同平台的不同版本，亦支援由其他設計軟體如 Sketch、Adobe Photoshop 匯入檔案至 Proto.io 進行互動編輯，同時兼具影像連結以及元件產生式工具之特性。 Proto.io 為 Division of SNQ Digital 於 2011 年推出的應用程式原型設計工具，與其他原型設計工具不同之處在於：多數原型工具對於轉場動畫鮮少著墨，而 Proto.io 可利用時間軸（Timeline）來設計轉場動畫，可針對轉場動畫做更多細節設定但使用門檻較高，適用於 Hi-fi 階段。完成原型設計後的測試階段，可利用專屬應用程式發佈至行動裝置上供受測者進行測試，同時間系統將以行動裝置的前置鏡頭錄製使用者的操作狀況。. 圖 15. Proto.io 藉由拖曳閃電符號至其他頁面以建立連結（資料來源：https://proto.io/）. 19.

(32) UXPin 的元件庫中也提供了整頁的介面佈局作為樣板，讓設計師以此為基礎進行設計修改，提高原型產出效率，而為了滿足不同設計階段的需求，也針對各個較為普及的裝置或作業系統版本，如：iPhone、Android Lollipop 等設計了 Lofi 元件庫可供選用。由圖 16 的元件比較圖可得知，UXPin 所提供的灰階元件因移除了色彩偏好，讓使用者測試時可專注在資訊架構上，適合 Mi-fi 階段使用。. 圖 16. UXPin 不同擬真度的整頁樣板. 小結元件產生式的原型設計工具雖可不藉由其他工具的輔助來建構頁面，但多數的元件產生式工具都提供了高擬真元件庫，在設計概念尚不清晰的設計初期，使用高擬真元件有礙於發想，容易使設計師傾向調整元件外觀而非進行流程的架構。Cacoo 以及 Balsamiq 雖可利用低擬真元件進行畫面建構，但工具的操作上仍有許多限制，像是 Balsamiq 無法編輯超過一個畫面的內容、不提供行動裝置用之轉場效果等，故使用低擬真工具後仍須轉移到高擬真原型工具，將視覺以及互動設計進行整合等等。. 20.

(33) 第二節. 影像聯結式原型設計工具. 影像聯結式原型設計工具主要功能在於建立連結區域連結、設定轉場動畫等等，不具備介面設計功能，設計師需先利用介面設計工具，或者拍攝紙面原型以取得介面作為原型素材，方能開始建立頁面間的互動。因此影像聯結式原型工具需介面設計工具搭配使用。. 介面設計工具 Adobe 所推出的 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 的工具之一。其操作概念 21.

(34) 與 Adobe Photoshop、Illustrator 相同，利用圖層堆疊以及群組化來建立物件，本身並無「建立頁面與頁面之間的連結」及測試的概念，因此僅能視為視覺設計工具，但由於本身具備產出影像之功能，故仍可作為介面設計工具。Inspr（圖 22）為同樣可在行動裝置上設計介面的視覺設計工具，讓設計師可直接在 iPhone 或 iPad 以拖曳元件來產生高擬真的行動裝置 app 圖像。由於直接在目標裝置上進行設計，因此可即時呈現、快速修正設計，但正式的工作仍須交給其他專業軟體進行向量繪圖以及圖片輸出。. 圖 17 Inspr 的操作介面（圖片來源：：https://goo.gl/in0YHt）. 近期許多介面設計師選擇以 Sketch 作為介面設計的主要工具。Sketch 與 Adobe Illustrator 相似，兩者皆以向量繪圖為主，但 Sketch 捨棄了 Adobe Illustrator 中為滿足印刷輸出需求的功能，轉為以介面設計師作為主要的目標族群，並且提出了許多便捷行動介面設計的功能，如： l. 在介面設計中許多重複出現的要素可利用 Symbol、Shared Style 來統一管理以達成一致性。. l. 對於物件與物件之間的距離有清楚的標示、拖曳圖層至作業系統的資料夾可將該圖層進行輸出且可設定不同的輸出規格，以上兩點對於後續進入正式開發時相當進行介面製作相當重要。 22.

(35) l. 擁有眾多使設計更有效率的外掛功能。如：自動產生假文、假圖或假使用者名稱等等。. 除了以上的付費軟體，亦有許多如 Google 文件及其提供的 Wireframe 樣板等免費的網路設計工具。設計師可至 Google 文件範本庫中將 Wireframe Templates 建立副本於自己的 Google 帳號之中，但其提供的元件樣式相當有限。取得介面圖檔後，設計師即可將圖檔匯入影像聯結式工具中，開始建立頁面之間的連結以及測試。. POP POP 是一款可將紙面原型轉化為數位原型的行動 app。設計師藉由輸入圖片或拍攝紙面原型並設定圖片上的點擊觸發區域、前往頁面以及轉場動畫，進而形成可直接於行動裝置上進行實機模擬，當點擊錯誤時也會通知受測者該頁面可點擊及的區域，使受測者即使沒有旁人指引也可進行測試。. 23.

(36) 圖 18 POP 的使用示意（資料來原：https://goo.gl/X0MeR ）. Concept.ly, inVision Concept.ly 以及 inVision 則是使用網頁在線上匯入圖片、設定觸發區域、目標頁面以及轉場動畫的線上服務，內容須由其他工具繪製，本身無法進行版面設計。完成原型後可邀請團隊成員以網頁或者行動裝置進行測試以及線上給予回饋、進行討論。經過設計、測試、討論後將會進入修改設計的階段，設計師可利用 Dropbox 同步電腦、手機中的特定檔案或者照片，Concept.ly、inVision 便可直接讀取 Dropbox 中指定之檔案，故此避免設計師在迭代過程中頻繁反覆匯入之問題，而原型迭代的過程中 Concept.ly 也會協助記錄迭代的版本。. 圖 19 inVision 的評論模式團隊成員或使用者可點擊畫面任一點留下評論，其他人看到後可持續回應以便團隊討論。（資料來源：https://goo.gl/kshtyr）. 圖 20 Concept.ly 的編輯界面藍色區塊為設計師設定的可點擊範圍。（資料來源：https://goo.gl/MUZ0lS）. 24.

(37) Flinto 多數的原型工具提供的轉場動畫為作業系統提供的 Push、Pull 等等，而 Flinto 除了具備影像聯結式工具的匯入圖片、設定連結、轉場動畫等基本要素，其最重要之特點在於利用狀態轉換來達成設計轉場動畫（Screen Transitions）：設計師只需完成起始畫面（Start）以及結束畫面（End）物件的位置，當進行轉場時系統會將起始畫面之物件移動至結束畫面之位置，藉此達成動畫效果，而動畫的加減速則可利用「Timing」進行調整，故不需設定時間軸或撰寫程式也能製作出與系統預設不同的效果。. 圖 21 Flinto 操作介面（資料來源：https://goo.gl/Ja8K91）. Adobe Experience Design 為了能夠對介面設計有較佳的支援性，Adobe 於 2016 年推出 Adobe Experience Design（Adobe XD），並且整合 Adobe 設計主力工具 Adobe Illustrator、Adobe Photoshop 甚至是 Sketch，進行可互動原型的製作。因此即使 Adobe XD 中已提供了相當的圖形設計工具，但仍然歸類於影像聯結式原型設 25.

(38) 計工具。以往的 Adobe 工具較少觸及行動裝置開發，Adobe XD 推出後可謂之最後一塊拼圖，完整了以 Adobe 系列軟體進行行動裝置設計的旅程。Adobe XD 與其他原型設計工具最大的差異是以重複網格（Repeat Grid）解決在製作 app 時出現比例相當高的列表資訊：設計師可以選取任意元件並且開啟 Repeat Grid 後即可以拖曳控制棒的方式來以水平或垂直方向新增相同的元件（圖 21）。. 圖 22 Adobe XD 中的 Repeat Grid （圖片來源：https://goo.gl/8WP1JZ）. 小結上述的案例探討可依其適用之階段進行分類（圖 23），可發現影像聯結式工具可迅速產生互動原型，但仍須由其他設計工具產生的圖像作為基礎，因此整體時間未必較元件產生式工具快速。. 26.

(39) 圖 23. 行動 app 原型開發各階段支援工具. 在行動 app 的設計過程中皆有其階段重點以及適合的工具，Cerejo（Cerejo, 2010）認為工具的選擇重點有以下三點：1）是否容易學習以及使用、2）是否具備可重複使用的樣板、元件、3）是否容易分享以及協同工作。多數數位設計工具皆可滿足後兩項，因此數位工具的易學性、易用性則變成首要考量。然而，根據上述案例探討可發現，為滿足階段的重點須使用不同的工具，在階段轉換時設計師需要進行工具轉換，同時間也將造成介面重新建置的問題。因此如何使設計師完成各階段的設計重點，並且順利銜接階段為本創作之目標。. 第三節. 線稿式設計工具. 即使在設計後期選用不同的數位工具，受訪設計師皆表示設計初期仍以偏 27.

(40) 好手繪，故本章節首先將探討以手繪筆劃線稿產生元件之相關設計，以及筆劃及元件之間的對應關係。其次於觀察設計師的設計流程中，發現設計師常利用現有介面設計模式來提升設計效率以及易用性，因此本章第二節則歸納整理行動 app 常用之介面設計模式，探討如何利用介面設計模式庫（UI Design Library）以及相關案例提升原型設計效率。本創作由訪談中得知，行動 app 設計師在進行高創新性發想時，常以手繪為主要工具，快速將概念繪製於紙面或白板，並藉由不斷繪製、修正的過程將設計概念逐步具體呈現。但以手繪完成概念的速寫後，不可避免的仍然需要進入數位工具完成數位原型的建置，因此本節將探討保留手繪的優點，且將其操作方式移植至數位工具的相關研究。. SILK. 圖 24 SILK 可支援介面設計的階段（Landay & Myers, 1995）. Landay 在 SILK（Landay & Myers, 1995）的研究中表示使用者介面設計師在構思初期常以手繪繪製介面雛形。手繪的速度極佳，但所產生的靜態畫面有不易進行調整、重複使用以及進行使用者測試的問題。為了延續設計師在紙面原型上手繪圖形，並且保持修改的彈性，Landay 提出以 Mac（Macintosh）平台為主的視窗應用程式原型設計工具「SILK」；設計師可藉由繪圖筆繪製線稿圖形的方式產生對應的元件，而 SILK 也會以圖形之間的空間及組合判斷最有可能的元件類型，如：波浪線段為文字，若在該線段左側新增一圓型，則兩者將被視為一 radio button。倘若該線段被一圓形圈起，則兩者將被 SILK 視為一個 button（圖 25）。 28.

(41) 圖 25. SILK 可辨識的線稿以及對應元件（Landay & Myers, 1995）. 從實驗結果得知設計師對於 SILK 核心概念——以手繪線稿產生元件的操作行為——抱持正面評價。其中，於 Storyboard 對不同頁面中的元件繪製線段進行連結，成功將紙面原型繪製時的習慣延續至數位工具之中。但 SILK 仍然有許多可改進以及發展的部分，例如：SILK 會根據線稿之間的關聯性而改變原生成的元件類型，而 SILK 多數的圖形由基本的波浪線段搭配圓形、矩形組成，因此若設計師繪製 checkbox 後再於其右側繪製 textfield，線稿中會有部分的元素重複使用，該狀況將會影響判讀。再者，當時的演算法僅支援一筆劃的辨識且對應之元件較少，故以線稿式設計原型之概念於今日仍有許多不同的研究面向可供後人深入探討。. 29.

(42) 圖 26. SILK 繪製的應用程式介面（Landay & Myers, 1995）. 圖 27. 將圖 26 經由 SILK Transformation Process 所產生的應用程式介面（Landay & Myers, 1995）. UISKEI 同樣地，UISKEI（Segura, Barbosa, & Simões, 2012a）認為根據使用者回饋來不斷精練設計，是建立流暢的使用介面相當重要的方法：在原型設計的初期，以畫筆繪製的方式有助於快速探索各種不同的可能，並使設計師專注於建立架構而繪製精細的元件。因此 UISKEI 將迭代的過程分為三階段，分別為：1）介面建置、2）行為定義、3）原型評估。. 30.

(43) 圖 28 UISKEI 的圖形以及對應元件（Segura, Barbosa, & Simões, 2012a）. 因此以使用觸控筆進行操作的 UISKEI 不僅可透過線稿繪製快速產生八種網頁元件以及六種主要圖形，並且藉由所繪製之線稿大小不同產出不同的元件，如：小矩形是 checkbox，大矩形則是 panel。此外更可以第二階段的線稿圖樣編輯，來達到切換元件類型的效果，以及透過邏輯判斷的陳述式自定義操作元件的行為（Event、Condition、Action，ECA）。由於 UISKEI 著重於快速生成元件以及建立行為邏輯，強調在設計初期並不需要進行細部的形式設定，因此僅能使用系統預設之元件來支持高擬真原型的階段。即使對於設計後期需要進行樣式調整時的支援稍顯不足，UISKEI 的受測設計師們仍然對其結合筆與線稿的應用抱持正面評價。. Xketch 隨著行動裝置的普及，也開始出現基於行動裝置的線稿式原型設計工具，而 Xketch（徐嘉駿，2014）則是針對能加速設計流程的線稿式。在原型設計階段，設計師可以透過畫筆指令來產生元件，利用畫筆指令的位置（Position）與外框尺寸（Bounding Size）決定元件生成的位置與大小，並透過屬性（Property）、行為（Action）、類型（Type）列表來設定元件以及設定頁面之間的互動行為；當原型設計完成後也可直接發佈給受測者直接進行測試；在測試階段系統會同步紀錄受測者的操作過程及放聲思考（think-aloud）的口述資料。. 31.

(44) 圖 29. Xketch 之操作介面（徐嘉駿，2014）. 除了設計師最常見的線段、矩形圖樣外，Xketch 亦觀察到許多在紙面原型上繪製較為麻煩的元件，如：清單列表、地圖、多欄選擇器等等，設計師會利用文字描述說明。為了延續此心智模式，Xketch 可以元件之英文字首作為生成該元件的筆劃指令，如：Ｍ可生成地圖、Ｔ可生成表格清單等等。此版的 Xketch 著重於原型設計階段，以畫筆指令產生對應元件後，可於 Storyboard 中編輯互動行為及檢視原型使用流程。受測者普遍認為整體操作簡單易學，亦表示需要記憶的圖像以五個左右為佳，而實驗的觀察結果顯示：在設計初期利用 Xketch 以紙面原型的操作模式產出 Hi-fi 元件，易使受測者在初期過度關注元件樣式。然而設計是一個漸進過程，設計初期應著重架構及流程規劃而非調整視覺細節，因此如何以手繪操作模式進行數位原型設計，並且支援整個前期設計流程仍然有許多可探討的地方。. 小結由前述三個研究可得知，設計師普遍可接受手繪圖形產生對應之數位元件. 32.

(45) 之操作模式，但需要記憶的圖像太多時，容易造成記憶負擔。SILK 利用四種基本線稿來進行組合以代表不同的元件，線稿之間以空間關係判斷，因此在限定空間的狀況下容易產生誤判。設計師為了避免誤判產生可能需要花費更多心力在繪製圖形上，因此導致使用者體驗下降。而 UISKEI 雖可不考慮圖樣間的空間關係，於已產生的元件上進行二次繪製來產生與父元件相關的子元件，二次繪製的操作方式確實能夠改善圖形誤判的狀況。UISKEI 中繪製 button 後可於其上進行第二次繪製，二次繪製所產生的元件，如：DropDown、SpinBox 以及 TextBox（圖 28）皆與 button 有形象或名稱上的相似之處，以便於設計師聯想。然而桌上型網頁、行動 app 之常用元件中有許多元件並無法形成此關聯性且數量眾多，因此如和擴充以及記憶、使用，仍然是一個尚待研究的課題。專注於行動 app 原型迭代的 Xketch 則在繪製完成後即生成元件，避免了誤判問題產生，並且依照 iOS 提供的使用介面設計準則（“iOS Human Interface Guidelines: Designing for iOS,” 2014）各種元件的使用方式、限制與關聯，預先將元件群組化以供設計師快速選擇使用，因此即使是資淺設計師也能設計出符合設計準則的介面佈局。受測者反應過多的線稿圖樣將導致記憶上的負擔；且實驗結果顯示：過於高擬真的畫面容易使受測者在設計初期過於專注於元件的視覺樣式調整，而非奠定整個 app 的架構，因此容易混淆設計重點。基於以上線稿工具在各個原型設計階段的研究，本創作擬基於 Xketch 的設計架構進行提升，以改善線稿生成元件的使用體驗，並且提出以繪製出的線稿圖形與螢幕比例及位置作為判斷依據，列出最佳元件以及其他建議元件之建議，使設計師能夠快速的建構符合使用者使用慣性之行動 app 原型，並將低擬真原型至高擬真原型的設計過程作更流暢的整合。. 33.

(46) 第四節. 介面設計庫. 模式（pattern）最初的概念源自於建築師 Alexander, C.（Alexander, 1978），其對於 pattern 的定義為：在一特定情境之下，對於一個問題的解決方法。此概念於 1990 年代由 Erich Gamma 引入至計算機科學中。軟體工程中的設計模式（Design pattern）意指：針對軟體設計中普遍存在或反覆出現的問題所提出的解決方案。此概念也逐漸由初始的程式設計開始擴散至介面設計、互動設計等領域，而形成各種互動設計模式（Interaction 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 之中供 34.

(47) 設計師們查閱，而設計研究小組也會定期審查 pattern library 中的 pattern 並且提出改進建議，因此 Yahoo Design Pattern Library 是一個因使用行為改變而不斷更新的模式庫。於 Yahoo 所提供的模式庫列表當中可發現：即使主題相同，多數 pattern library 都使用不同的名稱來分類，因此設計師在尋找可用 pattern 時會花費不少時間。. 圖 30 Yahoo Design Pattern Library （資料來源：https://goo.gl/YBEQbz）. Mobile Design Pattern Gallery Theresa Neil 在 Mobile Design Pattern Gallery（Neil, 2014）一書中匯集了 iOS、Android 以及 Windows Phone 三大平台的 UI Design pattern，並且將其分類為十大類，以及一類反模式。書中將類似的 Pattern 分類後進行討論，其分類僅呈現使用流程中的單一頁面，非完整的使用流程（圖 31）。藉由此書中蒐集整理的 pattern library，新手設計師得以學習並引用至行動 app 原型設計中，確保產生俱備一定程度可用性與易學性之行動 app；而資深設計師則可透過引用 pattern library 來加速設計的產出，或者激發出新的設計模式。 35.

(48) 圖 31. 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 分類。每一模式皆概述問題以及使用方法，然此方法對於新手設計師雖可迅速理解該模式之設計概念，但其文字編排方式較 Yahoo Design Pattern Library 不易搜尋可用資訊。. 36.

(49) 圖 32. Mobile UI Design Patterns 的 Social Login 模式（Bank & Zuberi, 2014）. Damask Damask（Lin & Landay, 2008b）是一款以筆畫進行 PC、手機兩種裝置的跨裝置 app 原型設計工具，設計師只需對其一進行以筆觸的方式進行原型設計， Damask 會同時對另一裝置產生相同的設計，設計完成後可進入「Run window」進行測試。Damask 提供了 90 個模式供設計師使用，每一模式都包含了：名稱、背景、圖像、問題、解決方案，並且提供了相關模式的顯示。假若設計師正在進行商業網站介面之設計而欲使用「CLEAN PRODUCT DETAILS」模式，只需進入模式瀏覽器（圖 33）中選取所需的模式名稱，並將其拖曳放置於畫面之中，Damask 則會將該模式就地貼上，供設計師進行後續編輯調整。. 37.

(50) 圖 33 Damask 的模式選擇畫面（Lin & Landay, 2008b）. 在使用者測試中，因 Damask 提供了高達 90 組模式，設計師花費逾尋找模式的時間約佔該設計時間的 16%。即使如此，使用模式進行設計的設計師相較於未使用者，仍大幅縮短 20%的設計時間。可得知在設計工具中提供模式庫，可有效減輕設計師的負擔，若可提升選擇的效率則效果將更為顯著。. 小結根據上述關於介面設計模式之文獻及研究，可得知在設計時引入介面設計模式確實可有效的提升設計效率，但須考量以下兩點：模式需具備其簡潔、明瞭之樣式及架構，對初學者產生學習之效，以及保留後續延伸設計之彈性。再者，介面設計模式庫會隨著介面的演進而進行調整，如何精準的在模式庫中搜尋所需為一重要課題。 38.

(51) 第三章. Xketch+. 第一節. 概念說明. 由先期專家訪談得知，設計師於時間有限的狀況下傾向使用紙筆來建構原型，其考量在於：1）手繪建構速度較數位工具快、2）不精確的手繪原型有助於發想、 3）功能豐富的數位工具易導致思考中斷及分心。此時設計師除了繪製概略的線段、矩形代表元件，亦會利用在行動 app 設計中，利用具備一定共識的圖示代表特定流程，如：利用購物車的圖示代表該圖示點擊後會展開一連串結帳流程，但不繪製後續流程，僅以圖示替代。以紙面原型確認架構及核心概念後，則進入中後期數位原型製作階段，逐一補足缺漏流程，如前述之購物結帳流程，以便與開發團隊進行討論以及使用者測試。由上述過程可得知：在設計初期，設計師傾向將時間花費於確認核心概念，在行動 app 介面設計中常見的模式則利用圖示代表；設計後期，則逐一將紙面原型展示的核心功能轉為數位原型，並建立紙面原型中圖示所代表的流程，然而行動 app 需要足夠數量的頁面才能呈現服務整體，因此需建立的頁面數量相當可觀。以 iPad 作為主要裝置的 Xketch 與設計師繪製紙面原型之經驗最為接近，本創作擬將其筆畫及系統為基礎，以設計師在手繪時思考模式為核心提出「Xketch+」，提升設計師設計原型時的使用體驗。Xketch+核心價值在於：將行動 app 原型設計以擬真度區分為兩階段，並且利用元件可編輯的屬性數量，形成不 39.

(52) 同擬真度，使設計師於設計初期可更專注於結構及流程設計，並進行低擬真原型測試。確認低擬真原型之可行性後，可於相同工具中轉換為高擬真模式，降低工具轉換之成本，提升迭代循環的效率。為使設計師能夠有效率的設計原型，本創作提出一筆劃與元件之判斷規則，以及元件與行動介面設計模式（Mobile UI Design Pattern）的對應關係，降低原型建置的時間成本，為設計師爭取更多時間設計核心功能之介面，提升原型設計之體驗。. 40.

(53) 第二節. 系統及介面. 根據專家訪談及文獻探討可得知設計師慣用紙筆及線段、矩形進行原型繪製，並認為以畫筆產生元件相當直覺易懂的設計，因此本創作擬基於 Xketch 的設計概念：藉由線段、矩形、部分元件的字首為筆畫基礎，將 iOS 官方提供的使用者介面設計規範（HIG, Human-Interface Guideline）為元件產生規則，對筆劃所產生的元件進一步分類，讓設計師可於 iPad 上以筆畫產生元件的互動模式，設計 iPhone 行動應用程式的原型。. 圖 34. Xketch+頁面流程架構. 本創作之原型系統 Xketch+的檔案結構由大至小為：呈現所有專案的專案列表頁面、每一專案下有呈現所有頁面的 Storyboard，於 Storyboard 點擊頁面後則進入該頁的編輯頁面（圖 37）。Xketch+擬以上述專案結構之由上而下（Top-down）的基礎，以具備指向性的轉場動畫，如：Slide 以及圖標（icon）所提供的預設用途（Affordance），使設計師初次使用即可流暢的理解互動模，建構使用 Xketch+ 的心智模式，降低初次使用的學習門檻。. 41.

(54) Xketch+專案列表頁面. 圖 35. 圖 36. Xketch+ Storyboard 頁面. 圖 37. Xketch+編輯頁面. Xketch+的編輯頁面包含四個主要的區域，分別為： l. 上方的導覽控制列 42.

(55) 由左至右功能依序為：返回 Storyboard、頁面名稱、新增頁面、開啟 iPhone 模擬遮罩、進行原型測試、擬真轉換。此區域的控制項多屬對整個專案進行調整，故一併放置於上方，與下方的頁面編輯區域有所區隔。 l. 左側的工具列. 選擇元件後，系統會於左側工具列的上半部顯示可編輯之屬性，下半部則顯示通用的編輯功能，如：複製、貼上、刪除元件等。 l. 中間的繪製區. 繪製區分別為：可供暫存、繪製使用的灰色背景區域，以及放置實際內容的白色顯示區域，兩者皆可進行繪製，但原型測試時僅呈現顯示區域。 l. 右側的圖層列表. 顯示畫面中所有元件的垂直關係，可利用右上角的群組圖示將元件進行群組或者解散群組。圖層列表中分為浮動圖層（Floating layer）以及固定圖層（Fixed layer）（圖 36）。浮動圖層內的元件顧名思義，該元件將浮於內容之上，不論固定圖層的內容如何垂直捲動，都將保持在螢幕的相對位置，常見的此類元件有：navigation bar、tab bar 以及 Material design guidelines 中的 floating action button；固定圖層即為內容圖層，當內容超過一個畫面可顯示的高度時即可垂直滾動。. 43.

(56) 圖 38. Xketch+左側工具列與右側的圖層. 第二節. 擬真度轉換. 原型設計依據擬真度可分為三個階段，然而經先期專家訪談後，本創作發現：設計行動 app 在第一個階段，設計師會以白板或紙筆繪製核心頁面進行討論，而非完整流程。確認核心功能後，隨即進入第二階段——clickable wireframe 的製作，為呈現該階段重點核心概念與操作流程，設計師將以數位工具繪製完整的 app 流程，作為團隊溝通及使用者測試的基礎。Clickable wireframe 經過多次迭代完成架構及流程確認後，設計師將以其為基礎添加視覺設計元素，形成 Hi-fi 原型進行使用者測試，持續迭代原型直至設計成熟後交付開發。訪談設計師表示：相較於後兩階段的必要性以及人力考量，紙筆繪製的階段，可能依 app 屬性不同而選擇性進行，若 app 屬於已相當成熟的服務，如. 44.

(57) 購物 app，紙筆繪製的階段甚至可完全省略。從專家訪談得知，行動 app 原型設計主要的兩個階段，分別為確認結構、流程以及確認視覺及整體效果（圖 39），然而為避免工具轉換所造成的成本，設計師們常在設計初期即選用 Hi-fi 設計工具進行 Lo-fi 原型，以順利銜接設計流程。Hi-fi 設計工具為滿足高擬真需求，具備大量可調整的屬性，在設計初期使用易導致設計師分心，這點在 Xketch 的使用者研究中同樣獲得證實。. 圖 39. 應用程式開發階段及頁面數量. 為使 Xketch+滿足行動 app 設計過程中不同階段的需求，本創作擬將使用 Xketch+設計行動 app 的流程分為兩階段：首先為確定結構及流程的 Lo-fi 階段，該階段之產出即為 Lo-fi 原型，及以前者為基礎，添加視覺設計及互動的 Hi-fi 階段，產出則為 Hi-fi 原型。根據第二章文獻探討可得知行動 app 原型由介面及互動效果構成，互動效果在各階段的呈現差別較小，因此介面的擬真程度是造成 Lo-fi 與 Hi-fi 原型差異的主要原因，專家訪談中也表示：在設計行動 app 時，流程及互動是首要任務，次要任務則是視覺設計，而動畫的部分則可能因為各種成本考量下僅酌量使用。 45.

(58) 本創作擬於 Xketch+中限制元件樣式屬性在不同階段的可編輯數量，使設計師在 Lo-fi 階段可避免過多樣式屬性而導致分心，並可利用 Xketch+中的「擬真度轉換」功能直接進入 Hi-fi 階段，避免工具轉換增加時間成本。. Lo-fi 階段本創作將元件屬性分為視覺樣式屬性、資訊結構屬性兩類別。視覺樣式屬性包含：文字顏色、背景顏色、邊框樣式、字體等等屬性；資訊結構屬性為：文字內容、具備指示含義的圖示、該元件可觸發之設計模式、連結頁面、轉場效果等。前者強調元件所呈現的視覺效果，而後者則是以介面顯示內容為主。 App 原型設計由 Lo-fi 階段開始，該階段重點在於確立 app 的結構以及流程。為協助設計師能夠專心於頁面結構與流程設計，本創作擬將元件的視覺樣式屬性在 Lo-fi 階段時進行限縮，於 Lo-fi 階段提供一套僅能編輯資訊結構屬性之行動裝置元件，如：按鈕元件在 Lo-fi 模式下僅可編輯 button 的文字、圖示、可觸發 patterns 以及設定連結（圖 40），隱去所有的視覺樣式屬性，如：彩色的背景顏色、文字顏色、字體選擇等等，而資訊結構屬性中的轉場動畫由於不涉及結構與流程，故一併隱藏。限縮後的視覺樣式則以手繪風格的線條、字形呈現，利用視覺樣式引導設計師、受測者目前正處於「易於變更設計」的階段，保持開放的思考，以便在 Lo-fi 階段進行迭代。. 46.

(59) 圖 40. Xketch+於 Lo-fi 模式下的按鈕（Button）可編輯屬性. Hi-fi 階段 Lo-fi 原型經過數次迭代，確認結構及流程可行性後，可利用「擬真度模式」切換至 Hi-fi 階段。進入 Hi-fi 階段後，所有元件將提供完整的屬性供編輯，如在 Lo-fi 模式下無法變更的：背景顏色、背景圖片、文字顏色、字體選擇、邊框粗細皆可進行編輯（圖 41），藉此轉換，讓設計師在設計 app 原型避免工具轉換造成的額外成本。由於在 Lo-fi 階段已經數次迭代，app 的結構與流程已大致確定，Hi-fi 階段則會專注於樣式的調整，因此左側工具的元件屬性將以視覺樣式屬性優先排列於資訊結構屬性之前，使設計師能快速調用。. 47.

(60) 圖 41. 圖 42. Xketch+於 Lo-fi 模式下的按鈕（Button）可編輯屬性. Xketch+的 Lo-fi 模式（左）與 Hi-fi 模式（右）的樣式差異. 48.

(61) 第三節. 筆劃指令. Xketch 的受測者表示：可記憶的筆劃上限約為五個，超過則可能造成記憶負擔。為了擴增筆畫所代表的元件數量，延續設計師於紙面原型上的思考模式，本創作於 Xketch+中，擬使用線段與矩形兩種圖樣做為筆畫基礎，並將其產生的元件分為兩類：一為構成頁面的最小單位的基礎元件，如：圖片、按鈕、形狀等，二為數個基礎元件構成的複合元件，如：iOS 中的 table view。. 基礎元件專家訪談中，受訪設計師最常以線段及矩形繪製紙面原型。線段主要作為單行文字（Label）、水平線（Horizontal line）、滑動條（Slider）的代表筆劃。而矩形可清楚的框出範圍，因此設計師利用矩形作為許多不同元件的示意，如：按鈕（Button）、圖片（Image）、文字輸入框（TextField）、多行文字（TextView）等等。為達到以最少筆劃產生更多元件，降低設計師記憶負擔，本創作將矩形與線段作為 Xketch+中主要的辨識圖形。當設計師於 Xketch+的編輯畫面繪製線段時，將預設產生單行文字，並且顯示備選清單以快速切換。備選清單即為前述之水平線及滑動條。為便於修正、保持彈性，另加上常用的按鈕（Button）作為線段的元件備選清單。. 49.

(62) 圖 43. 預設元件及備選清單示意. 為區辨矩形所代表的元件，本創作選擇在實際介面中比例較為固定的按鈕作為基準，搜集介面並分析按鈕長高以及螢幕尺寸的比例。以具備 4.7 吋螢幕的 iPhone 6s app 截圖為例（圖 44），經計算 36 張不同 app 截圖後，得出按鈕的高度最大值落於螢幕高度的 12%，物理尺寸則為 125 公釐。所選之介面皆為穩定運作之 app，假設其按鈕尺寸已經使用者確認具備較高易用性，因此此物理尺寸可視為最適大小，轉換後可供其他尺寸裝置使用。本創作選擇 125 公釐作為判斷矩形元件備選清單的依據。. 圖 44. 分析按鈕與裝置螢幕之高度比（本創作整理）. 50.

(63) 根據上述規則，本創作提出以下以矩形畫筆對應元件備選清單之規則：１）矩形筆劃的寬高何者數值較大亦或相等、２）矩形筆劃尺寸是否大於 125 公釐。首先根據矩形筆劃的寬高數值，將有三種矩形產生，分別為：寬矩形、高矩形、正方形，兩條件下將有六種情況。而所對應之元件，本創作選擇 iOS app 設計時最常使用的五種，分別為：圖片（Image）、多行文字（TextView）、文字輸入框（TextField）、幾何圖形（Shape）、按鈕（Button）。以下為五種元件在六種情況下的排序方式： 1.. 寬矩形且高度大於一單位（125 公釐）：. l. 備選清單順序：圖片、多行文字、文字輸入框、幾何圖形。. l. 由於行動裝置的螢幕範圍有限，因此高度過高則排擠其他資訊亦無必要，故此處清單移除按鈕或放置於最後選項。. 圖 45. 高度大於一單位之寬矩形及其規則. 51.

Xketch+以線稿式原型設計工具加速 行動應用程式之設計流程 - 政大學術集成

Xketch+以線稿式原型設計工具加速行動應用程式之設計流程 - 政大學術集成