有系統地思考！UI設計流程架構總整理：IA➝Logic flow➝Wireframe﹥設計精稿和標注文件﹥Prototype 高擬真原型製作

設計流程①：IA➝Logic flow➝Wireframe

設計流程六個階段：

1. IA （資訊架構）

– User Story（使用者故事）

2. Functional Map (功能圖表）

3.Logic Flow(邏輯流程）

－ Flow Chart （流程圖）

－UI Flow（介面流程）

4.WireFrame(線框圖稿）

5.Ｍockup（設計精稿）

6.Prototype（互動原型）

1~3主要是使用者體驗設計師(UX）的工作項目，而4-6主要是使用者介面設計師（UI）的工作。

設計流程②：設計精稿與標註文件

1. Grid System網格系統

重要觀念，給予設計師一個邏輯上的排版準則，對於後續響應式網頁的規劃也舉足輕重。

• 960 Grid Sytem – 常見分為12欄的佈局，總寬度為960px，也有依照情況分成16欄的樣式

• 其他隔線系統：Boostrap 是業界常用的CSS框架之一，裡面也規範了網格系統，還包含了響應式尺寸，基本上也是12欄，而欄間距是30px。
• 8 點網格：用8來作為網格的倍數基數，常見的螢幕解析度都可以被整除，也有設計師用10。

2.Atomic Design原子設計

內容比較複雜，相關資訊可以參考這一篇文章。

設計流程③：Prototype 高擬真原型製作

原型設計是什麼？

原型設計是對產品會如何運作的模擬，能在產品正式發布前檢驗操作流程和使用者回饋，並藉此測試設計的可用性和可行性，已持續進行迭代。

1.原型設計的種類與技巧

–   低擬真原型（Lo-Fi Prototype):是將設計概念轉換成測試畫面的快速方法，最重要的用途是檢查和測試功能，而非產品外觀，通常用於設計樓成的線框稿階段。

*低擬真原型常用工具

• • • 紙筆（又名Paper Prototype) ：線框稿發想前期使用，用於發想階段。
    • 簡報軟體（Keynote、PPT)
    • 介面繪圖軟體(Adobe XD)

–   高擬真原型  (Hi-Fi Prototype)：在介面上的內容和真實要釋出的產品幾乎相同，包括視覺、文案、互動等，藉此測試目標使用者的真實回饋。

*高擬真原型常用工具

• • • • 介面繪圖軟體(Adobe XD、Sketch)
      • 原型設計軟體（inVision、Protopie)
      • 動畫設計軟體（After Effect)

*高擬真原型優點

• • • • 有意義的回饋
      • 測試特定元素

*動畫設定技巧

• • • • 操作結構
      • 狀態回饋
      • 持續時間
        • • 保證400毫秒以內（多爾蒂門檻Doherty Threshold):當介面在400毫秒(0.4秒）內提供回饋，能夠讓使用者保持專注並大大提升作業效率。
          • 退出動畫稍短於進入動畫