国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

許多UI控件允許用戶選擇選項(xiàng)，它們包括復(fù)選框、單選按鈕、切換開關(guān)、步進(jìn)器、列表框和下拉列表。?在本文中，作者對(duì)列表框和下拉列表進(jìn)行了定義，討論何時(shí)使用各個(gè)元素，以及各個(gè)情況下使用哪一種更加合適。

摘要

列表框和下拉列表是緊湊型的UI控件，允許用戶選擇選項(xiàng)。

列表框立即顯示選項(xiàng)并支持多選，而下拉列表則需要單擊以查看選項(xiàng)，并且僅支持單選。

列表框（Listboxes）

通常情況下，列表框包括三個(gè)重要組成部分：容器框、選項(xiàng)列表和標(biāo)簽。用戶可以單擊容器框中的選項(xiàng)，實(shí)現(xiàn)從列表中選擇一個(gè)或多個(gè)目標(biāo)。列表框可能會(huì)滾動(dòng)，具體取決于它包含的選項(xiàng)數(shù)和可見區(qū)域。有時(shí)，列表框包含復(fù)選框以明確暗示多選功能可用。更復(fù)雜的列表框允許用戶通過(guò)將選項(xiàng)從一個(gè)列表框移動(dòng)到另一個(gè)列表框來(lái)調(diào)整容器框的大小，重新排序選項(xiàng)列表以及進(jìn)行選擇。

列表框根據(jù)選擇類型可以分為4種表現(xiàn)形式，各個(gè)形式的列表框都可以根據(jù)選項(xiàng)的多少和可見區(qū)域選擇滾動(dòng)或不滾動(dòng)。

• 單選列表框：使用這種類型的列表框，用戶只能從選項(xiàng)列表中選擇一項(xiàng)。
• 多選列表框：用戶可以通過(guò)在單擊選項(xiàng)時(shí)按住Shift，Command或Control鍵來(lái)選擇或取消選擇一個(gè)或多個(gè)選項(xiàng)。
• 帶復(fù)選框的多選列表框：這種類型的列表框包括讓多選功能更加明顯的復(fù)選框。
• 多選雙列表框：這種類型的列表框由兩個(gè)列表框組成。左側(cè)的列表框包含可用選項(xiàng)，右側(cè)的列表框表示所選選項(xiàng)?！?添加”按鈕將選項(xiàng)從可用列表移至所選列表，而“?刪除”按鈕將所選選項(xiàng)移回可用列表，以取消選擇。用戶還可以上下移動(dòng)選項(xiàng)以重新排序列表中的元素。列表框可以保持靜態(tài)或滾動(dòng)以顯示更多超出其初始高度的選項(xiàng)。它們還支持單項(xiàng)或多項(xiàng)選擇。

▲多選雙列表框允許用戶通過(guò)將選項(xiàng)從一個(gè)列表框移動(dòng)到另一個(gè)列表框來(lái)進(jìn)行選擇。用戶還可以通過(guò)在列表中上下移動(dòng)選項(xiàng)來(lái)重新排序選項(xiàng)。

下拉列表（Dropdown Lists）

下拉列表通常包含四個(gè)主要部分：容器框，向下箭頭按鈕，選項(xiàng)列表和標(biāo)簽。用戶可以單擊向下箭頭以顯示相互并列的列表選項(xiàng)，他們只能從中選擇一項(xiàng)。像列表框一樣，下拉菜單也可能會(huì)滾動(dòng)，具體取決于展開時(shí)下拉列表中包含的選項(xiàng)數(shù)量和默認(rèn)高度。對(duì)于下拉列表，選定的選項(xiàng)或默認(rèn)值在容器框中保持可見，而其他列表選項(xiàng)僅在單擊向下箭頭后出現(xiàn)，選擇一個(gè)選項(xiàng)或在下拉列表的外部單擊將下拉列表項(xiàng)收起。

▲下拉列表顯示在容器框中的單個(gè)默認(rèn)值或選定值。單擊向下箭頭時(shí)，顯示選項(xiàng)列表，用戶只能從中選擇一個(gè)。下拉列表可以支持靜態(tài)或滾動(dòng)，具體取決于它包含多少項(xiàng)及選項(xiàng)列表的默認(rèn)高度。

▲下拉列表不支持多選功能。用戶只能從靜態(tài)或滾動(dòng)列表中選擇一個(gè)選項(xiàng)。

列表框和下拉列表在實(shí)際中的應(yīng)用

列表框和下拉列表可以使表單更加緊湊–特別是當(dāng)存在許多可選項(xiàng)時(shí)，將這些選項(xiàng)顯示為獨(dú)立的單選按鈕或復(fù)選框的列表相比來(lái)說(shuō)會(huì)占用較大范圍的不必要的屏幕空間。

使用列表框或下拉列表可以將選項(xiàng)限制為列表中的某一個(gè)，并確保用戶以正確的格式輸入數(shù)據(jù)，以此來(lái)減少錯(cuò)誤的發(fā)生（是防錯(cuò)的一個(gè)典型應(yīng)用）。

▲當(dāng)可用選項(xiàng)較少時(shí)，選擇適合單選的獨(dú)立單選按鈕列表是合適的。當(dāng)選項(xiàng)過(guò)多時(shí)，請(qǐng)使用列表框或下拉列表，具體取決于可用的屏幕空間以及用戶能接受的默認(rèn)顯示數(shù)量。與在頁(yè)面上垂直列出許多項(xiàng)目相比，這兩個(gè)元素都可以容納更多項(xiàng)目并且占用更少的屏幕空間。

▲當(dāng)可用選項(xiàng)較少時(shí)，獨(dú)立復(fù)選框的列表適用于多選。當(dāng)有許多選項(xiàng)可供選擇時(shí)，請(qǐng)使用列表框，因?yàn)樗鼈兛梢匀菁{更多選項(xiàng)，并且比在頁(yè)面上垂直列出許多復(fù)選框要占用更少的空間。

列表框和下拉列表適用于APP或網(wǎng)站中進(jìn)行選擇。它們并非旨在執(zhí)行命令或觸發(fā)模式窗口、對(duì)話框或動(dòng)態(tài)控件的顯示。

在電子商務(wù)網(wǎng)站上，列表框通常用于容納在類別頁(yè)面左側(cè)層疊的過(guò)濾器，而下拉列表則可能包含用戶可以對(duì)產(chǎn)品進(jìn)行排序的功能。

▲Sephora.com使用可滾動(dòng)的列表框（左側(cè)）和復(fù)選框來(lái)將過(guò)濾器放置在其購(gòu)物頁(yè)面上。用戶可以從每個(gè)列表框中選擇一個(gè)或多個(gè)，以縮小產(chǎn)品的顯示范圍。Sephora.com還使用一個(gè)包含類別的下拉列表（右上），用戶可以從中選擇按特定屬性對(duì)頁(yè)面進(jìn)行排序。

對(duì)于可滾動(dòng)的列表框和下拉列表，重要的是要考慮它們的大小，因?yàn)樗鼈冞€與軌道滑動(dòng)定律有關(guān)。

軌道滑動(dòng)定律是預(yù)測(cè)用戶將光標(biāo)或手指移過(guò)可選擇區(qū)域需要多長(zhǎng)時(shí)間。時(shí)間取決于可點(diǎn)擊區(qū)域的長(zhǎng)度和寬度，其中較短、較寬的區(qū)域比較長(zhǎng)，較窄的區(qū)域更快，更容易為用戶導(dǎo)航。

因此，限制可滾動(dòng)列表框和下拉列表中包含的項(xiàng)目數(shù)量，并確保將其設(shè)計(jì)為盡可能寬和盡可能短，將有助于用戶快速輕松地進(jìn)行查看和導(dǎo)航。當(dāng)下拉列表變得過(guò)長(zhǎng)和狹窄時(shí)，用戶可能不小心將光標(biāo)移到有界區(qū)域之外，這將關(guān)閉下拉列表（誤操作）并迫使他們重新開始選擇過(guò)程。

列表框的優(yōu)缺點(diǎn)

盡管相對(duì)很少使用，但列表框具有的優(yōu)勢(shì)不僅限于支持單選、多選、容納更多選項(xiàng)、占用過(guò)多的屏幕空間。

列表框的優(yōu)點(diǎn)：

盡管我們很少使用列表框，但列表框的優(yōu)點(diǎn)不僅局限于支持單選，多選和容納許多選項(xiàng)而不會(huì)占用過(guò)多的屏幕空間，其他優(yōu)點(diǎn)還包括：

• 交互成本低：列表框不需要用戶單擊任何內(nèi)容即可在進(jìn)行選擇之前顯示其中的選項(xiàng)（如果有太多項(xiàng)，則可能需要用戶滾動(dòng)列表）。
• 增加的選項(xiàng)可見性：一次查看多個(gè)選項(xiàng)的功能可以加快決策速度并提高選擇準(zhǔn)確性。
• 單列和多列視圖：因?yàn)榱斜砜虿幌抻趩瘟?，所以如果列表框?qū)挾仍试S，則可以顯示更多選項(xiàng)。但是，應(yīng)避免在多列列表框中出現(xiàn)水平滾動(dòng)。
• 概覽和重新排序：使用多選雙列列表框，用戶可以控制選項(xiàng)的顯示順序，并獲得所選選項(xiàng)的清晰概覽，這在列表框包含多個(gè)選項(xiàng)時(shí)很有用。

列表框的缺點(diǎn)：

• 屏幕空間：盡管它們很緊湊，但它們確實(shí)會(huì)比下拉列表占用更多的屏幕空間。
• 陌生：用戶可能不知道如何立即與列表框進(jìn)行交互-特別是，如果多選列表框中未包含復(fù)選框，則他們可能不知道如何選擇倍數(shù)。按住Control，Command或Shift鍵以選擇和取消選擇多個(gè)項(xiàng)目并不是一般Web用戶經(jīng)常執(zhí)行的操作。這就是為什么將復(fù)選框包含在多選列表框中非常重要的原因，除非它們將注意力集中在多選功能上或增加不必要的屏幕混亂。
• 用戶可能無(wú)法一次看到所有選定的選項(xiàng)：如果在可見區(qū)域中看不到更多的可用項(xiàng)目，則用戶可能無(wú)法同時(shí)看到所有選定的項(xiàng)目。為避免此缺點(diǎn)，請(qǐng)將列表框上方的選定項(xiàng)目顯示為標(biāo)記，或在不可滾動(dòng)的列表中突出顯示選定的項(xiàng)目。

下拉列表的優(yōu)缺點(diǎn)

下拉列表的優(yōu)點(diǎn)：

下拉列表的使用頻率比列表框高。它們占用的屏幕空間更少，但可以容納與列表框一樣多的項(xiàng)目。下拉列表的其他優(yōu)點(diǎn)包括：

• 為用戶提供最佳選項(xiàng)的功能：最佳選項(xiàng)默認(rèn)處于選中狀態(tài)。
• 淡化替代選項(xiàng)和更改：由于下拉列表隱藏了其他可用選項(xiàng)，因此它們很好地淡化了替代選項(xiàng)并淡化了對(duì)其進(jìn)行更改的能力。（在默認(rèn)設(shè)置可以滿足大多數(shù)用戶的情況下，下拉顯示的其他替代選項(xiàng)可能對(duì)非專業(yè)用戶來(lái)說(shuō)是危險(xiǎn)的或令人困惑的）
• 熟悉：下拉列表是大多數(shù)用戶熟悉的選擇機(jī)制，在Web和APP中應(yīng)用的都十分廣泛。

下拉列表的缺點(diǎn)：

下拉列表的一個(gè)典型缺點(diǎn)是它們需要單擊以顯示其他的選項(xiàng)。其他缺點(diǎn)包括：

• 內(nèi)容過(guò)多：它們包含過(guò)多的內(nèi)容，當(dāng)它們包含過(guò)多的選項(xiàng)時(shí)可能會(huì)很麻煩。
• 減緩用戶使用速度：例如，當(dāng)輸入生日或信用卡到期日期時(shí)，與使用下拉列表進(jìn)行選擇相比，在表單字段中鍵入內(nèi)容通常更加方便和快捷。
• 仔細(xì)：由于它們非常緊湊，因此用戶可能會(huì)忽略表單、網(wǎng)頁(yè)、或APP中的下拉列表。
• 易于消除：不小心將光標(biāo)從框中移開會(huì)關(guān)閉下拉菜單，人們不得不重新開始選擇過(guò)程。

列表框 vs 下拉列表

與使用獨(dú)立復(fù)選框或單選按鈕相比，當(dāng)用戶需要選擇5個(gè)或更多項(xiàng)目時(shí)，最好使用列表框或下拉列表。在列表框，下拉列表或其他選擇控件之間進(jìn)行選擇時(shí)，還需要考慮其他因素，例如可用的屏幕空間，用戶是否可以選擇一個(gè)或多個(gè)項(xiàng)目以及是否需要淡化或鼓勵(lì)進(jìn)行更改等因素。使用下表中的條件可以幫助您決定使用哪種形式或何時(shí)需使用其他控件來(lái)滿足要求。

總結(jié)

當(dāng)設(shè)計(jì)過(guò)程中需要用到列表框或下拉列表時(shí)，請(qǐng)始終以邏輯順序顯示選項(xiàng)。這也就意味著將相關(guān)選項(xiàng)分組放在一起，將最常選擇的選項(xiàng)放在第一位，或者按字母順序組織選項(xiàng)。

文章來(lái)源：https://www.nngroup.com/articles/listbox-dropdown/

原文作者：Anna Kaley??尼爾森·諾曼集團(tuán)（Nielsen Norman Group）用戶體驗(yàn)專家

本文由 @Henry-Lee 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議