從字義上來解釋 UI Flow 就是「介面的流程」，可以想像是「完成任務會經過多少頁面的過程」。有很多種表現形式，文字版 UI Flow 可以當成頁面目錄、圖片版 UI Flow 可以探討頁面操作。
UI Flow 和功能數量無關
UI Flow 很常和 Functional Map、Flow Chart 搞混。
- Functional Map：這個產品包含哪些功能的圖表。
- Flow Chart：完成任務經過哪些邏輯判斷與操作的流程。
- UI Flow：完成任務會經過多少頁面的過程。
「功能」不等於「邏輯判斷操作」，也不是「頁面」。這三者是完全不同的事情，不能混在一起。
曾在高鐵站售票機前買過高鐵票嗎？還記得買票過程中經過多少頁面嗎？台灣高鐵自動售票機買票操作教學 一文有各頁面的截圖，本文就不多說，如果你忘記了可以去瞧瞧。
- 需要的服務：自由座、對號座、一般取票…等。
- 欲購買的票種：單程票、去回票？
- 選擇起程站。
- 選擇到達站。
- 欲搭乘的乘客人數：成人、孩童。
- 選擇車次。
- 確認購票資訊是否正確。
第 8 頁開始串金流在本文中暫不討論，就以到付款為止前的「購票任務」來說，高鐵售票機明顯一個頁面只有一種功能。
若不考慮售票機易用性錯誤率，可不可以把 1 到 6 頁裡包含的功能全部放在同一頁，拉長一點用捲軸操作？
像是把「自由座、單程票、台北出發、抵達左營、1 位成人、車次 0133 發車時間 13:31」，全部擺在同一頁裡行不行？
當然可以啊！購物網站上不是很常見類似的一個結帳長頁嗎？把買票需要的相關條件全部選擇好之後再出現第 7 頁讓購票人確認購票資訊是否正確。
這樣一個結帳長頁上至少有 6 個功能，可是高鐵售票機原始規劃一頁一個功能。所以功能數量和 UI Flow 頁面數量有關嗎？當然沒有！
很常看到交辦到 UI 設計師手上的工作包含「精簡頁面數量」，為什麼要精簡？為了方便好用？頁面數量少就代表方便好用嗎？那為什麼很多售票機一頁只放一個功能，一頁只讓使用者做一件事？
圖片版的 UI Flow
圖片版的 UI Flow 會面臨「雞生蛋、蛋生雞」的問題。要有 Wireframe 或 Mockup 才有辦法做圖片版的 UI Flow ，可是不知道完成這項操作任務需要經過哪些頁面，怎麼畫 Wireframe 或 Mockup？
下面 2 張圖是做 Prototype 工作到一半的畫面，並不是專門畫 UI Flow，但某種程度上也可以當成是 UI Flow 在看。
圖片出處：Low-fi or High-fi? Choosing the Right Kind of Prototype
工程師刻介面不會看著「整個產品展開的全部頁面」在撸，而是只盯著其中一頁放大看，對照 Wireframe 註解文字、標示文件、切圖在刻。
所以千萬不要因為自己做了 Prototype，就以為有了 UI Flow，把這種根本是「伺服器網路線亂插圖」拿給工程師叫他看圖刻介面，他沒摔鍵盤修養算好的了。
真正在畫圖片版 UI Flow 時，箭頭請壓在「觸發」控件上，如果沒有控件而是系統觸發比如發生錯誤，箭頭旁記得註明「觸發條件」，不然誰知道發生什麼事所以跑到這頁，負責刻介面的工程師就算拿著文件也只能靠通靈了。
（不公開的 FB 社團「UI/UX designers」，有好幾位設計師放出他們的工作畫面，和伺服器主機背面的網路線一樣慘烈，有興趣的可以去討論串 感受一下世界各地的設計師們哀嚎。）
文字版的 UI Flow
文字版的 UI Flow 可以當成是書籍目錄，透過編號（書籍頁碼）和標題（章節名稱），在一大疊 Wireframe（書籍內頁）裡找到想看的那一頁介面（書籍內文）。
通常 UI Flow 上的頁面和 Wireframe 的「理想狀態」是連動的。（一個頁面會有不同的狀態，參考頁面的第 6 種狀態：極限狀態 ，下個章節 Wireframe 篇會有更詳細的介紹。）這些狀態有時候會出現在 UI Flow 的規劃裡、有時候不會（可能直接畫在理想狀態那一頁裡了所以 UI Flow 不會出現，視情況而定）。所以絕對會 Wireframe 畫一畫回頭去修改 UI Flow，沒有一次到位這麼美好的事，來回修改是正常的。
文字版的 UI Flow 用途和圖片版的不同，圖片版的 UI FLow 可以清楚看到這個控件按下去、或發生了什麼事，導致前往另一個頁面或跳出不同的訊息。用來確認一個完成任務是否流暢。
而文字版的 UI Flow 則拿來當成「目錄」，當專案較大時，如果要針對特定一個頁面討論，該怎麼從茫茫頁面裡翻到特定的那一頁？如果用上述圖片版，是要打開整張 Flow 大圖，從起點首頁（把整張 Flow 圖縮小縮小）抓著一根線移動畫面連連連連連到該頁，再把該頁放大放大才能討論？
又不是主機網路線打結抓著電線一路尋拉過去…
系列文章：大學生的 UI 選修課
之前我在實踐大學開了一門 UI 設計課，簡單大略地從 UX 研究開始介紹、怎麼察覺使用者的痛點、到 UI Flow、Wireframe、Prototype。在 Blog 寫點除了課堂教學外的延伸思考。
