設計 UI 的思考順序各位覺得該是什麼樣子的呢？
- 先出 Wireframe，再來想使用者會怎麼操作。
- 先確認使用者會怎麼使用產品功能，再來思考 Wireframe 怎麼畫。
課堂上我很強烈要求學員，做任何思考都要有「依據」，沒有依據憑空想像出來的設計很容易被推翻，也無法說服別人、讓別人理解自己的思考邏輯和原因。所以我的答案會是「2」，先確認使用者會怎麼使用產品功能，再來思考 Wireframe 怎麼畫。
如果你有了功能，就直接開畫 Wireframe ，再拿 Wireframe 來確認使用者怎麼操作功能，恭喜，你會陷入無限漏圖補畫面的囧境。
使者怎麼操作功能這件事和視覺沒有絕對的關係，「操作功能」和使用者的邏輯比較有關。今天在什麼畫面都不給你的情況下，要你憑空說出「會員註冊」的操作流程，你會怎麼思考？
（請不要腦海裡浮現某某網站或 App 的註冊頁畫面…）
以下是某篇文的訪客留言
1.UI Flow 主要就是規劃頁面層級的彼此關係, 所以在其上並不會規劃其頁面中有哪些哪些內容, 因為那些"內容"並不是頁面, 除非那些"內容"有個整體概念(例如使用者點擊頁面上某個按鈕跳出Contact相關的資訊, 但不會從UI Flow上知道Contact裡具體包含什麼) ？
內容＝文字、圖片、聲音、影片。
光 UI Flow 這份文件，的確看不出來這一頁包含哪些「內容」。
但是所有的文件都不是獨立存在，每一份文件皆環環相扣關連性很大。當你在看 UI Flow 時，要把其他文件攤在桌上一起對照。參考 讀者來信：UI 設計流程 。
從上圖中可以看到 UI Flow 在塔中間位置，下方還有 User Story、Functional Map、Flow Chart 這三份文件。更多關於 UX 研究的文件我就沒列入了。
即使 UI Flow 看不到「內容」，但其他文件會補完這個部分。
2.其實UI Flow就是在規劃頁面了, 到底一個網站會有哪些頁面, 就是這時候要規劃完畢(當然之後有可能會因為討論Wireframe後回來再修), 其實在UI Flow之前的所有規劃也不見得很具體知道需要哪些頁面, 例如在Functional map也是整理歸納顧客想在這個網站內包含的內容, 以及功能, 除非他自己有說我一定要有什麼什麼頁面, 而且裡面要有什麼資訊, 不然在UI Flow階段, 這時候頁面到底有幾層, 有哪些, 都必須自己想 ？
你忘記有 Flow Chart 這份文件了。有寫 Flow Chart，根本不用煩惱 UI Flow 怎麼生出來。
本文一開始我就有提到，做設計有「依據」，沒有依據或跳過步驟就會發生「不知道資料怎麼來」、「這玩意我要怎麼腦補生出來」的情況。
在「沒有 Flow Chart」的情況下就開始規劃 UI Flow，等於在自己不曉得功能和使用者之間的關係、不知道使用者怎麼操作功能、不知道使用者在操作任務過程中會發生什麼事，就要思考要提供哪些頁面給使用者…通靈啊！
（當年我在不知道 Flow Chart 的時候也是有了功能就直接跳去 UI Flow…事後補畫面補到死各種出包漏東西。驚覺自己肯定忽略什麼不然怎麼 UI Flow 可以用這麼沒頭沒尾的方式冒出來，圖還畫得這麼痛苦。）
就 UI Designer 的角度可以把 Flow Chart 看成「這個情境下使用者怎麼操作完成任務、軟體怎麼回應」，把 UI Flow 延伸為「因為使用者這樣操作、以及我們有這些功能和資訊要呈現，所以頁面和頁面之間如此串接」。
請參考 Flow Chart 和 UI Flow 這篇文，有 Flow Chart 的圖例。
如果先畫 Wireframe 再來思考使用者怎麼操作呢？
這和「精心準備菲力牛排招待客人，但客人不吃牛肉」有什麼不一樣啊？
「對～我們猜使用者會怎麼操作，畫了這些 Wireframe，再做 Prototype 讓使用者實測驗證，就不會出錯了唷～」
除非是已經套程式的 Prototype ，不然測不出「錯誤狀態」 的啦，不要以為什麼都可以靠使用者測試找出問題好嗎？而且專案都進行到做套程式階段，再來抓漏不覺得太晚了嗎？萬一測出來發現有問題，打掉重練？當套程式的 RD 吃飽很閒嗎？沒事就陪著 UI 一起改來改去？
為什麼不一開始就調查好客人不吃牛，都上菜了才發現他不能吃，連忙補洞生出其他料理充數？
現在 UI、UX、UCD 什麼的一堆新興名詞，都在強調「以使用者為中心」，依使用者的操作習慣去設計。然後在畫 Wirefream 上卻是自己先弄個什麼出來再來想使用者怎麼操作，順序錯了吧。
套一句去年我在 Mopcon 演講的內容：「有這個功能，我們產品一定會大賣啊！」
最好有功能就會賣，使用者要的不是功能，要的是解決他問題的方法。
「有畫 Wireframe，使用者就會配合操作啊！」
「我們要教育使用者！」
所以你知道產品功能怎麼解決使用者的問題、使用者如何操作產品完成任務的操作流程沒有？
沒有，我只是負責畫 UI 撸圖的。
