給介面設計初學者 (以全國電子APP開發為例)
本文帶讀者了解開發數位介面所需經過的流程，其中包含User Story — Functional Map — Content Inventory — Flow Chart — UI flow — Wireframe — 1st Usability Testing — Ｍock-up — Prototype — 2nd Usability Testing — Layout — Coding
透過「目的」、「如何實踐」了解每個開發流程的意義與呈現方式。
User Story（使用者旅程）
目的：定義想覺的需求，想像使用者會如何和產品互動，要盡可能包含每一個互動以及使用情境。
如何實踐：以流程為主，將步驟過程遇到的痛點一一標記出來，加以改善。例：Story Board (故事板)、Customer Joutney Map (顧客旅程圖) 等。
Functional Map（功能架構規劃）
像是Site map網路架構圖，通常放在網路最下方，以條列式文字呈現
目的：大略解決問題為焦點，整理功能規格階段，對整個產品的架構梳理與規劃。有助於工程師間的分工、粗估時程、架構師的規劃。
如何實踐：以樹狀圖呈現，層級關係，列出功能、資訊等。
Content Inventory（內容清單）
目的：為了整理哪一頁要有哪些連結的清單表格。產品拆到最細節，為後續清楚知道每頁的所需網站連結。
如何實踐：以表格整理所有嵌入網站連結，分為「內容」和「導覽」。
Flow Chart（使用流程規劃）
目的：使用者操作任務流程，完成任務要經過的功能。
如何實踐：以樹狀圖呈現所有係項流程，開始與結束(圓形框)，動詞(方框)、選擇項目(菱形框)、說明框框等。
UI flow （介面/頁面流程規劃）
目的：以介面畫面呈現實體化(視覺化)概念來說明，完成任務要經過的頁面，對應上述的 Flow Chart。每個步驟要去想試用者現在要去完成什麼任務，中間會經過哪些過程、哪些資訊必須清楚第一個看到、哪個按鈕 (清楚、習慣、簡單)。
如何實踐：頁面的數量呈現以及頁面細節和操作動線。
Wireframe（線框圖） | Low-fi Prototype
目的：框架呈現所有頁面所具備的資訊，重點：確認功能、畫面、按鈕、互動，不是細節 。
如何實踐：參考別人怎麼做(Behance/Dribble) > 紙筆or是電腦Sketch > 細節說明 (必須了解使用者習慣、空間、資訊順序、是否加圖片、什麼圖片、大小) 優先順序說明 (上到下左到右>加入文字>圖片)
1st Usability Testing（易用性測試1）
目的：了解受測者的實際反應跟設計師想像中的反應與落差，來加以改善
如何實踐：給受測者一個使用情境 > 設定任務去完成 > 在操作同時說出自己看到這個介面之後在想什麼，想怎麼操作它，介面是否給出他想要的回應。
Ｍock-up（精描稿）
目的：主要是主視覺設計，模擬使用者實際使用的畫面(無互動)
設計工具：Illustrator、Sketch、AdobeXD、Photoshop
如何實踐：確認LOGO、Icon 、圖片等素材 > 電繪畫幾個重要畫面 > 模擬介面圖展示。
Prototype（測試原型製作）
目的：可互動的介面，為了再做一輪易用性測試
輔助工具：互動特效InVision、AdobeXD或Code
2nd Usability Testing（易用性測試2）
目的：如同測試一
如何實踐：如同測試一
補充：可透過量化測試了解此介面的更多面向，1.執行任務績效 2.SUS系統使用性尺度量表 3.QUIS系統易用性量表
Layout（切版）
目的：輸出所有設計元素圖檔，給工程師製作出來，把圖用HTML/CSS拼到網頁上，最後再交接給工程師寫前後端串接資料。
輔助工具：Zeplin
Coding（編碼）
此階段是前端工程師來執行囉！建議設計師還是要知道唷！
目的：實體化
基本網站前端開發工具：HTML(資料內容)、CSS(視覺定義)、Java Script(互動特效)、RWD(響應式網站)
補充介紹：
動畫製作：After Effect、Adobe Premiere
線上合作平台：Figma
參考資料：
[1] Stephanie Kuo UX流程簡介(上/中/下)
https://medium.com/as-a-product-designer/intro-ux-design-flow-5c55be558a08
[2] Akane Lee UI Designer 讀者來信UI設計流程
https://blog.akanelee.me/posts/686437-ui-design-process/
