談得知 P3 平常使用 InVision 製作互動原型，因為操作邏輯類似所以容易學習。
相較起來，P1 雖然知道本創作製作單頁互動的方式，但前兩、三次還是不自
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(2)能否提升單頁互動原型製作的效率
兩位持正面肯定，一位持否定看法。原先未考量單頁互動介面也需要透 過內容微調來呈現使用狀態的改變，因此而沒有提供複製功能，因此 P2 花費 不少時間在重製多個類似的 popup。然而，若需要使用多個不同的單頁互動 功能，原設計確實能加速製作，如下圖 P1 使用 Xketch 製作的案例所示：
「將商品加入購物車後，購物車從畫面下方升起，點選購物車的移除按鈕，
會彈出警示視窗。」，P1 表示在製作這一段的過程很快速。預設點擊灰色濾 鏡能關閉單頁互動， P2 與 P3 皆認同確實能減輕製作負擔。
圖 50 P1 使用 Xketch 製作的購物流程圖
「popup 不能複製嗎？我只是改改上面數值而已，像我這邊想再加一件 商品進來」（P2）
「要設定連續彈出的 popup 很方便耶！」（P1）
「點擊灰色的地方就會自動關閉 popup 還蠻方便的，這樣就少設定一個 步驟。」（P3）
「有幫忙設定離開 popup 的方式還不錯，那他可以左右滑動關閉 popup
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
(3)對流程圖呈現方式予以正面肯定
實驗任務的第二階段會請受測者使用流程圖和協助人員進行討論。P3 表 示在過往工作經驗中，比起觀看整體流程圖，更常需要拆解說明單一流程。
雖然 Xketch Storyboard 不能將流程圖拆解呈現，但可以自由移動頁面，連線 方式也會根據頁面位置自動調整，所以不需花費太多心力排版就能清楚呈現 頁面間的轉換關係。不過為求畫面簡潔，P3 認為若能手動隱藏暫時不需要呈 現的連結會更好。並透過觀察發現 P3 與協助人員討論時，會習慣將目前討論 的支線整理成一排，如圖 51 所示。
圖 51 P3 與受測人員使用流程圖輔助討論
「整體流程很好，但會擔心放不下頁面，如果我們就先看其中一條線看，
就可以就這條線討論，比較不會亂」（P3）
P1 同意流程圖能清楚地呈現「觸發元件」與「單頁互動介面」之間的關 係，但他認為流程圖更重要的是每一條支線的用意，應該要能附註文字說明，
一來在回顧流程圖時，能提醒自己支線的主要目的；二來用於討論時比較好 聚焦問題。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
「要設計功能的使用流程之前，會先討論這個功能預期達到的目標，同 個功能可能會設計好幾種不同的走向，走哪一條線是誰的責任。」（P1）
「我覺得流程圖一定要有文字說明耶，我習慣標註這一條線想要達成的 效益，這樣討論起來比較能聚焦問題。」（P1）
「這個 wireframe 還蠻適合用來跟ＰＭ討論的，但這個不太會對客戶及 工程師使用，通常跟客戶討論要製作非常擬真的互動模型。」（P2）
(4)再次編輯單頁互動的操作介面建議
P2 表示再次編輯單頁互動，與其提供預覽畫面，不如直接提供單頁互動 的編輯視窗，減少再次點入的步驟。
圖 52 再次編輯單頁互動的介面示意圖
「按了一個物件，出現一個編輯視窗、取消編輯等等，感覺會比較快，
流程一樣，但編輯的感覺不太一樣。臨時修改啥的會比較方便。」
‧
「這個可以作滾動（Scrolling）嗎？」，回答目前還不行，P3 表示那應該要 可以調整大小。後來 P3 無視介面的大小，直接擺放元素於灰色濾鏡上，如 下圖所示。
圖 53 目前單頁互動介面尚未支援縮放示意圖
‧
Xketch 上，希望能簡化單頁互動的製作步驟，加速原型生成，經過評估驗證後，歸納研究貢獻有三點：
第三，成功優化 Xketch 流程圖區域（Storyboard）的呈現與操作方式，如線 條樣式、連結規則、提供縮放功能。受測者普遍認同目前的流程圖足