使用單選按鈕,用戶可以在一組互斥相關選項之間進行選擇。 用戶可以選擇一個選項,而只能選擇一個選項。 單選按鈕是所謂的,因為它們的運作方式就像單選上的通道預設一樣。
screen shot of three radio buttons 三個單選按鈕的螢幕快照
一般單選按鈕群組。
單選按鈕群組的行為就像單一控件。 只有選取的選項可以使用 Tab 鍵來存取,但使用者可以使用箭頭鍵循環瀏覽群組。
這是正確的控件嗎?
若要決定,請考慮下列問題:
控件是用來從一組互斥選項中選擇一個選項嗎? 如果沒有,請使用另一個控件。 若要選擇多個選項,請改用 複選框、多重選取清單 或複選框清單。
兩到七之間的選項數目嗎? 由於使用的螢幕空間與選項數目成正比,因此請將選項數目保留在介於 2 到 7 之間的群組中。 針對八個以上的選項,請使用 下拉式清單 或 單選清單。
複選框會是更好的選擇嗎? 如果只有兩個選項,您可以改用單一 複選框。 不過,複選框只適用於開啟或關閉單一選項,而單選按鈕可用於完全不同的替代方案。 如果兩個解決方案都可行:
如果清除複選框的意義不完全明顯,請使用單選按鈕。
不正確:
正確:
在正確的範例中,選擇不是相反的,因此單選按鈕是較佳的選擇。
使用精靈頁面上的單選按鈕來清除替代專案,即使複選框是可接受的。
如果您有足夠的螢幕空間,而且選項很重要,足以充分使用該螢幕空間,請使用單選按鈕。 否則,請使用複選框或下拉式清單。
不正確:
在此範例中,選項不夠重要,無法使用單選按鈕。
正確:
在此範例中,複選框是有效使用此周邊選項的屏幕空間。
如果頁面上有其他複選框,請使用複選框。
下拉式清單會是更好的選擇嗎? 如果大部分情況下建議大部分使用者使用預設選項,單選按鈕可能會比必要專案更注意這些選項。
如果您不想要注意選項,或不想鼓勵用戶進行變更,請考慮使用下拉式清單。 下拉式清單著重於目前的選取範圍,而單選按鈕則同樣強調所有選項。
以預設按鈕
screen shot of highest quality as default button 最高品質的螢幕快照
在此範例中,下拉式清單著重於目前的選取範圍,並禁止使用者進行變更。
如果頁面上有其他下拉式清單,請考慮下拉式清單。
一組命令按鈕、命令連結或分割按鈕是否為較佳的選擇? 如果單選按鈕只用來影響命令的執行方式,通常最好改為呈現命令變化。 這麼做可讓用戶選擇具有單一互動的正確命令。
選項是否呈現程式選項,而不是數據? 選項的值不應以內容或其他數據為基礎。 針對數據,請使用下拉式清單或單一選取清單。
如果在精靈頁面或控制面板上使用控件,控件是否為主要指令的回應,而且使用者稍後是否可以變更選擇? 若是如此,請考慮使用命令連結,而不是單選按鈕,讓互動更有效率。
指引
常規
依邏輯順序列出選項, 例如最有可能選取為最簡單、最複雜或風險最低的選項。 不建議依字母順序排序,因為它與語言相關,因此無法當地語系化。
如果沒有任何選項是有效的選項,請新增另一個選項來反映這個選擇, 例如 None 或不適用。
偏好垂直對齊單選按鈕,而不是水平對齊。 水平對齊較難讀取和當地語系化。
正確:
垂直單選按鈕對齊
在此範例中,單選按鈕會垂直對齊。
不正確:
水平單選按鈕對齊
在此範例中,水平對齊較難讀取。
使用群組方塊來組織單選按鈕群組,這通常會導致不必要的螢幕雜亂。
不要使用單選按鈕標籤作為群組方塊標籤。
不要使用單選按鈕的選取專案:
- 執行命令。
- 顯示其他視窗,例如對話框以收集更多輸入。
- 動態顯示或隱藏與所選控件相關的其他控制項(螢幕助讀程式無法偵測到這類事件)。 不過,您可以根據選取範圍動態變更文字。
次級控件
將次級控件放在或下方(縮排,使用單選按鈕卷標排清)單選按鈕及其標籤。 以冒號結束單選按鈕標籤。
在此範例中,單選按鈕及其次級控件會共用單選按鈕標籤及其訪問鍵。 在此情況下,箭頭鍵會將焦點從單選按鈕移至其次級文本框。
如果它們共享單選按鈕的標籤,請保留啟用相依的可編輯文字框和下拉式清單。 當使用者在方塊中輸入或貼上任何專案時,請自動選取對應的選項。 這麼做可簡化互動。
具有文字框
screen shot of page range dialog box with text box 的頁面範圍對話框螢幕快照
在此範例中,輸入頁碼會自動選取 [頁面]。
避免使用其他單選按鈕或複選框巢狀單選按鈕。 可能的話,請將所有選項保留在同一層級。
正確:
在此範例中,選項位於相同的層級。
不正確:
在此範例中,使用巢狀選項會增加不必要的複雜性。
如果您使用其他單選按鈕或複選框進行巢狀單選按鈕,停用這些次級控件,直到選取高階選項為止。 這樣做可避免混淆次級控件的意義。
預設值
因為一組單選按鈕代表一組互斥的選項,因此 預設一律會選取一個單選按鈕。選取最安全的選項(以避免遺失數據或系統存取),以及最安全且私人的選項。 如果安全性和安全性不是因素,請選取最有可能或方便的選項。
例外狀況: 如果沒有預設選取專案,則為:
- 安全性、安全性或法律原因沒有可接受的默認選項,因此用戶必須做出明確的選擇。 如果使用者未進行選取,請顯示錯誤訊息以強制顯示錯誤訊息。
- 使用者介面 (UI) 必須反映目前的狀態,而且尚未設定選項。 預設值不正確地表示使用者不需要進行選取。
- 目標是收集不偏不倚的數據。 預設值會偏向數據收集。
- 單選按鈕群組代表處於混合狀態的屬性,當顯示多個沒有相同設定之對象的屬性時,就會發生這種情況。 在此情況下,請勿顯示錯誤訊息,因為每個物件都有有效的狀態。
將第一個選項設為預設選項,因為使用者通常會預期,除非該順序不合乎邏輯。 若要這樣做,您可能需要變更選項標籤。
不正確:
在此範例中,預設選項不是第一個選項。
正確:
第一個單選按鈕的螢幕快照
在此範例中,選項標籤會重新標示為讓第一個選項成為預設選項。
建議的大小調整和間距
單選按鈕重設大小和間距
建議針對單選按鈕重設大小和間距。
標籤
單選按鈕標籤
- 為每個單選按鈕加上標籤。
將唯一 存取金鑰指派給每個標籤。 如需指導方針,請參閱 鍵盤。
使用 句子樣式大寫。
將卷標寫為片語,而非句子,且不使用結尾標點符號。
- 例外狀況: 如果單選按鈕標籤也會為其後面的次級控件加上標籤,請使用冒號結束標籤。
使用平行片語,並嘗試保留所有標籤的長度大致相同。
將標籤文字放在選項之間的差異上。 如果所有選項具有相同的簡介文字,請將該文字移至群組標籤。
使用正片語。 例如,使用 do 而非 do,而列印而不是不列印。
只描述標籤的選項。 讓標籤保持簡短,以便輕鬆地在訊息和文件中參考標籤。 如果選項需要進一步說明,請使用完整的句子和結尾標點符號,在 靜態文字 控件中提供說明。
使用說明文字
screen shot of radio buttons with explanatory text單選按鈕的螢幕快照
在此範例中,選項會使用個別的靜態文字控件來說明。
注意
將說明新增至單選按鈕並不表示您必須為所有單選按鈕提供說明。 如果可以的話,請在標籤中提供相關信息,並在必要時才使用說明。 不要只重述卷標的一致性。
如果強烈建議使用選項,請將 “(recommended)” 新增至標籤。 請務必將 新增至控件標籤,而不是補充附註。
如果選項僅適用於進階使用者,請將 “(advanced)” 新增至標籤。 請務必將 新增至控件標籤,而不是補充附註。
如果您必須使用多行標籤,請將標籤頂端與單選按鈕對齊。
請勿使用次級控件、其包含的值或其單位卷標來建立句子或詞組。 這類設計無法當地語系化,因為句子結構因語言而異。
單選按鈕群組標籤
使用群組標籤來說明群組的目的,而不是如何進行選取。 假設使用者知道如何使用單選按鈕。 例如,不要說「選取下列其中一個選項」。
所有單選按鈕群組都需要標籤。 使用靜態文字或群組方塊,將標籤撰寫為單字或片語,而不是句子,以冒號結尾。
例外 狀況:如果標籤只是對話框的 主要指令,請省略標籤。 在此情況下,主要指示會採用冒號(除非是問題)和存取密鑰(如果有的話)。
可接受 :
備援單選按鈕群組標籤的螢幕快照
在此範例中,單選按鈕群組卷標只是主要指令的重述。
更好:
僅
screen shot of radio button main instruction only 單選按鈕主要指令的螢幕快照
在此範例中,會移除備援標籤,因此主要指令會採用冒號。
請勿將存取金鑰指派給標籤。 這樣做並非必要,而且會讓其他存取密鑰更難指派。
- 例外狀況: 如果並非所有控件都可以有唯一的存取鍵,您可以將存取鍵指派給標籤,而不是個別控件。 如需詳細資訊,請參閱 鍵盤。
文件
參考單選按鈕時:
- 使用確切的標籤文字,包括其大寫,但不包含訪問鍵底線或冒號。
- 在程式設計和其他技術檔中,將單選按鈕稱為單選按鈕。 其他地方都會使用單選按鈕,特別是在用戶檔中。
- 若要描述用戶互動,請使用 click。
- 可能的話,請使用粗體文字格式化標籤。 否則,只有在需要防止混淆時,才將標籤放在引號中。
範例:按兩下 [目前頁面],然後按下 [確定] [確定]。