共用方式為


選項按鈕

注意

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

使用選項按鈕,使用者可以在一組互斥的相關選項之間進行選擇。 使用者可以選擇一個選項,而只能選擇一個選項。 因此會呼叫選項按鈕,因為它們的運作方式就像選項按鈕上的通道預設值一樣。

三個選項按鈕的螢幕擷取畫面

一般選項按鈕群組。

選項按鈕群組的行為就像單一控制項一樣。 只有選取的選項可以使用 Tab 鍵來存取,但使用者可以使用方向鍵來迴圈流覽群組。

注意

面配置和 鍵盤流覽 相關的指導方針會顯示在不同的文章中。

 

這是正確的控制項嗎?

若要決定使用時機,請考量下列問題:

  • 控制項是否用來從一組互斥的選項中選擇一個選項? 如果不是,請使用其他控制項。 若要選擇多個選項,請改用 核取方塊多重選取清單 或核取方塊清單。

  • 兩到七之間的選項數目是否為 ? 由於使用的螢幕空間與選項數目成正比,因此請將選項數目保留在介於 2 到 7 之間的群組中。 如需八個或多個選項,請使用 下拉式清單 或單一 選取清單

  • 核取方塊是否為較佳的選擇? 如果只有兩個選項,您可以改用單一 核取方塊 。 不過,核取方塊僅適用于開啟或關閉單一選項,而選項按鈕可用於完全不同的替代方案。 如果這兩個解決方案都可行:

    • 如果已清除核取方塊的意義不明顯,請使用選項按鈕。

      不正確:

      橫向核取方塊的螢幕擷取畫面

      正確:

      橫向/直向選項按鈕的螢幕擷取畫面

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

    • 在精靈頁面上使用選項按鈕來清除替代專案,即使核取方塊是可接受的。

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

      不正確:

      顯示/不顯示選項按鈕的螢幕擷取畫面

      在此範例中,選項不足以使用選項按鈕。

      正確:

      的螢幕擷取畫面未顯示此訊息核取方塊

      在此範例中,核取方塊是有效使用此周邊選項的螢幕空間。

    • 如果頁面上有其他核取方塊,請使用核取方塊。

  • 下拉式清單是否為較佳的選擇? 如果大部分的使用者都建議使用預設選項,選項按鈕可能會比必要更注意選項。

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

      以預設按鈕作為最高品質的螢幕擷取畫面

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

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

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

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

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

  • 這些值是否為非數值? 針對數值資料,請使用 文字方塊下拉式清單滑杆

指導方針

一般

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

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

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

    正確:

    垂直選項按鈕對齊的螢幕擷取畫面

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

    不正確:

    水準選項按鈕對齊的螢幕擷取畫面

    在此範例中,水準對齊較難閱讀。

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

  • 請勿使用選項按鈕標籤作為群組方塊標籤。

  • 請勿使用選項按鈕的選取專案來:

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

次級控制項

  • 將次級控制項放在或下方 (縮排,並排清選項按鈕標籤) 選項按鈕及其標籤。 以冒號結束選項按鈕標籤。

    標籤右側控制項的螢幕擷取畫面

    在此範例中,選項按鈕及其次級控制項會共用選項按鈕標籤及其便捷鍵。 在此情況下,方向鍵會將焦點從選項按鈕移至其次級文字方塊。

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

    含有文字方塊之頁面範圍對話方塊的螢幕擷取畫面

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

  • 避免巢狀選項按鈕與其他選項按鈕或核取方塊。 可能的話,請將所有選項保持在相同的層級。

    正確:

    靠左對齊選項按鈕的螢幕擷取畫面

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

    不正確:

    巢狀選項按鈕的螢幕擷取畫面

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

  • 如果您使用其他選項按鈕或核取方塊進行巢狀選項按鈕, 請停用這些從屬控制項,直到選取高階選項為止。 這樣做可避免混淆次級控制項的意義。

預設值

  • 因為一組選項按鈕代表一組互斥的選項, 所以預設一律選取一個選項按鈕。選取最安全 (,以防止資料或系統存取) 和最安全且最私人的選項遺失。 如果安全性和安全性不是因素,請選取最可能或方便的選項。

  • 異常: 如果沒有下列專案,請勿使用預設選取專案:

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

    不正確:

    最後一個選項按鈕做為預設選項的螢幕擷取畫面

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

    正確:

    預設為第一個選項按鈕的螢幕擷取畫面

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

選項按鈕調整大小和間距的螢幕擷取畫面

選項按鈕的建議大小和間距。

標籤

選項按鈕標籤

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

  • 使用 句子樣式大寫

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

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

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

  • 使用正片語。 例如,使用 do 而非 do not,而 print 而不是 print。

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

    具有解說文字的選項按鈕螢幕擷取畫面

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

    注意

    將說明新增至選項按鈕並不表示您必須提供所有選項按鈕的說明。 如果可以,請在標籤中提供相關資訊,並在必要時才使用說明。 不要只重新設定標籤的一致性。

     

  • 如果強烈建議使用選項,請將「建議 () 」新增至標籤。 請務必新增至控制項標籤,而不是補充附注。

  • 如果選項僅適用于進階使用者,請將「 (進階) 」新增至標籤。 請務必新增至控制項標籤,而不是補充附注。

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

  • 請勿使用次級控制項、其包含的值或其單位標籤來建立句子或片語。 這類設計無法當地語系化,因為句子結構會隨著語言而有所不同。

選項按鈕群組標籤

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

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

    例外: 如果標籤只是對話方塊 的主要指令的重新整理,請省略標籤。 在此情況下,主要指令會採用冒號 (,除非它是問題) ,如果有一個) ,則 (存取金鑰。

    可以接受:

    備援選項按鈕群組標籤的螢幕擷取畫面

    在此範例中,選項按鈕群組標籤只是主要指令的重新整理。

    較佳:

    僅選項按鈕主要指令的螢幕擷取畫面

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

  • 請勿將存取金鑰指派給標籤。 不需要這麼做,它會使其他存取金鑰更難指派。

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

文件

參考選項按鈕時:

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

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