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

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

by Yuki Lai

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

設計流程六個階段:

1. IA (資訊架構)

– User Story(使用者故事)

2. Functional Map (功能圖表)

3.Logic Flow(邏輯流程)

- Flow Chart (流程圖)

-UI Flow(介面流程)

4.WireFrame(線框圖稿)

5.Mockup(設計精稿)

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秒)內提供回饋,能夠讓使用者保持專注並大大提升作業效率。
            • 退出動畫稍短於進入動畫

你可以參考以下其他文章

Leave a Comment