共用方式為


單選按鈕

注意

此設計指南已針對 Windows 7 建立,但尚未更新較新版本的 Windows。 大部分指引仍適用原則,但簡報和範例不會反映我們目前的設計指導方針

使用單選按鈕,用戶可以在一組互斥相關選項之間進行選擇。 用戶可以選擇一個選項,而只能選擇一個選項。 單選按鈕是所謂的,因為它們的運作方式就像單選上的通道預設一樣。

一般單選按鈕群組。

單選按鈕群組的行為就像單一控件。 只有選取的選項可以使用 Tab 鍵來存取,但使用者可以使用箭頭鍵循環瀏覽群組。

注意

版面配置鍵盤流覽 相關的指導方針會以個別文章呈現。

 

這是正確的控件嗎?

若要決定,請考慮下列問題:

  • 控件是用來從一組互斥選項中選擇一個選項嗎? 如果沒有,請使用另一個控件。 若要選擇多個選項,請改用 複選框多重選取清單 或複選框清單。

  • 兩到七之間的選項數目嗎? 由於使用的螢幕空間與選項數目成正比,因此請將選項數目保留在介於 2 到 7 之間的群組中。 針對八個以上的選項,請使用 下拉式清單單選清單

  • 複選框會是更好的選擇嗎? 如果只有兩個選項,您可以改用單一 複選框。 不過,複選框只適用於開啟或關閉單一選項,而單選按鈕可用於完全不同的替代方案。 如果兩個解決方案都可行:

    • 如果清除複選框的意義不完全明顯,請使用單選按鈕。

      不正確:

      橫向的螢幕快照複選框

      正確:

      橫向/直向單選按鈕的螢幕快照

      在正確的範例中,選擇不是相反的,因此單選按鈕是較佳的選擇。

    • 使用精靈頁面上的單選按鈕來清除替代專案,即使複選框是可接受的。

    • 如果您有足夠的螢幕空間,而且選項很重要,足以充分使用該螢幕空間,請使用單選按鈕。 否則,請使用複選框或下拉式清單。

      不正確:

      顯示/不顯示單選按鈕的螢幕快照

      在此範例中,選項不夠重要,無法使用單選按鈕。

      正確:

      的螢幕快照未顯示此訊息複選框

      在此範例中,複選框是有效使用此周邊選項的屏幕空間。

    • 如果頁面上有其他複選框,請使用複選框。

  • 下拉式清單會是更好的選擇嗎? 如果大部分情況下建議大部分使用者使用預設選項,單選按鈕可能會比必要專案更注意這些選項。

    • 如果您不想要注意選項,或不想鼓勵用戶進行變更,請考慮使用下拉式清單。 下拉式清單著重於目前的選取範圍,而單選按鈕則同樣強調所有選項。

      以預設按鈕最高品質的螢幕快照

      在此範例中,下拉式清單著重於目前的選取範圍,並禁止使用者進行變更。

    • 如果頁面上有其他下拉式清單,請考慮下拉式清單。

  • 一組命令按鈕、命令連結或分割按鈕是否為較佳的選擇? 如果單選按鈕只用來影響命令的執行方式,通常最好改為呈現命令變化。 這麼做可讓用戶選擇具有單一互動的正確命令。

  • 選項是否呈現程式選項,而不是數據? 選項的值不應以內容或其他數據為基礎。 針對數據,請使用下拉式清單或單一選取清單。

  • 如果在精靈頁面或控制面板上使用控件,控件是否為主要指令的回應,而且使用者稍後是否可以變更選擇? 若是如此,請考慮使用命令連結,而不是單選按鈕,讓互動更有效率。

  • 這些值不是數值嗎? 針對數值資料,請使用 文字框下拉式清單滑桿

指引

常規

  • 依邏輯順序列出選項, 例如最有可能選取為最簡單、最複雜或風險最低的選項。 不建議依字母順序排序,因為它與語言相關,因此無法當地語系化。

  • 如果沒有任何選項是有效的選項,請新增另一個選項來反映這個選擇, 例如 None 或不適用。

  • 偏好垂直對齊單選按鈕,而不是水平對齊。 水平對齊較難讀取和當地語系化。

    正確:

    垂直單選按鈕對齊 螢幕快照

    在此範例中,單選按鈕會垂直對齊。

    不正確:

    水平單選按鈕對齊 螢幕快照

    在此範例中,水平對齊較難讀取。

  • 使用群組方塊來組織單選按鈕群組,這通常會導致不必要的螢幕雜亂。

  • 不要使用單選按鈕標籤作為群組方塊標籤。

  • 不要使用單選按鈕的選取專案:

    • 執行命令。
    • 顯示其他視窗,例如對話框以收集更多輸入。
    • 動態顯示或隱藏與所選控件相關的其他控制項(螢幕助讀程式無法偵測到這類事件)。 不過,您可以根據選取範圍動態變更文字。

次級控件

  • 將次級控件放在或下方(縮排,使用單選按鈕卷標排清)單選按鈕及其標籤。 以冒號結束單選按鈕標籤。

    標籤右側控制件的螢幕快照

    在此範例中,單選按鈕及其次級控件會共用單選按鈕標籤及其訪問鍵。 在此情況下,箭頭鍵會將焦點從單選按鈕移至其次級文本框。

  • 如果它們共享單選按鈕的標籤,請保留啟用相依的可編輯文字框和下拉式清單。 當使用者在方塊中輸入或貼上任何專案時,請自動選取對應的選項。 這麼做可簡化互動。

    具有文字框螢幕快照

    在此範例中,輸入頁碼會自動選取 [頁面]。

  • 避免使用其他單選按鈕或複選框巢狀單選按鈕。 可能的話,請將所有選項保留在同一層級。

    正確:

    靠左對齊單選按鈕的螢幕快照

    在此範例中,選項位於相同的層級。

    不正確:

    巢狀單選按鈕的螢幕快照

    在此範例中,使用巢狀選項會增加不必要的複雜性。

  • 如果您使用其他單選按鈕或複選框進行巢狀單選按鈕,停用這些次級控件,直到選取高階選項為止。 這樣做可避免混淆次級控件的意義。

預設值

  • 因為一組單選按鈕代表一組互斥的選項,因此 預設一律會選取一個單選按鈕。選取最安全的選項(以避免遺失數據或系統存取),以及最安全且私人的選項。 如果安全性和安全性不是因素,請選取最有可能或方便的選項。

  • 例外狀況: 如果沒有預設選取專案,則為:

    • 安全性、安全性或法律原因沒有可接受的默認選項,因此用戶必須做出明確的選擇。 如果使用者未進行選取,請顯示錯誤訊息以強制顯示錯誤訊息。
    • 使用者介面 (UI) 必須反映目前的狀態,而且尚未設定選項。 預設值不正確地表示使用者不需要進行選取。
    • 目標是收集不偏不倚的數據。 預設值會偏向數據收集。
    • 單選按鈕群組代表處於混合狀態的屬性,當顯示多個沒有相同設定之對象的屬性時,就會發生這種情況。 在此情況下,請勿顯示錯誤訊息,因為每個物件都有有效的狀態。
  • 將第一個選項設為預設選項,因為使用者通常會預期,除非該順序不合乎邏輯。 若要這樣做,您可能需要變更選項標籤。

    不正確:

    最後一個單選按鈕的螢幕快照作為預設選項

    在此範例中,預設選項不是第一個選項。

    正確:

    第一個單選按鈕的螢幕快照 預設

    在此範例中,選項標籤會重新標示為讓第一個選項成為預設選項。

單選按鈕重設大小和間距 螢幕快照

建議針對單選按鈕重設大小和間距。

標籤

單選按鈕標籤

  • 為每個單選按鈕加上標籤。
  • 將唯一 存取金鑰指派給每個標籤。 如需指導方針,請參閱 鍵盤

  • 使用 句子樣式大寫

  • 將卷標寫為片語,而非句子,且不使用結尾標點符號。

    • 例外狀況: 如果單選按鈕標籤也會為其後面的次級控件加上標籤,請使用冒號結束標籤。
  • 使用平行片語,並嘗試保留所有標籤的長度大致相同。

  • 將標籤文字放在選項之間的差異上。 如果所有選項具有相同的簡介文字,請將該文字移至群組標籤。

  • 使用正片語。 例如,使用 do 而非 do,而列印而不是不列印。

  • 只描述標籤的選項。 讓標籤保持簡短,以便輕鬆地在訊息和文件中參考標籤。 如果選項需要進一步說明,請使用完整的句子和結尾標點符號,在 靜態文字 控件中提供說明。

    使用說明文字

    在此範例中,選項會使用個別的靜態文字控件來說明。

    注意

    將說明新增至單選按鈕並不表示您必須為所有單選按鈕提供說明。 如果可以的話,請在標籤中提供相關信息,並在必要時才使用說明。 不要只重述卷標的一致性。

     

  • 如果強烈建議使用選項,請將 “(recommended)” 新增至標籤。 請務必將 新增至控件標籤,而不是補充附註。

  • 如果選項僅適用於進階使用者,請將 “(advanced)” 新增至標籤。 請務必將 新增至控件標籤,而不是補充附註。

  • 如果您必須使用多行標籤,請將標籤頂端與單選按鈕對齊。

  • 請勿使用次級控件、其包含的值或其單位卷標來建立句子或詞組。 這類設計無法當地語系化,因為句子結構因語言而異。

單選按鈕群組標籤

  • 使用群組標籤來說明群組的目的,而不是如何進行選取。 假設使用者知道如何使用單選按鈕。 例如,不要說「選取下列其中一個選項」。

  • 所有單選按鈕群組都需要標籤。 使用靜態文字或群組方塊,將標籤撰寫為單字或片語,而不是句子,以冒號結尾。

    例外 狀況:如果標籤只是對話框的 主要指令,請省略標籤。 在此情況下,主要指示會採用冒號(除非是問題)和存取密鑰(如果有的話)。

    可接受

    備援單選按鈕群組標籤的螢幕快照

    在此範例中,單選按鈕群組卷標只是主要指令的重述。

    更好:

    在此範例中,會移除備援標籤,因此主要指令會採用冒號。

  • 請勿將存取金鑰指派給標籤。 這樣做並非必要,而且會讓其他存取密鑰更難指派。

    • 例外狀況: 如果並非所有控件都可以有唯一的存取鍵,您可以將存取鍵指派給標籤,而不是個別控件。 如需詳細資訊,請參閱 鍵盤

文件

參考單選按鈕時:

  • 使用確切的標籤文字,包括其大寫,但不包含訪問鍵底線或冒號。
  • 在程式設計和其他技術檔中,將單選按鈕稱為單選按鈕。 其他地方都會使用單選按鈕,特別是在用戶檔中。
  • 若要描述用戶互動,請使用 click。
  • 可能的話,請使用粗體文字格式化標籤。 否則,只有在需要防止混淆時,才將標籤放在引號中。

範例:按兩下 [目前頁面],然後按下 [確定] [確定]