UI Designer 新手村系列，獻給想認識 UI 領域的你！無論你正規劃轉職成 UI 設計師，或想更了解 UI 領域的基本知識，希望本系列內容都能幫你透析 UI 設計師的日常，了解他們工作上會遭遇的大小事。本篇內容由 Reborn 設計學院 的講師 Chris 撰寫，帶各位快速了解設計流程，以及其中「Flow chart」與「UI flow」的關鍵差異。
許多剛開始學習 UI 設計的新手設計師，常常對於看似非常複雜的設計流程感到困惑，除了最一開始需要先訂立好的產品骨幹—資訊架構外，後續的功能地圖與操作邏輯流程也讓人摸不著頭緒！到底 Flow chart 跟 UI flow 的差別在哪裡呢？本篇文章就來為大家詳細解析！
「雖然平面設計的力量強大，能夠吸引人、說服人、並有激勵與愉悅之效，但若缺乏有效的規劃、組織與管理，它將永遠無法發揮作用。」— 泰瑞．李．史東
UI 設計流程
UI 設計流程第一步： IA 資訊架構
資訊架構 (Information Architecture) 是一門將資訊組織與管理的科學，主要會影響網站上資訊的可用性和可尋性。就像是產品的基本骨幹，利用 IA 資訊架構將繁複的內容整理歸納成一個完整的架構，並標記上導航的標籤 (ex.選單) 讓使用者能夠更輕鬆地找到使用者本身的目的與方向。
這個階段會先以使用者為中心，去認識使用者 (使用者故事) 並探討使用者的求、遇到的困難 (使用者行為模式)，透過了解使用者、釐清使用者的痛點與需求後，再接著規劃網站內容，這邊也會參考整理後的使用者人物誌、訪談結果的情境再接著去設計介面裡的資訊與內容。
UI 設計流程第二步：功能地圖 (Functional Map)
根據使用者分析出來的需求設計出所需的功能，主要是用來與開發人員做確認的溝通工具。
這個階段並不會仔細規劃流程的部分，主要目的是規劃出產品所有需要的功能，交由開發人員評估所需要的人力、技術力、可行性與時間等等的開發成本。
Functional Map
UI 設計流程第三步：操作邏輯流程 (Logic Flow)
用於與開發人員確認所有情境下會出現的狀態與需要的功能，依用途又區分為 Flow Chart 與 UI flow。
Flow Chart 通常以流程圖方式呈現，配合當下的操作設計出相對應的反饋。且 Flow Chart 的形狀標籤其實都擁有各自不同的意義，常見的四個形狀分別是：圓角矩形、矩形、平行四邊形與菱形，其中圓角矩形代表的是一個流程的起點與終點 (Terminator)、矩形代表的是處理流程 (Process)、平行四邊形為資料的產生 (Input/Output)，而菱形則是代表抉擇 (Decision)。
Flow Chart
而 UI flow 則是依據 Flow Chart 所繪製出的頁面流程雛形，通常會有基本的線框稿呈現，在視覺上的溝通更加直觀。
UI flow
UI 設計流程第四步：線框稿（Wireframe）
線框稿是產品的基本雛形，呈現出產品的主要內容與排版架構，會用來與團隊討論並確認是否真正為客戶需要的功能配置。在這個時候不會討論字型與顏色等細節，團隊會專注於圖面上的功能與流程是否真正為使用者所需。
線框稿（Wireframe）
UI 設計流程第五步：互動原型（Mockup & Prototype）
互動原型基本上已經非常接近完成品的樣子。在這個時候便可針對字型、顏色與 Icon 設計等等小細節做調整。Mockup 為無法操作的視覺稿，用於團隊溝通、或與業主確認是否為對方想要的感覺。
UI Mockup
而 Prototype 為可操作的原型，除了用來與團隊內部溝通外，也能提供給使用者做易用性測試。
Prototype
UI 設計流程介紹的部分就到這邊。也要提醒大家，即使團隊照著 UI 流程一個步驟一個步驟做討論與確認，還是有非常大的機率遇到必需回頭修正前一個步驟的東西或新增原本沒有的功能。
流程最大的目的在於溝通與達成共識，儘管大家都不願意拖延專案的進度，但想要做到最好的心情相信是大家共通的！所以良性的團隊溝通反而是讓專案進行順利的最大因素！
➤ 如果想有系統性的學習接軌國際的 UI 課程，歡迎關注 Reborn 設計學院
相關閱讀
（本文經原作者授權轉載，原文：嘿！你知道 Flow chart 跟 UI flow 的差別嗎?）
