選項按鈕

選項按鈕的指導方針

選項按鈕可以讓使用者選取兩個或多個選項的其中一個。每個選項都由一個選項按鈕表示;使用者在選項按鈕群組中只能選取一個選項按鈕。

(如果您對名稱感到好奇,選項按鈕 (Radio Button) 的名稱來自於收音機 (Radio) 上的頻道預設按鈕。)

選項按鈕

範例

說明標準選項按鈕控制項的螢幕擷取畫面

這是正確的控制項嗎?

使用選項按鈕將二或多個互斥選項呈現給使用者,如下所示。

選項按鈕群組

選項按鈕可讓應用程式中非常重要的選項變得更清楚和明顯。當呈現的選項重要到需要更多螢幕空間,且其中選擇範圍的清晰度需要非常明確的選項時,請使用選項按鈕。

選項按鈕同樣強調所有選項,因此可能會對選項引起不必要的注意。除非選項值得使用者額外的注意,否則請考慮使用其他控制項。例如,如果在大多數情況下會建議大部分使用者使用預設選項,請改用下拉式清單

如果只有兩個互斥的選項,請將它們組成單一核取方塊切換開關。例如,使用「我同意」的一個核取方塊來代替「我同意」和「我不同意」兩個選項按鈕。

表示二元選擇的兩個方式

使用者可以選取多個選項時,請改用核取方塊清單方塊控制項。

使用核取方塊選取多個選項

當選項是有固定階段的數字時,如 10、20、30,請不要使用選項按鈕。請改用滑桿控制項。

如果有超過 8 個選項,請改用下拉式清單、單選清單方塊清單檢視

如果可用的選項取決於應用程式目前的內容,或者可能不斷的有所變化,請改用單選清單方塊

注意  

選項按鈕群組的操作在透過鍵盤存取時就和單一控制項一樣。使用 Tab 鍵只能存取已選取的選項,但是使用者可以使用方向鍵循環瀏覽群組。

建議

  • 確定一組選項按鈕的目的和目前狀態非常明確。
  • 一律在使用者點選選項按鈕時顯示視覺化回饋。
  • 在使用者與選項按鈕互動時顯示視覺化回饋。選項按鈕狀態的範例有正常、已按下、已核選和已停用。 使用者點選選項按鈕以啟用相關的選項。點選已啟用的選項不會停用它,但是點選另一個選項會將啟用轉移給該選項。
  • 為觸控回饋和核取狀態保留視覺效果和動畫;在未核取狀態下,選項按鈕控制項應該顯示為未使用或未啟用 (但不是已停用)。
  • 將選項按鈕的文字限制為單行。您可以自訂選項按鈕的視覺效果,在主要文字行下方以較小的字型大小顯示選項的描述。
  • 如果文字內容是動態的,請考慮如何調整按鈕的大小以及調整後周圍的視覺效果會發生什麼變化。
  • 除非您的品牌指導方針指示您使用其他字型,否則使用預設字型。
  • 在標籤元素內包含選項按鈕,這樣點選標籤就可以選取選項按鈕。
  • 將標籤文字放在選項按鈕控制項後面,而非其前面或上方。
  • 考慮自訂您的選項按鈕。選項按鈕預設由兩個同心圓組成—內圓是填滿的 (核取選項按鈕就會顯示),外圓是空心的—還有一些文字內容。但是我們鼓勵您發揮創造力。使用者可安心地和應用程式的內容直接互動。所以您可以選擇以圖形或精巧的文字切換按鈕顯示實際內容。
  • 不要在選項按鈕群組中放置超過 8 個選項。當您需要呈現更多選項時,請改用下拉式清單清單方塊清單檢視
  • 不要並列兩個選項按鈕群組。當兩個選項按鈕群組並列時,很難判斷哪個按鈕屬於哪個群組。使用群組標籤加以區隔。

其他用法指導方針

下圖顯示放置選項按鈕及其間隔的正確方法。

一組選項按鈕

相關主題

適用於設計者
按鈕的指導方針
切換開關的指導方針
核取方塊的指導方針
下拉式清單的指導方針
清單檢視和格線檢視控制項的指導方針
滑桿的指導方針
選取控制項的指導方針
適用於開發人員 (HTML)
input type="radio"
新增選取控制項
適用於開發人員 (XAML)
Windows.UI.Xaml.Controls RadioButton class
新增選項按鈕

 

 

顯示:
© 2016 Microsoft