移動(dòng)界面中的下拉菜單設(shè)計(jì)

使用下拉菜單的形式似乎已是司空見慣：它不占用太多空間的界面，它自動(dòng)驗(yàn)證輸入，所有瀏覽器和平臺(tái)都支持它，實(shí)現(xiàn)下拉菜單非常的方便且容易，用戶都覺得它使用起來很好。

與此同時(shí)，根據(jù)Luke Wroblewski和被多人提及的原則：“下拉菜單應(yīng)該是最后的選擇”的說法，那么下拉菜單卻是最經(jīng)常被誤用的。

讓我們看一看下拉菜單的局限性和令人擔(dān)憂的地方

下拉菜單控件的可用是選項(xiàng)不可見的，直到你點(diǎn)擊或點(diǎn)擊打開它。同時(shí)， 在第一眼看到列表時(shí)，列表的長(zhǎng)度是隱藏的，即用戶無法預(yù)測(cè)一個(gè)下拉菜單是包含2個(gè)還是50個(gè)元素。

從下拉列表中選擇一個(gè)選項(xiàng)，(尤其是在移動(dòng)設(shè)備上)是一個(gè)多步驟的過程：你必須點(diǎn)擊下拉菜單打開選項(xiàng)列表，然后滾動(dòng)和瀏覽項(xiàng)目并選擇一個(gè)，然后關(guān)閉下拉。

下拉菜單可以讓設(shè)計(jì)師懶惰：設(shè)計(jì)師很容易就把所有可能的選項(xiàng)不分任何優(yōu)先級(jí)一起放到下拉列表里(這很類似于漢堡菜單的做法)。

像國家地區(qū)選擇這種很長(zhǎng)的下拉菜單，用眼睛掃描起來簡(jiǎn)直是噩夢(mèng)，尤其是在鍵盤搜索通常是不可用的移動(dòng)端。

在可見、可滾動(dòng)但面積很小的屏幕上滾動(dòng)去選擇想要的選項(xiàng)是一件非常痛苦的事情。

△ 在iOS系統(tǒng)上，第一眼可見的選項(xiàng)少的驚人。

但是好消息是這里有大量的很棒的可替代下拉菜單控件的選擇，能為你在不同的情況下所用到。

考慮選項(xiàng)的數(shù)量

若只有兩個(gè)選項(xiàng)(例如開/關(guān))，那么使用下拉菜單就是一個(gè)錯(cuò)誤的選擇。這里你需要用復(fù)選框(CheckBox)或者用切換開關(guān)(toggle switch)。

如果你的下拉菜單僅僅包含是/否、開/關(guān)這樣的選項(xiàng)，那么就用開關(guān)控件來替代它。

對(duì)于個(gè)數(shù)少且互斥的選項(xiàng) ，建議使用單選按鈕(radio buttons)或分段控件(segmented)，使所有可用的選項(xiàng)第一眼可見，且無需打開列表。

分段控件(Segmentedcontrols)可以一次性展示出所有的可選項(xiàng)。

可見選項(xiàng)的數(shù)量取決于屏幕寬度和選項(xiàng)標(biāo)簽的長(zhǎng)度，但不要超過5項(xiàng)

當(dāng)用戶確切地知道他們?cè)趯ふ沂裁磿r(shí)，對(duì)于大量確定的選項(xiàng)，考慮使用“請(qǐng)輸入…”這樣的解決方案，其中篩選選項(xiàng)列表在輸入第一個(gè)或兩個(gè)字母之后顯示。

用讓用戶來輸入文字來篩選選項(xiàng)的方式替代滑動(dòng)下拉菜單。

對(duì)于大型和多樣的列表，嘗試使用現(xiàn)有的用戶數(shù)據(jù)來排列優(yōu)先級(jí)，只列出幾個(gè)用戶常選的選項(xiàng)。這種方式有一個(gè)好處就是90%的用戶會(huì)立即發(fā)現(xiàn)自己偏好的選擇項(xiàng)，只有10%的人選擇立即“其他”然后跳到指定的下一個(gè)問題。

雖然“其他”不適一個(gè)優(yōu)雅的解決方案，但是優(yōu)先級(jí)排序的方式能夠提高大多用戶的體驗(yàn)

考慮預(yù)填寫

下拉列表的好處之一是用戶不必輸入很多內(nèi)容。然而，如果預(yù)期的輸入不是太長(zhǎng)并且經(jīng)常被問到(例如個(gè)人信息)，通常用輸入的方式是比較容易的，而不是從列表中選擇：

在移動(dòng)設(shè)備上輸入生日的年份，使用數(shù)字鍵盤比滑動(dòng)長(zhǎng)列表要容易的多

通常，在移動(dòng)設(shè)備上輸入數(shù)值會(huì)比數(shù)字下拉列表效率高。

盡管數(shù)字下拉列表是清晰的，但是輸入數(shù)值依然比滑動(dòng)選擇要方便。

如果驗(yàn)證用戶輸入的內(nèi)容很重要，輸入內(nèi)容用于篩選可用選項(xiàng)時(shí)，“請(qǐng)輸入……”這個(gè)方法可能是有用的。

當(dāng)選擇美國時(shí)，輸入一個(gè)字母就可以篩選出來。

當(dāng)列表元素的排序順序不清晰時(shí)，在選項(xiàng)列表中搜索的能力特別有用。

不清楚貨幣代碼排列順序的用戶，能確保他們能在名稱和貨幣代碼間進(jìn)行搜索。

同樣的技術(shù)也應(yīng)該應(yīng)用于國家列表上面：使用讓用戶盡快開始鍵入并過濾結(jié)果來替代列出200多個(gè)條目的方案。

對(duì)于表示數(shù)量的謹(jǐn)慎的數(shù)值選擇(例如乘客數(shù)量或購物車中的商品數(shù)量)，步進(jìn)器(stepper)允許用戶點(diǎn)擊來快速增加或減少數(shù)值。

對(duì)于刻度范圍上的非謹(jǐn)慎數(shù)值，請(qǐng)考慮使用滑塊。

顯示大值和最小值的范圍有助于用戶理解。

選擇當(dāng)下最近日期，使用多個(gè)選擇菜單選擇可能是一次非常痛苦的體驗(yàn)，因此我們選擇使用日期選擇器(date picker)。(但千萬別用它輸入出生日期)

設(shè)計(jì)更智能的下拉菜單

通常下拉菜單不是總要被避免使用的。當(dāng)你發(fā)現(xiàn)選擇菜單是最合適的輸入控件，這很好，那就讓它對(duì)用戶盡可能的友好。

使用有意義的標(biāo)簽：當(dāng)菜單打開時(shí)菜單標(biāo)簽或描述也應(yīng)該清晰和可用。在“選擇”菜單中使用一個(gè)描述性標(biāo)簽，告訴用戶他們正在選擇什么(即“選擇類型”而不是“請(qǐng)選擇”)。

按合理的方式排序條目：基于用戶數(shù)據(jù)嘗試將最流行的選項(xiàng)放在列表的頂部。甚至預(yù)先選擇用戶最常選的選項(xiàng)作為默認(rèn)選項(xiàng)。

使用智能默認(rèn)值：手機(jī)和瀏覽器知道用戶的位置、日期等大量的信息。利用已知的數(shù)據(jù)預(yù)先為每個(gè)用戶選擇最有可能的選項(xiàng)。

減少字段的數(shù)量，讓計(jì)算機(jī)做一些工作：如果用戶輸入郵政編碼，毫無疑問計(jì)算機(jī)已經(jīng)知道這個(gè)郵政編碼所屬的國家和城市。如果用戶輸入信用卡號(hào)碼，計(jì)算機(jī)也毫無疑問的已經(jīng)知道這是MasterCard 。

考慮使用API：使用第三方的方式注冊(cè)比填寫注冊(cè)表要容易。PayPal支付比輸入你的信用卡信息更容易。

分享名稱：移動(dòng)界面中的下拉菜單設(shè)計(jì)
網(wǎng)站網(wǎng)址：http://muchs.cn/news16/173266.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、App開發(fā)、做網(wǎng)站、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

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