網(wǎng)站設(shè)計

Website development

移動界面設(shè)計中，為什么下拉菜單應(yīng)該是最后的選擇？

發(fā)布時間：2017-07-20 09:14:59

TAGS：體驗設(shè)計

移動下拉菜單.jpg

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

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

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

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

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

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

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

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

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

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

考慮選項的數(shù)量

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

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

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

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

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

當(dāng)用戶確切地知道他們在尋找什么時，對于大量確定的選項，考慮使用“請輸入…”這樣的解決方案，其中篩選選項列表在輸入第一個或兩個字母之后顯示。

用讓用戶來輸入文字來篩選選項的方式替代滑動下拉菜單。

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

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

考慮預(yù)填寫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,7238,0.html

上一篇：【漲知識】SEO純靜態(tài)和偽靜態(tài)的區(qū)別與關(guān)系

下一篇：愛站改版 2017版本

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計
程序設(shè)
計研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個項目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯的。

陳曦
不錯，價格比較合適，重點是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因為他們都是針對每個項目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時。

張經(jīng)理