使用下拉列表或組合框，用戶可以在列表中選擇互斥的值刁绒。 用戶只能選擇其中一個(gè)選項(xiàng)知市。使用標(biāo)準(zhǔn)的下拉列表娘赴，用戶只能在列表中進(jìn)行選擇诽表，但是如果加上組合框，他們也可以輸入列表中沒有的選項(xiàng)泛啸。

一個(gè)典型的組合框

下列這幾點(diǎn)需要明確：

• 標(biāo)準(zhǔn)列表框是一個(gè)包含多個(gè)項(xiàng)目的列表框，多個(gè)項(xiàng)目是同時(shí)常顯的宗雇。

• 下拉列表是一個(gè)選定項(xiàng)目始終可見的列表赔蒲，其他項(xiàng)目可通過單擊下拉按鈕展開可見。

• 組合框是標(biāo)準(zhǔn)列表框或下拉列表與可編輯文本框的組合矾兜，因此允許用戶輸入列表中沒有的值椅寺。
  （1）可編輯式下拉列表是下拉列表和可編輯文本框的組合。
  （2）可編輯式列表框是標(biāo)準(zhǔn)列表框和可編輯文本框的組合篙挽。

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

思考以下問題：

• 控件是否用于從互斥值列表中選擇一個(gè)選項(xiàng)踊谋？ 如果不是褪子，使用其他控件嫌褪。 若要選擇多個(gè)選項(xiàng)，請使用標(biāo)準(zhǔn)多選列表缨伊、復(fù)選框列表刻坊、列表生成器或添加 / 刪除列表。
  
  標(biāo)準(zhǔn)多選列表
  
  
  復(fù)選框列表
  
  
  列表生成器
  
  
  添加 / 刪除列表

• 選項(xiàng)是命令嗎？ 如果是這樣旁趟，使用一個(gè)菜單按鈕或分裂式按鈕代替锡搜。 下拉列表和組合框適用于對象(名詞)或?qū)傩?形容詞)，但不適用于命令(動(dòng)詞)。

• 列表是否顯示數(shù)據(jù)上陕，而不是程序選項(xiàng)释簿？ 對于這兩種形式的對象煮纵，下拉列表或組合框都是合適的選擇。 相比之下酿联，單選按鈕僅適用于選項(xiàng)較少的情況贞让。

下拉列表

• 是否有推薦多數(shù)用戶在正常情況下選擇的默認(rèn)選項(xiàng)喳张？相對于其他可選項(xiàng)，是否需要特別強(qiáng)調(diào)建議選項(xiàng)的可見性柴墩？使用下拉列表江咳，即可以通過隱藏其他可選項(xiàng)（在下拉列表下方）降低用戶更改默認(rèn)選項(xiàng)的可能性歼指。 如果沒有這種需求，可以考慮單選按鈕挟阻、單選列表或可編輯列表框脱拼，它們更能展現(xiàn)其他可選項(xiàng)的具體內(nèi)容。
  

  示例
  
  在上例中赌蔑，最高色彩質(zhì)量選項(xiàng)是對絕大多數(shù)用戶而言最好的選項(xiàng)，所以使用下拉列表很合適石景，和自然地降低了其他選項(xiàng)的可見性潮孽。

• 你希望這個(gè)選擇控件引起用戶的注意嗎？ 如果是這樣椎例，可以考慮單選按鈕、單選列表或可編輯列表框刷晋，它們會(huì)占用更多的屏幕空間眼虱，從而吸引更多的注意力捏悬。 因?yàn)橄吕斜矸浅＞o湊甥厦，所以對于那些你想低調(diào)處理的選擇控件而言摧莽，它們是很好的選擇。

• 是否需要節(jié)省使用屏幕空間征懈？ 如果是卖哎，請使用下拉列表，因?yàn)樗加玫钠聊豢臻g大小確定维贺，與選擇項(xiàng)的數(shù)量無關(guān)。

• 窗口上是否有其他下拉列表垃沦？ 如果是這樣，可以考慮使用下拉列表以保持一致性译仗。

可編輯式下拉列表

除了以上適用于下拉列表的原則，可編輯式下拉列表還需要注意以下幾點(diǎn)：

• 可選項(xiàng)是否有限制官觅？如果是這樣纵菌，使用一個(gè)普通的下拉列表來代替。組合框用于不受約束的輸入休涤，用戶可能需要在其中輸入當(dāng)前沒有展現(xiàn)在列表中的值咱圆。 因?yàn)檩斎霙]有限制笛辟，所以如果用戶輸入無效的文本围来，則必須進(jìn)行報(bào)錯(cuò)處理胀蛮。

• 最有可能的選項(xiàng)能被提前列舉出來嗎？ 如果不能米碰，使用文本框代替漆诽。

• 下拉列表是否用于列出以前的用戶輸入？ 除非用戶需要查看以前輸入的完整列表，否則使用帶有自動(dòng)填入選項(xiàng)建議的文本框就可以了繁堡。
  

  在這個(gè)例子中劫侧，用戶可能需要查看他們之前的輸入項(xiàng)珍特，所以使用可編輯式下拉列表是不錯(cuò)的選擇。

在這個(gè)例子中层亿，一個(gè)帶有自動(dòng)補(bǔ)全建議的文本框就足夠了

• 用戶在選擇有效值時(shí)是否需要額外幫助针贬？ 如果是，則使用帶有“瀏覽 ”按鈕的文本框脉幢。
  

  在這個(gè)例子中，用戶點(diǎn)擊“打開...”以選擇有效值

• 是否鼓勵(lì)用戶查看其他選擇項(xiàng)或變更默認(rèn)選項(xiàng)瓦哎？ 如果是，請考慮使用可編輯的列表框（完全展示所有列表項(xiàng)）租副。使用可編輯的下拉列表，用戶只有在下拉打開該列表之后才會(huì)注意到其他選項(xiàng)秀姐。

• 用戶是否需要在包含項(xiàng)目很多的列表中快速定位一個(gè)項(xiàng)目野宜？(只適用于Win32環(huán)境) 如果是，使用可編輯式下拉列表，因?yàn)橛脩艨梢酝ㄟ^輸入項(xiàng)目的全名來選擇項(xiàng)目。 相比之下，Win32中氏涩，下拉列表只根據(jù)最后一次輸入字符匹配項(xiàng)目(因此在月份列表中輸入"Jun"將匹配November昔字，而不是June)编检。 在這種情況下，即使需要對選項(xiàng)進(jìn)行限制缀程，也要使用可編輯式下拉列表汉规。

可編輯式列表框

• 可能的選擇是否需要加以限制婚陪？ 如果是，使用單選列表或普通下拉列表替代频祝。 組合框用于不受約束的輸入泌参，其中用戶可能需要輸入一個(gè)當(dāng)前沒有展現(xiàn)在列表中的值。 因?yàn)檩斎胧菬o約束的常空，所以如果用戶輸入無效的文本沽一，則必須通過錯(cuò)誤消息提醒處理該錯(cuò)誤。

• 最有可能的選項(xiàng)能被提前列舉出來嗎窟绷？ 如果不能锯玛，使用文本框代替。

• 是否鼓勵(lì)用戶查看其他選擇項(xiàng)或變更默認(rèn)選項(xiàng)兼蜈？ 如果不是的話攘残，考慮使用可編輯式下拉列表。

• 你希望這個(gè)選擇控件引起用戶的注意嗎为狸？ 如果不是歼郭，考慮使用可編輯式下拉列表。 因?yàn)橄吕斜矸浅＞o湊辐棒，所以對于那些你不想強(qiáng)調(diào)的選項(xiàng)病曾，它們是很好的選擇。

• 是否需要節(jié)省使用屏幕空間漾根？ 如果是泰涂，請使用可編輯式下拉列表，因?yàn)樗加玫钠聊豢臻g大小確定辐怕，與選擇項(xiàng)的數(shù)量無關(guān)逼蒙。

對于下拉列表，列表中的選項(xiàng)數(shù)量不是選擇控件的決定因素寄疏，它們可能只有一個(gè)是牢，也可能成千上萬。 可編輯式下拉列表的項(xiàng)目數(shù)量多少都無所謂陕截，因?yàn)橛脩粢部梢暂斎胍粋€(gè)不在列表中的值驳棱。 而且下拉列表可以用于輸入數(shù)據(jù)，所以可能無法事先知道項(xiàng)的數(shù)量农曲，也可能無法限定數(shù)據(jù)的值社搅。 始終為可編輯式列表框預(yù)留出至少三個(gè)項(xiàng)目高度的屏幕空間。

應(yīng)用范例

下拉列表和及其組合框有以下幾種應(yīng)用范例：

下拉列表是一個(gè)標(biāo)準(zhǔn)的下拉式列表框，包含一組固定的預(yù)設(shè)值罚渐。當(dāng)列表收起時(shí)却汉，只有選中項(xiàng)目是可見的。用戶點(diǎn)擊下拉按鈕時(shí)荷并，展現(xiàn)所有選項(xiàng)合砂。如果要變更選項(xiàng)，用戶需要點(diǎn)擊展開列表源织，然后選擇另一個(gè)選項(xiàng)翩伪。

下拉列表默認(rèn)狀態(tài)

下拉列表展開狀態(tài)

預(yù)覽式下拉列表是可以預(yù)覽選擇結(jié)果以幫助用戶進(jìn)行選擇的下拉列表。

預(yù)覽式下拉列表可以預(yù)覽選項(xiàng)應(yīng)用的效果

可編輯式下拉列表是一個(gè)下拉組合框谈息，它允許用戶輸入一個(gè)下拉列表中不存在的值缘屹。

編輯模式的可編輯下拉列表

下拉模式的可編輯下拉列表。 當(dāng)您希望提供文本框的靈活性侠仇，但又希望通過提供選項(xiàng)列表來幫助用戶時(shí)轻姿，可以使用此控件。

可編輯式列表框是一個(gè)常規(guī)組合框逻炊，允許用戶輸入在下方列表框中不存在的值互亮。

在以上這些示例中，可編輯式列表框是始終展示的余素。 這個(gè)控件比可編輯式下拉列表豹休，更適合用來引導(dǎo)用戶查看或更改選項(xiàng)。

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

總述

• 不要將下拉列表或組合框用于

1. 展示命令項(xiàng)桨吊；
2. 展示其他窗口以收集更多信息蜈彼，比如對話框等沸手；
3. 動(dòng)態(tài)顯示與所選控件相關(guān)的其他控件(屏幕閱讀器無法檢測此類事件)督勺。

展示規(guī)則

• 按照邏輯順序?qū)α斜眄?xiàng)進(jìn)行排序展示蔬墩，例如將高度相關(guān)的選項(xiàng)組合在一起，將最常用的選項(xiàng)放在第一位佑淀，或者使用字母順序排列留美。 按首字母順序排列姓名，按增序排列數(shù)字渣聚，按時(shí)間順序排序日期独榴。 有12個(gè)或更多項(xiàng)目的列表應(yīng)按字母順序排序僧叉，這樣項(xiàng)目更容易查找奕枝。
  

  正確示例：依據(jù)項(xiàng)目表達(dá)的空間位置順序排列
  
  
  錯(cuò)誤示例：項(xiàng)目太多，需要按字母順序排列
  
  
  正確示例：除了有「所有選項(xiàng)」含義的項(xiàng)目瓶堕，其他項(xiàng)目均按照字母順序排列

• 將表示“全部”或“無”的選項(xiàng)放置在列表的開頭隘道，它們與其余項(xiàng)的排序順序無關(guān)。

• 將元選項(xiàng)用括號括起來
  

  在這個(gè)示例中，“(無)”是一個(gè)元選項(xiàng)谭梗，因?yàn)樗皇沁x項(xiàng)的有效值忘晤，而是描述了選項(xiàng)本身沒有選中任何值。

• 禁用下拉列表或組合框時(shí)激捏，記得同時(shí)禁用所有相關(guān)的標(biāo)簽和命令按鈕设塔。

下拉列表

• 當(dāng)使用單個(gè)下拉列表，來控制和更改一個(gè)相關(guān)控件的顯示內(nèi)容時(shí)远舅，不要另外設(shè)置確認(rèn)命令按鈕闰蛔，在選定列表項(xiàng)的同時(shí)立即變更相關(guān)控件的顯示內(nèi)容。 只有當(dāng)相關(guān)控件內(nèi)容需要花費(fèi)大量時(shí)間渲染才能展現(xiàn)時(shí)图柏，設(shè)置單獨(dú)的確認(rèn)命令按鈕序六。但是，列表標(biāo)題（list headers）和菜單按鈕才是用于此功能目的的首選控件蚤吹。

• 不要設(shè)置空白的列表項(xiàng)例诀，使用元選項(xiàng)表達(dá)未選擇。 用戶不知道如何理解空白項(xiàng)裁着，而元選項(xiàng)的含義是明確的繁涂。
  

  正確示例

錯(cuò)誤示例】缢悖空白項(xiàng)會(huì)讓用戶感到困惑

預(yù)覽式下拉列表

• 如果用圖片顯示比單獨(dú)使用文本描述能更形象地進(jìn)行展示和表達(dá)爆土，則可在列表項(xiàng)中使用示意預(yù)覽圖。

  
  
  上例中诸蚕，預(yù)覽圖比單純的文字更形象地展示了選項(xiàng)的意思

• 不要使用不必要和無意義的icon進(jìn)行預(yù)覽展示步势。
  

  錯(cuò)誤示例

組合框

• 盡可能限制輸入文本的長度。 例如背犯，如果有效輸入值是介于0和999之間的數(shù)字坏瘩，則組合框應(yīng)限制為三個(gè)字符長度。

• 如果有許多可能的選項(xiàng)漠魏，列表內(nèi)容盡量展示用戶最可能選擇的選項(xiàng)倔矾。 用戶也可以輸入列表中沒有的值，所以組合框不必列出所有選項(xiàng)柱锹，只需列出可能的選項(xiàng)或具有代表性的示例哪自。
  

  上例中并未列出所有有效值，例如用戶可以自行輸入9.5或者15這樣并不在列表中的值

提示符

提示符是放置在可編輯下拉列表中作為其默認(rèn)值的標(biāo)簽或短指令禁熏。 與靜態(tài)文本不同的是壤巷，一旦用戶在組合框中鍵入某些內(nèi)容或獲得輸入焦點(diǎn)，提示符就會(huì)從屏幕上消失瞧毙。

一個(gè)典型的提示符

以下情況胧华，可以使用提示符：

• 屏幕空間狹小寄症，使用標(biāo)簽或指令會(huì)浪費(fèi)空間，如在工具欄上矩动。
• 提示符主要用于以簡潔的方式表明列表的目的有巧。 它不能是用戶在使用組合框時(shí)需要查看的關(guān)鍵信息。

不要僅僅使用提示符來指導(dǎo)用戶從列表中選擇某些內(nèi)容或單擊按鈕悲没。 例如篮迎，像“選擇一個(gè)選項(xiàng)”或“輸入一個(gè)文件名”然后單擊“發(fā)送”這樣文字的提示符是不必要的。

使用提示符的時(shí)候示姿，注意：

• 以斜體灰色字體顯示提示文本柑潦，以正常黑色展示實(shí)際文本。提示文本不能與實(shí)際文本混淆峻凫。

• 保持提示文字的簡潔渗鬼。可以用短語代替完整的句子荧琼。

• 使用句式大小寫規(guī)則譬胎。

• 結(jié)尾不要使用標(biāo)點(diǎn)符號或省略號。

• 提示文本應(yīng)該是不可編輯的命锄，并且應(yīng)該在用戶單擊文本框或選項(xiàng)卡進(jìn)入文本框時(shí)消失堰乔。
  （特殊情況: 如果文本框具有默認(rèn)輸入焦點(diǎn)，則會(huì)顯示提示文字脐恩，并且只有在用戶開始鍵入時(shí)才會(huì)消失镐侯。）

• 如果文本框失去輸入焦點(diǎn)時(shí)仍為空，則還原提示文本顯示驶冒。

錯(cuò)誤示例：該例并不節(jié)省空間苟翻；一旦可編輯下拉列表被選項(xiàng)填充，用戶就很難記得該選項(xiàng)的意圖是什么骗污；提示文字應(yīng)該是可編輯（清除）的崇猫，應(yīng)該和正常文字一樣在文本框中顯示。

建議尺寸和間距

下拉列表和組合框的建議尺寸

• 根據(jù)最長的有效數(shù)據(jù)選擇適當(dāng)?shù)膶挾取?/strong> 下拉列表不能水平滾動(dòng)需忿，因此用戶只能看到控件中可見的內(nèi)容诅炉。 (注意，組合框可以啟用 AutoScroll 功能屋厘。)

• 對于所有需要本地化的文本類型(但不包括數(shù)字) 涕烧，額外增加30%寬度的預(yù)留 (對于較短的文本，增加200%)汗洒。

• 為了減少不必要的垂直滾動(dòng)议纯，設(shè)置合適的列表高度。 因?yàn)橄吕斜硎歉鶕?jù)需要顯示的仲翎，最多可顯示30個(gè)項(xiàng)目痹扇。可編輯的列表框(沒有下拉按鈕的列表框)可顯示3到12個(gè)項(xiàng)目提示溯香。