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

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

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

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

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

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

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

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

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

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

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

      選項少的驚人.png

      △  在iOS系統上,第一眼可見的選項少的驚人。

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

      考慮選項的數量

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

      復選框(.png

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

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

      單選按鈕.png

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

      分段控件.png

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

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

      字母之后顯示.png

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

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

      偏好的選擇項.png

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

      考慮預填寫

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

      列表中.gif

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

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

      輸入數值.png

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

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

      用于篩選.png

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

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

      選項列表中搜索.png

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

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

      200多個條目的方案.png

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

      步進器.png

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

      刻度范圍上.png

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

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

      輸入出生日期.png

      設計更智能的下拉菜單

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

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

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

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

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

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


      0
      0
      分享到:

      0

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

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

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

      版權信息

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

      主站蜘蛛池模板: 麻豆AV天堂一区二区香蕉| 久久无码人妻精品一区二区三区| V一区无码内射国产| 91在线一区二区| 国产一区二区精品久久| 日本一区二区三区中文字幕| 亚洲AV日韩AV一区二区三曲| 国产丝袜无码一区二区三区视频| 日亚毛片免费乱码不卡一区| 国模视频一区二区| 久久青青草原一区二区| 精品一区二区三区在线播放视频| 色窝窝无码一区二区三区色欲 | 国产一区二区三区高清在线观看 | 无码国产精品一区二区免费| 亚洲熟妇AV一区二区三区浪潮 | 国产在线无码视频一区二区三区| 国产av福利一区二区三巨| 日本高清无卡码一区二区久久| 精品女同一区二区三区在线| 精品无码一区二区三区水蜜桃| 色窝窝免费一区二区三区| 无码人妻精品一区二区三区久久久| 亚洲一区二区三区丝袜| 欧美日本精品一区二区三区| 国产成人久久一区二区不卡三区| 波多野结衣久久一区二区| 亚洲日韩中文字幕无码一区| 欧美激情一区二区三区成人| 国内精品一区二区三区在线观看| 国产精品视频免费一区二区| 另类ts人妖一区二区三区| 视频一区视频二区日韩专区| 久久99精品免费一区二区| 中文字幕在线一区二区三区| 日韩一区二区电影| 亚洲性无码一区二区三区| 国产视频福利一区| 国产精品一区二区av不卡| 久久久91精品国产一区二区| 色欲AV蜜桃一区二区三|