User flow UI flow Wireflow UI UX 介面流程 線上協作 專案溝通

如何使用Overflow Tool製作User Flow?

林 倩伃 Maud Lin 2022/02/23 14:00:00
969

《如何使用Overflow Tool 製作User Flow?》(上)

 

關鍵字:User flow、UI flow、Wireflow、UI、UX、介面流程、線上協作、專案溝通

是否收費:是(可免費試用14天)

系統:Mac、Windows

可介接軟體:Sketch、Figma、Adobe XD & Photoshop、Jira、Trello、Confluence

官方影片:點此

官網:https://overflow.io/

 

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

林 倩伃 Maud Lin