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

本文將依據(jù)下拉菜單的屬性，通過舉例來討論下拉菜單的使用場景，希望在設(shè)計(jì)上對大家有所幫助。

正確地設(shè)計(jì)下拉菜單，可以幫助用戶縮小選擇范圍，減少屏幕其他元素的干擾，以及防止用戶輸入錯(cuò)誤的信息。但是，在某些情況下，下拉菜單的錯(cuò)誤使用將給用戶體驗(yàn)帶來嚴(yán)重的負(fù)面影響。在什么情況下使用下拉菜單至關(guān)重要。

本文將依據(jù)下拉菜單的屬性，通過舉例來討論下拉菜單的使用場景，希望在設(shè)計(jì)上對大家有所幫助。

01 避免過長的下拉列表

在表單使用下拉菜單看起來很簡單，它們不會占用界面空間，適配所有瀏覽器，用戶對于此類組件足夠熟悉。

但是，當(dāng)下拉菜單里有超過15個(gè)選項(xiàng)時(shí)，用戶會變得不知所措，選擇起來非常費(fèi)勁——用戶需要從20多個(gè)未分類的選項(xiàng)中找到想要的內(nèi)容，想想都令人頭大。

此外還存在滾動的問題，用戶必須把光標(biāo)保持在下拉列表中，不然很容易滾動整個(gè)頁面，造成誤操作。

國家選擇器應(yīng)該是最經(jīng)典的長列表下拉菜單了，常常有超過100多個(gè)選項(xiàng)。雖然列表中的選項(xiàng)一般情況下會按字母順序排列，但是將熱門國家/地區(qū)放在列表頂部的做法依舊不能滿足用戶需求。更好的做法是，增加自動填充功能或搜索功能，因?yàn)橛脩糁浪鼈兿胍x擇的內(nèi)容是什么。（比如系統(tǒng)可以根據(jù)地理位置或場景自動填充國家，或用戶自主搜索國家）

02 避免選項(xiàng)過少

而選項(xiàng)過少，使用下拉菜單組件也將是一個(gè)糟糕的決定。隱藏了本可以直接展示的信息內(nèi)容，反而給用戶的流程造成阻礙，降低了用戶完成任務(wù)的效率。比較好的方式是使用單選組件，可以讓用戶快速瀏覽選項(xiàng)內(nèi)容，提升用戶的操作效率。

03 置灰不可選項(xiàng)，而非刪除

當(dāng)某個(gè)選項(xiàng)被禁用或不可用時(shí)，應(yīng)將其顯示為灰色，而不是直接刪除。因?yàn)檫@些不可用選項(xiàng)被禁用的情況有多種（如可能是在當(dāng)前場景下是不可用的，在其他場景是可用的）?？梢钥紤]使用給不可用選項(xiàng)增加提示，說明其被禁用原因以及如何使其為可用狀態(tài)。

04 鍵盤輸入可能更快

在某些情況下，鍵入可能比下拉選擇速度更快。典型的案例就是信用卡日期。鍵入mm/yy絕對快得多，而不是從兩個(gè)下拉菜單（月和年）中滾動。

盡管使用自由格式的輸入字段需要某種形式的數(shù)據(jù)驗(yàn)證，但從可用性的角度來看，它仍然是最好的選擇——因?yàn)樗梢詼p少用戶的負(fù)擔(dān)。

05 避免過度使用

當(dāng)某些數(shù)據(jù)或信息可以自動填入時(shí)，無需要求用戶進(jìn)行手動輸入。這樣的示例之一就是在結(jié)帳過程中使用的“卡類型”功能。根據(jù)信用卡號的前幾個(gè)數(shù)字，可以確定卡的類型，此時(shí)要求用戶自己選擇卡的類型會額外增加用戶的操作。

06 減少操作

可以根據(jù)所需信息自定義下拉菜單的交互方式，以減少操作步驟。一個(gè)經(jīng)典的例子是“日期選擇”功能，如果使用普通的列表菜單，則需要3個(gè)下拉菜單（月，日和年），這對于用戶來說很繁瑣。

更好的選擇是自定義菜單組件，以允許用戶僅使用一個(gè)下拉菜單選擇輸入。

07 使用簡潔明了的標(biāo)簽

用戶根據(jù)菜單標(biāo)簽內(nèi)容選擇選項(xiàng)，因此準(zhǔn)確提供信息非常重要。通常，最好使用簡潔的標(biāo)簽，以清楚表明選擇的目的。以下是一些標(biāo)簽的準(zhǔn)則：

1. 對于動作菜單項(xiàng)，請使用動詞來描述將要發(fā)生的動作
2. 對于鏈接，請使用名詞來標(biāo)識用戶跳轉(zhuǎn)到的頁面
3. 排除菜單項(xiàng)中的冠詞；使用“刪除頁面”，而不是“刪除這個(gè)頁面”
4. 將菜單項(xiàng)保持在一行文本中

通過按邏輯順序?qū)α斜磉M(jìn)行排序來組織菜單項(xiàng)也很重要-如果可以，通常將最常選擇的選項(xiàng)放在下拉列表頂部。然后通過用戶調(diào)研，不斷進(jìn)行測試和完善，以重新評估結(jié)果。

原文：7 tips for dropdown menu design

作者：Jeremiah Lam

編譯作者：微交互Lab；公號“微交互Lab”，定期分享設(shè)計(jì)好文

本文由@微交互Lab 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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