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

本篇重點

1. 文字：字級、樣式與排版
2. 色彩：樣式與工具
3. 為什麼要規劃通用設計 ?

1、文字 ( Text )

文字字級

rem 是網頁使用的單位，預設 1rem 等於 16px。
常在網頁程式撰寫上，考量後續的維護性，會使用 rem 的倍數關係去調整設定，定義文字字級與間距。

文字段落樣式

• 網頁標題 ( Headline )
• 大標 ( Title )
• 副標 ( Subtitle )
• 主要段落 ( Body )
• 次要段落 ( Body Small )

網頁字型設定

若要讓使用者看到想要呈現的字型，必須要使用者的裝置內也有相同字型的檔案。

• 系統內建字型：能得到最佳的網頁載入效能 ( 考量使用者速度體驗 )
• 雲端字型服務
  • 免費資源：如 Google Font ( 但速度慢，中文字型少 )
  • 付費服務 ( 速度可接受，但成本較高 )

不同系統的預設字型會不想同，若要統一體驗與調性，可以設定各系統都通用的字型。

文字排版

• 字型不超過三種 ( 避免版面凌亂，模糊品牌調性 )
• 字種不超過三種
• 行距要規範 ( 通常以 1.5 倍上下的字級較為舒適 )
• 段落間距要規範

2、色彩 ( Color )

色彩能產生直觀的視覺回饋，具有提升產品一致性、呈現元件狀態或強化視覺層級等作用

色彩樣式

• 主要色 ( Primary Color )：主要色系或用於主要元件上
• 次要色 ( Secondary Color )：又稱作強調色，通常用於輔助元件上

好用工具網站

• 色彩選擇工具
  • Material Design 的 Color Tool 輔助工具 ( 可以即時預覽顏色套用的樣式 )
• 配色網站
  • Adobe Color
  • Coolors

3、通用設計 ( Accessibility )

為什麼要規劃通用設計 ?

讓使用者在任何狀況下都能妥善瀏覽網站。創造最佳的使用者體驗，並為產品帶來最大的效益。

無障礙網頁指南 ( WCAG )

業界最常使用的標竿規範，WCAG 分為三種等級，從簡易到嚴格為：A 級、AA 級、AAA 級
在無障礙網頁指南中，設計師最需要注意的是文字與色彩的對比程度，它會影響文字的閱讀、資訊的傳遞。( 文字對比度：要達到 AA 級 )

對比度檢測工具：

• Color Review
• Accessible Brand Colors

好! 下一篇我們要進入原子設計的第二階段 - 分子 : )