本篇重點

• 設計精稿 ( 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 ) 進一步美化

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