下拉菜單的*個(gè)設計要訣

下拉菜單有許多優(yōu)點(diǎn)：它節省屏幕空間不占地方，不需要做輸入驗證，所有平臺都支持，技術(shù)門(mén)檻低，用戶(hù)都熟悉其使用方法。。它還可以有效幫助用戶(hù)縮小選擇范圍，轉換屏幕空間并防止錯誤的數據輸入。

然而，下拉菜單又是最容易被錯誤使用的表單組件。過(guò)度使用或濫用它們可能會(huì )造成可用性問(wèn)題的出現。

本文將針對下拉菜單性質(zhì)，告訴大家下拉菜單的適用場(chǎng)景、設計技巧以及實(shí)例探討怎樣正確使用下拉菜單優(yōu)化設計。

適合使用下拉菜單的場(chǎng)景

導航菜單

下拉菜單適用于陳列所有需要展示的子頁(yè)面，相當于子導航菜單，將用戶(hù)帶到一個(gè)新的位置。

內容分類(lèi)

例如：許多資訊產(chǎn)品會(huì )選擇下拉菜單進(jìn)行內容分類(lèi)和羅列標簽。這是因為資訊產(chǎn)品里通常有大量的內容，所以排版要簡(jiǎn)潔、清晰，而下拉菜單能將布局元素外的鏈接集合起來(lái)。

表單項

讓用戶(hù)選擇一個(gè)選項設置表單字段

下拉菜單選項的類(lèi)型影響下拉菜單的使用

五個(gè)以?xún)冗x項建議使用單選框或分段選擇器，這樣能一眼看到所有選項，而不需要下拉打開(kāi)選項菜單。

選項較多且指向性明確建議使用可輸入下拉菜單

如果用戶(hù)明確知道他們要什么，允許用戶(hù)輸入選項，并在輸入的同時(shí)過(guò)濾出可能的答案，這樣可以節省翻閱長(cháng)列表的時(shí)間。

純數值選項讓用戶(hù)在文本輸入框中鍵入會(huì )更快

通常來(lái)說(shuō)，在手機上使用數字鍵盤(pán)輸入純數值會(huì )比在菜單中選擇數值更加快一些。

下拉菜單設計要訣

避免列表過(guò)長(cháng)

當選項超過(guò) 1* 種時(shí)，用戶(hù)可能會(huì )不知所措。當用戶(hù)看到 20 多個(gè)未分類(lèi)的選項時(shí)，即使用戶(hù)想在眾多選項中找到合適選項，但一定會(huì )出現滾動(dòng)問(wèn)題，用戶(hù)必須讓鼠標在下拉框中，否則頁(yè)面就會(huì )隨下拉滾動(dòng)。

長(cháng)下拉列表最經(jīng)典案例：

國家選擇器-有 100 多個(gè)選項。通常按字母順序排序。還有一種做法是把常用/流行的國家/地區放在頂部。

或者使用帶自動(dòng)提示功能的文本框，提示用戶(hù)想要什么。

避免選項過(guò)少

選項太少時(shí)使用下拉菜單，反而給用帶來(lái)繁瑣的操作。因為下拉菜單隱藏選項，用戶(hù)必須操作不必要的動(dòng)作才能看到選項。

灰掉任何不可用的選項而不是刪除它們

某個(gè)選項被禁用或不可用時(shí)，應將其設置為灰色。將選項設置灰色指示其「已禁用」或「不可用」狀態(tài)。

同時(shí)可以加入提示，指示該選項被禁用的原因、如何讓其成為可用狀態(tài)。

輸入優(yōu)先、下拉備選

某些情況下，輸入更快。

例如：輸入信用卡有效期。鍵入 mm/yy相比從兩個(gè)下拉菜單中選擇月和年要快。

雖然自由輸入需要數據驗證，但在這一場(chǎng)景下，直接輸入仍然是最好的選擇。

組合下拉菜單，減少操作

當選擇項由多個(gè)字段組成時(shí)，將幾個(gè)下拉菜單組合，可以有效減少用戶(hù)操作。

例如：日期選擇下拉菜單，有年、月、日甚至是小時(shí)、分、秒的選擇，如

果用普通下拉菜單則需要用到*-6個(gè)。而把這些選項組合成一個(gè)下拉菜單，就方便很多了。

下拉菜單打開(kāi)時(shí)，保持菜單標簽或描述。

用戶(hù)會(huì )根據他們的標簽選擇菜單選項，因此提供準確的信息很重要。在打開(kāi)菜單時(shí)標簽被隱藏或刪除，用戶(hù)必須回憶他們在采取行動(dòng)之前需要選擇的內容。隨時(shí)可能中斷用戶(hù)的任務(wù)。

編寫(xiě)簡(jiǎn)潔標簽的準則：

↘ 動(dòng)作菜單項請使用動(dòng)詞來(lái)描述將要發(fā)生的動(dòng)作。

↘ 鏈接使用名詞來(lái)標識用戶(hù)將定向到的頁(yè)面。

↘ 排除菜單項中多余的描述性助詞；例如「刪除頁(yè)面」，而不是「刪除這個(gè)頁(yè)面」。

↘ 將菜單項保持在一行文本中。

↘ 組織菜單項的列表排序有邏輯順序。

↘ 將選擇最多的選項排列在頂部，迭代更新最熱選項。