# Web/Moblie UI Design Notes ## Overview ![開發流程](https://i.imgur.com/lOFjMuH.png) 開發流程產出順序 1. 使用者要什麼? --> User story 2. 從需求中整理出哪些功能? --> Funtional Map 3. 使用者怎麼操作這些功能? --> Flow Chart 4. 操作的過程需要哪些頁面? --> UI Flow 5. 頁面要放什麼內容/元件? 怎麼被操作? --> Wireframe 6. 使用者看到的頁面長什麼樣子? --> Mockup 7. 使用者可操作的雛形長什麼樣子? --> Prototype 每個團隊的作法不同，沒有標準或正確一定要這樣做的流程。 > Q. 沒有那麼多時間無法照這樣流程產出？ > **當然啊，因為要把時間留在後面改來改去嘛～～～～～** 時間總是要花的，看是花在前期規劃，還是後期補洞而已。 可以先比對檢視現有的工作流程和產出，看能不能互補的。 UX 架構對應到 UI 的工作產出 ![](https://i.imgur.com/sxYgEqn.png) ## User story ![使用者故事](https://i.imgur.com/0B2qSre.png) 使用者故事描述了對使用者、系統或軟體購買者有價值的功能。用以使用者在使用產品時，會遇到的組織起大小故事之間的脈絡關係。 [詳細內容請見此](https://hackmd.io/iywFTSQmRCKCsysFhLY2LA) ## Functional Map 指組織起產品的規格與功能。把產品包含的「資訊」和「功能」分開來整理，可以讓專案成員快速瀏覽到產品內容(Domain Model 資訊層級)、功能(技術可行性)等重要資訊。 用以交付開發團隊評估所需要的資源成本，人力、技術力、時間。 ![簡易版 Functional Map 1](https://i.imgur.com/EuNuZXC.png) ![簡易版 Functional Map 2](https://i.imgur.com/e0etIZm.png) 手法：從 User Story 挑關鍵字，將抽象的「需求」轉變成可實現的功能，同時思考內容資訊從哪來，並檢查 [工作清單：Functional Map](https://blog.akanelee.me/posts/233766-job-listings-functional-map/) 整理時記得諮詢開發團隊，關於功能的可行性、成本。 ## Flow Chart 是指使用者使用產品時，它的每一步操作會遇到什麼結果、系統會如何回饋，等等。需要關注使用者如何操作、頁面如何回饋，從而引導使用者完成使用者目標。 用途： * 完成某個任務操作流程。 * 預先構想各種狀態和可能的操作。 * 考慮觸發回饋、回饋、迴圈和模式、規則。 「新增一個鬧鐘」的操作流程 ![新增一個鬧鐘](https://i.imgur.com/yg9foLo.png) 「登入註冊系統」的操作流程 ![登入註冊系統](https://i.imgur.com/qdEuDpg.png) ## UI Flow ![UI Flow](https://i.imgur.com/eulKdL0.png) 相對於 Functional map，UI flow 則更重視頁面的數量呈現以及頁面細節和操作動線。且為 Wireframe 的目錄。 Functional Map 主要目的在「將抽象的需求轉變成能被實現的功能」；而 UI Flow 則是「妥善安排功能與資訊在頁面之間的操作動線」(Navigation)。 [工作清單：UI Flow](https://blog.akanelee.me/posts/233854-job-listings-ui-flow/) 整理後的 Functional Map: ![Functional map](https://i.imgur.com/g4Mae1Y.png) 設計出的 UI Flow: ![UI Flow](https://i.imgur.com/4A0Ilub.png) Flow Chart 和 UI Flow Flow 就是「流程」，UI Flow 是頁面流程，而 Flow Chart 是流程圖，兩者是完全不同的圖表。 就 UI Designer 的角度可以把 Flow Chart 看成「這個情境下使用者怎麼操作完成任務、軟體怎麼回應」，把 UI Flow 延伸為「因為使用者這樣操作、以及我們有這些功能和資訊要呈現，所以頁面和頁面之間如此串接」。 ## Wireframe [詳細內容請見此](https://hackmd.io/@d_SnxkUcQWu_8erQuQ7kZA/ryv_mjY0L) ## Mockup 產品的視覺風格定調 * Logo * 主要視覺風格設計，搭配概念設計的口號、文案介紹 * UI Style Guide * UI Component 標示文件包含: * 色票 * 排版: 對齊、尺寸、間距、邊框、座標 * 文字: 字體、字級、行高、字距、文字顏色、背景色、透明度 * 圖片: 尺寸、座標、濾鏡、透明度 > 長線產品必備，以便維護、版本管理。 ## Prototype 指可以被操作的產品雛形，目的在模擬使用者與介面之間的互動。 用 Prototype 進行使用者測試，以便驗證產品的發展方向是否正確。 * 低保真原型：去除所有視覺設計細節之下，進行頁面結構、功能、內容規劃，用完即丟。如. 紙本手稿、線框稿 Wireframe、紙箱或黏土做的。 * 高保真原型：非常逼真的產品雛形，包含內容資訊、頁面結構、功能、視覺、互動細節。如. Mockup, Web UI, Mobile App。 高保真原型推薦用 UI Prototype 工具製作。 e.g. Figma, inVision, Sketch, Adobe XD, framer, Axure, Balsamiq MockupsHype3, Principle, POP app, Draw io, PPT. ___ ## 資料來源 [讀者來信：UI 設計流程](https://blog.akanelee.me/posts/686437-ui-design-process/) [初學者的 Functional Map](https://blog.akanelee.me/posts/168560-functional-map/) [初學者的 UI Flow](https://blog.akanelee.me/posts/168863-the-beginner-ui-flow/) [Flow Chart 和 UI Flow](https://blog.akanelee.me/posts/276159-flow-chart-and-ui-flow/) [如何挑選 UI/UX 設計課程](https://blog.akanelee.me/posts/602438-ui-ux-design-course-selection/) [與工程師的協作之路-Functional map 與 UI flow](https://ithelp.ithome.com.tw/articles/10203866) [Akane老師UI 入門課程筆記：Flow Chart、UI Flow](https://medium.com/@renetakiwi/akane%E8%80%81%E5%B8%ABui-%E5%85%A5%E9%96%80%E8%AA%B2%E7%A8%8B%E7%AD%86%E8%A8%98-flow-chart-ui-flow-7fa37dff177) [Akane老師 UI 入門課程筆記：Wireframe、Mockup、Prototype](https://medium.com/@renetakiwi/akane%E8%80%81%E5%B8%AB-ui-%E5%85%A5%E9%96%80%E8%AA%B2%E7%A8%8B%E7%AD%86%E8%A8%98-wireframe-mockup-prototype-bcb73700cef2) [先別急著畫UI，你聽過Flow Chart嗎](https://medium.com/as-a-product-designer/%E5%85%88%E5%88%A5%E6%80%A5%E8%91%97%E7%95%ABui-%E4%BD%A0%E8%81%BD%E9%81%8Eflow-chart%E5%97%8E-c6715f055cfc)