今日份的「網站動態小教室」要為大家介紹四種元件狀態 ——​
Hover / Active / Disable / Focus​
除了每個元件的狀態說明外，也和大家分享不同元件的使用方法​
希望能幫助到有需要的人～​

​

❶ Hover​ ​
透過滑鼠 MouseOver 觸發每個圖形的變化，一般稱為Hover。​
當滑鼠移至某個元件時，元件會從 Default 狀態轉變成 Hover 狀態 ，並通過 Hover 互動提示使用者「這裡可以操作」。​

▻ 常見作法​
變色、透明度改變或放大縮小…等。​

​

❷ Activated​
當滑鼠點擊元件時，元件會變化成 Active 狀態。​
目的是提示使用者「你確實點擊了元件」，避免無效的點擊行為讓使用者不滿。​

▻ 常見作法​
變色、透明度改變、陰影變化。​

​

❸ Disabled​
讓按鈕呈現禁止使用的狀態。​
簡單來說當你的網頁有按鈕出現，卻又不希望使用者能夠按下按鈕，就可以使用 disabled 這樣的方式，讓按鈕功能失效。​

通常在登入畫面、表單輸入中比較常看到這樣的按鈕樣式，提示你必須輸入完資料才可以點擊完成。​

▻ 常見作法​
灰階按鈕、低透明度。​

​

❹ Focus​
這個狀態是在表示獲得焦點的元素（例如表單輸入）。​
當使用者點擊、觸摸元素或透過鍵盤的「tab」鍵選擇時會被觸發的狀態​
通常是無障礙網頁設計裡的一環。​

▻ 常見作法​
變色、改變形狀、加上外框顏色、些微動畫輔助。​

​

–

🔔以上介紹的狀態不只用於按鈕而已喔！也可以應用在網站中的圖片、文字，讓網站的細節更加豐富！​

更多資料可以參考：​https://material.io/design/interaction/states.html