五步驟拆解UI 設計流程，詳解Flow chart 跟UI flow 的差異

資訊架構(Information Architecture) 是一門將資訊組織與管理的科學，主要會影響網站上資訊的可用性和可尋性。

就像是產品的基本骨幹，利用IA 資訊架構將 ... 關鍵字搜尋 {{savedItemsDescription}} 公司 職缺 新創實習 專欄 企業網誌 中高階獵才 關鍵字搜尋 {{savedItemsDescription}} 刊登職缺 註冊 登入 公司 職缺 新創實習 專欄 企業網誌 中高階獵才 刊登職缺 登入 註冊   文章內容 相關文章 推薦公司 熱門關鍵字 {{keyword}} 近期搜尋紀錄 {{record}} 五步驟拆解UI設計流程，詳解Flowchart跟UIflow的差異 2021-10-28 產業知識 {{tag.name}} UIDesigner新手村系列，獻給想認識UI領域的你！無論你正規劃轉職成UI設計師，或想更了解UI領域的基本知識，希望本系列內容都能幫你透析UI設計師的日常，了解他們工作上會遭遇的大小事。

本篇內容由Reborn設計學院 的講師Chris撰寫，帶各位快速了解設計流程，以及其中「Flowchart」與「UIflow」的關鍵差異。

    許多剛開始學習UI設計的新手設計師，常常對於看似非常複雜的設計流程感到困惑，除了最一開始需要先訂立好的產品骨幹—資訊架構外，後續的功能地圖與操作邏輯流程也讓人摸不著頭緒！到底Flowchart跟UIflow的差別在哪裡呢？本篇文章就來為大家詳細解析！   「雖然平面設計的力量強大，能夠吸引人、說服人、並有激勵與愉悅之效，但若缺乏有效的規劃、組織與管理，它將永遠無法發揮作用。

」—泰瑞．李．史東   UI設計流程   UI設計流程第一步：IA資訊架構 資訊架構(InformationArchitecture)是一門將資訊組織與管理的科學，主要會影響網站上資訊的可用性和可尋性。

就像是產品的基本骨幹，利用IA資訊架構將繁複的內容整理歸納成一個完整的架構，並標記上導航的標籤(ex.選單)讓使用者能夠更輕鬆地找到使用者本身的目的與方向。

這個階段會先以使用者為中心，去認識使用者(使用者故事)並探討使用者的求、遇到的困難(使用者行為模式)，透過了解使用者、釐清使用者的痛點與需求後，再接著規劃網站內容，這邊也會參考整理後的使用者人物誌、訪談結果的情境再接著去設計介面裡的資訊與內容。

    UI設計流程第二步：功能地圖(FunctionalMap) 根據使用者分析出來的需求設計出所需的功能，主要是用來與開發人員做確認的溝通工具。

這個階段並不會仔細規劃流程的部分，主要目的是規劃出產品所有需要的功能，交由開發人員評估所需要的人力、技術力、可行性與時間等等的開發成本。

  FunctionalMap   UI設計流程第三步：操作邏輯流程(LogicFlow) 用於與開發人員確認所有情境下會出現的狀態與需要的功能，依用途又區分為FlowChart與UIflow。

FlowChart 通常以流程圖方式呈現，配合當下的操作設計出相對應的反饋。

且FlowChart的形狀標籤其實都擁有各自不同的意義，常見的四個形狀分別是：圓角矩形、矩形、平行四邊形與菱形，其中圓角矩形代表的是一個流程的起點與終點(Terminator)、矩形代表的是處理流程(Process)、平行四邊形為資料的產生(Input/Output)，而菱形則是代表抉擇(Decision)。

  FlowChart   而UIflow則是依據FlowChart所繪製出的頁面流程雛形，通常會有基本的線框稿呈現，在視覺上的溝通更加直觀。

  UIflow   UI設計流程第四步：線框稿（Wireframe） 線框稿是產品的基本雛形，呈現出產品的主要內容與排版架構，會用來與團隊討論並確認是否真正為客戶需要的功能配置。

在這個時候不會討論字型與顏色等細節，團隊會專注於圖面上的功能與流程是否真正為使用者所需。

  線框稿（Wireframe）   UI設計流程第五步：互動原型（Mockup&Prototype） 互動原型基本上已經非常接近完成品的樣子。

在這個時候便可針對字型、顏色與Icon設計等等小細節做調整。

Mockup為無法操作的視覺稿，用於團隊溝通、或與業主確認是否為對方想要的感覺。

  UIMockup   而Prototype為可操作的原型，除了用來與團隊內部溝通外，也能提供給使用者做易用性測試。

  Prototype   UI設計流程介紹的部分就到這邊。

也要提醒大家，即使團隊照著UI流程一個步驟一個步驟做討論與確認，還是有非常大的機率遇到必需回頭修正前一個步驟的東西或新增原本沒有的功能。

流程最大的目的在於溝通與達成共識，儘管大家都不願意拖延專案的進度，但想要做到最好的心情相信是大家共通的！所以良性的團隊溝通反而是讓專案進行順利的最大因素！       ➤如果想有系統性的學習接軌國際的UI課程，歡迎關注Reborn設計學院   相關閱讀 如何成為新創團隊渴求的UI設計師？ 簡訊設計共同創辦人張志祺談社群力：讓我們從「吵架」開始吧！ 設計究竟是怎麼一回事？讓知名平面設計師告訴你設計接案客戶溝通術、設計產業樣貌   （本文經原作者授權轉載，原文：嘿！你知道Flowchart跟UIflow的差別嗎?）   熱門文章 1 別再照抄履歷範本了，1分鐘幫你揪出3大履歷錯誤，這些地雷千萬別踩！ 2 【防疫隔離假懶人包】確診、居家隔離怎麼請假？哪些假別有薪水可領？ 3 2022新鮮人求職全攻略：從履歷到面試，畢業生第一次找工作就上手 4 一篇文帶你認識常見軟體工程師種類、工作內容、薪水差異（前端、後端、全端、App開發...） 5 軟體工程師想找接案/遠距工作？精選6個國內外遠端求職管道！ 文章類別 人物/企業專訪 求職攻略 產業知識 職涯觀點 Yourator營運日記 人資招募策略 自我成長 數位工具 文章標籤 創業 新創 電商 手遊 數位廣告 面試 求職 海外工作 履歷表 職涯規劃 企業管理 人事制度 組織戰略 企業文化 求職信 履歷 社會企業 經營管理 日本 物聯網 東南亞市場 產品開發 實習 跨國團隊 事業開發 日商 線上學習 旅遊新創 跨國新創 人資 GrowthHacking 社群經營 設計 接案 DataScience 區塊鏈 Yourator 外商 IoT AI 專訪 OKR 團隊 組織文化 徵才管理 組織 徵才 徵才品牌 FinTech 薪資 Resume 履歷製作 數位轉型 職涯博覽會 校園徵才 工程師 攻略 職涯 職涯履行家 訪談 Podcast 徵才活動 求職活動 生產力工具 筆記軟體 Y社日常 轉職 字型 justfont 金萱 遠距工作 行銷 VC 作品集 實習 功能更新 平台更新 軟體 App 招募 獵頭 YouratorRecruit Yourator獵頭 遠端工作 WFH WorkFromHome 在家工作 WorkFromHome 協作工具 遠端面試 女人迷 社群 團隊文化 女人迷 人才培育 LinkedIn 資工 新鮮人 疫情 跨國 工具 職涯選文 martech 遠端求職 軟體工程師 JD 求職趨勢 旅遊業 旅遊業 BD JobMenta 前端工程師 front-end UI/UX 產品經理 數位行銷 大數據 pm 離職 RiTE Design 設計思考 podcast B2B 履歷範本 自傳 FB IG Size 薪水 自媒體 客戶成功 數據分析 職涯諮詢 CV 資料科學 MBA 畢業生 推薦資源 粉絲專頁 相關分類文章 一篇文帶你認識常見軟體工程師種類、工作內容、薪水差異（前端、後端、全端、App開發...） 客戶成功是什麼？什麼樣的人適合當客戶成功經理／專員？薪水、未來展望！ 數據分析師(DataAnalyst)薪水與工作內容完全解析：無經驗非本科系能成為數據分析師嗎? 【年後轉職這邊走】元宇宙真的會逆風高飛嗎？盤點2022五大上升產業 {{company.brand}} {{company.shortDescription}} {{getLocation}} {{company.category.name}} {{tag.name}} 相關推薦公司 × ContactUs 我們的聯絡方式 email:[email protected] 求職者服務專線：(02)77550586轉704 企業服務專線：(02)77550586轉702 確定