如何使用Overflow Tool製作User Flow?
《如何使用Overflow Tool 製作User Flow?》（上）
關鍵字：User flow、UI flow、Wireflow、UI、UX、介面流程、線上協作、專案溝通
是否收費：是（可免費試用14天）
系統：Mac、Windows
可介接軟體：Sketch、Figma、Adobe XD & Photoshop、Jira、Trello、Confluence
官方影片：點此
—
一、用Overflow對於專案的幫助？
1.視覺化的呈現，比純文字容易理解
在過去的經驗裡，可以發現比起純文字的文件，客戶對於具象的圖樣更加有感，能夠幫助後續專案的順利進行。
2.幫助釐清流程、取得雙方共識
在較大型的專案中，會有許多不同的使用情境、系統機制需要考量；以圖像化的方是將畫面一一呈現，並加入流程線、判斷式、文字說明，能夠幫助雙方釐清流程及確認需求，進而取得雙方共識。
3.多方線上溝通討論與紀錄
overflow有便利的線上留言功能。
有註冊帳號的用戶可以在登入後，針對連結內的頁面、流程按下戳記，進行留言。
＊關於網頁保密功能請詳見-設定密碼
目前設計團隊的作業流程為：
1.在會議前先提供連結予客戶
2.請客戶先瀏覽頁面及流程內容，若有任何問題，針對該頁面戳記留言。
3.在會議上點選頁面戳記，討論該問題。
團隊將此流程導入專案執行後，確實能有效提升會議速度及溝通效率。
＊關於留言、查閱紀錄請詳見-如何使用Overflow Tool製作Userflow（下）線上溝通與紀錄
------------------
二、如何開始？
1.註冊帳號
可以訂一組帳號密碼，或使用gmail快速完成註冊。
2.安裝overflow到本機
下載網址：點此
3.安裝擴充插件
各軟體插件安裝教學：點此
------------------
三、實作範例
1.如何把畫面傳到Overflow?
＊以下以 Adobe XD 軟體匯出檔案至overflow製作為例
Step1.點選要輸出到overflow的畫面(可單選/多選)，再點「Sync to Overflow」:
Step2.出現Overflow介接視窗後，再次點選「Sync to Overflow」:
介接成功後，Overflow編輯界面會開啟，你也會看到剛剛選擇要輸出的頁面：
2.繪製流程及判斷式
・拉流程線
Step1.滑鼠箭頭靠近頁面，會出現提示標示（紅色凸點處）：
Step2.長按左鍵不放，拖拉線條到下一個接續頁面，完成後再放開：
*箭頭的樣式、顏色可以點選選單做變更：
Step3.在線條上快速點左鍵兩下，可以輸入說明文字：
・畫判斷式
Step1.點選視窗左上角「＋」> Shape > Diamond：
Step2.出現十字圖標後，長按左鍵不放，拖曳出需要的尺寸再放開：
*判斷式的顏色、樣式(純外框/填滿)可以點選選單做變更：
Step3.在方塊上快速點左鍵兩下，可以輸入說明文字：
完成範例：
------------------
3.上傳檔案到雲端，取得分享連結
Step1.點選視窗右上角「上傳」icon
Step2.點選「New」按鈕
Step3.點選「Upload」按鈕：
*若需使用密碼，請開啟「Protect link with passphrase」，並輸入密碼：
Step4.成功上傳後，會得到專屬連結，點選連結後即可看到文件：
備註：
1.無註冊、登入帳號，也可以瀏覽此網址（若有設定密碼即輸入密碼即可查看）
2.若需於頁面留言，則需註冊、登入帳號（可使用gmail快速註冊）
如何於Overflow留言、查閱紀錄、下載歷史版本，請查閱下篇。
