擬真度轉換

原型設計依據擬真度可分為三個階段，然而本研究由專家訪談發現：設計行動App在 第一個階段，設計師會以白板或紙筆繪製核心頁面進行討論，而非完整流程。確認核心功能 後，隨即進入第二階段——可點擊線稿框（Clickable Wireframe）的製作，為呈現該階段重 點核心概念與操作流程，設計師將以數位工具繪製完整的App流程，作為團隊溝通及使用者 測試的基礎。Clickable Wireframe經過多次迭代完成架構及流程確認後，設計師將以其為基 礎添加視覺設計元素，形成Hi-fi原型進行使用者測試，持續迭代原型直至設計成熟後交付開 發。訪談設計師表示：相較於後兩階段的必要性以及人力考量，紙筆繪製的階段，可能依

App屬性不同而選擇性進行，若App屬於已相當成熟的服務，如購物App，紙筆繪製的階段 甚至可完全省略。

由上述過程可得知，App原型設計必然會經歷的兩個階段，分別為確認結構、流程以 及確認視覺及整體效果（圖38），然而為避免工具轉換所造成的成本，設計師們常在設計初 期即選用Hi-fi設計工具進行Lo-fi原型，以順利銜接設計流程。Hi-fi設計工具為滿足高擬真需 求，具備大量可調整的屬性，在設計初期使用易導致設計師分心，這點在Xketch的使用者研 究中同樣獲得證實。

圖38 行動App設計流程。（本研究整裡）

為使Xketch滿足不同階段的需求，本研究將使用Xketch設計行動App的流程分為兩階 段：首先為確定結構及流程的Lo-fi階段，該階段之產出即為Lo-fi原型，及以前者為基礎，添 加視覺設計及互動的Hi-fi階段，產出則為Hi-fi原型。根據第二章文獻探討可得知行動App原 型由介面及互動效果構成，互動效果在各階段的呈現差別較小，因此介面的擬真程度是造成 Lo-fi與Hi-fi原型差異的主要原因。本研究於Xketch中限制元件樣式屬性在不同階段的可編輯 數量，使設計師在Lo-fi階段可避免過多樣式屬性而導致分心，並可利用Xketch中的「擬真度 轉換」功能直接進入Hi-fi階段，避免工具轉換增加時間成本。

● Lo-fi階段

本研究將元件屬性分為視覺樣式屬性、資訊結構屬性兩類別。視覺樣式屬性包 含：文字顏色、背景顏色、邊框樣式、字體等等屬性；資訊結構屬性為：文字內容、

該元件可觸發之設計模式、連結頁面、轉場效果等。前者強調元件所呈現的視覺效果

，而後者則是以內容為主。

App原型設計由Lo-fi階段開始，該階段重點在於確立App的結構以及流程。為 協助設計師能夠專心於結構與流程，本研究將元件的視覺樣式屬性在Lo-fi時進行限縮

，如：按鈕元件在Lo-fi模式下僅可編輯按鈕文字、灰階背景色（圖39）。避免顯示過 多不必要的屬性，如：彩色的背景顏色、文字顏色、字體選擇等。

圖39 Xketch於Lo-fi模式下的按鈕（Button）可編輯屬性。上圖僅展開與Hi-fi模式不同處。

● Hi-fi階段

Lo-fi原型經過數次迭代，確認結構及流程可行性後，可利用「擬真度模式」切 換進入Hi-fi階段。進入Hi-fi階段後，所有元件將提供完整的屬性供編輯，如：在Lo-fi 模式下無法變更的：背景顏色、背景圖片、文字顏色、字體選擇、邊框粗細皆可進行 編輯（圖40）。藉此轉換，讓設計師在設計App原型避免工具轉換造成的額外成本。

圖40 Xketch於Hi-fi模式下的按鈕（Button）可編輯屬性。上圖僅展開與Lo-fi模式不同。

圖41 相同的登入頁面在Xketch的Lo-fi模式（左）與Hi-fi模式（右）的樣式差異。