按鈕

按鈕是使用者動作的主要視覺指標。

原則

以動作為導向：按鈕應清楚傳達會觸發動作。

清楚的回饋：按鈕的外觀必須在不同互動狀態 (懸停、按下、焦點) 下明顯變化，以提供即時回饋。

一致：所有按鈕都應採用相同的核心視覺語言，方便使用者立即辨識。

彈性：按鈕元件應能容納常見變化，例如納入圖示和不同大小，同時維持一致性。

使用方式與位置

按鈕應放置在相關內容附近。可單獨放置，也能與資訊卡和清單等其他元件一起放置。

check_circle

正確做法

使用漸進式揭露功能，顯示較不相關的動作。

cancel

錯誤做法

在使用者檢視畫面中顯示過多按鈕。

check_circle

正確做法

使用按鈕提示動作。或是使用靜態元素的標題晶片。

cancel

錯誤做法

將按鈕做為靜態裝飾元素。

圖解

自訂

按鈕包含預設和大型變化，以及每種變化的預設、聚焦和按下狀態。圖示可進一步強調、說明及識別按鈕。按鈕大小可強調重要性。