共用方式為


清單框

注意

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

透過清單框,使用者可以從一律可見的清單中顯示的一組值中選取。 使用單一選取清單框,使用者就會從互斥值清單中選取一個專案。 使用多重選取清單框時,使用者會從值清單中選取零個或多個專案。

單一選取清單框的螢幕快照

典型的單一選取清單框。

注意

版面配置清單檢視 相關的指導方針會顯示在不同的文章中。

這是正確的控制項嗎?

若要決定,請考慮下列問題:

  • 清單是否呈現數據,而不是程序選項? 無論項目數目為何,清單框都是合適的選擇。 相反地, 單選按鈕複選框 僅適用於少數程序選項。
  • 使用者是否需要變更檢視、群組、依數據行排序,或變更數據行寬度和順序? 如果是,請改用 清單檢視
  • 控件是否需要是拖曳來源或置放目標? 如果是,請改用清單檢視。
  • 清單專案是否需要從剪貼簿複製到或貼上? 如果是,請改用清單檢視。

單一選取清單

  • 控制項是否用來從互斥值清單中選擇一個選項? 如果沒有,請使用另一個控制項。 若要選擇多個選項,請改用標準多重選取清單、複選框清單、清單產生器或新增/移除清單。
  • 在大部分情況下,大部分使用者是否建議使用預設選項? 看到選取的選項比看到替代選項更重要嗎? 若是如此,如果您不想鼓勵用戶隱藏替代專案來進行變更,請考慮使用 下拉式清單

最高質量作為預設按鈕的螢幕快照

在此範例中,最高色彩品質是大多數使用者的最佳選擇,因此下拉式清單是淡化替代方案的好選擇。

  • 清單是否需要常數互動? 如果是,請使用單一選取清單來簡化互動。

純文字等選項清單的螢幕快照

在此範例中,用戶會不斷變更 [顯示專案] 清單中的選取專案,以設定前景和背景色彩。 在此情況下,使用下拉式清單會非常乏味。

  • 設定看起來是否為相對數量?使用者是否會受益於對設定變更效果的立即意見反應 ? 如果是,請考慮改用 滑桿
  • 清單項目之間是否有顯著的階層式關聯性? 如果是,請改用 樹視圖 控件。
  • 屏幕空間是否為進階? 如果是,請改用下拉式清單,因為使用的螢幕空間是固定的,而且與清單項目數目無關。

標準多重選取清單和複選框清單

  • 多重選取對工作或常用而言是不可或缺的嗎? 如果是,請使用複選框清單讓多個選取專案變得明顯,特別是目標使用者未進階時。 許多使用者不會意識到標準多重選取清單支援多重選取。 如果複選框會對多個選取範圍引起太多關注,或造成太多螢幕雜亂,請使用標準多重選取清單。
  • 多重選擇的穩定性很重要嗎? 如果是,請使用複選框清單、清單產生器或新增/移除清單,因為按兩下一次只會變更單一專案。 使用標準多重選取清單,即使意外清除所有選取專案也很容易。
  • 控件是用來從值清單中選擇零個或多個專案嗎? 如果沒有,請使用另一個控制項。 若要選擇一個專案,請改用單一選取清單。

預覽清單

  • 使用影像選取的選項是否比單獨使用文字更容易選取? 如果是,請使用預覽清單。

列出產生器及新增/移除清單

  • 控件是用來從值清單中選擇零個或多個專案嗎? 如果沒有,請使用另一個控制項。 若要選擇一個專案,請改用單一選取清單。
  • 選取項目的順序是否重要? 如果是,則清單產生器及新增/移除清單模式支援順序,而其他多重選取模式則不支援。
  • 使用者是否必須查看所有選取專案的摘要? 如果是,則清單產生器及新增/移除清單模式只會顯示選取的專案,而其他多重選取模式則不會顯示。
  • 可能的選擇是否不受限制? 如果是,請使用新增/移除清單,讓使用者可以選擇不在清單中的值。
  • 將值新增至清單是否需要特殊對話框來選擇物件? 如果是,請使用新增/移除清單,並在用戶按兩下 [新增] 時顯示對話方塊。
  • 屏幕空間是否為進階? 若是如此,請改用新增/移除清單,因為它不一定會顯示選項集,因此會使用較少的屏幕空間。

對於清單框, 清單中的專案數目並不是選擇控件 的一個因素,因為它們會一直從數千個專案相應減少到單一選取清單的一個專案(而多選項目清單則無)。 因為清單框可用於數據,因此可能無法事先知道項目數目。

注意: 有時候清單框看起來像是使用清單檢視實作的控件,反之亦然。 在這種情況下,請根據使用方式套用指導方針,而不是實作。

使用模式

清單框有數種使用模式:

標籤
單一選取清單 允許使用者一次選取一個專案。
已選取一個項目的清單框螢幕快照
在此範例中,使用者只能選取一個顯示專案。
標準多重選取清單 允許用戶選取任意數目的專案,包括無專案。
標準多重選取範圍清單的外觀與單一選取範圍清單完全相同,因此清單框不支援多個選取專案沒有視覺線索。 由於用戶必須探索這項功能,因此此清單模式最適合用於多個選取並非必要且很少使用的工作。
有兩種不同的多重選取模式: 多個擴充延伸選取模式 比較常見,您可以藉由拖曳或 Shift+按兩下和 Ctrl+按兩下來分別選取連續和非相鄰值的群組來擴充選取選取範圍。 在多重選取模式,無論 Shift 和 Ctrl 鍵為何,按兩下任何項目都會切換其選取狀態。 鑒於這種不尋常的行為,多重選取模式已被取代,您應該改用複選框清單。
已選取數個項目的清單框螢幕快照
在此範例中,用戶可以使用多重選取模式選取任意數目的專案。
選取清單 與標準多重選取清單框類似,複選框清單可讓使用者選取任意數目的專案,包括無專案。
不同於標準多重選取範圍清單,複選框清楚地指出多個選取專案是可能的。 針對多個選取是必要或常用的工作,使用此清單模式。
工具列複選框清單的螢幕快照
在此範例中,使用者通常會選取多個專案,以便使用複選框清單。
假設有多個選取範圍的明確指示,您可能會假設複選框清單最好是標準多重選取範圍清單。 在實務上,很少有工作需要多重選取或大量使用;在這種情況下,使用複選框清單會引起太多對選取的注意。 因此, 標準多重選取清單更為常見。
預覽清單 可以是單一或多個選取專案,但它們會顯示選取範圍效果的預覽,而不只是文字。
視窗色彩選項預覽的螢幕快照
在此範例中,每個選項的預覽都會清楚顯示選擇的效果,這比單獨使用文字更有效率。
清單產生器 允許使用者一次新增一個專案來建立選擇清單,並選擇性地設定清單順序。
清單產生器包含兩個單一選取清單:左邊的清單是一組固定的選項,右邊的清單是正在建置的清單。 清單之間有兩個命令按鈕:
  • [ 新增 ] 按鈕,會將目前選取的選項移至要建置的清單,並插入選取的專案之前。 (按兩下選項專案的效果相同。
  • [ 移除 ] 按鈕,會從已建置清單中移除選取的專案,並將它傳回至選項清單。 (按兩下內建清單中的專案具有相同的效果。建置的清單可能會選擇性地有 [上移][下 移] 命令來排序列表專案。
工具列按鈕清單產生器的螢幕快照
在此範例中,清單產生器可用來建立工具列,方法是從一組可用的選項中選取專案並設定其順序。
新增/移除清單 允許使用者一次新增一或多個專案來建立選擇清單,並選擇性地設定清單順序(例如清單產生器)。
不同於清單產生器,按兩下 [新增 ] 會顯示對話框,以選取要新增至清單的專案。 使用個別對話框可讓您在選擇專案時有顯著的彈性,您可以使用特製化物件選擇器,甚至是通用對話方塊。 相較於清單產生器,此變化比較精簡,但需要稍微多一點心力來新增專案。
功能表內容清單的螢幕快照
在此範例中,使用者可以從功能表新增或移除工具,以及設定順序。
雖然清單產生器與新增/移除清單模式明顯高於其他多重選取清單,但它們提供兩個獨特的優點:
  • 用戶可控制清單順序,同時建置清單和之後。
  • 用戶可以檢閱所選取專案的摘要,如果選項數目很大,這可以是一個顯著的好處。
其缺點是,它們需要更多的螢幕空間,而且在從頭建立大量項目清單時可能很難使用。 因此,它們最適合用來建立簡短清單或修改已經存在的清單。

指導方針

簡報

  • 依邏輯順序排序列表專案, 例如將相關選項分組在一起、先放置最常使用的專案,或使用字母順序。 依字母順序排序名稱、數值順序的數位,並以時間順序排序日期。 具有12個以上專案的清單應該依字母順序排序,讓專案更容易找到。

正確: 對齊的螢幕快照(左、置中、右)

在此範例中,清單框專案會依其空間關聯性排序。

不對: 未組織清單的螢幕快照

在此範例中,有許多清單項目應該依字母順序排序。

正確: 依字母順序排列清單的螢幕快照

在此範例中,清單專案更容易尋找,因為它們會依字母順序排序。 不過,不論其排序順序為何,「所有 Windows 產品」項目都會在清單的開頭。

  • 將代表 [全部] 或 [無] 的選項放在清單開頭,而不論剩餘專案的排序順序為何。
  • 以括弧括住中繼選項。

未選取的下拉式清單螢幕快照

在此範例中,“(none)” 是中繼選項,因為它不是選擇的有效值,而是表示選項本身未使用。

  • 不要讓空白清單專案改用中繼選項。 使用者不知道如何解譯空白專案,而中繼選項的意義則明確。

不對: 已選取空白的下拉式清單螢幕快照

在此範例中,空白項目的意義尚不清楚。

正確: 未選取的下拉式清單螢幕快照

在此範例中,會改用 「(none)」 中繼選項。

互動

  • 請考慮提供按兩下行為。 按兩下應該與選取項目並執行其預設命令相同。
  • 請讓雙擊行為備援。 應該一律會有具有相同效果的命令按鈕或操作功能表命令。
  • 如果使用者無法對選取的項目執行任何動作,則不允許選取。

正確: 完成精靈變更清單的螢幕快照

此清單框會顯示變更的唯讀清單;不需要選取。

  • 停用清單框時,也停用任何相關聯的標籤和命令按鈕。
  • 請勿使用清單框中選取項目的變更來:
    • 執行命令。
    • 顯示其他視窗,例如對話框以收集更多輸入。
    • 動態顯示與選取控件相關的其他控制項(螢幕助讀程式無法偵測到這類事件)。 例外狀況: 您可以動態變更用來描述所選取專案的靜態文字。

可以接受: 選取清單項目詳細數據的螢幕快照

在此範例中,變更選取的項目會變更描述。

  • 避免水平捲動。 多欄清單依賴水平捲動,這通常比垂直捲動更難使用。 當您有許多依字母順序排序的專案和足夠的螢幕空間可供寬控件使用需要水平捲動的多欄清單。

可以接受: Windows 檔案總管中資料夾清單的螢幕快照

在此範例中,會使用需要水平捲動的多個數據行,因為有許多專案和大量的螢幕空間可供寬控件使用。

多重選取清單

  • 請考慮顯示清單下方選取的項目數目, 特別是如果使用者可能選取數個專案。 此信息不僅提供有用的意見反應,而且清楚指出清單框支援多重選取。

已選取四個項目的清單框螢幕快照

在此範例中,選取的項目數目會顯示在清單下方。

  • 您可以提供其他可能更有意義的選取計量,例如選取專案所需的資源。

Windows 功能的複選框清單螢幕快照

在此範例中,安裝元件所需的磁碟空間比選取的項目數目更有意義。

  • 如果可能有許多清單項目並選取或清除所有專案,請新增 [全部選取] 和 [清除所有命令] 按鈕。
  • 對於標準多重選取範圍清單,請勿使用多重選取模式,因為此選取模式已被取代。 針對對等的行為,請改用複選框清單。

預設值

  • 選取最安全的選項(以防止數據或系統存取遺失),且預設最安全的選項。 如果安全性和安全性不是因素,請選取最有可能或方便的選項。

例外狀況:如果控件代表處於混合狀態的屬性,則不要選取任何專案,這會在針對沒有相同設定的多個對象顯示屬性時發生。

清單框重設大小和間距的螢幕快照

建議的清單框大小和間距。

  • 選擇適合最長有效數據的清單框寬度。 標準清單框無法水平捲動,因此使用者只能看到控件中可見的內容。
  • 針對任何將本地化的文字(但不包含數字)額外 30% (短文字最多 200%)。
  • 選擇顯示整數項目數的清單框高度。 避免垂直截斷專案。
  • 選擇排除不必要的垂直捲動的清單框高度。 清單框應該會顯示在 3 到 20 個項目之間,而不需要捲動。 如果這樣做會排除垂直滾動條,請考慮讓清單框稍微長一點。 可能有許多專案的清單應該顯示至少五個專案,以便捲動,方法是一次顯示更多專案,並讓滾動條更容易定位。
  • 如果使用者受益於讓清單框變大,請讓清單框及其父視窗重設大小。 這麼做可讓用戶視需要調整清單框大小。 不過,可重設大小的清單框應該不會顯示少於三個專案。

標籤

控件標籤

  • 所有清單框都需要標籤。 將卷標撰寫為單字或詞組,而非句子;使用標籤尾的冒號。

例外狀況:如果標籤只是對話方塊主要指令重述,請省略標籤。 在此情況下,主要指示會採用冒號(除非是問題)和存取密鑰。

可以接受: 具有備援標籤標的清單螢幕快照

在此範例中,清單框標籤只會重述主要指令。

更好: 沒有備援標籤清單的螢幕快照

在此範例中,會移除備援標籤,因此主要指令會採用冒號和存取密鑰。

  • 如果清單框屬於單選按鈕或複選框,且由該控件的標籤以冒號結尾,請勿將其他標籤放在清單框控制件上。

使用相同標籤的按鈕和清單螢幕快照

在此範例中,清單框屬於單選按鈕,並共用其標籤。

  • 指派唯 一的存取金鑰。 如需指導方針,請參閱 鍵盤
  • 使用 句子樣子大寫
  • 將標籤放置在控件左邊或上方,並將標籤對齊控件的左邊緣。
    • 如果標籤位於左側,垂直對齊標籤文字與控件中的第一行文字。

正確: 上方具有靠左對齊卷標的清單螢幕快照 清單的螢幕快照,左邊有文字對齊的標籤

在這些範例中,頂端的標籤會與清單框的左邊緣對齊,而左邊的標籤會與清單框中的文字對齊。

不對: 上方有文字對齊標籤的清單螢幕快照 左上方對齊標籤標的清單螢幕快照

在這些不正確的範例中,頂端的卷標會與清單框中的文字對齊,而左邊的標籤會與清單框頂端對齊。

  • 對於多重選取範圍清單框,請使用清楚指出多個選取範圍的標籤。 複選框清單標籤可能不太明確。

正確: 清單的螢幕快照,其中選取一或多個標籤

在此範例中,標籤清楚地指出多個選取專案是可能的。

不對: 包含附加元件標籤的清單框螢幕快照

在此範例中,標籤不會提供多個選取專案的相關明顯資訊。

最好: 包含附加元件標籤的複選框清單螢幕快照

在此範例中,複選框會清楚指出有多個選取專案,因此標籤不一定明確。

  • 您可以在標籤之後的括弧中指定單位(秒、連接等等)。

選項文字

  • 為每個選項指派唯一的名稱。
  • 除非專案是適當的名詞,否則請使用 句子樣式大寫
  • 將卷標寫為單字或詞組,而非句子,且不使用結尾標點符號。
  • 使用平行片語,並嘗試保留所有選項的長度大致相同。

指示文字和補充文字

  • 如果您需要新增清單框的相關指示文字,請在標籤上方新增。 使用完整的句子搭配結尾標點符號。
  • 使用 句子樣子大寫
  • 其他有助於但不需要的信息應該保持簡短。 將此文字放在標籤和冒號之間的括弧中,或控件下方沒有括號。

選取框清單和描述性文字的螢幕快照

在此範例中,補充文字會放在清單下方。

文件集

參考清單框時:

  • 使用確切的標籤文字,包括其大寫,但不包含訪問鍵底線或冒號。 包含字組清單。 請勿將清單框稱為清單框或欄位。
  • 針對清單專案,請使用確切的專案文字,包括其大寫。
  • 在程式設計和其他技術檔中,將清單框稱為清單框。 在其他地方,使用清單。
  • 若要描述用戶互動,請使用 select。
  • 可能的話,請使用粗體文字格式化標籤和清單專案。 否則,只有在需要防止混淆時,才將標籤和專案放在引號中。

範例:在 [移至哪個 清單] 中,選取 [書籤]。