如何使用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留言、查閱紀錄、下載歷史版本,請查閱下篇。