雖然下拉菜單在UI設計領域中經常飽受爭議(沒辦法，因為下拉菜單設計得不好，會讓整個網站和APP的操作變得繁瑣)，但不可否認，下拉菜單的確是UI設計中最基礎的控件之一。

那麼，UI設計什麼時候需要用到下拉菜單?通常情況下，如果輸入欄符合以下兩個條件，都可以考慮使用下拉菜單：

▶ 多於6個選項;

▶ 用戶不能馬上知道選項單項的情況。

既然知道了「什麼時候需要用到下拉菜單」，接下來香港網頁集團將詳細介紹有關下拉菜單的各類屬性。

● 下拉菜單的類型

雖然人們對下拉菜單都有普遍的了解，但在進行UI設計時，各位仍需要特別留意幾個常見的下拉菜單類型：

1.標準下拉菜單：點擊類似文本輸入欄時，會出現對應的列表菜單。

UI設計教程

2.下拉菜單配自動提示：當用戶在一長串列表中選擇需要的選項時，只需要輸入首字母(文字)便會出現相關選項。

UI設計教程

* 部分下拉菜單配自動提示還具備自動完成功能，即用戶在輸入欄里輸入字母(文字)時，輸入欄會顯示完成的選項。

UI設計教程

3.下拉菜單配多選：類似複選框的延伸，用戶可在同一輸入區域內選擇多個列表選項。

UI設計教程

4.下拉菜單配分組：將選項按照類別分組顯示，方便用戶搜索和選擇。

UI設計教程

5.導航下拉菜單：用於實現多級導航菜單的展示。

UI設計教程

● 下拉菜單的風格

不同於下拉菜單的類型(Type)，下拉菜單的風格(Style)涉及的是它的樣子，而不是功能，下面香港網頁集團將幾款常見的下拉菜單風格簡單地說說。

1.標準風格：這是最常見的下拉菜單風格(下圖)。

UI設計教程

* 標準下拉菜單風格還會出現(如下圖)的分離菜單風格，這類風格會根據屏幕尺寸變化決定輸入欄的位置。

UI設計教程

2.圓形邊框風格：這類下拉菜單風格更適合遊戲型頁面設定。

UI設計教程

3.搭配圖標或圖片風格：如果覺得下拉菜單看起來比較單調，可以在下拉菜單添加圖標或圖片，讓整個更有設計感，但需要注意圖標或圖片的清晰度，如果列表太小無法看清，就不要強行添加。

UI設計教程

另外，這種下拉菜單在後期更新和維護時也會比較痛苦，尤其是列表經常變換時，不過若需要展示各列表的不同之處時，這種風格還是挺實用的。

UI設計教程

4.Material Design下拉菜單風格：這種風格的下拉菜單風格實在太棒，讓整個UI設計顯得更乾淨、更簡約，還解決了很多可用性的問題。

UI設計教程

● 下拉菜單的狀態

要想提高UI設計的交互性，關鍵要給用戶提供友好的操作體驗，因此不管用戶用什麼方式操作，下拉菜單都應給予及時的反饋。這裡，我們來看看不同反饋狀態下的下拉菜單是如何的：

1.默認狀態：用戶在操作前的下拉菜單樣子。

UI設計教程

2.禁用狀態：用戶能看到該菜單內容，但不能使用。

UI設計教程

3.懸停狀態：光標在菜單懸停時，下拉菜單會向用戶暗示它的可點擊性。(該狀態只適用PC端的UI設計。)

UI設計教程

4.強調狀態：用在使用「製表鍵」制定了下拉菜單後，但在選中特定列表選項之前。

UI設計教程

5.焦點狀態：當用戶點擊下拉菜單後，列表會隨之打開展示選項，且當用戶的光標懸停在下拉菜單的選項時，該選項會變得與眾不同。

UI設計教程

6.完成輸入：用戶點擊選項，輸入欄彈回活躍狀態並顯示已選擇的選項內容。

UI設計教程

7.失敗反饋：用戶沒有完成正確的選項，並點擊「提交」鍵後，用戶會收到「提交失敗」的反饋信息。

UI設計教程

下拉菜單是UI設計中令人又愛又恨的控件之一，雖然它不佔地方、不需要輸入驗證、技術門檻、用戶認知度高等，卻又非常容易被錯誤使用。因此，在設計下拉菜單需要注意細節、使用場景、設計技巧等，才能將下拉菜單的優點發光發熱。