國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
第5章 結論
5.1 未來展望
介面與互動設計
本研究從設計師使用Xketch 製作互動式原型的過程中發現，其實 Xketch 在 使用體驗方面仍有以下幾點可改善：
1. 讓元件編輯的流程更加順暢：統整每個元件最常用的屬性，當使用筆畫 指令生成元件後，隨即跳轉到該屬性的編輯畫面。例如：生成圖片元件 後彈出圖片來源選擇視窗（圖53）。
圖 53 圖片元件的連續性修改行為（本研究整理）
2. 改善編輯元件的操作體驗：從實驗結果得知透過屬性列表的方式選取與 修改屬性並不是最好的做法，應該更妥善利用元件周圍的空間與手勢的 搭配。例如：Adobe Comp 在生成文字類型的元件時，可以直接在元件 右側透過上下拖曳的方式調整元件的字型大小；又或者是生成圖片時，
可以拖曳角落原點，即可調整圖片的圓角半徑（圖54）。
‧
5. 優化 Storyboard 的操作行為：目前 Xketch 尚未提供 Storyboard 縮放的 功能，當頁面過多時會有不易閱讀跟使用的問題；或是想要連結頁面時，
在0.5 秒內拉線時經過了已存在的連結線，就會不小心觸發刪除頁面連 結的功能；雖然受測者覺得這樣刪除連結的方式很直覺，但是要如何避 免誤刪的狀況發生，本研究須再進一步探究設計師在Storyboard 模式下
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
期望的互動方式。筆畫指令
根據實驗結果得知使用數量少、簡單記憶的筆畫指令生成元件是比較偏好的 做法，因此Xketch 在未來版本仍會以線條與方塊圖樣構成的初學者筆畫指令為 主，僅保留圖片的專家筆畫指令；並在初學者模式下加入更多關於位置、尺寸關 係的判斷，動態變更可切換的元件類型備選順序以降低搜尋時間。除此之外，還 會記錄使用者前一個使用的筆畫指令所挑選的元件類型，當繪製了與前一個相同 的筆畫指令時，會直接生成上一次所挑選的元件類型。
元件操作
Xketch 目前尚未支援多元件選取的功能，若是以現有的編輯區的介面與互 動方式，受限於繪圖與編輯模式的切換，可能透過元件列表作多元件選取是較好 的做法，但這樣的方式仍不適用於繪圖的情境。因此，本研究在未來必須再深入 探討如何在符合繪圖的情境下支援多元件的選取、複製和貼上的行為。
圖 55 透過元件列表進行元件多選（本研究整理）
‧
本研究從實驗過程中發現部份受測者設計原型時其實有母片（Master Slide）
架構的概念，即所有頁面都會有固定的框架與連結，只是要替換某個部份的內容；
本研究將考慮在Xketch 加入套用母片架構的功能，簡化介面設計的複雜性。舉 例來說，A 頁面已經有了 Navigation Bar，此時 B 頁面若是在頁面頂端繪製了一 條線欲產生Navigation Bar，Xketch 將會提示設計師是否要延續 A 頁面的 Navigation Bar 或者產生新的 Navigation Bar；若選擇延續 A 頁面的 Navigation Bar 則會自動在B 頁面上套用相同的樣式並新增 Back 按鈕，自動建立這兩個頁面一 來一往的連結設定。又或者A 頁面已經建立了 Tab Bar，此時其他頁面也可選擇 延續A 頁面 Tab Bar 的樣式與連結設定或者重新建立新的 Tab Bar。
圖 56 母片架構與自動串接頁面連結的示意圖（本研究整理）
設計模式（
Design Pattern）
本研究在這次實驗中僅有對元件的設計模式進行探討，但從觀察受測過程與 回饋中發現，這些設計模式的後續有可能會接著某些行為模式。舉例來說，當設 計了一個社群網站的登入按鈕，後續的行為應該就是會導向該社群網站登入或存 取要求的頁面（圖57）；若在提供元件的設計模式時能提供後續可能的行為與 頁面，將可有效幫助設計師建立原型，讓原型的體驗更為真實。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
圖 57 以 Facebook 登入按鈕觸發後續流程的示意圖 資料來源：http://chinese.engadget.com/2013/08/23/facebook-login/