共用方式為


複選框

注意

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

使用複選框時,用戶會決定兩個明顯相反的選擇。 複選框標籤會指出選取的狀態,而清除狀態的意義必須是與選取狀態相反的明確意義。 因此,複選框應該只用來開啟或關閉選項,或選取或取消選取專案。

選取的四個複選框之一的螢幕快照

一般複選框群組。

注意

版面配置 相關的指導方針會在個別的文章中呈現。

這是正確的控件嗎?

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

  • 選取選擇框是用來開啟或關閉或選取或取消選取項目的選項嗎? 如果沒有,請使用另一個控件。

  • 選取和清除的狀態是否清楚且明確相反? 如果沒有,請使用 單選按鈕下拉式清單,讓您可以獨立標記狀態。

  • 在群組中使用時,群組是否包含獨立選擇,使用者可以從哪些用戶中選擇零或更多選項? 如果沒有,請考慮控制件的相依選擇,例如單選按鈕和 複選框樹檢視

  • 在群組中使用時,群組是否構成相依選擇,哪些用戶必須從中選擇一或多個? 如果是,請使用一組複選框,並在未選取任何選項時處理錯誤。

  • 群組 10 或更少選項數目嗎? 由於使用的螢幕空間與選項數目成正比,因此將複選框數目保留為 10 或更少。 針對超過 10 個選項,請使用 [] 複選框清單

  • 單選按鈕會是更好的選擇嗎? 如果複選框僅適用於開啟或關閉選項,單選按鈕可用於完全不同的選項。 如果兩個解決方案都可行:

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

      不正確:

      標示為橫向screen shot of one check box labeled landscape screen shot of one check box labeled landscape 一個複選框的螢幕快照

      在此範例中,[橫向] 的相反選擇並不清楚,因此複選框不是不錯的選擇。

      正確:

      兩個單選按鈕的螢幕快照

      在此範例中,選擇並非相反,因此單選按鈕是較佳的選擇。

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

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

      不正確:

      顯示螢幕快照,且不顯示比例按鈕

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

      正確:

      複選框的 螢幕快照不會顯示訊息

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

  • 如果視窗上有其他複選框,請使用複選框。

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

使用模式

勾選框有數種使用模式:

用法
單一複選框 用來選取個別選擇。
一個複選框的螢幕快照,並提醒我標籤
單一複選框用於個別選擇。
獨立選項(零或多個) 一組複選框可用來從一組零或多個選項中選取。
不同於單選控件,例如 單選按鈕,用戶可以選取複選框群組中的任何選項組合。
選取三個複選框的兩個螢幕快照
一組複選框用於獨立選擇。
相依選項(一或多個) 一組複選框也可以用來從一或多個選項集中選取。
您可能需要代表一或多個相依選項的選取專案。 因為 microsoft?windows 沒有直接支援這種輸入類型的控件,因此最好的解決方案是使用一組複選框,並在未選取任何選項時處理錯誤。
選取screen shot of one of two check boxes selected screen shot of one of two check boxes selected 兩個複選框的其中一個螢幕快照螢幕快照
使用一組複選框,至少必須選取一個通訊協定。
混合選擇 除了已選取和清除的狀態之外,複選框也具有混合狀態供多個選取專案使用,以表示已針對某些物件設定選項,但並非全部設定。
純藍色唯讀複選框的螢幕快照
混合狀態複選框。

指引

常規

  • 群組相關複選框。 視需要使用多個群組,將相關選項和將不相關的選項分成10個或更少群組。

    screen shot of related and unrelated check boxes screen shot of related and unrelated check boxes 相關和不相關的複選框的螢幕快照

    相關獨立選項群組的範例。

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

  • 依邏輯順序列出複選框,例如將高度相關的選項分組在一起,或先放置最常見的選項,或遵循一些其他自然進展。 不建議依字母順序排序,因為它與語言相關,因此無法當地語系化。

  • 垂直對齊複選框,而不是水準對齊。 水平對齊較難閱讀。

    正確:

    垂直對齊複選框的螢幕快照

    在此範例中,複選框會正確對齊。

    不正確:

    水平對齊的複選框螢幕快照

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

  • 請勿使用混合狀態來表示第三個狀態。 混合狀態是用來指出已針對某些物件設定選項,但並非全部是子物件。 使用者不應該能夠直接設定混合狀態,而是混合狀態是子物件的反映。 混合狀態不會作為個別專案的第三個狀態。 若要代表第三種狀態,請改用單選按鈕或下拉式清單。

    不正確:

    純藍色主題服務的螢幕快照複選框

    在此範例中,混合狀態應該表示未安裝 Theme 服務。

    正確:

    具有三個選項的下拉式清單 螢幕快照

    在此範例中,用戶可以從三個清楚選項的清單中選擇。

  • 按兩下混合狀態複選框應該迴圈執行所有選取、全部清除,以及原始混合狀態。 為了寬恕,請務必能夠還原原始混合狀態,因為設定對使用者而言可能很複雜或未知。 否則,還原混合狀態的唯一方式是取消工作並開始。

  • 不要使用複選框作為進度指示器。 請改用 進度指標 控件。

    不正確:

    顯示進度screen shot of four check boxes showing progress screen shot of four check boxes showing progress 四個複選框的螢幕快照

    在此範例中,複選框會誤用為進度指示器。

    正確:

    部分填滿進度列的螢幕快照

    一般進度列的範例。

  • 使用正確的選取狀態顯示停用的複選框。 即使使用者無法變更它們,停用的複選框仍會傳達資訊,因此應該與結果一致。

    不正確:

    兩個複選框之一的螢幕快照

    在此範例中,應該清除 [永遠讀取此區段] 選項,因為停用選項時不會讀取該區段。

  • 不要使用複選框的選取項目來

    • 執行命令。
    • 顯示其他視窗,例如對話框以收集更多輸入。
    • 動態顯示與選取控件相關的其他控制項(螢幕助讀程式無法偵測到這類事件)。

不要再次顯示此 <專案>

  • 請考慮再次使用 [不要顯示此 <專案>] 選項,讓使用者只有在沒有更好的替代方案時,才能隱藏週期性對話方塊。 嘗試事先判斷使用者是否需要對話框;如果他們這樣做,請一律顯示對話,如果沒有,請排除對話。

如需更多指導方針和範例,請參閱 對話框

次級控件

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

    複選框標籤下方的 螢幕快照標籤

    在此範例中,複選框及其次級控件會共用複選框標籤及其存取金鑰。

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

    頁首和頁尾文本框的螢幕快照

    在此範例中,輸入頁首或頁尾會自動選取選項。

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

  • 將次級控件設為與定位順序中複選框連續的複選框。

  • 如果選取選項表示選取次級複選框,請明確選取這些複選框,讓關聯性清楚。

    不正確:

    螢幕快照:選取的按鈕、已清除的複選框

    在此範例中,不會選取次級複選框。

    正確:

    螢幕快照:選取的按鈕、選取的複選框

    在此範例中,會選取次級複選框,使其與選取選項的關聯性清楚。

  • 如果替代專案新增不必要的複雜度,請使用相依複選框。 雖然複選框應該是獨立的選項,但有時像是單選按鈕的替代方案會增加不必要的複雜性。

    正確:

    混淆按鈕和複選框的螢幕快照

    在此範例中,單選按鈕的使用是正確的,但會建立不必要的複雜度。

    更好:

    screen shot of check boxes only screen shot of check boxes only 複選框的螢幕快照

    在此範例中,使用複選框會比較簡單,並可讓使用者專注於選取所需的選項,而不是選取其複雜的關聯性。

    重要事項:只有在極罕見的情況下才套用此指導方針,當顯示相依性時,不需要新增清楚度,就會增加顯著的複雜性。 在上一個範例中,使用者不太可能嘗試同時選擇上標和下標,如果他們這樣做,很容易理解他們是獨佔選項。

預設值

  • 如果複選框適用於用戶選項,設定最安全(以防止遺失數據或系統存取),預設最安全且私人的狀態。 如果安全性和安全性不是因素,請選取最有可能或方便的值。

建議複選框大小調整和間距figure of suggested check box sizing and spacing figure of suggested check box sizing and spacing 的圖

建議針對複選框重設大小和間距。

標籤

複選框標籤

  • 為每個複選框加上標籤。

  • 將唯一 存取金鑰指派給每個標籤。 如需指導方針,請參閱 鍵盤

  • 使用 句子樣式大寫

  • 將標籤撰寫為片語或命令式句子,並且不使用結尾標點符號。

    • 例外狀況: 如果複選框標籤也會為其後面的附屬控件加上標籤,請使用冒號結束標籤。
  • 撰寫標籤,使其描述複選框的選取狀態。

  • 針對一組複選框,請使用平行詞組,並嘗試保留所有標籤的長度大致相同。

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

  • 使用正片語。 請勿為標籤加上片語,讓選取複選框表示不執行動作。

    • < 複選框> 顯示此 專案。

    不正確:

    負面標籤 「關閉」的螢幕快照

    在此範例中,選項不會使用正詞組。

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

    注意

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

    複選框、標籤和描述 螢幕快照

    在此範例中,複選框標籤在其下方有額外的說明文字。

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

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

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

    不正確:

    複選框卷標的螢幕快照,其中含有文字框

    在此範例中,文本框不正確地放在複選框標籤內。

複選框標籤

  • 使用群組標籤來說明群組的目的,而不是如何進行選取。 假設使用者知道如何使用複選框。 例如,不要說「選取下列任何選項」。

  • 以冒號結束每個標籤。

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

  • 如需選取一或多個相依選項,請說明標籤的需求。

    正確:

    兩個控件的標籤 螢幕快照:通訊協定

    在此範例中,使用者可能會認為他們只能進行一個選取。

    更好:

    標籤 螢幕快照:通訊協定選取一或多個

    在此範例中,很明顯用戶可以進行多個選取。

文件

參考選取框時:

  • 使用確切的標籤文字,包括其大寫,但不包含訪問鍵底線或冒號。 包含單字複選框。

  • 參照複選框做為複選框,而非選項、複選框或僅複選框,因為單一方塊對當地語系化人員來說模棱兩可。

  • 若要描述用戶互動,請使用 select 和 clear。

  • 可能的話,請使用粗體文字格式化標籤。 否則,只有在需要防止混淆時,才將標籤放在引號中。

    範例:選取 [底線] 複選框。