中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：下拉菜單，是進行界面設(shè)計的一種常用控件，雖然經(jīng)常會用到，但是很多人可能并不是很了解它。本文作者為我們介紹了下拉菜單的類型、利弊，以及我們應該如何使用下拉菜單。希望通過本篇文章，可以幫助你拓展關(guān)于下拉菜單的設(shè)計知識。

一、前言

Dropdown（下拉菜單）是界面設(shè)計中的常用控件，它可以用下拉列表展示多個內(nèi)容標簽，用戶能從預定的列表中選擇一項或多項。在研究相關(guān)控件時，會發(fā)現(xiàn)這個控件有很多不同的名稱：下拉菜單、下拉框、選擇器、選擇框等等。

Ant Design將下拉菜單與選擇器分別放在不同的屬性里，下拉菜單歸屬導航、選擇器歸屬數(shù)據(jù)錄入，F(xiàn)iori?Design?將下拉菜單與選擇器定義為同一種控件。

其實，根據(jù)W3C規(guī)范規(guī)定，其應該命名為select element（選擇元素）。

為方便表述，下文統(tǒng)一稱之為下拉菜單。

二、下拉菜單是什么

最簡單的下拉菜單包含四個主要部分：一個容器框，一個朝下的箭頭按鈕，一個項目列表和一個標簽。用戶可以單擊向下箭頭以顯示項目列表，從中選擇一項或多項。

下拉菜單有3種變體，可以根據(jù)選擇類型進行分類：

1. 單選列表框：用戶只能從互斥選項列表中選擇一項
2. 多選列表框：允許用戶選擇多個選項
3. 搜索選擇：允許用戶搜索大量選項

選項過多時，下拉菜單可能會滾動，具體取決于展開時包含的項目數(shù)量。對于下拉列表，選定的選項或默認值在容器框中保持可見，而其他列表項僅在單擊向下箭頭后出現(xiàn)，完成選擇或在下拉列表的外部單擊可將其關(guān)閉。

三、下拉菜單的類型

下拉菜單常見用法有以下幾種：

1. 命令菜單

命令菜單主要應用于計算機程序和應用程序（如Microsoft Word）中，目的是為用戶提供下一步操作，點擊下拉后可以查看更多控制界面的按鈕。

2. 導航菜單

水平導航欄中常見的一種導航菜單，用于向用戶提供更多鏈接，可以將用戶帶到新的位置。

3. 表單填寫

用戶可以選擇一個選項來輸入表單字段，幫助用戶從許多不同選項中進行便捷選擇：

4. 屬性選擇

允許用戶從許多選項中選擇一個值，其作用方式類似于表單填寫中的下拉菜單。

盡管最初“下拉框”和“下拉菜單”可互換使用，但隨著設(shè)計規(guī)范的不斷完善，兩者之間出現(xiàn)了功能上的區(qū)別。如今，“下拉菜單”更多用于命令和導航列表，而“下拉框”通常用于表單數(shù)據(jù)填寫和屬性選擇。

四、下拉菜單的利弊

在界面設(shè)計中使用下拉菜單是一個很方便的解決方案，但是過度使用會顯得界面繁瑣笨重，我們必須了解其優(yōu)缺點來確定什么情況下使用是最佳的。

1. 使用下拉菜單的優(yōu)勢

• 提供最佳選項：為用戶提供系統(tǒng)最佳項，默認情況下可以處于選中狀態(tài)；
• 淡化替代選項：由于下拉列表隱藏了其他可用選項，因此很好地淡化了替代選項。這在默認值可以滿足大多數(shù)用戶的情況下，并且替代選項對非專業(yè)用戶來說是危險的情況下是有利的；
• 節(jié)省空間：如果界面只能為用戶提供很少的空間，下拉菜單非常實用。雖然下拉菜單很小，但是可以在很小的空間中包含大量信息；
• 操作熟悉：下拉菜單是大多數(shù)用戶熟悉的選擇控件，在計算機應用程序中使用廣泛；
• 輸入可預測：通過輸入文本字段收集用戶信息是不可預測的，用戶可能會輸入錯誤，拼寫錯誤或誤解輸入內(nèi)容。下拉菜單通過提供的選項，可以預測用戶的輸入內(nèi)容；
• 靈活：下拉菜單最大的優(yōu)點就是一個下拉列表就能包含所有選項，無需根據(jù)選項數(shù)量而更改設(shè)計。

2. 使用下拉菜單的缺點

• 當下拉菜單包含太多選項時需要滾動，會放慢用戶輸入速度；
• 下拉菜單默認情況下會隱藏可用選項，用戶無法感知選項內(nèi)容；
• 下拉列表看起來像已經(jīng)完成，當用戶填寫表格時，會在視覺上掃描要填寫的空字段，單選按鈕和復選框更容易被發(fā)現(xiàn)；

• 將光標從下拉框中移出時會不小心關(guān)閉下拉列表，用戶需要重新開始一輪新的選擇過程。

五、下拉菜單vs其他控件

1. 切換/開關(guān)

如果用戶輸入的是兩個互相對立的選項，則可以使用開關(guān)。如：有效或無效、是或否、開或關(guān)等。切換開關(guān)可以替換兩個單選項，允許用戶在兩??個相反的狀態(tài)之間進行選擇，最適合用于更改系統(tǒng)功能和首選項。

2. 單選按鈕

當選項很少（5個或更少）時，單選按鈕可用于替換下拉菜單。與下拉菜單相比，使用單選按鈕的好處是可以輕松地掃描選項，而無需強制用戶交互來查看可用選項。

心理學家J. A.Bargas Avila及其團隊在關(guān)于網(wǎng)頁表單設(shè)計的研究中表明了使用單選按鈕優(yōu)于下拉菜單：“單選按鈕的優(yōu)勢在于所有選項都可以立即看到，而下拉菜單的優(yōu)勢在于節(jié)省了屏幕空間”。

在CXL進行的可用性研究中，他們發(fā)現(xiàn)，與使用單選按鈕相比，下拉菜單顯著降低了用戶的速度：“調(diào)查參與者完成單選按鈕表單（n = 354）的平均速度比使用選擇菜單按鈕（n = 354）的表單快2.5秒。在置信度為95％的情況下，單選按鈕明顯更快?！?/p>

3. 輸入框

對于輸入可能更快的情況，應避免使用下拉菜單。例如，當輸入金額或年齡時：

與下拉菜單的交互相比，在輸入框中輸入內(nèi)容通常更快、更方便，從下拉菜單中選擇一個值所需的最小交互次數(shù)如下：

對于屏幕顯示尺寸有限的界面，特別是移動端界面，單擊下拉菜單后，選項列表可能并不完整。因此，用戶必須上下滾動以查看適合屏幕的選項數(shù)量。對于無序列表，找到正確的值需要耗費更多時間。

4. 列表框

與使用復選框或單選按鈕相比，當用戶可以選擇5個或更多選項時，最好使用列表框或下拉列表。

在列表框與下拉列表之間進行選擇時，還需要考慮其他因素，例如可用的屏幕空間量，是否需要用戶淡化其他選項或是否允許用戶進行更改等。設(shè)計師?Anna Kaley針列表框與下拉列表的優(yōu)劣進行了詳細分析，下面列舉了部分分析結(jié)果：

可見當屏幕空間足夠、需要查看已選項以及需要對已選項進行更改時，使用列表框比下拉菜單更合適。例如，巨量引擎在填寫地域時，為了方便用戶對比已選項與未選項以及更改已選內(nèi)容，使用了雙列表框。

六、如何使用下拉菜單

1. 盡可能指定默認選擇，如果未指定所選項目可使用占位符

通常情況下請給一個默認選項，如果需要指示所有項目都適用，可提供“全部”作為選項，并將其放在列表的開頭；如果允許用戶不要選擇任何選項，請?zhí)峁盁o”作為選項，并將其放在列表的開頭。

若一定要使選項默認選擇空，可以通過容器框中使用占位符來解決該問題，使其看起來也為“空”。為了獲得良好的可訪問性，建議不要使用空白下拉列表。

2.?以可預測的方式對選項進行排序

排序選項列表應包含用戶可用的所有項目，可選擇以下方式排序：

• 邏輯：將項目按有意義的順序排序，將相關(guān)選項組合在一起，并首先顯示最常用的選項，然后顯示不太常用的選項；
• 按字母順序：按字母順序?qū)ω泿?，名稱和類似內(nèi)容進行排序；
• 數(shù)值：將數(shù)值按順序排列，通常從最低的數(shù)字開始；
• 時間順序：將與時間相關(guān)的信息按時間順序排序，通常最新的優(yōu)先。

3. 使用簡短的描述性選項

文本值應盡可能短，因為列表僅限于使用單行，太長的值可能會被截斷。

4.?不可用的選項置灰

不能選擇的選項不要刪除，應保留在視圖中并用灰色表示。如果用戶將鼠標懸停在變灰的選項上超過一秒鐘，可以考慮顯示一條簡短的氣泡幫助說明為什么禁用該選項以及如何使其處于活動狀態(tài)。

5. 通過點擊觸發(fā)下拉框，而不是懸停觸發(fā)

懸停菜單會迫使用戶必須將指針放在菜單內(nèi)，如果用戶指針離開下拉菜單，菜單將被關(guān)閉，這無疑增加了用戶的操作難度。

6. 找到不同控件中的平衡關(guān)系

使用下拉菜單是避免用戶輸入內(nèi)容的便捷方法，眾所周知，打字需要用戶付出大量的認知成本，這就是為什么下拉列表在表單設(shè)計中很常見的原因。

但是下拉菜單并不是萬能的，使用下拉菜單（尤其是表單中的下拉菜單）時，應平衡表單類型、用戶類型等各種其他因素的關(guān)系，這需要設(shè)計師從眾多控件中進行權(quán)衡。

七、結(jié)語

關(guān)于下拉菜單的設(shè)計指南遠不止于此，以上僅是筆者通過學習與工作的個人感悟，感謝閱讀。

參考文章鏈接

• https://experience.sap.com/fiori-design-web/select/
• https://www.nngroup.com/articles/listbox-dropdown/
• https://www.nngroup.com/articles/drop-down-menus/
• https://cxl.com/research-study/form-field-usability-buttons/
• https://www.zuko.io/blog/why-drop-downs-are-bad-for-online-forms

本文由 @LIZ醬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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