亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

移動界面設計中,為什么下拉菜單應該是最后的選擇?

作者:
分類: 觀點/經驗
2017-07-20
3807

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

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

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

讓我們看一看下拉菜單的局限性和令人擔憂的地方:

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

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

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

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

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

選項少的驚人.png

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

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

考慮選項的數(shù)量

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

復選框(.png

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

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

單選按鈕.png

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

分段控件.png

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

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

字母之后顯示.png

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

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

偏好的選擇項.png

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

考慮預填寫

下拉列表的好處之一是用戶不必輸入很多內容。然而,如果預期的輸入不是太長并且經常被問到(例如個人信息),通常用輸入的方式是比較容易的,而不是從列表中選擇:

列表中.gif

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

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

輸入數(shù)值.png

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

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

用于篩選.png

當選擇美國時,輸入一個字母就可以篩選出來。

當列表元素的排序順序不清晰時,在選項列表中搜索的能力特別有用。

選項列表中搜索.png

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

同樣的技術也應該應用于國家列表上面:使用讓用戶盡快開始鍵入并過濾結果來替代列出200多個條目的方案。

200多個條目的方案.png

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

步進器.png

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

刻度范圍上.png

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

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

輸入出生日期.png

設計更智能的下拉菜單

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

使用有意義的標簽:當菜單打開時菜單標簽或描述也應該清晰和可用。在“選擇”菜單中使用一個描述性標簽,告訴用戶他們正在選擇什么(即“選擇類型”而不是“請選擇”)。

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

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

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

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


0
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      9000px;">

          久久综合狠狠综合久久综合88| 久久se精品一区二区| 欧美在线视频你懂得| 不卡av在线免费观看| 国产夫妻精品视频| 国产资源在线一区| 韩日欧美一区二区三区| 国产原创一区二区| 国产精品综合二区| 国产99一区视频免费| 成人免费毛片片v| 99精品热视频| 在线亚洲人成电影网站色www| av日韩在线网站| 99re6这里只有精品视频在线观看 99re8在线精品视频免费播放 | 99久久精品免费看国产| 波多野结衣亚洲| 色狠狠一区二区三区香蕉| 一本大道久久a久久综合| 91久久久免费一区二区| 欧美日韩亚洲不卡| 精品日韩欧美一区二区| 久久色中文字幕| 中文字幕一区二区三区在线播放| 亚洲欧美aⅴ...| 日本系列欧美系列| 国产精品白丝av| 精品嫩草影院久久| 久久精品男人天堂av| 中文字幕一区不卡| 香蕉乱码成人久久天堂爱免费| 青青国产91久久久久久| 国产mv日韩mv欧美| 欧美日韩在线电影| 国产亚洲午夜高清国产拍精品 | 亚洲午夜久久久久久久久电影院| 天使萌一区二区三区免费观看| 蜜乳av一区二区| 99精品久久久久久| 欧美日韩亚洲综合在线| 久久久久9999亚洲精品| 亚洲综合视频在线| 国产美女娇喘av呻吟久久| 不卡的av电影在线观看| 日韩一区二区三区高清免费看看| 中文字幕一区二区视频| 男女视频一区二区| 色88888久久久久久影院按摩| 精品三级av在线| 性做久久久久久久免费看| 成人激情午夜影院| 精品国产乱码久久久久久免费 | 欧美在线观看一区二区| 久久久久久久久久久黄色| 亚洲国产精品一区二区www在线| 国产高清精品网站| 日韩欧美精品在线| 亚洲h动漫在线| 99精品国产视频| 国产肉丝袜一区二区| 日韩高清欧美激情| 欧美日韩在线三级| 亚洲一区欧美一区| 色综合久久久久综合99| 国产蜜臀av在线一区二区三区| 免费精品视频在线| 91精品国产综合久久精品图片| 亚洲欧美乱综合| 91视频观看视频| 亚洲人精品一区| 91一区二区三区在线观看| 中文字幕一区二区视频| av在线不卡电影| 国产精品免费av| 波多野结衣精品在线| 国产欧美日韩精品在线| 国产成人精品一区二区三区四区| 精品国产乱码久久久久久闺蜜| 亚洲v中文字幕| 欧美三区在线观看| 午夜久久久久久电影| 欧美性猛交xxxx乱大交退制版| 亚洲女人的天堂| 精品国产成人系列| 免费观看成人鲁鲁鲁鲁鲁视频| 在线播放欧美女士性生活| 婷婷开心激情综合| 日韩一区二区在线观看视频 | 欧美色精品天天在线观看视频| 亚洲欧美日韩国产成人精品影院| 色综合天天做天天爱| 一区二区三区不卡在线观看| 在线免费不卡电影| 日日摸夜夜添夜夜添国产精品| 3751色影院一区二区三区| 老汉av免费一区二区三区 | 国产日韩欧美a| www.亚洲激情.com| 亚洲成av人综合在线观看| 欧美一区二区播放| 成人爽a毛片一区二区免费| 国产精品国产精品国产专区不片| 色婷婷综合久久久中文字幕| 亚洲成在人线免费| 久久婷婷国产综合国色天香| www.欧美日韩国产在线| 怡红院av一区二区三区| 91精品国产一区二区人妖| 国产乱子轮精品视频| 亚洲男人天堂av| 欧美一二三在线| 成人h动漫精品一区二区| 一区二区三区免费观看| 欧美一区二区美女| 不卡的av电影| 精品午夜一区二区三区在线观看| 国产精品福利av| 91精品久久久久久久久99蜜臂| 国产v日产∨综合v精品视频| 午夜精品福利一区二区三区av| 国产亚洲人成网站| 欧美日韩高清影院| 99精品视频在线免费观看| 免费的国产精品| 亚洲欧美一区二区三区极速播放| 91精品国产综合久久精品| 91在线观看污| 国产精品中文字幕日韩精品| 亚洲一级二级三级| 国产精品国产三级国产普通话99| 在线不卡免费av| 在线免费观看不卡av| 国产精品伊人色| 日韩激情视频网站| 亚洲精品高清在线| 国产精品麻豆久久久| 日韩免费在线观看| 777精品伊人久久久久大香线蕉| 99久久免费视频.com| 国产激情视频一区二区三区欧美 | 日韩影院在线观看| 国产成人免费视频一区| 日韩黄色小视频| 亚洲线精品一区二区三区八戒| 国产精品久久久久久久久快鸭 | 1024成人网色www| 久久九九久精品国产免费直播| 欧美精品乱码久久久久久| 在线影视一区二区三区| 99久久精品费精品国产一区二区 | 日韩午夜在线观看| 欧美日韩精品电影| 欧美亚洲一区二区三区四区| 99re成人在线| 99久久精品免费看国产免费软件| 风间由美一区二区三区在线观看| 久久99久久99| 国产一区二区视频在线| 精品一区二区免费在线观看| 免费成人av在线播放| 男男成人高潮片免费网站| 免费在线观看日韩欧美| 美女一区二区三区在线观看| 青青草国产成人av片免费| 美女被吸乳得到大胸91| 蜜桃视频一区二区| 精品一区二区三区香蕉蜜桃 | 欧美日韩国产大片| 8x8x8国产精品| 日韩欧美一区二区视频| 精品国产欧美一区二区| 久久久国产精品麻豆| 欧美激情一区二区三区不卡| 国产精品欧美极品| 一区二区三区日韩欧美| 日韩黄色在线观看| 国产乱国产乱300精品| 成人免费观看视频| 在线观看国产精品网站| 制服丝袜激情欧洲亚洲| 久久午夜羞羞影院免费观看| 国产精品亲子乱子伦xxxx裸| 一二三四区精品视频| 日韩成人精品在线| 黄色成人免费在线| 色94色欧美sute亚洲线路一久| 欧美福利视频一区| 国产日韩成人精品| 亚洲午夜免费视频| 精品一区二区三区久久| av色综合久久天堂av综合| 91精品国产综合久久精品图片| 2欧美一区二区三区在线观看视频| 国产精品天干天干在线综合| 午夜私人影院久久久久| 国产成人午夜电影网| 欧美日韩在线直播| 中文无字幕一区二区三区| 婷婷久久综合九色综合伊人色| 国产福利91精品|