第三章 Xketch +
第二節 擬真度轉換
原型設計依據擬真度可分為三個階段，然而經先期專家訪談後，本創作發 現：設計行動app 在第一個階段，設計師會以白板或紙筆繪製核心頁面進行討 論，而非完整流程。確認核心功能後，隨即進入第二階段——clickable
wireframe 的製作，為呈現該階段重點核心概念與操作流程，設計師將以數位工
購物app，紙筆繪製的階段甚至可完全省略。
從專家訪談得知，行動app 原型設計主要的兩個階段，分別為確認結構、
流程以及確認視覺及整體效果（圖39），然而為避免工具轉換所造成的成本，
設計師們常在設計初期即選用Hi-fi 設計工具進行 Lo-fi 原型，以順利銜接設計 流程。Hi-fi 設計工具為滿足高擬真需求，具備大量可調整的屬性，在設計初期 使用易導致設計師分心，這點在Xketch 的使用者研究中同樣獲得證實。
圖 39 應用程式開發階段及頁面數量
為使Xketch+滿足行動app 設計過程中不同階段的需求，本創作擬將使用 Xketch+設計行動app 的流程分為兩階段：首先為確定結構及流程的 Lo-fi 階 段，該階段之產出即為Lo-fi 原型，及以前者為基礎，添加視覺設計及互動的 Hi-fi 階段，產出則為 Hi-fi 原型。根據第二章文獻探討可得知行動 app 原型由介 面及互動效果構成，互動效果在各階段的呈現差別較小，因此介面的擬真程度 是造成Lo-fi 與 Hi-fi 原型差異的主要原因，專家訪談中也表示：在設計行動 app 時，流程及互動是首要任務，次要任務則是視覺設計，而動畫的部分則可
本創作擬於Xketch+中限制元件樣式屬性在不同階段的可編輯數量，使設計
圖 40 Xketch+於Lo-fi 模式下的按鈕（Button）可編輯屬性
Hi-fi 階段
Lo-fi 原型經過數次迭代，確認結構及流程可行性後，可利用「擬真度模 式」切換至Hi-fi 階段。進入 Hi-fi 階段後，所有元件將提供完整的屬性供編 輯，如在Lo-fi 模式下無法變更的：背景顏色、背景圖片、文字顏色、字體選 擇、邊框粗細皆可進行編輯（圖41），藉此轉換，讓設計師在設計 app 原型避 免工具轉換造成的額外成本。由於在Lo-fi 階段已經數次迭代，app 的結構與流 程已大致確定，Hi-fi 階段則會專注於樣式的調整，因此左側工具的元件屬性將 以視覺樣式屬性優先排列於資訊結構屬性之前，使設計師能快速調用。
圖 41 Xketch+於Lo-fi 模式下的按鈕（Button）可編輯屬性
第三節 筆劃指令
Xketch 的受測者表示：可記憶的筆劃上限約為五個，超過則可能造成記憶負 擔。為了擴增筆畫所代表的元件數量，延續設計師於紙面原型上的思考模式，本 單行文字（Label）、水平線（Horizontal line）、滑動條（Slider）的代表筆劃。
而矩形可清楚的框出範圍，因此設計師利用矩形作為許多不同元件的示意， 鈕（Button）作為線段的元件備選清單。
圖 43 預設元件及備選清單示意
為區辨矩形所代表的元件，本創作選擇在實際介面中比例較為固定的按鈕 作為基準，搜集介面並分析按鈕長高以及螢幕尺寸的比例。以具備4.7 吋螢幕 的iPhone 6s app 截圖為例（圖 44），經計算 36 張不同 app 截圖後，得出按鈕的 高度最大值落於螢幕高度的12%，物理尺寸則為 125 公釐。所選之介面皆為穩 定運作之app，假設其按鈕尺寸已經使用者確認具備較高易用性，因此此物理 尺寸可視為最適大小，轉換後可供其他尺寸裝置使用。本創作選擇125 公釐作 為判斷矩形元件備選清單的依據。
根據上述規則，本創作提出以下以矩形畫筆對應元件備選清單之規則：
１）矩形筆劃的寬高何者數值較大亦或相等、２）矩形筆劃尺寸是否大於125 公釐。首先根據矩形筆劃的寬高數值，將有三種矩形產生，分別為：寬矩形、
高矩形、正方形，兩條件下將有六種情況。而所對應之元件，本創作選擇iOS app 設計時最常使用的五種，分別為：圖片（Image）、多行文字（TextView）、
文字輸入框（TextField）、幾何圖形（Shape）、按鈕（Button）。以下為五種元件 在六種情況下的排序方式：
1. 寬矩形且高度大於一單位（125 公釐）：
l 備選清單順序：圖片、多行文字、文字輸入框、幾何圖形。
l 由於行動裝置的螢幕範圍有限，因此高度過高則排擠其他資訊亦無必要，
故此處清單移除按鈕或放置於最後選項。
圖 45 高度大於一單位之寬矩形及其規則
2. 寬矩形且高度小於、等於一單位：
l 備選清單順序：按鈕、文字輸入框、幾何圖形、圖片。
l 過小的文字可讀性低，故此處移除多行文字。
圖 46 高度小於一單位之寬矩形及其規則
3. 高矩形且高度大於一單位：
l 備選清單順序：圖片、幾何圖形、多行文字、文字輸入框。
l 行動介面元件佈局以單列垂直方向為主，為符合行動介面易用性，按鈕 以寬矩形或正方形為主，鮮少為高矩形，故此處移除按鈕。
圖 47 高度大於一單位之高矩形及其規則
4. 高矩形且高度小於、等於一單位：
l 備選清單順序：按鈕、幾何圖形、圖片。
l 符合此條件之矩形尺寸較小，無多行文字及文字輸入框之可能，故此處 移除前述兩元件。
圖 48 高度大於一單位之高矩形及其規則
5. 正方形且高度大於一單位：
l 備選清單順序：圖片、多行文字、文字輸入框、幾何圖形。
l 行動介面元件佈局以單欄為主，為符合行動介面易用性，按鈕多為寬矩 形或正方形，鮮少為高矩形，故此處移除按鈕選項。
圖 49 高度大於一單位之正方形及其規則
6. 正方形且高度小於、等於一單位：
l 備選清單順序：圖片、多行文字、文字輸入框、幾何圖形。
l 高度過小之矩形無代表多行文字的可能，且寬度過窄的文字輸入筐易用 性較低，故兩者皆移除。
圖 50 高度小於一單位之正方形及其規則
複合元件（一）表格
智慧型手機由於其硬體尺寸的緣故，介面多以單欄為主要佈局，故單欄顯 示的清單使用頻率相當高，於iOS 中呈現清單的元件即為表格（table view）。
表格與清單類型資料相同，其特性在於每一列皆具有相同的元件佈局，如：商 設定為重複表格列（Repeat cell）以便於任一列進行變更時，同步變更至所有表 格列（圖51），或保持每一列皆具備不同的元件及佈局（圖 52）。為維持重複表 格的樣式統一，僅同步視覺樣式屬性及元件佈局，與內容、互動相關的資訊結 構屬性不進行同步，故設計師仍可逐一編輯顯示文字及圖示。
圖 51 重複清單繪製流程概念 圖 52 不重複清單繪製流程概念
為精準的以基礎比劃提供設計師於表格內所需元件，本創作分析了iOS
故本創作將表格中的每一列分為左右兩區塊：左側為資訊區，右側為顯示
Xketch+ 筆劃
+ + +
+
筆劃不限定繪製順序
顯示、控制項元件（圖53），若當次標存在時，則僅能選擇顯示元件（圖 54）。
圖 53 表格右側顯示元件及控制項元件 圖 54 表格右側的控制項元件
利用以上的方法，設計師可延續基礎元件習得之筆劃，產生符合iOS HIG 建議的重複、不重複的表格。於清單類型資料其中一項進行繪製後，同步至其 他清單內容中的互動模式，可複製於編輯其他清單類型的資料中，如iOS 中的 Collection 元件。
複合元件（二）地圖
地圖互動之效果，故後者為設計地圖功能時的重點。
Xketch+使用Map 的 M 字作為地圖（Map view）的觸發筆劃。繪製 M 字產 生地圖（55 圖）後即可雙擊或由右側工具列中開啟地圖編輯器，便可依照基礎 元件之筆劃繪製要固定於地圖上的元件。以圖56 為例，若設計師欲於政治大學 校門口放置一按鈕以顯示位置資訊，僅需以雙指拖移地圖至指定地點，並於目 標位置繪製按鈕，此時系統將綁定按鈕於當前的地圖位置。關閉地圖編輯器 後，回到編輯畫面（圖55）進行測試。
圖 55 複合元件地圖的初始狀態 圖 56 複合元件地圖的編輯模式
複合元件（三）彈出控制項
在畫面有限的行動裝置上，許多控制項為了達到較佳的使用者體驗，常利 用彈出控制項覆蓋於畫面上的方式呈現，故本創作擬將其歸納為彈出控制項，
並分為四種類型，為：自定義彈出視窗（custom pop view）、通知（alert）、操 作列表（action sheet）、選擇器（picker）。因點擊後觸發的彈出視窗與轉場行為 僅能擇一執行，故將兩者一併呈現於左側工具列中的Action 功能中（圖 55）。
同樣為避免過多筆劃圖樣導致記憶負擔，彈出複合元件仍僅使用線段、矩形作 為辨識，並依照iOS HIG 規範，產生佈局及元件。
圖 58 自定義彈出視窗繪製內容示意
操作列表（Action Sheet）
iOS 系統中常見的操作列表、通知顯示已有明確的規範，可利用矩形及線 段快速產生符合使用介面設計準則的內容。在操作列表上方任意空白處繪製線 段即產生一操作列表項目（圖59），並可利用左右兩側之刪除、調整順序之按 鈕進行編輯。
圖 59 以繪製線段增加 iOS action sheet 的項目
通知（Alert）
圖 60 通知顯示的筆劃規則
選擇器（Picker）
選擇器經常用於時間選擇，常用單位有年、月、日、分、時五種。本創作 分析使用者在設定時間時，可分為兩類：1）設定未來短期內的精準時間，如：
活動開始時間、鬧鐘時間等、2）過去或未來的日期，如：生日、信用卡有效期 限等，故將前者定義為時間選擇器，後者為日期選擇器。另考量客製化需求，
加入數量、自定義選擇器，形成四種選擇器類型。
圖 61 選擇器（Picker）及元件筆劃規則
選擇器產生時預設為時間模式，設計師經由選擇器右側彈出視窗變更類型
（圖61），並以基礎筆劃規則，於選擇器上以繪製線段，新增相關之待選項 目，如：於日期選擇器上繪製線段則新增年份，若於時間選擇器上繪製線段，
（圖61），並以基礎筆劃規則，於選擇器上以繪製線段，新增相關之待選項 目，如：於日期選擇器上繪製線段則新增年份，若於時間選擇器上繪製線段，