iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
1
自我挑戰組

UI 設計入門:SEO 尬網路行銷系列 第 7

【Day 07】設計流程:繪製 Mockup 設計精稿之前 ( 網格系統+原子設計 )

本篇重點

  • 設計精稿 ( Mockup )
  • 在繪製設計精稿 ( Mockup ) 之前...
  • 網格系統 ( Grid System ) 是什麼 ?
  • 原子設計 ( Atomic Design ) 是什麼 ?

設計精稿 ( Mockup )

設計精稿 ( Mockup ) 或稱視覺精稿,根據確定好的 Wireframe,進行視覺設計上的配色、版面調整、動畫特效等,強調使用者體驗產品功能部分。是以達到最佳產品功能為目標的視覺呈現。

在繪製設計精稿 ( Mockup ) 之前...

在繪製 Mockup 之前,要先了解兩個概念:

  • 網格系統 ( Grid System )
  • 原子設計 ( Atomic Design )

要了解各平台規範、Web 框架、功能狀態、特效規格等,才不會產出自己覺得、一堆能看不能用的作品。

網格系統 ( Grid System ) 是什麼 ?

網格系統是網頁設計裡最重要的觀念,它給予設計師在排版上的邏輯準則。

如果要製進行製作響應式網頁 ( Responsive Web ) 的規劃,最好能先理解 Grid System 概念,後續才能套用如 Bootstrap 這類型的框架。也能在專案溝通上,輔助與前端工程師進行網頁的設計排版。

網格系統類型:

  • 960 Grid System ( 最經典 )
  • Bootstrap ( 業界最常用的 CSS 框架之一 )

原子設計 ( Atomic Design ) 是什麼 ?

將萬物由原子組成的概念,套用在介面設計上。透過更有系統的方式來建構設計規範。

要先了解有那些 UI 元件、頁面組成元素,才能繪製好的 Mockup。

用原子設計的好處

  • 邏輯清楚、步驟明確的設計架構,可以讓專案團隊成員與利害關係人,看到階段性成果
  • 讓設計作品有一致性、擴充性及再使用性

原子設計的五個階段

  1. 原子 ( Atom ):網頁設計上就是HTML標籤,例如 label, input, button …
  2. 分子 ( Molecules ):原子 + 原子。通常會成為設計系統的基礎。例如 Label + Input + Button 的原子組合,可以成為一個搜尋功能。
  3. 組織 ( Organisms ):從分子組建成有機體, 讓分子可以被重複利用。例如導覽區塊。
  4. 模板 ( Templates ):原子+分子+組織
  5. 頁面 ( Pages ):將模板 ( Templates ) 進一步美化

好! 接下來會運用原子設計的概念,進行一系列相關元件的介紹 : )


上一篇
【Day 06】設計流程環節:回顧篇
下一篇
【Day 08】原子設計:常見元件 ( Buttons 按鈕 + States 物件狀態 )
系列文
UI 設計入門:SEO 尬網路行銷30

尚未有邦友留言

立即登入留言