4.3 實驗結果與討論
4.3.2 介面與互動設計的觀察結果
麼符合繪圖介面（Sketching Interface）的情境。
4.3.2 介面與互動設計的觀察結果
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
常使用Navigation Bar 架構組成的頁面都會搭配 Push 動畫換至下頁，再透過返回
（Back）動畫回到上一頁，或者是在 Tab Bar 架構下每頁所搭配的樣式與連結的 頁面應該都是相同的；不管是目前的Xketch 或是現有的原型設計工具，基本上 都沒有支援頁面之間元件樣式與行為的一致性或者是跨頁面元件群組的功能。
圖 48 一致的 Navigation Bar 樣式（本研究整理）
圖 49 一致的 Tab Bar 連結目標（本研究整理）
‧
Navigation Bar、Tab Bar、Segment Control 這類元件都有其專屬的子元件，表示 若是要生成某種子元件，必須先產生對應的父元件。第一版的Xketch 是將子元
“像標題列（Navigation Bar）的標題會想點兩下就能開啟編輯文字功 能，子元件會比較希望可以直接點到就能編輯。”（P1）
“有些元件可以直接點下去就能編輯文字好像不錯，像是Bar Title。”
（P4）
頁面連結
建立頁面間的互動行為與動畫效果對於互動式原型是相當重要的。Xketch 延續了先前研究中提出的Storyboard 模式，讓設計師可以很容易的觀看與建立原 型的使用流程，亦可透過編輯區的行為（Action）列表指定元件跳轉的頁面與動 畫；在七位受測者中有六位受測者偏好使用Storyboard 模式，覺得在 Storyboard
‧
模式建立頁面間的連結是相當直覺的設計（4.57±0.53）。“比較喜歡先看到所有頁面的概觀，最後再一次把每個頁面串接起來。”
（P4）
“看到現有的頁面再進行頁面連結比較符合習慣，也比較容易發現哪個 頁面有問題。”（P6）
“做頁面設計時同時從行為列表設定連結，再用Storyboard 模式檢查與 修正。當頁面上可連結的元件資訊太多時會不方便找到想要的元件，在 編輯區選取元件再設定行為比較不會亂掉。”（P3）
“Storyboard 比較一目了然，控制上比較方便。用 Action 設定容易會漏 掉誤以為已經連結了，全部畫完再一次連結比較不會漏掉。”（P1）
本研究在實驗過程中發現受測者想連結A 頁面至某頁面時，會先點在 A 頁 面上思考要連去哪個頁面，此時卻誤觸了長按（Long Pressed）事件變成了移動 頁面；從此現象可以推論在原型設計時，將觸碰點停留在某頁面上的行為意義可 Xketch 僅提供換頁動畫的預覽圖可以選擇，但在實驗過程中有受測者則認為換 頁的動畫只是強化紙面原型頁面間替換的效果，在互動式原型上應該支援同頁面 的動畫效果，例如：元件的淡入淡出、彈跳視窗…⋯…⋯等。
‧
等，但是現在被作為換頁（Transition）功能。”（P2）
“屬性列表的功能蠻完整的，但是行為與類型列表的東西少了點，會比 較沒有能操控的感覺。”（P2）
動畫效果是原型設計中相當重要的一項元素，透過動畫效果可以改善使用者 體驗。例如：利用由下往上推出的隱藏選單或訊息對話框，能降低頁面間轉換的 次數（圖51）；顯示讀取提示（Active Indicator）能持續給予使用者視覺回饋，
讓使用者知道何時可以進行下一步，也可適當的舒緩等待的焦慮。如何設計元件
‧
“不知道Storyboard 的按鈕為什麼要放在頁面列表裡。”（P2）
“測試與編輯的按鈕可以換個位置，容易誤觸到屬性、行為、類型的按 令能改善這個問題（例如：清單可以用TableView、ListView 做代表）；但上述 的問題同樣發生在元件屬性名稱，以工程師使用的iOS 開發環境 Xcode 中的元
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
件屬性名稱命名，設計師與工程師的認知就會有所差異。圖 52 Xketch 的整體性評估量表（本研究整理）
從圖52 得知受測者普遍同意使用 Xketch 繪製線稿圖樣生成元件的方式很直 覺，也可快速設計出互動式原型，清楚表達原型的使用流程；元件提供常用的設 計模式能提高設計的效率，其真實的元件樣式與尺寸也有助於展示時的互動能 力。
“利用筆畫指令生成元件是很快的，而且元件的大小跟真實比例比較接 近。”（P1, P5, P6, P7）
“適合用在外面討論，不用帶電腦就可以討論流程。”（P2）
“圖片能快速切換成GIF 或卡片列表很方便。”（P1）
“可以隨時切換Storyboard 很方便。”（P7）
“頁面轉換的動畫與圖片提供的效果也很棒。”（P3）
“可以馬上看到心裡想要的元件樣式，做出來蠻有樣子。”（P4）
受測者覺得元件提供的設計模式應該還可以更豐富，目前提供的主要仍是以 Xcode 內建的為主，對於設計師而言可能還是過於零散不易使用。
“希望能有各式社群網站相關的按鈕樣式。”（P1, P3）
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
“選單的Hamburger Icon 也蠻常用的。”（P2）
根據上述的評估與分析，本研究得到了以下實驗假設結果：
þ 筆畫指令生成的元件類型不正確，可以透過元件列表快速地選取修正。
þ 設計師經過一定時間的練習，將能使用筆畫指令隨著腦海中的構圖完成 頁面設計。
ý 設計師經過一定時間的練習，將會偏好使用專家模式的筆畫指令。
þ 設計師要建立頁面連結時，將會偏好在 Storyboard 模式下設定。