按鈕、卡片與標籤：讓小零件看起來是一家人

先從生活例子開始

小零件各有工作，也需要共同規則

想像一間店的招牌、價目表和指示牌，各自都漂亮，卻使用完全不同的字和顏色。客人會花更多時間理解。網頁裡的按鈕、卡片和標籤也是如此。

按鈕執行一個動作；連結帶你到另一個地方；卡片把相關內容放在一起；標籤用簡短文字說明分類或狀態。標籤若可點擊篩選，就應明確表示它是可操作的按鈕。

01 · 動手比較

同一組零件，試著改變共同規則

按「固定目前對照」再修改圓角或間距，觀察按鈕、卡片與標籤如何一起變化。選擇狀態，看看按鈕如何告訴使用者正在發生什麼。

02 · 各自的工作

一眼分清楚：哪裡能做什麼？

主要按鈕放最重要的一步，例如「預約諮詢」；次要操作可以比較安靜，例如「查看服務」。不要讓每個選項一樣搶眼。連結文字應說明目的地，像「看完整作品」，讓人點之前知道會去哪裡。

卡片適合把圖片、標題、簡短說明與入口放在一起。標籤像收納盒上的貼紙，可以標示「品牌設計」或「新作品」；不是所有標籤都能點。

03 · 操作狀態

讓畫面回答：現在發生什麼？

• 預設：按鈕準備好，可以操作。
• 滑鼠停留：游標移上去時提供提示；手機沒有固定的滑鼠停留。
• 鍵盤焦點：使用 Tab 時，用清楚外框顯示目前位置。
• 停用：目前不能操作，應在附近說明原因，而不是只改成灰色。
• 載入中：操作進行時顯示文字回饋，完成或失敗後也要有結果。

本篇的狀態選單是教學示意。真實網站需要實作相應功能，並讓使用滑鼠、鍵盤和觸控的人都能完成操作。

04 · 帶回自己的網站

先寫三條共用規則

1. 主要與次要按鈕如何區分？
2. 相同種類的卡片使用什麼圓角與內距？
3. 標籤是資訊，還是可以按的篩選？

文字不會送出或永久儲存，重整會還原。