Windows桌面應(yīng)用程序設(shè)計指南(控件篇6-分組框)

分組框是圍繞在一組相關(guān)控件外澜薄、帶標簽的矩形框拣挪。 分組框是一種可視化控件關(guān)系的方式; 除了可能為一組控件提供存取鍵之外咕晋,它不提供任何具體功能。


一個典型的分組框

何時使用該控件纽门?

雖然分組框是一種增強元素關(guān)聯(lián)的強有力視覺手段,但過度使用它們會增加視覺混亂,并大大減少可用空間。 它們在視覺上很重悔叽,只有在沒有更好的解決方案的情況下才應(yīng)該有節(jié)制地使用。

Windows 的設(shè)計趨勢是通過消除不必要的線條使外觀更簡單爵嗅、更干凈娇澎。

要決定是否需要一個分組框,請考慮以下問題:

  • 組中是否包含多于一個的控件睹晒?如果不是趟庄,只使用一個單獨的文字標簽就可以了。有一種比較少見的例外情況伪很,為了和同一界面上其他帶有分組框的元素保持外觀一致戚啥,一個單獨的控件也可以帶有分組框。

    錯誤示例:只帶有一個控件的分組框

  • 這些控件有關(guān)聯(lián)性嗎锉试? 展示這種關(guān)聯(lián)性是否增加了表意的清晰度猫十? 如果沒有,則在分組框外單獨顯示控件键痛。

  • 界面上所有的控件都在組內(nèi)嗎炫彩? 如果是,請在較高層展示界面(如父對話框或頁面)上說明背景信息絮短。

    錯誤示例:除了提交按鈕外,對話框中的所有控件都被放置在分組框中了

  • 僅使用恰當(dāng)?shù)脑夭季肿蛞洌梢杂行У乇磉_清楚控件邏輯關(guān)系嗎丁频? 如果是這樣的話,使用布局代替分組框邑贴。 您可以將相關(guān)控件相鄰放置席里,并在不相關(guān)的控件之間增加額外的間距。 您還可以使用標題和縮進來顯示層次關(guān)系拢驾。

    該例中奖磁,使用布局就可以清晰表達控件之間的關(guān)系了

  • 使用分隔線,能有效表達控件元素間的關(guān)系嗎繁疤?如果可以咖为,就使用分隔線替代分組框。分隔線是一條水平線稠腊,可以將其下方的控件歸為統(tǒng)一躁染。 分隔線的外觀更簡單、更干凈架忌。 與分組框不同吞彤,分隔線的最佳使用效果應(yīng)該是橫跨貫穿整個承載界面。

    該例為帶標簽的分隔線

    該例為不帶標簽的分隔線

  • 沒有文字,你能有效地表示控件之間的關(guān)系嗎饰恕? 如果可以的話挠羔,考慮使用圖形元素,如背景色或聚合器(aggregators)埋嵌?破加。

設(shè)計原則

  • 不要嵌套分組框。在一個組合框中莉恼,利用布局來展示控件關(guān)系拌喉。

    錯誤示例:該例中,不必要的分組框嵌套造成了視覺混亂

    正確示例:該例中俐银,利用布局手段達到了表明和上例中相同控件邏輯關(guān)系的目的

  • 不要在分組框標簽中放置控件
    (特例:如果分組框中的所有控件都被該復(fù)選框啟用或禁用尿背,則可以將復(fù)選框用作分組框標簽。)


    在此示例中捶惜,分組框標簽中的下拉列表放置不正確田藐。在這里應(yīng)該使用tabs標簽代替。
  • 不要禁用分組框吱七。 若要表示一組控件當(dāng)前不應(yīng)用汽久,請禁用分組框中的所有控件,但不禁用分組框本身踊餐。 這種方法更容易訪問景醇,并且所有 UI 框架都可以很好地支持。

標簽文字

  • 所有分組框都應(yīng)該配有標簽文字吝岭。

  • 不要為標簽分配存取鍵三痰。 這樣做是不必要的,并使其他存取鍵更難分配窜管。 可以將存取鍵分配給組框中的控件散劫。
    (特例: 如果一個界面有太多控件,那么可能沒有足夠的存取鍵可分配使用幕帆。 這種情況下获搏,可以通過將存取鍵分配給分組框而不是分組框中的控件來減少存取鍵的數(shù)量。)

  • 使用句式大小寫規(guī)則失乾。

  • 用名詞或名詞短語常熙、而不是句子形式寫標簽,不要使用結(jié)尾標點符號仗扬,包括冒號症概。

  • 對同一界面內(nèi)的分組框標簽使用相同句式結(jié)構(gòu)。

  • 保持分組框標簽簡潔早芭。 不要使用說明文字作為標簽彼城。 但是,您可以在分組框中包含說明文本。

  • 不要在組內(nèi)控件標簽中重復(fù)分組框標簽文字募壕。 例如调炬,如果分組框標簽為“對齊” ,則將選項按鈕文字設(shè)置為“左”舱馅、“右”等缰泡,而不是“左對齊”或“右對齊”。

  • 不要在用戶界面文本中引用組框代嗤?棘钞。

說明

  • 僅在程序員和其他技術(shù)文檔中引用分組框的名稱。 對于分組框group box干毅,使用兩個小寫字母宜猜。

  • 除非對話框包含多個具有相同名稱的選項,否則沒有必要在進程中包含分組框的名稱硝逢。 在這種情況下姨拥,將“下方”字樣與分組框名一起使用。

  • 如果可能渠鸽,使用粗體文本格式化標簽叫乌。 否則,只有在需要時才將標簽加上引號徽缚,以防混淆憨奸。

示例: 在效果下方,選擇隱藏選項凿试。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膀藐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子红省,更是在濱河造成了極大的恐慌,老刑警劉巖国觉,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吧恃,死亡現(xiàn)場離奇詭異,居然都是意外死亡麻诀,警方通過查閱死者的電腦和手機痕寓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蝇闭,“玉大人呻率,你說我怎么就攤上這事∩胍” “怎么了礼仗?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我元践,道長韭脊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任单旁,我火速辦了婚禮沪羔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘象浑。我一直安慰自己蔫饰,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布愉豺。 她就那樣靜靜地躺著篓吁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪粒氧。 梳的紋絲不亂的頭發(fā)上越除,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音外盯,去河邊找鬼摘盆。 笑死,一個胖子當(dāng)著我的面吹牛饱苟,可吹牛的內(nèi)容都是我干的孩擂。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼箱熬,長吁一口氣:“原來是場噩夢啊……” “哼类垦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起城须,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤蚤认,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后糕伐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體砰琢,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年良瞧,在試婚紗的時候發(fā)現(xiàn)自己被綠了陪汽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡褥蚯,死狀恐怖挚冤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赞庶,我是刑警寧澤训挡,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布澳骤,位于F島的核電站,受9級特大地震影響舍哄,放射性物質(zhì)發(fā)生泄漏宴凉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一表悬、第九天 我趴在偏房一處隱蔽的房頂上張望弥锄。 院中可真熱鬧,春花似錦蟆沫、人聲如沸籽暇。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽戒悠。三九已至,卻和暖如春舟山,著一層夾襖步出監(jiān)牢的瞬間绸狐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工累盗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留寒矿,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓若债,卻偏偏與公主長得像符相,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蠢琳,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容