前言說明

在前幾篇文章中，我們曾經說過構思階段常用的線框稿（Wireframe），可以用來與客戶討論並確認需求，還沒看過的朋友，若有興趣歡迎參考第二篇文章。
接下來為了確保新增的功能或頁面，能流暢且合理的跟其他已上線的功能互動，我們將進一步規劃出使用者流程（User Flow），為後續製作 Prototype 打下更扎實的基礎。

在開始之前，先簡單介紹一下這次會用到的工具 FigJam。
FigJam 是 Figma 旗下的線上協作工具，讓團隊能夠共同打造更好的產品，可以用來線上會議討論、製作敏捷開發流程、流程圖繪製和策略規劃等，也提供了300多個現成模板範本，方便我們快速建立與自訂需要的版型來做使用。——參考來源 FigJam官方

這次透過 FigJam 來製作 User Flow，幫助我們更好掌握整體使用流程，不僅讓畫面之間的銜接更加直覺流暢，也能從使用者的角度出發，確保每一個互動細節都自然合理、進而提升整體體驗。
另外，在實際開發過程中，有時也會遇到功能突然增加或刪減的狀況，這時候如果事先有製作 User Flow，就能快速回頭檢視並判斷哪些地方需要調整或補充，讓開發與設計能更有效率地同步修正✨。

這邊也特別提醒一下🔔
如果是較為龐大複雜的功能需求，或是剛開始的新專案，建議可以先把 User Flow 規劃清楚 ，並與團隊充分討論確認方向後，再依照流程逐步製作每個關聯頁面的 Wireframe。這樣的前期規劃能大幅減少設計與開發階段的來回修改，避免走冤枉路，減少返工的風險，讓整個專案在明確的路徑上高效推進。

但如果是像這次的情境舉例——在既有網站中新增某個功能或欄位，聽完客戶需求後靈感湧現、已經有具體的畫面藍圖，那麼也可以先確認好要新增的頁面，再反過來思考這些按鈕和連結，將如何與現有網站上的哪些功能做互動、觸發哪些流程。
可以根據實務情況，靈活調整流程規劃順序，是更貼近實務需求的做法哦！

使用FigJam製作使用者流程（User Flow）

前往FigJam網站，點擊首頁上的 「Try FigJam for free」 按鈕，開始使用 FigJam 製作。

畫布上預設會顯示對齊用的格線（Grid），如果一開始沒有想法，可以直接從工具列選擇 Templates，套用現成範本，再依需求進行修改。

如果需要新增流程元件，可以點選下方工具列中的 「Shapes and connectors」 來做新增，選擇要使用的形狀後，當游標在畫布上變成「+」符號時，直接拖曳就可以畫出所選的 shape。
在畫布的shape內快速點兩下，可進入編輯模式，出現插入點（Insertion Point）後可以在裡面輸入文字。
shape上方會出現功能列，可用來更換底色、文字大小、字型粗體、插入超連結等設定。如果後續製作發現要更換shape，可以點擊功能列最左側的「Shape」做切換，可以快速切換為其他圖形類型，不需要重新繪製。

如果要用箭頭連接其他shape，只要先在該shape內點一下，讓邊框四周出現藍色的連接點🔵。接著點擊其中一個連接點，就會自動生成相同的 shape，並透過箭頭將它們連接起來。

簡單來說，User Flow 是用來模擬「使用者會如何一步步操作」網站功能。它通常會以流程圖（Flow Chart ) 來呈現，這類流程圖通常具有明確的操作順序，常以線性或條件分支方式呈現，用來說明在特定情境下，使用者從進入系統到完成任務的完整路徑。

以這次「註冊流程」為例，主要流程如下：

開始 → 到註冊畫面 → 選擇 LINE 註冊 → 閱讀條款 → 同意 → 註冊成功 → 導向會員首頁 → 完成流程結束

（註冊登入頁面功能 User Flow ）

結語

簡單來說，建立清楚的 User Flow，不只是幫助自己釐清流程，更是設計與開發團隊溝通的重要橋樑。
無論是從使用者角度思考體驗，還是在跨部門合作時減少溝通落差 (畢竟流程圖正常來講普遍都看得懂) ，一張有邏輯、有條理的流程圖，能有效提升專案效率，也幫助整個開發團隊走得更順。
看完 User Flow 和 Wireframe 的基礎概念分享後，接下來就要進入 Figma 的篇章囉～敬請期待！🤩

參考資料與延伸閱讀

⑴ 使用工具來源：FigJam