2024-01-05 分類: 網(wǎng)站建設
正確地使用網(wǎng)站下拉菜單是美妙的,它們可以幫助用戶縮小選擇范圍,逆轉(zhuǎn)屏幕空間并防止錯誤的數(shù)據(jù)輸入。但是,在某些情況下,網(wǎng)站下拉菜單的意義不大,反而會對用戶體驗產(chǎn)生負面影響。
重要的是要知道何時使用網(wǎng)站下拉菜單或其他接口元素,例如單選按鈕,打開的文本字段等,過度使用或濫用它們會造成可用性問題。
在本文中,我將討論網(wǎng)站下拉菜單的性質(zhì),并分析應該或不應該使用它們的情況。我還將展示一些不好的例子,以幫助你進行設計。
01 避免長列表網(wǎng)站下拉
在表單中使用網(wǎng)站下拉菜單似乎很容易——它們在界面上不會占用太多空間,所有瀏覽器都支持它們,并且用戶對它們的了解也足夠多。但是,當選項超過15種時,用戶可能會不知所措,而他們也難以導航。
看到20多個未分類的選項可能會令人迷惑并且令人生畏,用戶很難找到他們想要的輸入;還會出現(xiàn)滾動問題,用戶必須將鼠標光標保持在網(wǎng)站下拉框中,否則,他們最終將向下滾動頁面。
長網(wǎng)站下拉列表最經(jīng)典的示例是國家選擇器,通常有100多個選項。盡管通常按字母順序?qū)ζ溥M行排序,但有時會將流行國家/地區(qū)放在頂部,這可能會使用戶感到困惑。
更好的選擇是使用具有自動完成功能的文本字段,因為用戶已經(jīng)知道他們在尋找什么輸入。
自定義搜索輸入
02 選項太少
另一方面,如果選項太少, 那么網(wǎng)站下拉菜單將是一個糟糕的選擇,因為它通過隱藏可能已經(jīng)暴露的信息而在用戶流中引入了不必要的摩擦。
更好的選擇是使用單選按鈕,該按鈕允許用戶立即掃描可用選項,而無需花費任何精力或精力。
如果選項很少,最好使用單選框,而不要使用網(wǎng)站下拉菜單
03 禁用灰色選項
當某個選項被禁用或不可用時,應將其顯示為灰色,而不是將其刪除。如果刪除了禁用項,則界面將失去空間一致性,并使用戶更難學習——他們可能僅由于禁用項而無法找到某些選項。
與其刪除已禁用的選項,不如將它們變灰以指示其“已禁用”或“不可用”狀態(tài)。您也可以考慮顯示工具提示,以指示該選項被禁用的原因以及如何使其處于活動狀態(tài)。
與其刪除禁用的選項,不如將它們變灰以指示其“禁用”狀態(tài)
04 避免打字速度更快時使用網(wǎng)站下拉菜單
在某些情況下,鍵入實際上可能比使用網(wǎng)站下拉菜單更快。一種典型的情況是輸入信用卡有效期。鍵入mm / yy絕對快得多,而不是從兩個網(wǎng)站下拉菜單(月和年)中滾動。
盡管使用自由格式的輸入字段確實需要某種形式的數(shù)據(jù)驗證,但從可用性的角度來看,它仍然是更好的選擇——因為它可以減少用戶的負擔。
對于用戶而言,鍵入時可能更快,請避免使用網(wǎng)站下拉菜單。
05 避免過度使用
當某些數(shù)據(jù)或信息可以自動導出時,無需不斷詢問用戶的輸入。
這樣的示例之一就是在結(jié)帳過程中使用的“卡類型”字段,可以根據(jù)信用卡號的前幾個數(shù)字,確定卡的類型,因此要求用戶自己選擇卡的類型會產(chǎn)生額外的麻煩。
當可以在其他地方找到數(shù)據(jù)時,不要養(yǎng)成添加新輸入字段的習慣。
06 減少動作數(shù)量
可以根據(jù)所需信息自定義網(wǎng)站下拉菜單的菜單部分,以減少操作數(shù)量。
一個經(jīng)典的例子是“日期選擇”字段,如果使用普通的列表菜單,則需要3個網(wǎng)站下拉菜單(月,日和年),這對于用戶來說很煩人。
更好的選擇是自定義菜單組件,以允許用戶選擇僅具有一個網(wǎng)站下拉菜單的輸入。
使用自定義菜單減少所需的操作數(shù)量。
07 使用簡潔明了的標簽
用戶根據(jù)他們的標簽選擇菜單選項,因此準確和提供信息非常重要。通常,最好使用句子大小寫并編寫簡潔的標簽,以清楚表明選擇的目的。
以下是寫好標簽的一些準則:
對于動作菜單項,請使用動詞來描述將要發(fā)生的動作
對于鏈接,請使用名詞來標識用戶將定向到的頁面
排除菜單項中的文章;使用“刪除頁面”,而不是“刪除頁面”
將菜單項保持在一行文本中
通過按邏輯順序?qū)α斜磉M行排序來組織菜單項也很重要——如果知道的話,將選擇最多的選項排列在頂部。這需要用戶研究,應隨時間進行測試和完善以重新評估結(jié)果。
網(wǎng)頁題目:網(wǎng)站下拉菜單的制作規(guī)則和標準
網(wǎng)站鏈接:http://m.newbst.com/news22/312122.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供服務器托管、手機網(wǎng)站建設、域名注冊、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、響應式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容