按鈕

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

原則

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

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

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

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

使用方式與刊登位置

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

check_circle

正確做法

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

cancel

錯誤做法

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

check_circle

正確做法

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

cancel

錯誤做法

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

圖解

預設

1. 已啟用：預設狀態。 2. 懸停 3. 輕觸

大

1. 已啟用：預設狀態。 2. 懸停 3. 輕觸

自訂

按鈕包含預設和大型變化形式，以及每種變化形式的預設、聚焦和按下狀態。圖示可加強按鈕的強調效果、清楚度及辨識度。按鈕大小有助於強調重要性。