正確使用下拉菜單設計是非常重要的。它可以有效幫助用戶縮小選擇範圍,轉換屏幕空間並防止錯誤的數據輸入。但是,在某些情況下,下拉菜單的意義其實並不大,反而會對用戶體驗產生負面影響。
關鍵的是知道何時使用下拉菜單或其他接口元素。例如單選按鈕,打開的文本字段等,過度使用或濫用它們可能會造成可用性問題的出現。
在本文中,我將針對下拉菜單的性質,並根據具體使用情況舉例來探討怎麼樣正確使用下拉菜單來優化設計。
避免列表過長
下拉菜單在界面上不會佔用太多空間,能夠完美適配所有瀏覽器類型,並且用戶對它們也足夠了解,能夠很快就上手使用。
但當選項超過 15 種時,用戶可能就會不知所措。
設想一下:當用戶看到 20 多個未分類的選項時,會不會心生迷惑甚至望而生畏?就算用戶想要在眾多選項中好好找到自己想要的條目,還是會出現滾動問題,用戶必須將鼠標保持在下拉框中,否則,他們的頁面就會被下拉滾走。
長下拉列表最經典的示例是國家選擇器,一般有 100 多個選項。通常情況下是按字母順序對其進行排序。一種優化方式是:將常用/流行的國家/地區放在頂部。
另外一種更優選擇是:使用具有自動完成功能的文本字段,因為用戶已經知道他們想要找的是什麼了。
△ Custom Search Input by Jonathan Reinink
避免選項過少
如果選項太少,那使用下拉菜單就是一個糟糕的選擇。因為它通過隱藏可能的選項,給用戶的視覺瀏覽動線造成了不必要的阻礙。
解決辦法是使用單選按鈕,該按鈕可以讓用戶對可用選項一目瞭然。
將不可用選項置灰
當某個選項被禁用或不可用時,應將其显示為灰色,而不是將其刪除。
如果刪除了禁用項,界面將失去空間一致性,會增加用戶使用難度——他們可能因為找不到被刪除的禁用項而感到疑惑。所以,與其刪除已禁用的選項,不如將它們變灰以指示其「已禁用」或「不可用」狀態。也可以考慮显示提示,以指示該選項被禁用的原因以及如何讓其成為可用狀態。
能輸入不下拉
在某些情況下,輸入實際上可能比使用下拉菜單更快。
一種典型的情況是輸入信用卡有效期。鍵入 mm/yy 絕對快得多,而不是從兩個下拉菜單(月和年)中滾動。
儘管使用自由格式的輸入字段需要某種形式的數據驗證,但從可用性的角度來看,它仍然是最好的選擇——因為它可以減少用戶的負擔。
避免過度使用
當某些數據或信息可以自動導出時,無需不斷詢問用戶的輸入。
這樣的示例之一就是在結帳過程中使用的「卡類型」字段。根據信用卡號的前幾個数字,可以確定卡的類型,因此要求用戶自己選擇卡的類型就會增加額外的麻煩。
減少操作
根據所需信息自定義下拉菜單的菜單數量,以減少用戶操作。
一個經典的例子是「日期選擇」字段,如果使用普通的列表菜單,則需要 3 個下拉菜單(月,日和年),這對於用戶來說很煩人。
更好的選擇是自定義菜單組件,以允許用戶選擇僅具有一個下拉菜單的輸入。
使用簡潔明了的標籤
用戶根據他們的標籤選擇菜單選項,因此提供準確的信息非常重要。
通常,最好編寫簡潔的標籤,以清楚表明選擇的目的。
以下是寫好標籤的一些準則:
- 對於動作菜單項,請使用動詞來描述將要發生的動作。
- 對於鏈接,請使用名詞來標識用戶將定向到的頁面。
- 排除菜單項中多餘的描述性助詞;例如「刪除頁面」,而不是「刪除這個頁面」。
- 將菜單項保持在一行文本中。
通過按邏輯順序對列表進行排序來組織菜單項也很重要。
通過用戶研究,將選擇最多的選項排列在頂部,然後隨時間進行測試和完善以重新評估結果。
更多菜單設計介紹:
基礎交互知識!6種常見的隱藏菜單科普
Z Yuhan:很多產品設計的癥結在於,一方面界面要簡單,另一方面功能要豐富。為了解決這個問題,隱藏菜單被發明了,可以把無窮的多個信息塞到這個看不見的秘密容器中。 隱藏菜單在 PC時…
閱讀文章 >>
歡迎關註譯者的微信公眾號:「海外設計參考」
未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五平台首頁_總監級經驗!下拉菜單的7個設計要訣