先別急著畫UI，你聽過Flow Chart嗎
為什麼我們需要 Flow Chart?
當我們正興奮的開始執行一個專案時，不論是工程師或是客戶，應該都會希望快點看到一個可見的成果，不管是精美的mockup或是可互動的prototype來快點執行開發，但在這之前到底應該要先做好哪些事才能順利的執行呢？一般中小型專案，在釐清我們的需求後(這又是另一個漫長的旅程)，應該要有的流程如下：
這個流程當然是容許微調的，而今天我們要探討的是在Logic Flow到Wireframe的部分。
Logic Flow也可以說是操作邏輯流程，常常也會聽到許多不同名詞，例如Task Flow、User Flow、Flow Chart等等，這些其實都是Flow，也就是為了了解流程而產生的東西，而在創建這些流程時有助於我們思考之後畫Wireframe時的重要依據，包括連結頁面跟頁面之間的關係，並確認所有需要的功能，也有助於與開發人員討論與了解所有狀態如何運作，便於前端後端開發時的資訊顯示依據。
那要如何去畫出自己跟別人都清楚的流程圖呢？
Flow Chart在維基百科的定義是一種呈現算法、工作流程與過程的複合圖表，可以用一些代表特定意涵的框與符號來約定整個圖表的規範，常見的符號如下：
更多有關Flow Chart的符號解釋應用可以參考：
而我在製作Flow Chart時會做一些變化(還是要基於一些固定符號下作改變)，為了我對於之後畫面數量的確認，藍色方匡會代表實際顯示的頁面、綠色則是我執行的動作、黃色則是會跳出的Dialog…只要定義好並清楚告知，我想都是好溝通的。
以登入註冊為例，可以看到看似簡單的基本會員註冊登入流程，其實要考慮的東西這麼多，包括所有頁面、使用者會做的動作、需要輸入的資訊、還有判斷資訊後的呈現…等，都要先考慮到。
網路上應該可以找到許多關於繪製Flow Chart的網頁與工具，而為了統一作業在sketch上，我用了一些kit來加速我的繪製過程。
或查看更多在：
總結一下Flow Chart的好處，你可以：
- 先不用動腦想著畫面如何配置
- 確認所有需要的功能都在上面
- 確認所有應該有的畫面有哪些，不會後來漏東漏西
- 檢視所有使用者會有的行為，並給予適當的回應
- 檢視所有流程是否太長太複雜需要刪減
- 與開發人員，不管是前端後端，討論該有哪些資訊與狀態
除了Flow Chart，你也可以參考看看Wireflows
先繪製Flow Chart的用意在先不用考慮畫面上的配置，但或許在考慮的同時你也會有Wireframe大概的想像了，所以如果時間允許，或是想跟客戶(需要看到畫面)做更有效率的溝通時，你也可以做Wireflows來更精確的描述畫面之間的運作。
什麼是Wireflows呢?簡單來說就是用Wireframes來繪製Flow，可以看看NNgroup對Wireflows這個詞的定義與如何進行作介紹：
與Flow Chart一樣，要清楚的顯示進入點與出口點、所有用戶的動作、系統會執行的動作與所有情況下的路徑(例如沒有資料時開如何顯示、使用者輸入錯誤時該如何顯示)、使用者決策點，但Wireflows能更快更有效的在面對客戶或使用者時讓他們了解一切，但要注意在繪製時也要不要太在意設計細節與試著配色，因為那會讓看的人可能無法專注在流程上。
常常看到身邊很多工程師從客戶那直接得到一份Prototype或是從設計師那得到mockup，在開始開發前就花了很多時間重新了解對方的流程邏輯或追很多缺少的畫面，所以在開工前如果能想的更多更完善，相信對後來的開發速度與溝通效率上都是非常有用的。
總結整篇來說，在進行繪製美麗的UI前你應該：
1.在確立的資訊架構下思考操作邏輯
2.繪製Flow來與開發人員討論
3.依照Flow繪製Wireframe
感謝你閱讀完這篇文章，如果有任何問題或是需要改正的地方歡迎留言告訴我，或是有任何想法都歡迎跟我分享。
