使用下拉列表或組合框，用戶可以在列表中選擇互斥的值。 用戶只能選擇其中一個(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)，請(qǐng)使用標(biāo)準(zhǔn)多選列表、復(fù)選框列表、列表生成器或添加 / 刪除列表。
  
  標(biāo)準(zhǔn)多選列表
  
  
  復(fù)選框列表
  
  
  列表生成器
  
  
  添加 / 刪除列表

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

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

下拉列表

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

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

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

• 是否需要節(jié)省使用屏幕空間？ 如果是，請(qǐng)使用下拉列表，因?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)？ 如果是，請(qǐ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)。 在這種情況下，即使需要對(duì)選項(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湊，所以對(duì)于那些你不想強(qiáng)調(diào)的選項(xiàng)，它們是很好的選擇。

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

對(duì)于下拉列表，列表中的選項(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. 展示其他窗口以收集更多信息，比如對(duì)話框等；
3. 動(dòng)態(tài)顯示與所選控件相關(guān)的其他控件(屏幕閱讀器無法檢測(cè)此類事件)。

展示規(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)用括號(hào)括起來
  

  在這個(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ò)誤示例

組合框

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

• 如果有許多可能的選項(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)空間，如在工具欄上。
• 提示符主要用于以簡(jiǎn)潔的方式表明列表的目的。 它不能是用戶在使用組合框時(shí)需要查看的關(guān)鍵信息。

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

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

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

• 保持提示文字的簡(jiǎn)潔。可以用短語代替完整的句子。

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

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

• 提示文本應(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ù)最長(zhǎng)的有效數(shù)據(jù)選擇適當(dāng)?shù)膶挾取?/strong> 下拉列表不能水平滾動(dòng)，因此用戶只能看到控件中可見的內(nèi)容。 (注意，組合框可以啟用 AutoScroll 功能。)

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

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