基於 Xketch 原型工具快速開發單頁互動模式之研究 - 政大學術集成

全文

(1)國立政治大學數位內容碩士學位學程 Master’s Program in Digital Content & Technologies National Chengchi University. 碩士論文 Master’s Thesis. 立. 政治大. ‧ 國. 學. 基於 Xketch 原型工具快速開發單頁互動模式之研究. ‧. A study of creating single-page interactive prototype with Xketch app. n. Ch. er. io. sit. y. Nat. al ＿研究生張智雅. i n U. v. e n g c h i 博士指導教授余能豪 . 陳宜秀. 博士. 中華民國一Ｏ七年七月 July 2018. DOI:10.6814/NCCU201901134.

(2) 致謝在研究生涯的漫漫長路中，有太多必須要感謝的人們，謝謝你們的幫忙與支持我才能走完這一步。我最親愛的家人，謝謝你們願意相信我、溫柔地支持著我，論文寫出來的時候比任何人都還替我開心，能成為你們的女兒和手足是世上無比幸福的事，接下來的日子就讓我好好報恩吧，愛你們唷！ Jones 老師，謝謝您多年來的指導與提點，這過程中也給您添了不少麻煩，很抱歉讓您頭疼了。宜秀老師，謝謝您的開導與建議，永錫老師，謝謝您的鼓勵，三位老師的話語就像海上明燈，總在險象環生的浪中給予指引，對此我充滿感激。. 治政大事總會受到極大的衝擊，謝謝你們教我許多，也很懷念一起和 Obie 學長、奕方、立康平、Jimmy 吃飯喝酒（？）的時光，那是一段我剛進研究室的美好歲月，IUI Ashley、Toby，Xketch 的前輩們，是我最景仰的學長姐，跟在你們身邊做. ‧ 國. 學. 的前輩們真的很了不起，使我以身為 IUI 的一份子為榮。. IUI 的後輩們也很可愛，鈺佳、謙耘，我最寶貝的學妹們，能和你們一起在. ‧. 實驗室一起真好，謝謝你們兩個的陪伴療癒了姊姊的心靈～. 念到研究所，最珍貴的就是我有一段極為開心的碩一生活，建傑、竣丰、漢. Nat. sit. y. 寧、佳妤、老大、曦曦、小戈，DCT7 的大家，能和你們一起做專案成長、一起. er. io. 為了友情與愛情煩惱，一起籌備所上活動、系窩跨年、畢業旅行、出國玩耍，一起做了只有同儕才能做的事，謝謝你們讓我抓住了青春的尾巴，有留下了美好的. al. n. 印記真是太好了。. Ch. engchi. i n U. v. 特別感謝，DCT 的大美女家長 Fish 助教！！！妳總是笑口常開又可靠，有遇上這麼好這麼好的系辦姊姊，是我覺得政大最溫暖的地方。特別感謝，竣丰，要不是有你的鼎力相助，我是不可能在 DIS 完成任務的，請容小女子一跪拜感謝！特別感謝，郭丹，我的中央好夥伴、政大好學弟，多虧有你的神救援與鼓勵，這段研究生涯總算走到了終點，謝謝有你。特別感謝，巧翊，我的國中好姐妹、政大好麻吉，總是拿美食誘惑我畢業，不爭氣的我又讓你多存了一年的錢，能升級成極致饗宴大餐嗎？特別感謝，僑駿，我的生活好監督，謝謝你的陪伴與鞭策，未來一起加油。最後，我想謝謝我自己，就算是跌倒了也沒有放棄，願你能將此視為起點，抱著感謝的心情努力成長，永遠不要放棄成為更好的自己，加油！ I. DOI:10.6814/NCCU201901134.

(3) 摘要單頁互動在行動介面中是一種常見的手法，為求有效地運用有限的空間，次要功能及資訊會待至使用時機才顯現，採用單頁互動同時可見背景內容，一來有助於使用者掌握當前位置，二來操作結束後即回到當前內容繼續原先操作，因不中斷原先操作而帶來連貫的使用體驗。. 在行動應用程式 App 開發時相當注重使用者體驗，利用原型收集使用者回饋是常見的作法，然而，市面上常見的原型工具卻未能以有效率的方式製作單頁. 政治大. 互動。故本研究簡化單頁互動在原型上的製作步驟，預期加速原型生成，並設計. 立. 適用於單頁互動的流程圖，在線稿式原型工具 Xketch 上實作。. ‧ 國. 學. 經受測者評估後，認為此研究設計的方法在製作「連續產生的單頁互動」上. ‧. 有不錯的表現，流程圖的呈現方式也能幫助受測者掌握整體設計。最後，本研究. er. al. n. io. sit. Nat. 討在原型工具上設計單頁互動的未來發展與改善方向。. y. 將分析受測者的操作記錄、問卷、訪談回饋，總結 Xketch 的實驗結果與討論，探. Ch. engchi. i n U. v. 關鍵字：行動應用程式、單頁互動、原型製作、開發工具、線稿式設計. II. DOI:10.6814/NCCU201901134.

(4) Abstract In order to use limited display space efficiently, single-page interaction is widely used in the mobile application. In single-page interaction, the minor functions and information won’t be displayed until the necessary timing for operation. And the background of single-page interaction is transparent for the reason that the user can still perceive the previous stage and proceed the operations at the previous stage immediately once the single-page interaction ends. Thus, the user experience can be continuous.. 政治大 thus using prototypes to collect the user’s feedback is a common method. However, 立 there’s no suitable developing kit to build prototypes with single-page. The user experience is very important while developing a mobile application,. ‧ 國. 學. interactions easily and efficiently. In this circumstance, the simplified developing methods of single-page interaction are discussed in this study to simplify the flowcharts. sit. y. Nat. single-page interaction and implement it in Xketch.. ‧. of single-page interaction designing and reduce the developing time of prototypes with. er. io. According to the experimental subjects, the method of single-page interaction in. al. v i n C hpresentation conduces high efficiency. And the flowchart overall design management engchi U n. this study is easy to learn and can generate single-page interaction continuously with for the experimental subjects.. Overall, all the operation behaviors of experimental subjects and the test results in Xketch will be discussed and analyzed in this study to improve the single-page interaction design methods in prototype development.. Keywords: Mobile application, Single-page interaction, Prototyping, Toolkits, SketchBased. III. DOI:10.6814/NCCU201901134.

(5) 目錄致謝 ............................................................................................................................ I 摘要 .......................................................................................................................... II. Abstract.................................................................................................................. III 目錄 ......................................................................................................................... IV 圖目錄 ..................................................................................................................... VI 表目錄 .................................................................................................................. VIII. 治政第一章緒論 .............................................................................................................. 1 大立第一節研究背景 ............................................................................................................. 1 ‧ 國. 學. 一、滾動模式（Scrolling Pattern）........................................................................................ 4 二、側邊滑出介面（Side Drawer） ....................................................................................... 5. ‧. 三、彈跳介面（Popover） .......................................................................................................... 5 第二節研究動機與目的 ................................................................................................ 6. y. Nat. io. sit. 第三節研究步驟 ............................................................................................................. 7. n. al. er. 第二章文獻及案例探討 ......................................................................................... 8. i n U. v. 第一節單頁互動模式..................................................................................................... 8. Ch. engchi. 一、互動類型 ...................................................................................................................................... 9 1. 側邊選單（Navigation Drawer） .......................................................................................... 9 2 切換選單（Toggle Menu） .................................................................................................... 11 3. 動作條列清單（Action Sheet） ........................................................................................... 12 4. 動作格狀清單（Grid List） ................................................................................................... 13 5. 彈出式選單（Menu） ............................................................................................................. 14 6. 通知（Alert） ............................................................................................................................ 15 7. 對話框（Dialog） ..................................................................................................................... 16 8. 挑選器（Picker） ..................................................................................................................... 17 9. 確認（Confirmation） ............................................................................................................ 18 10. 回饋狀態列（Snackbar） ................................................................................................... 19 11. 上拉式介面（Slide－up） .................................................................................................. 20 12. 彈出式介面（Popover / Popup） .................................................................................... 21. 二、小結 ..............................................................................................................................................22 IV. DOI:10.6814/NCCU201901134.

(6) 第二節行動應用原型工具 .......................................................................................... 25. 一、紙面原型 ....................................................................................................................................25 二、數位原型 ....................................................................................................................................26 1. 影像連結式原型設計工具（Image-Based Prototyping Tool） ................................ 26 2. 元件產生式原型設計工具（Component-Based Prototyping Tool） ..................... 28. 三、小結 ..............................................................................................................................................31 第三節 Xketch 的簡介與分析 .................................................................................... 33. 一、簡介 Xketch ..............................................................................................................................33 1. 線稿式設計.................................................................................................................................. 33 2. Xketch 製作元件的方式 .......................................................................................................... 34 3. Xketch 推測元件的方式 .......................................................................................................... 34. 政治大. 4. Xketch 修改元件與建立連結的方式................................................................................... 36. 二、小結 ..............................................................................................................................................37. 立. 第三章系統設計與實作 ...................................................................................... 38. ‧ 國. 學. ㄧ、建立單頁互動 ..........................................................................................................................38 二、編輯單頁互動 ..........................................................................................................................40. ‧. 三、流程圖 .........................................................................................................................................42. sit. y. Nat. 第四章系統評估與討論 ...................................................................................... 45 一、評估方法 ....................................................................................................................................45. io. n. al. er. 二、評估對象 ....................................................................................................................................46. i n U. v. 三、評估內容與流程 .....................................................................................................................47. Ch. engchi. 四、評估結果與分析 .....................................................................................................................49. 第五章結論 ........................................................................................................... 54 一、研究貢獻 ....................................................................................................................................54 二、未來發展 ....................................................................................................................................54. 參考文獻 ................................................................................................................ 56 附錄一實驗流程說明 .......................................................................................... 58 附錄二問卷與訪綱............................................................................................... 62. V. DOI:10.6814/NCCU201901134.

(7) 圖目錄圖 1 分享內容的單頁互動示意圖 ................................................................................................................................. 1 圖 2 GOOGLE MAPS 主畫面的單頁互動示意圖 ........................................................................................................... 2 圖 3 渣打銀行檢視分行位置的地圖互動示意圖 ..................................................................................................... 3 圖 4 支援滑動以看到更多內容的介面示意圖 .......................................................................................................... 4 圖 5 側邊滑出介面示意圖 ............................................................................................................................................... 5 圖 6 彈跳式介面示意圖 ................................................................................................................................................... 5 圖 7 於原型工具上製作單頁互動示意圖 ................................................................................................................... 6 圖 8 側邊選單階層示意圖 ............................................................................................................................................... 9. 治政圖 10 側邊選單出現模式示意圖 ................................................................................................................................ 10. 大立圖 11 切換選單示意圖 .................................................................................................................................................. 11. 圖 9 左右兩側選單示意圖 ............................................................................................................................................ 10. ‧ 國. 學. 圖 12 動作條列清單連續彈出案例 ........................................................................................................................... 12 圖 13 動作格狀清單示意圖 ......................................................................................................................................... 13. ‧. 圖 14 彈出式選單示意圖 .............................................................................................................................................. 14 圖 15 通知示意圖 ............................................................................................................................................................ 15. y. Nat. 圖 16 對話框示意圖 ....................................................................................................................................................... 16. sit. 圖 17 挑選器示意圖 ....................................................................................................................................................... 17. er. io. 圖 18 確認示意圖 ............................................................................................................................................................ 18. al. n. v i n Ch 圖 20 上拉式介面示意圖 .............................................................................................................................................. 20. engchi U 圖 19 回饋狀態列示意圖 .............................................................................................................................................. 19. 圖 21 左二圖為彈出式介面示意圖、右二圖為彈出式氣泡示意圖 ............................................................... 21 圖 22 單頁互動六大使用情境..................................................................................................................................... 22 圖 23 單頁互動歷程 ....................................................................................................................................................... 23 圖 24 紙面原型模擬單頁互動示意圖 ....................................................................................................................... 25 圖 25 匯入圖檔、框選觸發區域、建立頁面連結式意圖（取自於 POP 編輯畫面） .............................. 26 圖 26 影像連結式工具的使用流程（本研究整理） ........................................................................................... 26 圖 27 影像連結式原型設計工具匯入檔案（取至於 MARVEL IOS VERSION） ................................................ 27 圖 28 影像連結式原型設計工具建立換頁連結（取至於 MARVEL IOS VERSION） ....................................... 27 圖 29 左為平面設計導向（ADOBE XD）、右為具備元件庫（BLUEPRINT ）示意圖.................................. 28 圖 30 元件產生式數位工具的使用流程（本研究整理） .................................................................................. 28 圖 31 ADOBE XD PROTOTYPE 模式之建立連結示意圖 ........................................................................................... 29 VI. DOI:10.6814/NCCU201901134.

(8) 圖 32 ADOBE XD PROTOTYPE 模式之流程圖示意圖 ................................................................................................ 29 圖 33 左圖為 JUSTINMIND 製作彈跳介面示意圖，右圖為設定單頁互動示意圖 ......................................... 30 圖 34 左圖為 JUSTINMIND 圖層設定示意圖，右圖為元件庫示意圖 ............................................................... 30 圖 35 常見介面佈局示意圖 ......................................................................................................................................... 31 圖 36 XKETCH 系統架構圖（本研究整理） ............................................................................................................ 33 圖 37 XKETCH 生成元件流程（本研究整理） ........................................................................................................ 34 圖 38 XKETCH+ 依佈局提供推薦清單的規則示意圖 (利淑惠, 2017)............................................................... 35 圖 39 線稿式數位工具的使用流程（本研究整理） ........................................................................................... 36 圖 40 XKETCH+ 設定頁面轉換連結示意圖 ............................................................................................................... 36 圖 41 常見介面佈局示意圖 ......................................................................................................................................... 37 圖 42 建立單頁互動之流程圖..................................................................................................................................... 38. 政治大圖 44 左為灰色濾鏡預設離開行為 ........................................................................................................................... 40 立圖 45 舊版流程圖 ............................................................................................................................................................ 42 圖 43 於 XKETCH 編輯單頁互動之示意圖 ................................................................................................................ 40. ‧ 國. 學. 圖 46 採不同形式的圓呈現連結方向性、綠線表示單頁互動流程 ............................................................... 42 圖 47 以折線避免頁面重疊 ......................................................................................................................................... 43. ‧. 圖 48 購物情境示意圖 ................................................................................................................................................... 47 圖 49 問卷回饋結果 ....................................................................................................................................................... 49. Nat. sit. y. 圖 50 P1 使用 XKETCH 製作的購物流程圖............................................................................................................... 50. er. io. 圖 51 P3 與受測人員使用流程圖輔助討論 ............................................................................................................ 51 圖 52 再次編輯單頁互動的介面示意圖 .................................................................................................................. 52. n. al. i n U. v. 圖 53 目前單頁互動介面尚未支援縮放示意圖 .................................................................................................... 53. Ch. engchi. VII. DOI:10.6814/NCCU201901134.

(9) 表目錄表 1 六種單頁互動常見的互動歷程（本研究整理） ......................................................................................... 23 表 2 六種單頁互動的常見佈局（本研究整理） .................................................................................................. 32 表 3 筆畫指令示意圖（本研究整理） ..................................................................................................................... 34 表 4 XKETCH+表格子元件筆畫規則表 (利淑惠, 2017) ........................................................................................ 35 表 5 可設定行為（ACTION）的元件列表 ................................................................................................................. 37 表 6 建立單頁互動之示意圖表................................................................................................................................... 39 表 7 於 XKETCH 再次編輯單頁互動之示意圖 ......................................................................................................... 41 表 8 受測者資訊 .............................................................................................................................................................. 46. 政治大. 表 9 實驗流程 ................................................................................................................................................................... 47. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. VIII. DOI:10.6814/NCCU201901134.

(10) 第一章緒論第一節研究背景單頁互動在行動介面中是一種常見的手法，為求有效地運用有限的空間，次要功能及資訊會待至使用時機才顯現，若其內容與當前畫面有著高度關聯性，採用單頁互動便能帶來連貫的使用體驗。以下圖「分享內容」為例，功能步驟簡易且與當前內容相關，藉由點擊「…」於原頁開啟次要清單，選擇「分享」從同頁. 政治大. 滑出「分享選單」，分享完畢後自動關閉選單。採用單頁互動同時可見背景內容，. 立. 有助於使用者掌握分享項目為何，操作簡易又快速，結束分享後即回到當前內容. ‧ 國. 學. 以便於繼續瀏覽，不會中斷原先的使用行為。該互動皆在同一頁面完成，故本研究稱此為單頁互動（single page interaction）。. ‧. io. sit. y. Nat. n. al. er. Ch. engchi. i n U. v. 圖 1 分享內容的單頁互動示意圖. 1. DOI:10.6814/NCCU201901134.

(11) 除了上述情境，當所有子功能皆圍繞著主功能進行時，為方便使用者回到主功能，此類 App 也會廣泛應用單頁互動，例如： Google Maps，地圖是主要功能，而附加功能——「切換地圖顯示類型」，便適合採用單頁互動，一來可以預覽變更後樣貌，二來關閉選單即是原先的地圖位置，使用體驗明確且流暢。除此之外，如地標詳細資訊、大眾運輸現況等應用，也都採取單頁互動的形式，本研究將 Google Maps 地圖頁上所有的單頁互動整理如下圖。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2 Google Maps 主畫面的單頁互動示意圖. 2. DOI:10.6814/NCCU201901134.

(12) 相較 Google Maps，同樣為地圖應用的 SCBreeze App，其類別篩選需切換頁面進行設定，其使用體驗較為不流暢。參考下圖說明，使用者欲尋找合適分行，經由移動、縮放地圖至目標區域後，地圖上仍有許多的選項，於是使用篩選過濾掉不必要的類型，在地圖頁面點選右上方「漏斗」切換至指定選擇頁面，確認顯示類型後返回至原始頁面，卻發現地圖重回初始位置，使得使用者需再次調整位置，因重複的操作導致使用體驗不佳。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3 渣打銀行檢視分行位置的地圖互動示意圖. 篩選顯示類型與檢視據點之地圖頁面有著高度關聯性，且操作步驟簡易，切換頁面適合與原始頁面關聯性低或是需要較大空間的操作，在此案例中比較適合採用單頁互動。 3. DOI:10.6814/NCCU201901134.

(13) 概觀單頁互動的互動形式，大致可分為三大類別：滾動模式（scrolling pattern）、側邊滑出介面（side drawer）、彈跳介面（popover），參考至 Mobile Design Pattern Gallery (Neil, 2014) 一書，其匯聚三大平台 iOS 、 Android 、 Windows Phone 的使用者介面模式。. 一、滾動模式（Scrolling Pattern）資訊內容比顯示範圍還大，須經由上下左右滑動才能看到完整內容，抑或是透過使用者滑動的手勢，判別當前關注範圍，將非關注項目遮蓋或縮小，以留更多空間呈現使用者正注視的內容。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4 支援滑動以看到更多內容的介面示意圖. 4. DOI:10.6814/NCCU201901134.

(14) 二、側邊滑出介面（Side Drawer）側邊滑出介面用於顯示延伸功能或是導覽入口，常以非滿版介面覆蓋現有畫面，使用結束後將再次隱藏。. 學. ‧ 國. 立. 政治大圖 5 側邊滑出介面示意圖. ‧. 三、彈跳介面（Popover）. Nat. sit. y. 彈跳式介面，通常於中間彈出打斷使用者動作，適合顯示即時重要訊息，或. al. er. io. 是當前需要使用者輸入資訊的情境。也可以用於較小的功能，其功能對資訊架構. v. n. 本身無太大影響，不需切換頁面也不需常駐畫面，例如：排序方式。. Ch. engchi. i n U. 圖 6 彈跳式介面示意圖. 5. DOI:10.6814/NCCU201901134.

(15) 第二節研究動機與目的原型（prototype）製作是行動應用程式開發中不可或缺的一環，透過原型能將資訊架構與互動介面具現化，一來有助於開發者釐清問題，二來有利於團隊進行討論，最重要的是能透過原型做使用者測試，驗證設計是否符合目標族群的期望，在前期發現問題並修正，可以節省許多後期修改的時間與成本。. 然而，常見原型工具卻未能以有效率的方式製作單頁互動。如下圖所示，在現有工具中製作單頁互動，須將流程拆解至多頁模擬。透過複製主畫面至新一頁，. 政治大. 再於新一頁覆蓋灰色濾鏡和非滿版介面，若主畫面有三個單頁流程，便需複製主. 立. 畫面三次以上。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. n U engchi. iv. 圖 7 於原型工具上製作單頁互動示意圖. 原型時常進行版面調整，一旦主畫面變更，其餘頁面便須透過手動同步處理，其過程繁瑣又耗時，易加重設計師在迭代設計時的心智負荷，也因而常見同步不完全的失誤。再者，單頁互動有著約定成俗的使用模式，如圖 7 所示，點擊灰色濾鏡區域將關閉單頁互動介面，若設計師需如實演示互動流程，便須逐一為每一個灰色濾鏡建立離開連結。最後，單頁互動如同多頁互動，為一種流程的呈現方式，設計師同樣有需求鳥瞰單頁互動的流程圖。. 為了營造流暢的使用體驗，單頁互動的應用愈趨廣泛，卻發現常見原型工具尚未規劃適合單頁互動的製作方式，有鑑於此，提出兩點研究目的： 6. DOI:10.6814/NCCU201901134.

(16) （一）簡化單頁互動的製作步驟，預期加速原型生成。（二）設計適用於單頁互動之流程圖。. 以及三點預期貢獻：（一）分析單頁互動模式。（二）以 Xketch 為基礎設計單頁互動功能。（三）於 Xketch 中實作單頁互動功能。. 政治大第三節研究步驟立. ‧ 國. 學. 呈上述研究目的，希望能以簡易的方法製作單頁互動，以及設計出適用於單頁互動的流程圖，為了評估本研究創作成果，會將其實作在 Xketch 的系統上，. ‧. 透過實驗任務進行專家試用、問卷與訪談，以進行評估。本論文會採取下列步驟. y. sit. io. er. Nat. 進行研究：. （一）透過觀察法與文獻探討，分析常見的單頁互動模式，並歸納其通則。. al. n. v i n （二）觀察現有原型工具如何實現單頁互動，從中分析優缺點，並作為後續創作 Ch engchi U 的參考。（三）熟悉 Xketch 的設計理念並深入研究系統架構。（四）參考以上整理結果，設計適合在 Xketch 製作單頁互動的方式，並予以實作。（五）設計實驗任務，藉由觀察法與專家訪談評估本研究創作。. 7. DOI:10.6814/NCCU201901134.

(17) 第二章文獻及案例探討為了簡化單頁互動的製作步驟，本研究需掌握單頁互動的通則，透過大量觀察市面上常見的單頁互動應用，於第一節分析整理出規則；再者，希望以貼近設計師的慣用手法，設計出易於學習的製作步驟，所以觀察現有原型工具製作方式，並於第二節分析其優弊。最後，因為本研究創作於 Xketch 之上，應保持互動設計的一貫性，於是在第三節做 Xketch 簡單的介紹與分析。. 第一節單頁互動模式. 政治大行動應用中的單頁互動模式最早源自於電腦應用程式上的模態視窗（Modal 立. ‧ 國. 學. Window），意指暫時顯示內容而重疊於畫面上的視窗，「模態」表限制使用者行動範圍的狀態，而模態視窗便是實現該狀態的代表性 UI 元件。模態視窗出現時，. ‧. 會使原畫面無法操作，適用於要求使用者執行某些動作、顯示警告訊息等目的 (池田拓司, 2013)，尤其對於行動應用來說，在一個畫面內能做的事有限，常常需. y. Nat. sit. 要切換畫面，若使用模態視窗便能暫時地呈現額外資訊，或是對主要內容進行其. n. al. er. io. 他控制、管理 (劉又嘉, 2012)。此類應用像是原頁面的延伸功能，具有和原頁間關. i n U. v. 聯的隱喻，讓使用者能明確地知道當前任務位置，而且只是短暫性任務，很快地便會回到原始頁面。. Ch. engchi. 本研究將專注於側邊滑出介面（side drawer）與彈跳介面（popover）兩大類別的探討，透過觀察 22 個 iOS 官方推薦 App， 10 個 Google Play 熱門 App，以及參考行動介面互動的相關書籍 (池田拓司, 2013; 彭其捷 & 楊淑涵, 2013; Hermes, 2015; Neil, 2014)，兩大行動應用平台 Google、Apple 所訂製的介面設計準則：Google Material Design、iOS Human Interface Guideline ，統整出 12 種單頁互動元件，並於本節介紹其定義、使用情境、規範、佈局樣式、離開方式。. 8. DOI:10.6814/NCCU201901134.

(18) 一、互動類型 1. 側邊選單（Navigation Drawer）. 由 Material Design 定義為畫面側邊滑出的導覽清單，提供管道轉換當定義前畫面至 App 其他頁面，由於觸發選單開關的按鈕常採用漢堡圖示（使用. ，hamburger icon），因此又名為漢堡選單。. 分頁欄（tab bar）已作為其他用途、有五個以上的導覽目的地、導覽. 情境目的地與主畫面關聯性低、清單具備階層關係，如 Pinkoi（圖 8）。. 規範. 不建議左右兩邊皆有側邊選單，如 Slack （圖 9），若選單內容較多應支援上下滑動。. 立. 政治大. ‧ 國. 學. 佈局佈局高度與畫面高度相同，寬度通常非滿版，為求閱讀順暢，文字書樣式寫方向若由左到右，導覽選單較推薦於由左側滑出，如圖 10 所示。. ‧. 離開選單面積大，應支援橫向滑動關閉。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 8 側邊選單階層示意圖. 9. DOI:10.6814/NCCU201901134.

(19) 兩側皆能滑動並不是好的設計，側邊選單預設為隱藏，使用者需打開查看或經由多次學習下，才能熟悉對應的選單內容，因此在後續的互動設計中同一畫面僅支援一側邊導覽選單。若需導覽的入口過多，可以考慮使用分頁列（tab bar），將核心功能獨立出來，相較於所有功能都收納置同一頁，明確地切割適合分頁列的功能也同等重要。. 立. 政治大. ‧ 國. 學 ‧. 圖 9 左右兩側選單示意圖. Nat. sit. y. 選單顯示有兩種模式，一為覆蓋圖層（overlay）直接遮蓋於畫面上，如. al. er. io. Gmail 導覽列（圖 10 左）；一為嵌入圖層（inlay）將一部份原畫面推出可視範圍. n. 外，如 Dcard 選單（圖 10 右）。. Ch. engchi. i n U. v. 圖 10 側邊選單出現模式示意圖. 10. DOI:10.6814/NCCU201901134.

(20) 2 切換選單（Toggle Menu）. 定義. 使用. 該名詞源自於響應式網頁設計，在 Mobile Design Pattern Gallery 一書提到，切換選單用於篩選當前頁面內容或切換內容模式。導覽列標題統稱該畫面內容，當標題對應的畫面內容需作替換、篩選. 情境時便適合使用，如圖 11 所示。規範置於導覽列上，有助於使用者明白操作將影響導覽列下方整頁內容。. 佈局樣式. 常以「ˇ」圖示暗示選單收納於此，點擊後在導覽列下方展開與畫面等寬的選單，大多以遮蓋（overlay）的方式呈現，並於背景套上半透. 政治大. 明灰色濾鏡凸顯當前選單。. 立. 離開點擊收納圖示，或是灰色濾鏡區域離開。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 11 切換選單示意圖. 11. DOI:10.6814/NCCU201901134.

(21) 3. 動作條列清單（Action Sheet）. 定義. 使用. Action Sheet 源自於 iOS 規範，為畫面底部滑出的一組條列式操作選項，近年來 Android 平台也開始支援類似功能。操作項目通常與當前內文相關但較為次要，且選項不多，若較多選項. 情境建議改採格狀清單表示。. 政治大. 標注，如 Facebook 捨棄貼文。清單由底部滑出並直接遮蓋（overlay）. 立. 在畫面上，於背景套上半透明灰色濾鏡以凸顯當前動作列表。. 學. 點擊灰色濾鏡區域離開，並建議放入取消按鈕，若無使用者欲操作項. ‧. 目時，取消按鈕能清楚地指示如何離開清單。. Nat. y. 離開. 對資訊結構影響較大的項目，例如：刪除，應改變顏色或以粗體特別. io. sit. 樣式. 適合連續彈出，可用於具層級關係的操作。. n. al. er. 佈局. 選單不建議滾動，因條列式選項可觸擊範圍大，於其上滾動易誤觸。. ‧ 國. 規範. Ch. engchi. i n U. v. 圖 12 動作條列清單連續彈出案例. 12. DOI:10.6814/NCCU201901134.

(22) 4. 動作格狀清單（Grid List）. 定義由 Material Design 提出此名稱，為一組格狀呈現的操作選項。使用. 通常選項與當前內文相關但較為次要，在可供操作的項目較多，或選. 情境項需以圖像顯示時，建議採用格狀清單。 iOS 規範建議，當操作選項較多時建議採用 Activity View，其具備系統規範. 預設功能如 AirDrop、分享訊息、複製等等，雖無法排序預設功能，但可以將不必要的項目隱藏。建議在格狀圖標下方標註功能名稱。與條列清單一樣，適合連續彈出，可用於具層級關係的操作。. 並於畫面右邊緣露出部分圖標，暗示能透過橫向滑動查看更多選項。點擊灰色濾鏡區域離開，並建議放入取消按鈕，若無使用者欲操作項. ‧. Nat. y. 目時，取消按鈕能清楚地指示如何離開清單。. io. n. al. sit. er. 離開. 學. 樣式. 立. 濾鏡，以凸顯當前動作列表。如果選項數量太多，可以將項目分組，. ‧ 國. 佈局. 政治大. 由底部滑出並直接遮蓋（overlay）於畫面上，於背景套上半透明灰色. Ch. engchi. i n U. v. 圖 13 動作格狀清單示意圖. 13. DOI:10.6814/NCCU201901134.

(23) 5. 彈出式選單（Menu）. 定義由 Material Design 提出，用於顯示項目少的選單。使用. 選項與當前內文相關但較為次要，且可供操作的項目不多，若選項較. 情境多建議改採動作格狀清單表示。規範建議採條列式，一行一個選項。佈局由於選項少，通常所佔面積小，不一定於背景套上半透明灰色濾鏡。樣式出現位置應接近觸發元件位置，如圖 15 所示。. 政治大. 離開點擊彈出式選單以外的畫面即可離開。. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 14 彈出式選單示意圖. 14. DOI:10.6814/NCCU201901134.

(24) 6. 通知（Alert）. 定義. 使用. 用於傳遞重要資訊，藉由彈出視窗中斷當前任務，並限制使用者可操作範圍以求關注。當有關於 App 或裝置狀態的重要訊息時，例如 App 要求開通裝置的使. 情境用權限，此時便會請求使用者作出決定。 iOS 原生元件中，必須包含「標題」以及「按鍵」，「內文描述」為可規範選擇項目。不宜於通知介面上滾動。不宜連續使用。可操作選項不宜大於三個，過多選項建議改採用動作清單。. 學. 樣式. 立. 標注，其標題、描述、按鍵、對話框的組合在 iOS 中有特定佈局，如下圖所示。並彈出於畫面中間，在背景套上半透明灰色濾鏡。. ‧ 國. 佈局. 政治大. 對資訊結構影響較大的項目，例如：刪除，應改變顏色或以粗體特別. ‧. 離開點擊灰色濾鏡不會有反應，需透過操作選項離開。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 15 通知示意圖. 15. DOI:10.6814/NCCU201901134.

(25) 7. 對話框（Dialog）. 定義由 Material Design 定義，用於獲取使用者資訊。可由 iOS 原生元件 Alert 製作，必須包含「標題」以及「按鍵」，「內規範. 文描述」和「輸入框」為可選擇項目。應具備「儲存 / 發佈 / 完成」、及「取消」操作按鈕。若需輸入文字應自動打開鍵盤，以引導使用者進行文字輸入操作。. 佈局於畫面中間或是下方彈出，並在背景套上半透明灰色濾鏡，以引導使樣式用者將注意力放至當前對話框上。. 立. 「刪除」等按鈕後應進行再次確認（可參考 5. 即時回饋）。. 學 ‧. ‧ 國 io. sit. y. Nat. n. al. er. 離開. 政治大. 透過選項離開，若花費使用者較大心力輸入資訊，在點擊「取消」、. Ch. engchi. i n U. v. 圖 16 對話框示意圖. 16. DOI:10.6814/NCCU201901134.

(26) 8. 挑選器（Picker）. 定義以簡單的方法從預定集合中選擇其中一值。. 使用情境. 用於進行與上下文相關的設定，常應用於時間、日期、性別等有固定選項且能依邏輯排序的集合。若選項過多或需要複選，應改採彈出控制列表。若需藉由滾動選取值，選項不宜過多，因為無法一次展現所有選項，. 規範需注意排序要能讓使用者推測欲選擇項目位在何處，例如：「國家」應按照英文名稱字首排序。列表標題不宜跟著滾動。 . 由於會進行值的設定，為避免誤觸灰屏取消選值，建議僅支援「取. ‧. 消」、「完成設定」以離開選取器。. io. sit. y. Nat. n. al. er. 離開. 套上半透明灰色濾鏡，以凸顯當前動作列表。. 學. 樣式. 立. 項。由底部滑出並以覆蓋圖層（overlay）直接遮蓋於畫面上，於背景. ‧ 國. 佈局. 政治大. iOS Human Interface Guideline 提及，挑選器高度大約要能顯示五行選. Ch. engchi. i n U. v. 圖 17 挑選器示意圖. 17. DOI:10.6814/NCCU201901134.

(27) 9. 確認（Confirmation）. 定義彈出一詢問對話框，確認使用者是否要採取行動。. 使用情境. 佈局. 當使用者在做較為重要的操作，如退出、支付，或是對資訊結構影響較大的項目，如刪除，為避免使用者誤觸，或不清楚操作所帶來的後果，在有可能令使用者後悔的決定下，應再次確認使用者的意圖。由中間彈出或是由底部滑出圖層覆蓋（overlay）畫面，背景套上半透. 樣式明灰色濾鏡，以凸顯當前確認資訊。透過選項離開，提供「取消」按鈕，若未進行破壞性操作，建議將取. 政治大. 離開消操作按鈕放置左邊，確定性操作按鈕放置右邊；反之，將取消操作. 立. 按鈕放置右邊，確定性操作按鈕放置左邊。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 18 確認示意圖. 18. DOI:10.6814/NCCU201901134.

(28) 10. 回饋狀態列（Snackbar）. 定義由 Material Design 提出，對使用者操作再次確認或是給予回饋。使用. 當使用者操作具結構破壞性時，建議給予回饋狀態列，並給予「恢. 情境復」的操作機會、或是在不中斷使用者操作下提醒 App 狀態已改變。規範回饋狀態列一次僅出現一個。儘量文字說明、可操作選項最多一個。佈局. 為橫條列，通常位於導覽列下方、分頁列上方、或是最底部，應避免. 位置遮蔽到使用者可能會接著操作的區域。建議採用跳脫的滿版底色。. 政治大. 離開當進行畫面其他操作、或是一定時間後應自動關閉。. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 19 回饋狀態列示意圖. 19. DOI:10.6814/NCCU201901134.

(29) 11. 上拉式介面（Slide－up） . 定義. 使用情境. 該暫時性介面可調整大小，透過滑動的手勢，判別當前關注範圍，將非關注項目遮蓋或縮小，以留更多空間呈現使用者正注視的內容。. 需延伸當前內文，或是操作項目多又須條列呈現時。. 規範在彈出的預設範圍內，應顯示足以讓使用者了解用途的資訊。在介面上頭有一短橫槓，表示此視窗能上下拖曳調整大小，並於畫面佈局下邊緣露出部分圖標，暗示能透過垂直滑動可查看更多選項。通常由. 政治大. 樣式底部滑出並遮蓋（overlay）於畫面上，於背景套上半透明灰色濾鏡，. 立. 以凸顯當前動作列表。. ‧ 國. 學. 因介面可藉由滑動手勢調整大小，關閉介面等同於將其縮至最小，因. ‧. 此應支援滑至最底離開介面。. io. sit. y. Nat. n. al. er. 離開. Ch. engchi. i n U. v. 圖 20 上拉式介面示意圖. 20. DOI:10.6814/NCCU201901134.

(30) 12. 彈出式介面（Popover / Popup）. 定義當點擊某個按鈕或區域時，會暫時地出現在畫面中間或按鈕旁邊。使用. 延伸功能、功能的引導教學、註解、擴大畫面上元件的可視範圍，如. 情境當前關注影像時，可透過點擊影像彈跳放大呈現。同一時間應只有一個彈出式介面，多個會使畫面變得混亂。不建議用規範於階層顯示，若要顯示新的彈出式介面，建議將先前的關閉後再開啟。不建議支援滾動。由於使用者無法拖動彈出介面，因此要避免彈跳介面過大，或是擋到. 政治大. 佈局使用者可能需要查看的內容。可採用突出三角形指向源自按鈕或區. 立. 樣式域，下圖彈出式氣泡示意圖。以覆蓋圖層（overlay）遮蓋於畫面上，. 學. ‧ 國. 根據介面大小及用途決定是否於背景套上半透明灰色濾鏡。. ‧. 離開點擊灰色濾鏡或觸發按鈕離開。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 21 左二圖為彈出式介面示意圖、右二圖為彈出式氣泡示意圖. 21. DOI:10.6814/NCCU201901134.

(31) 二、小結從文獻探討與案例中發現，單頁互動的操作方式與本身用途有很大的關聯，因此依使用情境歸納出六大類：（一）導覽選單：依附於導覽列（navigation bar），其操作影響整頁內容。像是：作為其他頁面的導覽入口，操作後轉換至他頁、切換整頁內容、對頁面內容進行篩選等。代表元件：側邊導覽、切換選單。（二）次要選單：作為該頁功能的延伸，將與主畫面有著高度相關性的次級功能收納於此。代表元件：動作清單。. 政治大. （三）警示訊息：為了傳遞重要資訊，藉由彈出視窗中斷當前任務，並限制使用. 立. 者可操作範圍以求關注。代表元件：警告、要求權限。. ‧ 國. 學. （四）獲取資料：當前流程需使用者給予資料，或是延伸空間以便於使用者輸入資料。代表元件：對話框、挑選器。. ‧. （五）即時回饋：對使用者當前操作再次確認或是給予操作回饋。代表元件：確. sit. y. Nat. 認、回饋狀態列。. io. er. （六）更多空間：顯示文意脈絡下的延伸內容、放大以詳閱細節、藉由滾動呈現類似結構的資料。代表元件：上拉式選單、放大圖像、滾動模式。. al. n. Ch. engchi. i n U. v. 圖 22 單頁互動六大使用情境 22. DOI:10.6814/NCCU201901134.

(32) 而本研究專注探討的單頁互動指的是從無到有的互動介面，當不被需要、或是目的達成後，該介面便會消失，因此將互動歷程分為三個要素進行討論：. 政治大. 立. 圖 23 單頁互動歷程 . ‧ 國. 學. 將六種使用情境，依據互動歷程的三大要素整理出常見的用法，見表 1。. 次要選單. al. n. 的按鈕. Ch. engchi U. v ni. 點擊「關閉選單的按鈕」回到原頁面. • 點擊「表單內容」連結至對應頁面. • 代表分享的按鈕. • 「切換選單」具收合鍵 • 點擊「收合鍵」、「取消. • 更多動作的按鈕. • 「動作清單」具取消鍵. • 位在「導覽列」上 • 有條狀或格狀的清單的按鈕。. 警示訊息. • 左右滑動「彈跳介面」、. er. io. • 位在「導覽列」上. y. • 代表主選單的按鈕 • 具備階層的條狀選單. 常見離開方式. sit. 導覽選單. 常見內容. Nat. 常見觸發元件. ‧. 表 1 六種單頁互動常見的互動歷程（本研究整理）. • 代表刪除的元件. 鍵」回到原頁面 • 點擊「表單內容」連結至對應頁面. • 簡短的文字描述. • 代表送出資料的按 • 確認鍵. • 點擊「確認鍵」回到原頁面. 鈕. 23. DOI:10.6814/NCCU201901134.

(33) 獲取資料. • 對話框. • 確認鍵. • 點擊「確認鍵」回到原頁. • 取消鍵. 面. • 獲取資料的元件，例. 即時回饋. • 代表刪除的元件. • 點擊「取消鍵」連結至. 如：對話框、日期選取. 「確認取消」的警示訊息. 器……等等. 框. • 簡短的文字描述. • 點擊「復原鍵」回到上一. • 代表送出資料的按 • 復原鍵。. 頁，持續短暫時間自動回. 鈕. • 圖片. • 關閉鍵. • 影片. 立. • 點擊「關閉鍵」回到原頁. 治 •政通常置入表單或是滿版大圖片、影片。. 面 • 點擊「表單內容」，連結至對應頁面. 學. ‧ 國. ‧. io. sit. y. Nat. n. al. er. 更多空間. 到原頁面. Ch. engchi. i n U. v. 24. DOI:10.6814/NCCU201901134.

(34) 第二節行動應用原型工具本節觀察市面上常見的原型工具，彙整出各工具在製作單頁互動時的特色與優缺點，以易於設計師學習與操作為目標，作為本研究創作的參考。. 一、紙面原型行動應用軟體介面設計師（以下簡稱為設計師）為製作原型的主要角色，在靈感發想時，多數設計師習慣採用紙筆記錄，因為手繪（Sketching）認知負擔小且快速，設計師能全心全意專注在思考上。由紙筆製作的原型稱為紙面原型，雖. 政治大. 然紙面原型製作簡易，但卻難以有效地保存管理、搜尋及再利用 (Landay &. 立. Myers, 1995)，設計過程中原型會不斷演變，以至於設計師在紙面原型上非常依賴. ‧ 國. 學. 註解與更動紀錄 (Herbsleb & Kuwana, 1993)，若要留下演變中的各個版本，在調整原型時勢必得重製草圖，然而在這當中有許多元素是相同的，重製過程將花不. ‧. 少心力在相同的元件上。除此之外，紙面原型最大的問題在於難以如實模擬真實成品的互動體驗，因此設計師遲早會將草稿轉至數位工具，而轉換後的草稿除了. y. Nat. sit. 上面的文字註記外，本身已失去用途 (Newman, Lin, Hong, & Landay, 2003)。. n. al. er. io. 紙面原型在模擬互動的自由性高，下圖為一種常見的演示方法，透過剪貼以. i n U. v. 及人工推移來呈現單頁互動，如此一來就不須重複繪製主畫面，調換單頁互動的. Ch. engchi. 觸發元件也極為方便，能自由地模擬互動行為。. 圖 24 紙面原型模擬單頁互動示意圖 25. DOI:10.6814/NCCU201901134.

(35) 二、數位原型由專家訪談中得知，設計師進行原型設計時可分為三階段：（一）以紙筆繪製主要功能，採紙面原型進行產品概念測試、（二）使用數位工具建構可點擊的線稿原型（Clickable Wireframe），進行功能流程測試、（三）製作接近真實成品樣貌以及互動細節的高擬真度原型，進行使用者體驗測試。現有數位原型工具繁多，本研究將此分為「影像連結式」、「元件產生式」、「線稿式」三類，前兩類於本節介紹，第三類「線稿式」於第三節簡介。. 政治大. 1. 影像連結式原型設計工具（Image-Based Prototyping Tool）. 立. y. ‧. ‧ 國. 學. Nat. er. io. sit. 圖 25 匯入圖檔、框選觸發區域、建立頁面連結式意圖（取自於 POP 編輯畫面）. al. n. Ch. engchi. i n U. v. 主要目的是將草圖製作成可點擊的線稿原型（Clickable Wireframe）。在工具上匯入圖片後，透過在影像上框選觸發區域、建立頁面連結、設定切換動畫，來模擬行動應用程式運作，其影像可能是手繪稿照片或是平面設計工具製成的圖檔，由於這類原型工具只能在影像上設立連結，若要修改原型版面內容較不方便，需重新匯入更新影像，並再次設定觸發區域、轉換頁面及切換動畫。. 圖 26 影像連結式工具的使用流程（本研究整理）. 26. DOI:10.6814/NCCU201901134.

(36) 在此以常用的影像連結式原型設計工具——「Marvel」為例，如下圖呈現單頁互動的製作流程。. （一）匯入已製作完畢的單頁互動影像。. 立. 政治大. 圖 27 影像連結式原型設計工具匯入檔案（取至於 Marvel iOS version）. （二）點擊主頁面，進入後可新增連結，設定轉換頁面。. Nat. n. al. er. io. sit. y. ‧. ‧ 國. 學. Ch. engchi. i n U. v. 圖 28 影像連結式原型設計工具建立換頁連結（取至於 Marvel iOS version）. 影像連結式原型設計工具以頁面為單位，因此模擬單頁互動需要分割成不同頁面進行模擬，因此這類型工具在製作單頁動畫的效率較差。. 27. DOI:10.6814/NCCU201901134.

(37) 2. 元件產生式原型設計工具（Component-Based Prototyping Tool）. 圖 29 左為平面設計導向（Adobe XD）、右為具備元件庫（Blueprint ）示意圖. 政治大. 設計師可以在這類原型工具上直接產生介面元件，藉由設定元件行為. 立. （Action）轉換頁面，製作出可互動原型。其核心價值在「元件庫」，內含風格. 學. ‧ 國. 一致的常用元件圖示以及常用的元件組合，相較以往使用圖形工具拼湊元件樣貌，具備豐富的元件庫能大幅減輕設計師的負擔，但也較為要求介面設計的背景知識. ‧. 和經驗，若設計師對於元件的認知不足，可能發生找不到所需元件的窘境 (徐嘉. n. al. er. io. sit. y. Nat. 駿, 2015)。. Ch. engchi. i n U. v. 圖 30 元件產生式數位工具的使用流程（本研究整理）. 28. DOI:10.6814/NCCU201901134.

(38) 在此以常用的元件產生式原型設計工具——「Adobe XD」為例，如下圖呈現單頁互動的製作流程。. （一）以複製頁面堆疊圖層的方式製作單頁動畫，視元件為單位，建立轉頁連結。. 立. 政治大. ‧ 國. 學. 圖 31 Adobe XD Prototype 模式之建立連結示意圖. ‧. （二）轉換連結建立完成。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 32 Adobe XD Prototype 模式之流程圖示意圖. Adobe XD 的頁面和元件都可以設定轉頁行為，能模擬更多種類的單頁互動，這是影像連結式原型工具難以突破的限制，值得參考的是，流線型的線條、一致性的鍵頭，美觀又便於掌握整體流程的走向。. 29. DOI:10.6814/NCCU201901134.

(39) 元件產生式原型工具—— Justinmind，製作單頁互動的方式上略有不同。此工具最早應用於網頁原型的製作，設定元件行為的邏輯類似於網頁語言，透過將彈出式介面隱藏，以設定顯示時機來模擬單頁互動，詳細說明如下：. 下圖範例是刪除聯絡人的流程，透過「左滑」聯絡清單中的一人，便會「顯示」刪除警示，點擊確認刪除或取消刪除後，該警示便會「隱藏」。使用 Justinmind 製作這一段單頁互動，需要在元件庫中找出矩形、相片、按鈕等元件，組成刪除警示的彈跳介面，如圖 33 左所示。接著設定觸發元件，當使用者把聯絡人往左滑，刪除警示便會「顯示」，點刪除/取消按鈕，刪除警示便會「隱藏」。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. 圖 33 左圖為 Justinmind 製作彈跳介面示意圖，右圖為設定單頁互動示意圖. n. al. Ch. engchi. i n U. v. Justinmind 將單頁互動視為圖層，透過控制圖層的顯示與否來模擬單頁互動，值得學習的是，Justinmind 不必複製多個主畫面，然而測試前需要將彈跳介面先予以隱藏，這部分操作較不直觀。此外，元件庫項目多元雜亂，不易尋找。. . 圖 34 左圖為 Justinmind 圖層設定示意圖，右圖為元件庫示意圖 30. DOI:10.6814/NCCU201901134.

(40) 三、小結以創作出易於學習與操作的互動設計為目標，本節整理出六點使用原型工具製作單頁互動的特色與優缺點，並以此作為後續發想的參考。（一）紙面原型利用剪貼的方式呈現單頁互動，在互動的呈現上自由度最高。（二）若原型需要應用大量單頁互動，不建議使用影像連結式的原型工具，因為不論是製作亦或修改，使用該工具的效率都不佳。（三）Adobe XD（元件產生式工具）在呈現頁面之間的關係，也就是流程圖的表現優異，可作為後續創作的參考。. 政治大擬單頁互動，此概念不須重複使用主畫面值得參考，然而操作方式並非設立. （四）元件產生式工具 Justinmind 將單頁互動視為圖層，透過控制圖層顯示來模. ‧ 國. 學. 計師的慣用思維，應予以改良。. （五）元件產生式工具應優化元件庫的分類，本研究觀察到單頁互動元件能依據. ‧. 佈局歸類出五大類型，如圖 35 所示。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 35 常見介面佈局示意圖. （六）設計師在使用元件式工具模擬單頁互動時，會依據情境疊加灰色濾鏡，在此依據六種單頁互動的使用情境，將常見的佈局與灰色濾鏡的使用方式分別整理，見表 2。. 31. DOI:10.6814/NCCU201901134.

(41) 表 2 六種單頁互動的常見佈局（本研究整理）. 常見佈局導覽選單. • 左右兩側，上下滿版（左右不滿版，寬度可調整）. 有無疊加灰色濾鏡. 灰色濾鏡支援離開. ✔. ✔. ✔. ✔. • 上下兩側，左右滿版（上下不滿版，高度可挑整）. 立. ‧ 國. io. y. n. al. sit. • 正中間，高度可調整。. 即時回饋. ✔. Ch. engchi. i n U. v. • 多為上下兩側，左右滿版，高度為一行字高。. 更多空間. ✔. ‧. Nat. 獲取資料. • 正中間，高度可調整。. 學. 警示訊息. 政治大. er. 次要選單. • 正中間左右滿版，高度可調整，或依附在按鍵旁. ✔. ✔. 邊，可任意調整位置與大小。. 32. DOI:10.6814/NCCU201901134.

(42) 第三節 Xketch 的簡介與分析因為本研究創作於 Xketch 之上，應保持互動設計的一貫性，於是在第三節做 Xketch 簡單的介紹與分析。. 一、簡介 Xketch Xketch 是一款在 iPad 上針對行動應用的線稿式原型設計工具(徐嘉駿,. 政治大如圖 36 所示。選擇專案後鳥瞰完整流程圖，點擊欲編輯頁面進行該頁原型設計，立設計過程中隨時可切換至測試工作區以進行迭代原型設計。 2015) 。系統具備四大工作區：專案管理、流程圖、原型設計、測試，使用流程. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 36 Xketch 系統架構圖（本研究整理）. 1. 線稿式設計. 線稿式設計的概念最早由 James A. Landay (1995) 提出，結合設計師手繪發想的習慣以及數位工具易於調整和版本管理的優勢，在後續的研究中也證實線稿式設計不限於某種表達方式，設計師可以嘗試各式設計的可能性，而手繪與數位工具也具有一定的互補性 (Coyette, Faulkner, Kolp, Limbourg, & Vanderdonckt, 2004; Walker, Takayama, & Landay, 2002)。. 33. DOI:10.6814/NCCU201901134.

(43) 2. Xketch 製作元件的方式. Xketch 採線稿式設計的概念，於編輯區繪製筆畫指令後，系統會依形狀、位置、大小猜測可能元件，並在一旁顯示元件推薦清單提供其他可能元件以供設計師替換，而筆畫指令的位置、大小直接決定元件的佈局。. 政治大. 立. 圖 37 Xketch 生成元件流程（本研究整理）. ‧ 國. 學. 3. Xketch 推測元件的方式. ‧. 透過初步研究發現設計師會使用特定線稿代表元件，並以此設計筆畫指令，在元件猜測清單內含正確元件的前提下，能否一次猜對元件並不是那麼重要，因. y. Nat. n. al. er. io. 低、粗略的標記符號、簡易象形為主 (徐嘉駿, 2015)。. sit. 此筆畫指令不需為了首次猜對而設計出與實際形象完全相符的筆觸，以記憶負擔. i n U. v. 表 3 筆畫指令示意圖（本研究整理）. 線稿類別. 線稿樣式. Ch. e n g c h i 推測元件. Navigation bar 、Tab bar、Slider、Label、Button、Line 標註線稿. Image、TextView、Shape、Textfield、Button 代表字. ：Table 、. ：Map 、. ：Web. Image 象形線稿. TextView Slider、Segment Control、Switch 34. DOI:10.6814/NCCU201901134.

(44) 筆觸的位置與大小會影響元件的推測清單，利淑惠 (2017) 根據 iOS 官方提供的使用者介面設計規範（HIG, Human-Interface Guideline），依照元件佈局的限制，將元件推測清單中官方不建議使用的元件刪除，一來提升猜測準確率，二來盡可能避免設計師違背介面設計的規範。. 政治大. 立. ‧ 國. 學. ‧. 圖 38 Xketch+ 依佈局提供推薦清單的規則示意圖 (利淑惠, 2017). y. Nat. sit. Vin 的研究中提到，在已產生元件上繪製筆畫指令，其相對位置可能涵蓋了. al. er. io. 父元件與子元件的關係 (Vin et al., 2012)，依此參考 HIG 關於父子元件的配置規範，. n. v i n Ch 表 4 Xketch 表格子元件筆畫規則表 (利淑惠, 2017) engchi U. 設計子元件筆畫指令。 . +. 35. DOI:10.6814/NCCU201901134.

(45) 4. Xketch 修改元件與建立連結的方式. Xketch 依據筆畫指令生成對應尺寸的元件，元件可以透過手動調整大小、位置與樣式，並且能替元件建立頁面連結，進而模擬頁面切換，如圖 39 所示。元件可被操作的行為，如可調整屬性（Property）以及可否進行頁面轉換的行為（Action），皆是根據 Apple App Framework UIKit 所規範的元件互動性做設計。. 政治大. 圖 39 線稿式數位工具的使用流程（本研究整理）. 立. ‧ 國. 學. Xketch 將屬性（Property）與頁面轉換（Action）的選項收納於編輯區的左方列表，透過點擊圖示展開設定對話框，主要是方便設計師在右手拿筆的前提下，. io. sit. y. Nat. n. al. er. ‧. 也可同時使用左手修改樣式以及設定轉換頁面。. Ch. engchi. i n U. v. +. 圖 40 Xketch 設定頁面轉換連結示意圖 36. DOI:10.6814/NCCU201901134.

(46) 二、小結單頁互動歷程有有三項要素：觸發因素、介面型態、離開方式。在 Xketch 上點擊元件產生的觸發事件，可以透過元件行為（Action）來設定。在 Xketch 上能被設定行為（Action）的元件整理至表 5：表 5 可設定行為（Action）的元件列表元件圖示. 元件名稱. Navigation bar item 位在導覽列上的按鈕. 政治大 Textfield 立可輸入文字的對話框 Table 表格. ‧. io. sit. y. Image 圖片. n. al. er. Nat. 學. ‧ 國. Button 按鈕. Ch. i n U. v. Xketch 以繪製線稿圖案的方式生成元件，速度快、且適合初期發想階段。. engchi. 因此要在 Xketch 製作單頁互動，比起提供各式各樣的單頁互動模板，更偏好於生成空白的單頁互動介面，讓使用者能自由地在空白介面中做原型發想。. 圖 41 常見介面佈局示意圖. 37. DOI:10.6814/NCCU201901134.

(47) 第三章系統設計與實作本研究將根據第二章歸納出的單頁互動規則，考量 Xketch 的精神以及操作特性，提出適合實作於 Xketch 的單頁互動製作流程。其設計要點有三：單頁互動的建立、編輯，以及管理，並於後續介紹設計細節。. ㄧ、建立單頁互動於第二章第一節觀察到單頁互動歷程具備「觸發因素」，比如說點擊「對話. 政治大. 框」會從下方滑出鍵盤、點擊「圖片」會將圖片放大置入彈出的置中滿版介面。. 立. 於第二章第三節得知，在 Xketch 上點擊元件產生的觸發事件，可以透過元件行為. ‧ 國. 學. （Action）來設定，因此本創作延續其概念，點擊元件產生的單頁互動，可以透過元件行為來設定。. ‧. y. Nat. 建立單頁互動前，要先決定觸發單頁互動的元件（以下簡稱為觸發元件），. io. sit. 透過設定觸發元件的行為（Action）建立單頁互動，至於要建立什麼樣的單頁互. n. al. er. 動，本創作依單頁互動佈局分成五大類供設計師選擇，在 Xketch 之中主要提供空. i n U. v. 白的單頁互動介面，讓使用者能自由地做原型發想。單頁互動出現時的移動方式，. Ch. engchi. 會根據佈局位置決定，比如說，在下方的單頁互動介面會由下而上的滑出，在左邊的單頁互動介面會由左至右的滑出，設計師不需要額外設定。. 建立單葉互動的流程如下圖 42 所示，實際系統畫面可見表 6： . 圖 42 建立單頁互動之流程圖. 38. DOI:10.6814/NCCU201901134.

(48) 表 6 建立單頁互動之示意圖表. 設計說明. 操作畫面. ". 一、選取觸發元件. 若能設定元件的「行為」，便表示該元件能成為觸發單頁互動的元件。. 開啟行為列表，選擇想要生. n. er. io. 三、在編輯區覆蓋對應的佈. y. Nat. "2. 成的單頁互動佈局。. al. ‧. 頁互動的佈局類型. "1. sit. 二、點選行為按鈕、點選單. 學. ‧ 國. 立. 政治大. Ch. engchi. i n U. v. 局介面. 生成空白的單頁互動介面，使用者可以在介面上繪製筆畫指令擺入元件。. 四、點選下方按鈕結束編輯. ". 單頁互動。. 39. DOI:10.6814/NCCU201901134.

(49) 二、編輯單頁互動 Xketch 本身定位用於初期發想階段的原型設計工具，便於設計師能自由發想是 Xketch 的核心準則，比起提供各式各樣的模板，更適合給予空白介面以供設計師自由繪製。值得注意的是，在單頁互動介面上製作的元件不應該超出介面邊界，因此若設計師繪製的圖案稍稍超出介面範圍，系統將會把生成的元件自動貼齊邊界。根據案例觀察得知，位在單頁互動上的表格通常會與介面同寬，因此在單頁互動上生成的表格會自動符合介面寬度。. 立. 政治大. ‧. ‧ 國. 學 y. sit. io. er. Nat. 圖 43 於 Xketch 編輯單頁互動之示意圖. 再來，設置單頁互動的離開方式同樣重要。考量需簡化單頁互動的製作流程，. n. al. Ch. i n U. v. 生成單頁互動除了會預設疊加灰色濾鏡，並自動替灰色濾鏡建立離開單頁互動的. engchi. 行為，如下圖所示，在原型測試階段點擊圖右灰色濾鏡將會自動回到圖左畫面。若不需此功能，後續能從單頁互動介面的屬性設定中關閉。. 圖 44 左為灰色濾鏡預設離開行為. . 40. DOI:10.6814/NCCU201901134.

(50) 表 7 於 Xketch 再次編輯單頁互動之示意圖. 設計說明. 操作畫面. 一、選取觸發元件. ". 本創作以綠色作為單頁互動的代表色，當結束編輯單頁互動後，將於元件右上角標記綠點表示元件具備單頁互動。. 立. 政治大. 學. ‧ 國. 二、點選右下預覽圖即進入. 再次點選元件時，會於畫面. ‧. 1". 單頁互動編輯模式. 右下角呈現互動預覽圖以供. Nat. sit. y. 設計師查看，若需修改單頁. er. al. n. 輯模式。. io. 互動，點擊預覽圖即進入編. Ch. engchi. i n U. v. 2" . 三、回到單頁互動編輯模式. 欲結束編輯，點選下方按鈕即可。. 41. DOI:10.6814/NCCU201901134.

(51) 三、流程圖設計適用於單頁互動之流程圖為研究目的之一。下圖是 Xketch 原版流程圖，橘色箭頭指向清晰且顯目，但在多個頁面的互動流程下，畫面會顯得雜亂而不易閱讀。因此除了考量單頁互動流程的體現外，流程的表現方式也需要重新設計。. 立. 政治大. ‧ 國. 圖 45 舊版流程圖. 學. ‧. （一）由於原型頁面多為矩形，為求視覺舒適性，屏除同為稜角元素的箭頭，以不同形式的「圓」呈現連結方向性：「空心圓」圈出觸發元件，也就來源. Nat. sit. y. 地，「實心圓」指向觸發元件後顯示的頁面，也就是目的地，如圖 46 所示。. er. io. （二）單頁互動與多頁互動一樣都具備流程，單頁與多頁互動可能會交互連結，. al. v i n Ch 在本設計中，單頁互動的代表色是綠色，因此以「綠線」表單頁互動連結、 engchi U n. 兩者屬於不同層次，卻需要在同一畫面中呈現，因此以不同顏色作為區隔，. 「藍線」表多頁互動連結，如圖 46 所示。. 圖 46 採不同形式的圓呈現連結方向性、綠線表示單頁互動流程 42. DOI:10.6814/NCCU201901134.

(52) （三）要避免連結重疊於頁面，需考量線的呈現、頁面的排列的方式。本創作在繪製連結線條時，會以動態的方式偵測頁面位置，推算最合適的連結路徑，必要時候會以折線呈現，排版規則及實作細節可參考表 8。. 學. ‧ 國. 立. 政治大圖 47 以折線避免頁面重疊. ‧. 將原型的編輯頁面即時截圖. sit. y. Nat. 為了在 Storyboard 上忠實呈現目前的原型進度，會將原型中每一頁面的最新. io. al. er. 狀態截圖下來，以 popup 為例，截圖時機定在： (1) popup 結束編輯時、(2) 返回. n. 至 Storyboard 時、(3) 建立新的 popup 連結時，關鍵程式碼如下：. Ch. engchi. i n U. v. 流程圖的排版規則. 將原型的所有頁面、單頁互動頁面的即時截圖依照流程圖的佈局規則排版，找出所有具備轉頁連結的元件，標註出連結起始線段，再來根據轉頁連結的目標頁面與起始線段的相對位置，推算出連結終點的位置，最後連接起始線段與連結終點，此線段會位在畫面最底層，避免連接線重疊在所有頁面與單頁互動頁面的截圖上，減少畫面雜亂。 43. DOI:10.6814/NCCU201901134.

(53) 表 8 流程圖的排版規則及實作細節. 設計說明. 示意圖. 一、決定頁面佈局. 頁與頁之間保有空間置放單頁互動。. 二、決定連結起始線段. 為求畫面簡潔，起始線段（. ）皆為. 政治大為了避免在同一高度上的元件連結線段重立水平線，也就是說只會往左右兩邊延伸，. ‧ 國. 學. 疊，連結線 y 座標位置會依照元件 x 座標位置坐落於頁面寬度的比例做調整。. ‧. 三、決定連結終點. 終點（）只會出現在目標頁面的四周邊. y. Nat. er. al. n. ）的相對位置，決定終點坐落的. io. 位置。. sit. 上，依據目標頁面與連結起始線段（. Ch. engchi. i n U. v. 四、將起點與終點連線並置於頁面後方. 連接線段會位在畫面最底層，不會讓重疊在頁面與單頁互動頁面的截圖上。. 44. DOI:10.6814/NCCU201901134.

(54) 第四章系統評估與討論在評估階段，評估方式採質化研究中的「易用性測試」，透過觀察法和訪談法找出設計的問題與建議；受測者為 3 名具有一年以上使用者介面開發經驗的職業設計師。評估包含兩部分，第一部分為實際使用 Xketch 並在時限內進行指定任務，第二部分為使用後訪談。藉由觀察受測者的實際使用狀況，以及後續訪談，整理出五點評估結果與討論。. 一、評估方法. 政治大. 本研究目的有二：（一）簡化單頁互動的製作步驟，預期加速原型生成；. 立. （二）設計適用於單頁互動之流程圖。因此將評估重點放在 Xketch 上製作單頁. ‧ 國. 學. 互動是否易於上手、能否達成設計師心中所想的互動，並可以從 Storyboard 的流程圖中掌握當前設計。. ‧. 因本研究創作處於產品發展初期，測試評估是為了找出現有問題與可改進方. y. Nat. 向以作為日後發展參考，所以採用易用性測試，執行方式以觀察法和訪談法為主。. io. sit. 質化研究中的「易用性測試（usability testing）」，根據 ISO（1998）的定. n. al. er. 義，易用性指的是特定使用者在特定使用情境下達到特定目標的有效性、效率與. i n U. v. 滿意度。評估有效性、效率與滿意度沒有公認的一套準則，但易用性測試通常會. Ch. engchi. 評估使用者對任務的完成度、錯誤率、任務所需時間、使用者滿意度、使用上的問題等等。而易用性測試又分為兩種，結構測試（formative tests）與內容測試（summative tests），大部分的易用性測試為結構測試，通常只需要少量樣本即可，透過觀察測試者使用產品的流暢度、精確度、完成任務的時間與完成度等等，找出設計的問題與建議 (Sauro & Lewis, 2016)。觀察法是一種專門技術，觀察者必須對觀察事物有基本瞭解，觀察的目的要明確，且觀察對象應盡量處於自然狀態下，讓觀察者能客觀、精確地記錄所觀察到的事實；訪談法是基於特定目的與他人對談，而獲得受訪者對特定事物的意見，以此方式搜集資訊即為訪談法，訪談法被公認為搜集資料的重要方法(陳信慈, 2010) 45. DOI:10.6814/NCCU201901134.