Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點

• 頁面 ( Pages )
• 設計精稿的繪製重點

頁面 ( Pages )

將實際內容 ( 圖片、文章等 ) 套用在特定模板的階段，也就是設計精稿 ( Mockup )。設計精稿是設計師最主要的工作，負責制定產品標準色、規劃元件樣式、套用實際內容的時候，是產品整體風格的呈現。

設計精稿的繪製重點

• 顏色
• 媒體
• 文字
• 元件

媒體 ( Media )

包含了照片、影片等，應用的範圍很廣，如果無法取得客製化素材 ( 較精確表達產品風格 )，可以使用圖庫資源。

圖庫圖片挑選須注意：

• 主題
• 色調
• 構圖
• 響應式的考量

利用 Google Sheet 導入真實資料

透過外掛，可以使用 Google Sheets 整理介面需要的文字或是圖片資料，並統一匯入與更新，很適合資料彙整與協作管理。

文字段落樣式 ( Character Style )

在線框稿時為了去除字型的干擾，會採用單一字型。在設計精稿的階段，可以依照介面風格去規劃文字的樣式，如不同字型與字重等。

元件庫 ( Components )

元件的樣式同樣也能依照需求去調整，在介面繪圖軟體都有專門的功能可以統整規劃。