＃美感養成＃設計指南

流程圖 Flow Chart 繪製

繪製流程圖 Flow Chart，幫助你提升介面設計的完整度

非付費會員點我 👉 免費閱讀此文章

Design by Jhane Chou

流程圖（Flow Chart）幫助我們梳理一系列的操作過程，配合當下的行為設計出相對應的反饋，直觀地見到流程的全貌，補足所遺漏的流程或加以調整行為與事件之間的關係。

流程圖不僅僅輔助流程的優化，讓我們更縝密地進行，也能幫助我們與不同角色進行溝通，達成共識！

大綱
1. 為什麼要學習及繪製流程圖（Flow Chart）？
2. 流程圖（Flow Chart）於精稿（Mockup）之前
3. 符號所代表的意義以及流程圖的畫法
4. 由上至下、由左至右
5. 最後的碎碎唸

為什麼要學習及繪製流程圖（Flow Chart）？

當我處在自由接案的狀態時，介面設計的從無到有，幾乎由自己及客戶共同規劃，有時得幫客戶想得更多、更遠，有時客戶不一定能提供完整的規劃，需要協助客戶完成。

除了顧及介面的視覺（UI）之外，也得兼顧使用者體驗（UX）及控管專案的時程，確保產品能順利上線（PM） 等等角色。

身兼數職幾乎是個人接案常見的狀態，大部分的心態是充滿企圖心，且不放過任何學習的機會；對我們來說，這些都能拓展自己的專業度。

流程圖（Flow Chart）於精稿（Mockup）之前

介面的製作流程有許多種版本，經過幾次實作之後，最終會自行衍生適合自己的版本（囊括部分的 UX 內容，因為是獨立自由工作者，需要顧及的範圍更廣。我會依據專案的規模、時程、預算來簡化流程。）通常我會分成三個大階段：

Design by Jhane Chou

1. 前置階段（重視流程）
2. 設計階段（介面呈現、驗證流程）
3. 開發階段（準備開發人員所需的項目，例如：設計規範、切圖等等）

流程圖（Flow Chart）位於「前置階段」中，可輔助我與客戶把關操作的流暢度，在過程中檢視遺漏的部分，也能與不同角色溝通，建立出彼此的共識。從繪製流程圖的過程中，達到不斷地練習、累積經驗，提升自己的邏輯能力。