下拉選單的基本剖析

標籤：告知使用者所要選擇的內容欄位圖示（可選）：用來說明相應的欄位特徵的圖示搜尋欄目（可選）：用來幫助使用者輕鬆找到所需選項，前提條件上下拉選單中欄位超過20個複選框（可選）：讓使用者可用同時選中多個選項

下拉選單的型別

根據所需輸入的內容的性質，下拉選單的外觀可能會有所變動，方便處理不同型別的資訊。設計下拉選單的時候，需要保持足夠的靈活性，提高可用性，兼顧不同的輸入型別，這一點很重要。

下拉選單的狀態

基於不同的互動狀態，下拉選單的 UI 介面有多個不同的狀態。每個狀態在視覺上都比較相似，但是在設計的時候，要讓使用者能夠清晰地區分開來。下拉選單通常有 預設、啟用、懸停、禁用、聚焦和出錯這幾種狀態。

下面是設計下拉選單的時候，一些重要的設計準則和最佳實踐。

1、避免下拉選單有太多選項

下拉選單選項多，是下拉選單的一大特點，但是如果選項太多，可能會對體驗產生負面的影響，比如選項超過15個的時候，使用者極有可能會覺得不知所措。

此外，選項過多還會出現滾動瀏覽的問題。使用者只有將游標置於下拉框當中才能正常瀏覽，而如果不小心游標挪到下拉框之外，則可能讓整個頁面滾動，這是一件非常令人討厭的事情。

但是避免不了要怎麼辦呢？超長的下拉框是最常見的一種情況，當你需要填寫/選擇自己所在的國家和地區的時候，超長的列表簡直讓人崩潰。

這個時候有2種解決方案：

使用自動填寫來幫助使用者補完資訊將搜尋功能整合在輸入框當中

2、選項太少時就別採用下拉選單

所以，沒有太多選項的時候，就儘量不要使用下拉選單。

3、讓不可用選項以灰色顯示

首先要說的是，某個選項存在但是不可選（被禁用）和不提供這一選項，是兩個截然不同的情況。如果直接不顯示，就意味著邏輯和介面一致性失衡了。所以，最好讓不可用的、被禁用的選項保留，但是以灰色顯示，且不可選。

4、按照邏輯來排列選項

列舉出的選項應該符合一定的規律，方便使用者定位和篩選。最常見的情況，是按照字母順序或者數字順序來排列，這樣使用者有清晰的預期和搜尋定位的依據。

5、如果輸入更快就不要用下拉選單

在有的情形下，輸入可能是比在下拉選單中選擇來的更快的。一種比較典型的情況，是輸入信用卡的有效期，輸入「月份/年」這樣的資訊，比在兩個下拉選單中挨個選擇，來的快。

儘管使用者輸入內容需要程式進行驗證和匹配，但是從可用性的角度上來說，直接輸入依然是更好的選擇，因為它減少了操作和認知負擔。

6、避免濫用功能和互動

當某些資料和資訊是可以自動匹配的時候，就沒有必要反覆找使用者去確認了。這種情況最典型的，就是系統可以根據信用卡號來匹配相應的卡的型別，這就不需要使用者使用下拉選單去挨個選擇了。

7、儘可能減少運算元

你可以透過自定義下拉框的設計，來減少操作的數量。一個經典的案例，是選擇日期的下拉選單的設計。如果是普通的下拉選單，你可能需要三個，但是使用自定義的下拉選單，就會方便很多。

8、使用盡可能簡明的標籤文字

使用者主要是透過下拉選單中的標籤文字資訊來進行篩選的，因此你需要在有限的空間中，讓資訊儘可能清晰，用識別率更高的大小寫結合的拼寫方式，表達方式上清晰，直指目標。下面是3條撰寫標籤文字的準則：

儘可能用動詞來描述指向性明確的操作對於連結，請使用名詞來幫助使用者定位到頁面在一行內寫完標籤內容，不要囉嗦

結合一定的邏輯來進行排序，然後將最常用的、最重要的選項放在頂部。當然，更具的排列方式，可以結合一些使用者調研來進行細化。

結語

正確的下拉選單，使用者體驗是非常棒的，它們可以幫助使用者縮小篩選資訊的範疇，在有限的螢幕範疇內，最大程度利用空間，提高使用者的選擇效率。什麼時候用下拉選單，怎麼用下拉選單，最好都弄清楚，這樣才能最大程度地發揮設計的價值。

1：選一個區域，輸入你想要的內容（如C1：C5，輸入：北京、天津、上海、廣州、深圳）

2:選中你想要出現下拉選單的單元格。（如A列）

3：選資料-有效性

4：在設定中，允許，選序列，

5：在公式中點右邊圖示，選1中區域（如C1：C5）

6：點確定

7：這樣，你在A列，就有下拉選單，也只能輸入C1：C5的內容了。

1.我以輸入男女為例，開啟一個Excel，我們要在性別這一列中設定一個下拉選單，內容為“男”“女”

2.選中姓名後面所對著的“性別”單元格

3.依次開啟“資料”—“有效性”

5.確定之後，你就可以看到，在“性別”這一列下，都出現了“男,女”下拉選單

第一步，新建一個Excel表格，滑鼠放在要製作下拉選單的單元格中；

最後，製作的下來選單就完成了，在選擇的時候直接透過下拉選單就可以輕鬆選擇。