在繪製設計精稿 ( Mockup ) 之前，先了解原子設計的五大階段，對於後續的溝通與產品建構，會更有幫助!
Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點【常用元件】

• 按鈕功能
• 按鈕種類
• 按鈕樣式
• 按鈕排版
• 物件狀態

按鈕功能

按鈕 ( buttons ) 通常是用來讓使用者採取行動或做出選擇的元件，在點擊後會產生立即的反饋。

按鈕種類

依重要程度或想要使用者操作的順序：

• 填滿按鈕 ( Contained button )：最希望使用者操作的目標，例如：馬上結帳
• 外框按鈕 ( Outlined button )：用於次要目標，如：加入願望清單
• 文字按鈕 ( Text button )：通常用於展開卡片的操作，如瞭解更多
  

按鈕樣式

使用適合的樣式，打造產品風格的整體感與一致性：

• 直角
• 圓角：設計上，邊緣圓角會將視線集中在中間，引導使用者進一步操作。
• 切角

按鈕排版

• 文字垂直置中
• 文字精簡並保持單行
• 粗體字重
• 英文全大寫或字首大寫
• 加上圖標或陰影的事項

物件狀態 ( States )

互動性是介面設計與平面設計最大的不同，設計元件用相似的視覺變化 ( 顏色、陰影等 ) 來表達目前狀態，藉此回饋給使用者，現在操作的階段或目標。

常見的物件狀態：

• 可用 ( Enable )
• 停用 ( Disable )
• 懸停 ( Hover )
• 聚焦 ( Focused )
• 啟用 ( Activated )
• 點擊 ( Pressed )
• 拖移 ( Dragged )
• 選取 ( Selected )
• 開啟 ( On )
• 關閉 ( Off )
• 錯誤 ( Error )
  

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