用設計工具 Overflow 繪製專業感十足的流程
如果你考慮用更有效率的方式繪製 Userflow，快來看看這篇心得
嗨，我想跟大家分享 Overflow 這個工具在專案中的使用心得。我在 2019 年參與了一項大型設計案並且碰到不少麻煩，身為 UX 設計師，我們在專案中用了 Overflow 這個工具來完成 Wireflow 的製作，好增加工作效率。實際使用時間有半年以上，包含同時設計 Web 及 APP 流程。如果你對這個工具有點好奇，我接下來會快速分享個人的使用經驗，歡迎繼續看下去。
為什麼畫 Flow 還要特地找軟體？
我們專案上主要還是習慣使用 Sketch，但是用 Sketch 畫流程真的是 UX 設計師的惡夢。困難點在於 Sketch 中每次移動 Artboard，繪製好的線段就會被納入該 Artboard 而不見。在一次處理多個流程或複雜的流程時，維護文件變得更耗時重工。因此我們一直以來都在尋找較好的替代工具，來繪製這些大型的 Wireflow 文件。
為什麼選擇 Overflow？
2018 年畫 User Flow 的話題產品
當初看到 2018 Design Tool Survey 研究報吿後，發現 Overflow 是設計「流程」的階段中，較受歡迎的軟體，因此決定跟進試用，也發現使用起來的效率還不錯。當然在 2019 年的調查報告中也是排的很前面。
將 Overflow 導入專案的速度很快
上手門檻低，真的不需要花時間研究
要知道在接案公司，設計師最怕的就是轉換工具的過程中需要付出的投入成本。畢竟從轉換到新工具開始，設計師需要一定時間，才能達到有效率地操作、避開潛在技術問題、建立系統性工具包及流程。那麼除非使用新工具的效益巨大，不然為什麼要放棄已經使用已經很熟練的工具呢？實際試用 Overflow 的時候我們就有感覺，他幾乎跟 Sketch 可以無縫接軌，介面也相當直覺簡單，很直截了當的發揮效益。
把畫面都輸出到 Overflow 就對了
Overflow 在設計上很有巧思，上手不需要太多的技巧。首先，因為它可以從繪圖軟體例如 Sketch 或 Figma 直接輸出畫面到 Overflow，基本上畫線框稿的技巧都在原先熟悉的軟體中完成即可，輸出完成後他就是一張一張的畫面圖片，可以輕鬆移動、排列、補上頁碼標籤、拉出特定元件標注、畫流程判斷式。簡單來說，我們只需要掌握從 Sketch 輸出到 Overflow 後的線圖繪製技術就好。
定義一套專屬風格，像做簡報一樣直覺
再來，設計師在 Overflow 上要套用「Style」非常直覺簡單。我們都知道要讓一張 Flow 好讀，必須要有一貫的描述邏輯，告訴閱讀的人，哪些流程是主要、哪些是發生錯誤時會引導的流程、哪些是共用畫面，所以幫這些輔助標示下定義也是設計師在繪製流程圖時的必要工作。（關於畫 flow 的技巧可以進一步參考我之前的文章：Flowcharts 幫助你整理出好設計）
Overflow 根據你常用的元素，像形狀、線段、畫面及文字等，分開儲存 Style 設定。操作上跟 Keynote 或 Google Doc 很像，你可以編輯幾個常用的 Style。比如說每次拉完矩形，就根據用途套用上頁碼標籤的 Style，或者是邏輯判斷式的 Style。這跟平常做簡報或寫報吿，輸入文字後再套用 H1、H2、B1、B2、caption 的風格是一樣的邏輯。超級簡單。
使用 Overflow 後，對設計流程的影響
單獨將「畫流程」這件事拉出來放到另外一個軟體中製作，其實是一個雙面刃。先說缺點，你會需要一些輸出的時間，還要確保電腦記憶體仍然充分。優點則是把設計畫面跟撰寫文件分開成兩件事，只要 Artboard 名稱相同，輸出到 Overflow 的畫面就可以一直覆蓋更新。這樣一來，更新個別線框畫面不會影響到整體流程，設計師也不需要在修改流程、移動畫面時，擔心畫面上的哪個東西被遺漏掉。萬一要寫的說明很多也可以輕鬆移動畫面，騰出更多空間（對比 Sketch 檔案一大，稍微移動 Artboard 也要等個半天）。
我自己是鬆了一口氣，在緊湊的專案中，運用 Overflow 有效地把撰寫文件的負擔降低，可以更專注在討論使用者在流程上的體驗、產品的資訊架構，再來整理頁面狀態及編寫說明。
使用 Overflow 遇到過的問題
但是當然，每個軟體都還是會有自己的問題。以下是幾種讓人心煩的狀況：
- 檔案過於複雜時程式載入 Style 風格會延遲，例如設定好置中的文字會跑版顯示成置左，要重新開檔案等系統再跑一次。但是這只發生在用了4、5個 Page，每個 Page 裡面的畫面至少也有40張的狀況。
- 如果選擇的畫面太多，從 Sketch 輸出畫面到 Overflow 的時間可能會很久。盡量保持記憶體容量足夠，才可以避免等到地老天荒，不然就少選幾頁，分多次輸出吧。
- 沒有正版授權時連開 .overflow 原始檔瀏覽都不行，只能看輸出的 pdf。對，只要免費試用/版權有效期一過，手上的檔案就變成黑盒子，需要你再次充值才打得開。
帳號的購買流程
當初為了要跟老闆提購買正版帳號時有先研究一下，這邊也整理給需要的人(詳情還是以官網最新公告為準啦)：
- 創建組織，並以組織擁有者的帳號購買「座位」(Seat)
- 邀請其他帳號加入。可邀請的帳號數量依購買座位數決定，並有帳號權限設置，僅能由 Admin 進行邀請。
- 可隨時調整購買數量，並於專案結束後取消每月付款。
更多資訊官網的教學都寫得很清楚喔👇
結語
以上是我整理的 Overflow 使用心得，可能適合我的軟體，不一定就也會適合所有人，但如果遇到大型專案，我還蠻推薦多運用 Sketch 以外的工具來輔助工作流程的。
如果你覺得這篇文章還不錯，也可以去看看我講 UX 技巧的文章： 傳達使用者體驗的 Wireframe 技巧，以及 Flowcharts 幫助你整理出好設計。希望更多人一起來為使用體驗努力喔！
喜歡我分享的設計心法，請按下“拍手”10–30下，讓我們知道你喜歡的方向和內容，也讓我們更有動力持續分享新文章。記得Follow我和我們的Medium社團Flow話不完，隨時收到UX職場上的第一手資料。
