從字義上來解釋 UI Flow 就是「介面的流程」,可以想像是「完成任務會經過多少頁面的過程」。有很多種表現形式,文字版 UI Flow 可以當成頁面目錄、圖片版 UI Flow 可以探討頁面操作。

UI Flow 和功能數量無關

UI Flow 很常和 Functional Map、Flow Chart 搞混。

  • Functional Map:這個產品包含哪些功能的圖表。
  • Flow Chart:完成任務經過哪些邏輯判斷與操作的流程。
  • UI Flow:完成任務會經過多少頁面的過程。

「功能」不等於「邏輯判斷操作」,也不是「頁面」。這三者是完全不同的事情,不能混在一起。

曾在高鐵站售票機前買過高鐵票嗎?還記得買票過程中經過多少頁面嗎?台灣高鐵自動售票機買票操作教學一文有各頁面的截圖,本文就不多說,如果你忘記了可以去瞧瞧。

  1. 需要的服務:自由座、對號座、一般取票…等。
  2. 欲購買的票種:單程票、去回票?
  3. 選擇起程站。
  4. 選擇到達站。
  5. 欲搭乘的乘客人數:成人、孩童。
  6. 選擇車次。
  7. 確認購票資訊是否正確。

第 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 註解文字、標示文件、切圖在刻。


圖片出處:Interactive Prototype

所以千萬不要因為自己做了 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 寫點除了課堂教學外的延伸思考。

comments powered by Disqus