使用列表框，用戶可以從一組始終可見的列表值中進(jìn)行選擇。使用單選列表框，用戶可以從互斥值列表中選擇一個(gè)項(xiàng)目。 使用多選列表框，用戶可以從值列表中選擇零至多個(gè)項(xiàng)目。

一個(gè)典型的單選列表框

何時(shí)使用該控件？

思考以下幾點(diǎn)：

• 列表內(nèi)容是數(shù)據(jù)，還是項(xiàng)目選項(xiàng)？這兩種對(duì)象，無(wú)論數(shù)量多少，都可以使用列表框來(lái)表示；相應(yīng)的，單選按鈕和復(fù)選框只適用于展示數(shù)量比較少的項(xiàng)目選項(xiàng)。
• 用戶是否有更改視圖、項(xiàng)目分組、按類篩選或者改變欄寬或排列順序的需求？如果有的話，適合使用列表視圖展示，而不是列表框。
• 該控件需要作為子項(xiàng)目的拖放源或拖放目標(biāo)嗎？如果是的話，使用列表視圖來(lái)代替。
• 列表項(xiàng)目可以被復(fù)制或者粘貼嗎？如果有此種需求，使用列表視圖來(lái)代替。

對(duì)于單選列表框

• 控件需要從一組互斥的列表值中選擇唯一一個(gè)值嗎？如果不是，使用其他的控件。如果要選擇多個(gè)選項(xiàng)，可以使用標(biāo)準(zhǔn)多選列表、復(fù)選框列表、列表生成器，或者添加/刪除列表。

• 是否有在絕大多數(shù)情況下推薦大部分用戶選擇的默認(rèn)選項(xiàng)？展示這個(gè)默認(rèn)選項(xiàng)是否比展示其他所有可選項(xiàng)都要重要得多？如果是這樣，考慮使用下拉列表，因?yàn)檫@樣可以通過(guò)隱藏其它選項(xiàng)來(lái)鼓勵(lì)用戶維持默認(rèn)的選項(xiàng)和設(shè)置。

示例：該例中，最高色彩質(zhì)量是大多數(shù)用戶的最佳選擇，使用下拉列表顯示是淡化其它選項(xiàng)的好方法。

• 列表是否需要持續(xù)的交互操作？ 如果是這樣，使用單選列表來(lái)簡(jiǎn)化交互。
  

  在此示例中，用戶會(huì)不斷更改“顯示項(xiàng)”列表中的選定項(xiàng)以調(diào)整合適的前景色和背景色。 在這種情況下，使用下拉列表進(jìn)行操作將非常繁瑣。

• 這個(gè)設(shè)置看起來(lái)像是一個(gè)相對(duì)數(shù)值嗎？ 對(duì)于設(shè)置更改的效果，用戶是否更傾向于看到即時(shí)反饋以便做出判斷和調(diào)整？ 如果是這樣，可以考慮使用滑塊代替。

• 列表項(xiàng)目之間是否存在顯著的層級(jí)關(guān)系？ 如果是，則使用樹狀視圖控件。

• 節(jié)省屏幕空間很關(guān)鍵嗎？ 如果是，則使用下拉列表，因?yàn)橄吕斜砜丶褂玫钠聊豢臻g大小是固定的，與列表項(xiàng)的數(shù)量無(wú)關(guān)。

對(duì)于標(biāo)準(zhǔn)多選列表和多選框列表

• 多選的操作，對(duì)于整個(gè)任務(wù)的完成來(lái)說(shuō)是非常關(guān)鍵的，還是僅僅只是一般操作？如果很關(guān)鍵，就要使用復(fù)選框列表來(lái)展示，使得可以多選的選項(xiàng)更顯眼，這對(duì)于非高級(jí)用戶來(lái)說(shuō)很有幫助。很多用戶看到標(biāo)準(zhǔn)多選列表，根本意識(shí)不到是可以進(jìn)行多項(xiàng)選擇的。在復(fù)選框過(guò)于搶占視覺重點(diǎn)、以及過(guò)于占用空間的情況下，可以使用標(biāo)準(zhǔn)多選列表。

• 多重選擇結(jié)果項(xiàng)保存的穩(wěn)定性重要嗎？ 如果是，請(qǐng)使用復(fù)選框列表、列表生成器或添加 / 刪除列表，這些控件單擊一次只更改一個(gè)項(xiàng)。 使用標(biāo)準(zhǔn)的多選列表，很容易因?yàn)檎`操作一下子清空所有的已選項(xiàng)。

• 控件是否可以用于從列表中選擇零個(gè)至多個(gè)項(xiàng)？ 如果不是，使用其他控件。 若只能選擇一個(gè)項(xiàng)目，使用單選列表。

預(yù)覽列表

• 帶有圖像的選項(xiàng)是否比僅僅用文字表述的選項(xiàng)更有利于用戶的選擇？如果這樣的話，使用預(yù)覽列表。

列表生成器和添加/刪除列表

• 控件是否可以用于從列表中選擇零個(gè)至多個(gè)項(xiàng)？ 如果不是，使用其他控件。若只能選擇一個(gè)項(xiàng)目，使用單選列表。

• 已選項(xiàng)的順序是否重要？列表生成器和添加/刪除列表支持對(duì)已選項(xiàng)進(jìn)行排序，其他的多選控件則不支持。

• 給用戶展示所有已選項(xiàng)的集合是否重要？列表生成器和添加/刪除列表能單獨(dú)展示所有已選項(xiàng)，其他的多選控件則不支持。

• 控件需要支持非限制性選項(xiàng)嗎？ 如果是，請(qǐng)使用添加 / 刪除列表，以便用戶可以自己設(shè)定并選擇當(dāng)前不在列表中的值。

• 向列表中添加值是否需要一個(gè)專門的對(duì)話框來(lái)選擇添加對(duì)象？ 如果是，請(qǐng)使用添加/刪除列表，并在用戶單擊“添加”時(shí)顯示對(duì)話框。

• 節(jié)省屏幕空間很重要嗎？ 如果是這樣，使用添加 / 刪除列表，因?yàn)樗豢偸秋@示選項(xiàng)集（點(diǎn)擊“添加”才會(huì)打開），從而使用較少的屏幕空間。

對(duì)于列表框，列表中的項(xiàng)目數(shù)量不是選擇控件的考慮因素，因?yàn)樗鼈兛赡苡袛?shù)千個(gè)項(xiàng)目，也可以只有一個(gè)項(xiàng)目(對(duì)于需要多選的列表則是一開始沒有項(xiàng)目)。 因?yàn)榱斜砜蚩梢杂糜谡故緮?shù)據(jù)，所以可能不會(huì)事先知道項(xiàng)目的數(shù)量。

設(shè)計(jì)范例

列表框有好幾種應(yīng)用范例

• 單選列表框：只允許用戶一次選擇一個(gè)選項(xiàng)
  

  單選列表框

• 標(biāo)準(zhǔn)多選列表框:用戶可以選擇零到任意多個(gè)選項(xiàng)。
  標(biāo)準(zhǔn)版多選列表在外觀上和單選列表沒有差別，所以從視覺上并沒有明顯的特征能表明一個(gè)列表控件支持多選。由于用戶需要自己探索才能發(fā)現(xiàn)多選這一功能特征，所以該控件最適用于多選操作非必要或者很少用到的情景下。
  標(biāo)準(zhǔn)多選列表有兩種多選模式：多重選擇和擴(kuò)展選擇。目前更常用的是擴(kuò)展選擇模式，這種模式允許用戶使用拖拽框選或者輔助ctrl或shift鍵的方法一次性選擇多個(gè)相鄰或者不相鄰的選項(xiàng)。而在多重選擇模式下，不論是否按下ctrl或shift鍵，點(diǎn)擊任意選項(xiàng)都會(huì)觸發(fā)選項(xiàng)的狀態(tài)在“選中”和“非選中”之間切換。由于此種特性，不建議選擇“多重選擇”模式。
  

  在上例中，多選列表允許用戶選擇任意多個(gè)選項(xiàng)

• 復(fù)選框列表：與標(biāo)準(zhǔn)的多選列表框一樣，復(fù)選框列表允許用戶選擇零至任意數(shù)量的項(xiàng)目。
  而與標(biāo)準(zhǔn)多選列表框不同的是，復(fù)選框清楚地表明可以進(jìn)行多重選擇。對(duì)于必須進(jìn)行多重選擇或常用多重選擇的任務(wù)，使用此列表模式。
  

  在此示例中，用戶通常選擇多個(gè)項(xiàng)，故使用復(fù)選框列表。 由于這樣展示選項(xiàng)非常清晰，您可能認(rèn)為復(fù)選框列表比標(biāo)準(zhǔn)多選列表更可取。 實(shí)際上，很少有任務(wù)需要多選操作或重度使用; 在這種情況下使用復(fù)選框列表會(huì)過(guò)多地突出選項(xiàng)。 因此，標(biāo)準(zhǔn)的多選列表更為常見。

• 預(yù)覽列表：可以是單選的，也可以是多選的。不僅僅顯示選項(xiàng)文字，同時(shí)會(huì)顯示選項(xiàng)效果的預(yù)覽圖。
  

  在這個(gè)示例中，每個(gè)選項(xiàng)的預(yù)覽都清楚地顯示了選項(xiàng)的效果，這比單獨(dú)使用文本更有效。

• 列表生成器：允許用戶通過(guò)一次添加一個(gè)選項(xiàng)、自由設(shè)置列表順序來(lái)創(chuàng)建選項(xiàng)列表。
  列表生成器由兩個(gè)單選列表組成: 左側(cè)的列表是一組固定的選項(xiàng)，右側(cè)的列表是正在生成的列表。 列表之間有兩個(gè)命令按鈕:
  添加按鈕，將當(dāng)前選定的選項(xiàng)移動(dòng)到正在生成的列表中，插入到選定項(xiàng)之前。 (雙擊選擇項(xiàng)具有同樣的效果。)
  移除按鈕可以從生成列表中移除選定項(xiàng)，并使其回到選項(xiàng)列表。 (雙擊生成列表中的某個(gè)項(xiàng)具有同樣的效果。) 生成列表可以選擇使用“上移”和“下移”命令對(duì)列表項(xiàng)進(jìn)行排序。
  

  在上例中，列表生成器通過(guò)從一組可選項(xiàng)中選擇選項(xiàng)并排序，來(lái)生成一個(gè)工具欄。

• 添加/刪除列表：允許用戶通過(guò)一次添加一個(gè)或多個(gè)項(xiàng)來(lái)創(chuàng)建選項(xiàng)列表，并可以選擇設(shè)置列表順序(和列表生成器類似)。
  和列表生成器不同的是，點(diǎn)擊“添加”按鈕，會(huì)打開展示可選項(xiàng)的對(duì)話框。使用單獨(dú)的對(duì)話框，在選擇可選項(xiàng)上可以設(shè)計(jì)使用的控件會(huì)更加靈活：你可以使用專門的對(duì)象選擇控件，甚至也可以使用一般的對(duì)話框。和列表生成器相比，該控件設(shè)計(jì)更緊湊，但添加選項(xiàng)的操作更麻煩一些。
  

  在上例中，用戶可以在打開的菜單中選擇選項(xiàng)以及排序。
  
  盡管列表生成器和添加 / 刪除列表模式比其他多重選擇列表控件看起來(lái)臃腫很多，但它們有兩個(gè)獨(dú)特的優(yōu)點(diǎn):
  1.無(wú)論是在構(gòu)建列表時(shí)還是在構(gòu)建之后，用戶都可以控制列表順序。
  2.用戶可以查看所有已選項(xiàng)目的匯總列表視圖，如果已選擇項(xiàng)的數(shù)量很多，這一點(diǎn)尤為重要。
  它們的缺點(diǎn)則是需要占用更多的屏幕空間，并且在從零開始創(chuàng)建大量項(xiàng)目時(shí)難以使用。因此，它們最好用于創(chuàng)建短列表或修改已存在的列表。

設(shè)計(jì)指南

內(nèi)容展示

• 按照邏輯順序排列選項(xiàng)，例如將相關(guān)的選項(xiàng)打組，將最常用的選項(xiàng)放在最前面，或者使用首字母順序排列選項(xiàng)。名稱按字母順序排列，數(shù)字也按大小順序排列，日期則按照時(shí)間順序排列。多于12個(gè)項(xiàng)目的列表應(yīng)按字母順序排序，以使項(xiàng)目更容易查找。
  

  正確示例：列表項(xiàng)按照空間順序排列
  
  
  錯(cuò)誤示例：列表項(xiàng)太多，應(yīng)該按照首字母順序排列
  
  
  正確示例：因?yàn)榘凑帐鬃帜疙樞蚺帕?，該列表中的?xiàng)目很容易查找。但是，“所有Windows產(chǎn)品”這一項(xiàng)不按照首字母順序，應(yīng)該排列在最前面

• 不論所有選項(xiàng)按照什么順序排列，有“全部”、“所有”或者“零”、“無(wú)”含義的選項(xiàng)應(yīng)該放在列表開頭位置。

• 將元選項(xiàng)括在括號(hào)中。

在這個(gè)示例中，“(none)”是一個(gè)元選項(xiàng)，因?yàn)樗皇沁x項(xiàng)的有效值，而是表示選項(xiàng)本身還沒選擇值

• 沒選擇的選項(xiàng)不要留空，用元選項(xiàng)代替。用戶不知道空白的選項(xiàng)是什么意思，而元選項(xiàng)的含義是明確的。
  
  錯(cuò)誤示例
  
  
  正確示例

交互設(shè)計(jì)

• 可以考慮設(shè)置雙擊行為效果。雙擊應(yīng)該具有與選擇一個(gè)項(xiàng)目并執(zhí)行其默認(rèn)命令相同的效果。

• 雙擊功能應(yīng)該是備選項(xiàng)。應(yīng)該始終有一個(gè)命令按鈕或上下文菜單命令具有相同的效果。

• 如果用戶不能對(duì)已選項(xiàng)進(jìn)行任何操作，就禁止選擇操作。
  

  正確示例：這個(gè)列表狂使用只讀形式展示了更改項(xiàng)目，并無(wú)選擇操作的必要。

• 當(dāng)禁用一個(gè)列表框時(shí)，也要同時(shí)禁用與之相關(guān)的標(biāo)簽和命令按鈕。

• 不要試圖通過(guò)更改列表框中的已選項(xiàng)目來(lái)：
  1.執(zhí)行命令；
  2.打開例如對(duì)話框等窗口來(lái)收集更多信息；
  3.動(dòng)態(tài)展示與已選控件有關(guān)聯(lián)的其他控件（屏幕閱讀器無(wú)法監(jiān)測(cè)到此類事件）。例外情況：隨著選項(xiàng)更改而變化的靜態(tài)說(shuō)明文字是可以的。
  

  可行示例

• 避免橫向滑動(dòng)操作。多列列表需要橫向滑動(dòng)，通常這個(gè)比縱向滑動(dòng)更難操作。當(dāng)您有許多按字母順序排序的項(xiàng)目并且有足夠的屏幕空間用于寬控件時(shí)，可以使用需要水平滾動(dòng)的多列列表。
  

  可行示例

多選列表

• 考慮在列表最下方展示已選擇項(xiàng)目的數(shù)量，尤其是在用戶很有可能進(jìn)行多項(xiàng)選擇操作的控件上。這樣不僅能給用戶有效的操作反饋，更能清楚地表明該控件支持多選操作。
  

  示例

• 你也可以展示其他與所選項(xiàng)有關(guān)的輔助信息，例如所選項(xiàng)所需要的資源空間。

  
  
  示例。在此示例中，安裝所選項(xiàng)所需的磁盤空間比所選項(xiàng)目的數(shù)量更有意義。

• 如果可選項(xiàng)數(shù)量很多，并且可能有全選和全不選的操作，設(shè)計(jì)時(shí)加上“全選”和“取消全部”的按鈕。

• 對(duì)于標(biāo)準(zhǔn)的多選列表，不要使用多重選擇模式，因?yàn)榇诉x擇模式已被棄用。 對(duì)于等效的行為，改為使用復(fù)選框列表。

默認(rèn)值

• 默認(rèn)選中最安全和最保險(xiǎn)的選項(xiàng)（以防止數(shù)據(jù)丟失或系統(tǒng)更改）。如果安全和保險(xiǎn)不是需要考慮的因素，選擇用戶最可能選擇或者最方便的值。
  例外情況: 如果控件表示處于混合狀態(tài)的屬性，則不要選擇任何項(xiàng)，這種情況發(fā)生在為具有不同設(shè)置的多個(gè)對(duì)象，顯示所有屬性時(shí)。

建議尺寸和間距

列表框建議的尺寸和間距

• 列表框的寬度要適合于最長(zhǎng)可選項(xiàng)。標(biāo)準(zhǔn)列表框是不能橫向滑動(dòng)的，所以用戶只能看到列表框內(nèi)展示的內(nèi)容長(zhǎng)度。

• 為文本（不包括數(shù)字內(nèi)容）預(yù)留百分之三十的長(zhǎng)度空間用于本地化翻譯（但不要超過(guò)次長(zhǎng)文字的百分之二百長(zhǎng)度）

• 選擇能顯示整數(shù)項(xiàng)的列表框高度。避免豎直方向上展示不完整的項(xiàng)。

• 合理設(shè)計(jì)列表框高度，避免不必要的豎向滾動(dòng)。展示項(xiàng)在3-20項(xiàng)之間的時(shí)候，是可以避免豎向滾動(dòng)條的。盡量使列表框高一些以避免使用豎向滾動(dòng)條。有很多項(xiàng)目的列表應(yīng)該至少顯示五個(gè)項(xiàng)目，一次顯示更多項(xiàng)目，滾動(dòng)條的使用會(huì)高效，并更容易定位到需要的項(xiàng)目上。

• 如果用戶有實(shí)際需要，那么可以將列表框及其父窗口的大小設(shè)計(jì)為可調(diào)節(jié)。 這樣做允許用戶根據(jù)需要調(diào)整列表框的大小。 但是，可調(diào)整大小的列表框應(yīng)該顯示不少于三個(gè)項(xiàng)。

標(biāo)簽文字

控件標(biāo)簽

• 所有列表框都需要寫明標(biāo)簽。 標(biāo)簽應(yīng)該是單詞或短語(yǔ)，而不是一個(gè)句子; 在標(biāo)簽的末尾使用冒號(hào)。
  特例: 如果標(biāo)簽僅僅是對(duì)對(duì)話框主要指令的重述，可以省略。 在這種情況下，主指令結(jié)尾處要使用冒號(hào)(除非是疑問(wèn)句)，以及設(shè)置訪問(wèn)鍵。
  
  可行示例：該例中，列表框標(biāo)簽只是對(duì)主指令的重述
  
  
  優(yōu)化示例：贅余的標(biāo)簽被刪去，主指令附帶冒號(hào)和存取鍵

• 如果列表框從屬于單選按鈕或復(fù)選框控件組，并由以冒號(hào)結(jié)尾的控件標(biāo)簽引入，則不需要在列表框控件上再添加附加標(biāo)簽了。

  
  
  在該例中，列表框從屬于復(fù)選框控件組，與其共享標(biāo)簽文字
• 為標(biāo)簽文字分配單獨(dú)的存取鍵。（詳見交互-鍵盤一章的內(nèi)容）
• 使用句子的大小寫規(guī)則。

• 標(biāo)簽文字置于控件的上方或者左邊，并沿控件的左邊緣對(duì)齊。（若標(biāo)簽在控件左邊，則與列表的第一項(xiàng)文字垂直對(duì)齊。）

  
  
  正確示例1

正確示例2

錯(cuò)誤示例：標(biāo)簽置于控件上方時(shí)，不要與文字項(xiàng)左對(duì)齊

錯(cuò)誤示例：標(biāo)簽置于控件左邊時(shí)，不要與控件邊緣垂直對(duì)齊

• 標(biāo)準(zhǔn)多選列表框的標(biāo)簽文字，應(yīng)盡量表達(dá)出可以支持多選的意思；復(fù)選框列表的標(biāo)簽文字，就可以簡(jiǎn)潔一些。

  
  
  正確示例
  
  
  錯(cuò)誤示例：標(biāo)簽文字沒有清楚表明該列表框支持多選
  
  
  最佳示例：復(fù)選框已經(jīng)清楚表明是支持用戶的多選操作的，所以標(biāo)簽文字也不用寫的很清楚了
• 可以在標(biāo)簽里的括號(hào)中寫明單位(秒、連接符號(hào)等)。

選項(xiàng)文字

• 為每個(gè)選項(xiàng)設(shè)置不同的文字。
• 除非選項(xiàng)是專有名詞，需要使用句子大小寫規(guī)則來(lái)書寫選項(xiàng)文字。
• 標(biāo)簽是詞語(yǔ)或者短語(yǔ)，不是句子，末尾不要加標(biāo)點(diǎn)符號(hào)。
• 所有選項(xiàng)盡量使用相同句式，保持相近的長(zhǎng)度。

說(shuō)明和補(bǔ)充性文字

• 如果需要添加關(guān)于列表框的說(shuō)明文本，請(qǐng)將其添加到標(biāo)簽上方。使用結(jié)束標(biāo)點(diǎn)符號(hào)寫成完整的句子。
• 使用句式大小寫規(guī)則。

• 其他有用但不必要的信息應(yīng)該盡量簡(jiǎn)短。將此文本放在標(biāo)簽和冒號(hào)之間的括號(hào)中，或者不加括號(hào)放在控件下方。

  
  
  正確示例：補(bǔ)充文字放在列表下方

說(shuō)明

當(dāng)在其他位置提到某個(gè)具體的列表框控件時(shí)：

• 使用完整的帶大小寫規(guī)則的標(biāo)簽文字來(lái)指代該控件，但是不要帶上存取鍵的下劃線符號(hào)以及句尾符號(hào)，也不要使用“列表”這種文字描述。不要稱該控件為“某某列表框”或是“某某框/欄”
• 提到列表項(xiàng)，使用具體的列表項(xiàng)文字，包括大小寫規(guī)則。
• 在程序文檔或其他技術(shù)文檔中，該控件叫做列表框。其他地方稱作列表即可。
• 用“選擇”描述用戶的交互動(dòng)作。

• 在描述中盡量使用粗體文本書寫標(biāo)簽和列表項(xiàng)名稱。 否則，只有在需要時(shí)，才將標(biāo)簽和項(xiàng)目放在引號(hào)中，以防混淆。

  
  
  示例