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

本篇重點

• 常被搞混的單選按鈕 ( Radio Buttons ) 和複選框 ( Checkbox )
• 連結 ( Links )
• 圖示 ( Icon )

常被搞混的單選按鈕 ( Radio Buttons ) 和複選框 ( Checkbox )

通常在具有選擇選項的情境出現，依使用情況分別是：

• Radio Buttons：多個選項中只能選一項
• Checkbox：可以同時選取多個選項

單選按鈕和複選框常見狀態

• 開啟 ( On )
• 關閉 ( Off )
• 停用 ( Disable )

連結 ( Links )

連結排版

• 通常是藍色
• 會加入下底線
• 可以選擇加上圖標 ( 若下底線會造成文字的可閱讀性降低時 )

連結狀態

• 可用 ( Enable )
• 懸停 ( Hover )
• 點擊 ( Pressed )
• 已拜訪 ( Visited )

圖示 ( Icon )

圖示樣式

• 填滿 ( Filled )
• 外框 ( Outlined )
• 雙色 ( Two-Tone )
  通常用來作為裝飾或功能按鈕。
  功能按鈕通常會在 Filled Icon 跟 Outlined Icon 間轉換。

線上圖示資源：

• Material Design Icon
• Font Awesome

用線上圖示服務的好處：
自己繪製的 Icon，會需要針對不同尺寸、顏色的情況重新繪製。可能會造成網頁的圖檔過多而影響網頁效能。

• 圖示狀態變化
• 圖示狀態變化
• 程式端好處理

圖示排版

• 輔助文字 ( 除了少數大家都懂的圖示；不同設計師使用的情境可能不同 )
• 簡單明確
• 樣式一致
• 避免混淆 ( Icon 與其連結功能的相關性要高 )

圖示狀態

• 開啟 ( On )
• 關閉 ( Off )
• 停用 ( Disable )
• 懸停 ( Hover )

好! 下一篇會繼續介紹原子階段剩下的常用元件哦 : )