中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站下拉菜單的制作規(guī)則和標(biāo)準(zhǔn)

2024-01-05    分類: 網(wǎng)站建設(shè)

正確地使用網(wǎng)站下拉菜單是美妙的,它們可以幫助用戶縮小選擇范圍,逆轉(zhuǎn)屏幕空間并防止錯(cuò)誤的數(shù)據(jù)輸入。但是,在某些情況下,網(wǎng)站下拉菜單的意義不大,反而會(huì)對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響。

重要的是要知道何時(shí)使用網(wǎng)站下拉菜單或其他接口元素,例如單選按鈕,打開的文本字段等,過度使用或?yàn)E用它們會(huì)造成可用性問題。

在本文中,我將討論網(wǎng)站下拉菜單的性質(zhì),并分析應(yīng)該或不應(yīng)該使用它們的情況。我還將展示一些不好的例子,以幫助你進(jìn)行設(shè)計(jì)。

01 避免長列表網(wǎng)站下拉

在表單中使用網(wǎng)站下拉菜單似乎很容易——它們?cè)诮缑嫔喜粫?huì)占用太多空間,所有瀏覽器都支持它們,并且用戶對(duì)它們的了解也足夠多。但是,當(dāng)選項(xiàng)超過15種時(shí),用戶可能會(huì)不知所措,而他們也難以導(dǎo)航。

看到20多個(gè)未分類的選項(xiàng)可能會(huì)令人迷惑并且令人生畏,用戶很難找到他們想要的輸入;還會(huì)出現(xiàn)滾動(dòng)問題,用戶必須將鼠標(biāo)光標(biāo)保持在網(wǎng)站下拉框中,否則,他們最終將向下滾動(dòng)頁面。

長網(wǎng)站下拉列表最經(jīng)典的示例是國家選擇器,通常有100多個(gè)選項(xiàng)。盡管通常按字母順序?qū)ζ溥M(jìn)行排序,但有時(shí)會(huì)將流行國家/地區(qū)放在頂部,這可能會(huì)使用戶感到困惑。

更好的選擇是使用具有自動(dòng)完成功能的文本字段,因?yàn)橛脩粢呀?jīng)知道他們?cè)趯ふ沂裁摧斎搿?/p>

自定義搜索輸入

02 選項(xiàng)太少

另一方面,如果選項(xiàng)太少, 那么網(wǎng)站下拉菜單將是一個(gè)糟糕的選擇,因?yàn)樗ㄟ^隱藏可能已經(jīng)暴露的信息而在用戶流中引入了不必要的摩擦。

更好的選擇是使用單選按鈕,該按鈕允許用戶立即掃描可用選項(xiàng),而無需花費(fèi)任何精力或精力。

如果選項(xiàng)很少,最好使用單選框,而不要使用網(wǎng)站下拉菜單

03 禁用灰色選項(xiàng)

當(dāng)某個(gè)選項(xiàng)被禁用或不可用時(shí),應(yīng)將其顯示為灰色,而不是將其刪除。如果刪除了禁用項(xiàng),則界面將失去空間一致性,并使用戶更難學(xué)習(xí)——他們可能僅由于禁用項(xiàng)而無法找到某些選項(xiàng)。

與其刪除已禁用的選項(xiàng),不如將它們變灰以指示其“已禁用”或“不可用”狀態(tài)。您也可以考慮顯示工具提示,以指示該選項(xiàng)被禁用的原因以及如何使其處于活動(dòng)狀態(tài)。

與其刪除禁用的選項(xiàng),不如將它們變灰以指示其“禁用”狀態(tài)

04 避免打字速度更快時(shí)使用網(wǎng)站下拉菜單

在某些情況下,鍵入實(shí)際上可能比使用網(wǎng)站下拉菜單更快。一種典型的情況是輸入信用卡有效期。鍵入mm / yy絕對(duì)快得多,而不是從兩個(gè)網(wǎng)站下拉菜單(月和年)中滾動(dòng)。

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

對(duì)于用戶而言,鍵入時(shí)可能更快,請(qǐng)避免使用網(wǎng)站下拉菜單。

05 避免過度使用

當(dāng)某些數(shù)據(jù)或信息可以自動(dòng)導(dǎo)出時(shí),無需不斷詢問用戶的輸入。

這樣的示例之一就是在結(jié)帳過程中使用的“卡類型”字段,可以根據(jù)信用卡號(hào)的前幾個(gè)數(shù)字,確定卡的類型,因此要求用戶自己選擇卡的類型會(huì)產(chǎn)生額外的麻煩。

當(dāng)可以在其他地方找到數(shù)據(jù)時(shí),不要養(yǎng)成添加新輸入字段的習(xí)慣。

06 減少動(dòng)作數(shù)量

可以根據(jù)所需信息自定義網(wǎng)站下拉菜單的菜單部分,以減少操作數(shù)量。

一個(gè)經(jīng)典的例子是“日期選擇”字段,如果使用普通的列表菜單,則需要3個(gè)網(wǎng)站下拉菜單(月,日和年),這對(duì)于用戶來說很煩人。

更好的選擇是自定義菜單組件,以允許用戶選擇僅具有一個(gè)網(wǎng)站下拉菜單的輸入。

使用自定義菜單減少所需的操作數(shù)量。

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

用戶根據(jù)他們的標(biāo)簽選擇菜單選項(xiàng),因此準(zhǔn)確和提供信息非常重要。通常,最好使用句子大小寫并編寫簡潔的標(biāo)簽,以清楚表明選擇的目的。

以下是寫好標(biāo)簽的一些準(zhǔn)則:

對(duì)于動(dòng)作菜單項(xiàng),請(qǐng)使用動(dòng)詞來描述將要發(fā)生的動(dòng)作

對(duì)于鏈接,請(qǐng)使用名詞來標(biāo)識(shí)用戶將定向到的頁面

排除菜單項(xiàng)中的文章;使用“刪除頁面”,而不是“刪除頁面”

將菜單項(xiàng)保持在一行文本中

通過按邏輯順序?qū)α斜磉M(jìn)行排序來組織菜單項(xiàng)也很重要——如果知道的話,將選擇最多的選項(xiàng)排列在頂部。這需要用戶研究,應(yīng)隨時(shí)間進(jìn)行測(cè)試和完善以重新評(píng)估結(jié)果。

網(wǎng)頁題目:網(wǎng)站下拉菜單的制作規(guī)則和標(biāo)準(zhǔn)
網(wǎng)站鏈接:http://www.rwnh.cn/news22/312122.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、企業(yè)網(wǎng)站制作靜態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

h5響應(yīng)式網(wǎng)站建設(shè)

網(wǎng)站建設(shè)知識(shí)

同城分類信息

阳新县| 双牌县| 曲靖市| 济源市| 灵璧县| 曲沃县| 镇江市| 淮阳县| 西和县| 绥宁县| 桓台县| 嘉义市| 洱源县| 柞水县| 永城市| 葵青区| 普兰县| 宽城| 漠河县| 蕲春县| 尼勒克县| 昌邑市| 贺兰县| 嘉禾县| 陵水| 太白县| 大田县| 广平县| 富蕴县| 定陶县| 吉木萨尔县| 衡山县| 韶关市| 东兴市| 翁牛特旗| 济宁市| 灵璧县| 普兰店市| 巫山县| 文水县| 革吉县|