Share via


群組方塊

注意

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

群組方塊是一個標示為矩形的框架,會圍繞一組相關的控制項。 群組方塊是視覺化顯示關聯性的方法;除了可能提供控制項群組的存取金鑰之外,它不會提供任何功能。

包含核取方塊的群組方塊螢幕擷取畫面

一般群組方塊。

注意

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

 

這是正確的控制項嗎?

雖然群組方塊是指出關聯性的強式視覺方式,但過度使用它們會增加視覺雜亂,並大幅減少表面可用的空間。 它們以視覺方式很繁重,而且應該謹慎使用,只有在沒有更好的解決方案時才使用。

Windows 中的設計趨勢是更簡單、更簡潔的外觀,可排除不必要的線條。

若要決定是否需要群組方塊,請考慮下列問題:

  • 群組中是否有一個以上的控制項? 如果沒有,請改用純文字標籤。 罕見的例外狀況是使用具有單一控制項的群組方塊,以維持與相同介面上其他群組方塊的一致性。

不正確:包含一個文字方塊的群組方塊螢幕擷取畫面

在此範例中,群組方塊只有單一控制項。

  • 控制項是否相關? 顯示關聯性是否更清楚? 如果沒有,請在群組方塊之外個別顯示控制項。
  • 群組內的所有控制項是否為 ? 如果是,則表示較大介面上的關聯性,例如父對話方塊或頁面。

不正確:包含所有控制項的群組方塊螢幕擷取畫面

在此範例中,除了對話方塊中) 的認可按鈕之外,所有控制項 (都位於群組方塊中。

  • 您可以單獨使用版面配置來傳達關聯性嗎? 如果是,請改用 版面配置 。 您可以將相關的控制項放在彼此旁邊,並在不相關的控制項之間放置額外的間距。 您也可以使用標題和縮排來顯示階層式關聯性。

顯示四組工作之圖示的圖

在此範例中,單獨使用配置來顯示控制項關聯性。

  • 您是否可以使用分隔符號有效地傳達關聯性? 如果是,請改用分隔符號。 分隔符號是一條水平線,其會統一其下方的控制項。 分隔符號提供更簡單、更簡潔的外觀。 不過,不同于群組方塊,它們在跨越表面的完整寬度時效果最佳。
    • 開發 人員: 您可以使用一個高度的等號矩形來實作分隔符號。

此螢幕擷取畫面顯示依等距矩形分隔符號所分隔的電子郵件控制項。

在此範例中,標示的分隔符號是用來顯示控制項關聯性。

依分隔符號分隔的控制項螢幕擷取畫面

在此範例中,未標記的分隔符號是用來顯示控制項關聯性。

  • 您是否可以有效地傳達沒有文字的關聯性? 如果是,請考慮使用 背景或匯總 工具等圖形元素。

指導方針

  • 不要巢狀群組方塊。 使用版面配置在群組方塊中顯示關聯性。

不正確:群組方塊內群組方塊的螢幕擷取畫面

在此範例中,巢狀群組方塊會導致不必要的視覺雜亂。

正確:一個群組方塊中相同控制項的螢幕擷取畫面

在此範例中,會改用版面配置來顯示相同的控制項關聯性。

  • 請勿將控制項放在群組方塊標籤中。
    • 例外: 如果核取方塊內的所有控制項都啟用並停用,您可以使用核取方塊做為群組方塊標籤。

不正確:群組方塊標籤上下拉式清單的螢幕擷取畫面

在此範例中,下拉式清單不正確地放在群組方塊上。 此範例應該改用 索引標籤

  • 請勿停用群組方塊。 若要指出控制項群組目前不適用,請停用群組方塊內的所有控制項,但不會停用群組框本身。 此方法更容易存取,而且可由所有 UI 架構一致地支援。

標籤

  • 標示所有群組方塊。
  • 請勿將存取金鑰指派給標籤。 這樣做是不必要的,而且讓其他存取金鑰更難指派。 相反地,請將存取金鑰指派給群組方塊內的控制項。
    • 例外: 如果表面有許多控制項,可能沒有足夠的便捷鍵可用。 如果是的話,請將其指派給群組方塊,而不是群組方塊內的控制項,以減少存取金鑰數目。
  • 使用 句子樣式大寫
  • 使用名詞或名詞片語撰寫標籤,而不是作為句子,而且不使用結尾標點符號,包括冒號。
  • 針對相同表面內的群組方塊標籤使用平行片語。
  • 讓群組框標籤保持簡潔。 請勿使用指示文字作為標籤。 不過,您可以在群組方塊中擁有指示文字。
  • 請勿在方塊內的控制項標籤中重複群組方塊標籤。 例如,如果群組方塊標示為 [對齊],請將選項按鈕標示為 Left、Right 等等,而不是 [靠左對齊] 或 [向右對齊]。
  • 請勿在使用者介面文字中參照群組方塊。

文件

參考群組方塊時:

  • 請參閱程式設計人員和其他技術檔中的群組方塊。 針對群組方塊,請使用兩個小寫字組。
  • 在其他地方,除非對話方塊包含多個具有相同名稱的選項,否則不需要在程式中包含群組方塊的名稱。 在這種情況下,請使用 底下搭配組塊名稱。
  • 可能的話,請使用粗體文字格式化標籤。 否則,只有在需要防止混淆時,才將標籤放在引號中。

範例:在 [效果]底下,選取 [ 隱藏]。