<s id="oenm3"></s>
      <span id="oenm3"></span>

      1. <s id="oenm3"><dfn id="oenm3"></dfn></s>
          <span id="oenm3"><u id="oenm3"></u></span>

          <span id="oenm3"></span>
          企業形象網站建設解決方案   |   集團公司網站建設解決方案   |    協會門戶網站建設解決方案
          您所在位置:首頁 > 建站知識

          網站設計

          Website development

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

          發布時間:2017-07-20 09:14:59

          TAGS:體驗設計

          移動下拉菜單.jpgGo9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          使用下拉菜單的形式似乎已是司空見慣:它不占用太多空間的界面,它自動驗證輸入,所有瀏覽器和平臺都支持它,實現下拉菜單非常的方便且容易,用戶都覺得它使用起來很好。
          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          與此同時,根據Luke Wroblewski和被多人提及的原則:“下拉菜單應該是后的選擇”的說法,那么下拉菜單卻是經常被誤用的。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          讓我們看一看下拉菜單的局限性和令人擔憂的地方:Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          下拉菜單控件的可用是選項不可見的,直到你點擊或點擊打開它。同時, 在第一眼看到列表時,列表的長度是隱藏的,即用戶無法預測一個下拉菜單是包含2個還是50個元素。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          從下拉列表中選擇一個選項,(尤其是在移動設備上)是一個多步驟的過程:你必須點擊下拉菜單打開選項列表,然后滾動和瀏覽項目并選擇一個,然后關閉下拉。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          下拉菜單可以讓設計師懶惰:設計師很容易就把所有可能的選項不分任何優先級一起放到下拉列表里(這很類似于漢堡菜單的做法)。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          像國家地區選擇這種很長的下拉菜單,用眼睛掃描起來簡直是噩夢,尤其是在鍵盤搜索通常是不可用的移動端。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          在可見、可滾動但面積很小的屏幕上滾動去選擇想要的選項是一件非常痛苦的事情。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          △  在iOS系統上,第一眼可見的選項少的驚人。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          但是好消息是這里有大量的很棒的可替代下拉菜單控件的選擇,能為你在不同的情況下所用到。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          考慮選項的數量Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          若只有兩個選項(例如開/關),那么使用下拉菜單就是一個錯誤的選擇。這里你需要用復選框(CheckBox)或者用切換開關(toggle switch)。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          如果你的下拉菜單僅僅包含是/否、開/關這樣的選項,那么就用開關控件來替代它。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          對于個數少且互斥的選項 ,建議使用單選按鈕(radio buttons)或分段控件(segmented),使所有可用的選項第一眼可見,且無需打開列表。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          分段控件(Segmentedcontrols)可以一次性展示出所有的可選項。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          可見選項的數量取決于屏幕寬度和選項標簽的長度,但不要超過5項Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          當用戶確切地知道他們在尋找什么時,對于大量確定的選項,考慮使用“請輸入…”這樣的解決方案,其中篩選選項列表在輸入第一個或兩個字母之后顯示。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          用讓用戶來輸入文字來篩選選項的方式替代滑動下拉菜單。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          對于大型和多樣的列表,嘗試使用現有的用戶數據來排列優先級,只列出幾個用戶常選的選項。這種方式有一個好處就是90%的用戶會立即發現自己偏好的選擇項,只有10%的人選擇立即“其他”然后跳到指定的下一個問題。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          雖然“其他”不適一個優雅的解決方案,但是優先級排序的方式能夠提高大多用戶的體驗Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          考慮預填寫Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          下拉列表的好處之一是用戶不必輸入很多內容。然而,如果預期的輸入不是太長并且經常被問到(例如個人信息),通常用輸入的方式是比較容易的,而不是從列表中選擇:Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          uisdc-iphone-20170719-7.gifGo9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          在移動設備上輸入生日的年份,使用數字鍵盤比滑動長列表要容易的多Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          通常,在移動設備上輸入數值會比數字下拉列表效率高。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          盡管數字下拉列表是清晰的,但是輸入數值依然比滑動選擇要方便。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          如果驗證用戶輸入的內容很重要,輸入內容用于篩選可用選項時,“請輸入……”這個方法可能是有用的。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          當選擇美國時,輸入一個字母就可以篩選出來。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          當列表元素的排序順序不清晰時,在選項列表中搜索的能力特別有用。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          不清楚貨幣代碼排列順序的用戶,能確保他們能在名稱和貨幣代碼間進行搜索。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          同樣的技術也應該應用于國家列表上面:使用讓用戶盡快開始鍵入并過濾結果來替代列出200多個條目的方案。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          對于表示數量的謹慎的數值選擇(例如乘客數量或購物車中的商品數量),步進器(stepper)允許用戶點擊來快速增加或減少數值。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          對于刻度范圍上的非謹慎數值,請考慮使用滑塊。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          顯示大值和小值的范圍有助于用戶理解。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          選擇當下近日期,使用多個選擇菜單選擇可能是一次非常痛苦的體驗,因此我們選擇使用日期選擇器(date picker)。(但千萬別用它輸入出生日期)Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          設計更智能的下拉菜單Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          通常下拉菜單不是總要被避免使用的。當你發現選擇菜單是合適的輸入控件,這很好,那就讓它對用戶盡可能的友好。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          使用有意義的標簽:當菜單打開時菜單標簽或描述也應該清晰和可用。在“選擇”菜單中使用一個描述性標簽,告訴用戶他們正在選擇什么(即“選擇類型”而不是“請選擇”)。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          按合理的方式排序條目:基于用戶數據嘗試將流行的選項放在列表的頂部。甚至預先選擇用戶常選的選項作為默認選項。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          使用智能默認值:手機和瀏覽器知道用戶的位置、日期等大量的信息。利用已知的數據預先為每個用戶選擇有可能的選項。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          減少字段的數量,讓計算機做一些工作:如果用戶輸入郵政編碼,毫無疑問計算機已經知道這個郵政編碼所屬的國家和城市。如果用戶輸入信用卡號碼,計算機也毫無疑問的已經知道這是MasterCard 。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯


          Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          考慮使用API:使用第三方的方式注冊比填寫注冊表要容易。PayPal支付比輸入你的信用卡信息更容易。Go9北京網站設計開發,小程序開發,公眾號,微信開發-云智互聯

          原創不易,未經授權,嚴禁轉載

          原文地址:http://www.pbs-1600.com/i,72,7238,0.html

          客戶評價

          更多+
          • 感謝云智互聯,系統提前完成,在整個項目周期內,云智互聯對待我們并不像是對待客戶,更像是朋友一樣,每一次,都能以專業的角度向我們提出更合理、更有效的解決方案,并快速、細致地完成我們的每一個需求,再次感謝以至誠之心做事的云智互聯團隊。

            潘濤

          • 我是東方龍馬集團,在云智家做了2個企業官網,服務態度超級好。如果想做網站,選擇他家一定不后悔。性價比高,服務態度好。值得你的信賴!

            譚嬌

          • 技術好,設計精良,操作便利,很專業!配套的服務和后續的服務都很好,網站封面堪稱精品,運行方便,后臺操作的簡單。技術還會耐心教我,很好的云智互聯(北京)科技有限公司,建站很不錯的。

            陳曦

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

            張經理

          聯系方式

          工作時間:10:00-19:00
          咨詢電話:010-64758810
          客服郵箱:net@cnlink.cc

          合作伙伴

          All Rights Reserved.©2010-2016 YZLINK.CN 京公網安備 110105019435 京ICP備14020656號
          本網站設計已受版權保護,任何公司及個人不得復制,違者將依法追究責任,特此聲明。法律顧問:北京市輝瑞律師事務所。
          嘿,我來幫您!
          欧美日韩中文字幕日韩欧美一区二区三区久久国产欧美日韩精品国产在线欧美日韩精品一区亚洲欧美中文日韩v在线观看亚洲中文欧美日韩在线不卡欧美日韩亚洲国内综合网国产精品v日韩精品v欧美精品欧美v亚洲v日韩v最新在线日韩欧美中文字幕亚洲国产欧美日韩另类欧美日韩精品一区二区在线,国产精品v欧美精品v日韩精品日韩欧美一中文字暮专区亚洲欧美日韩中文无线码亚洲欧美中文日韩v在线亚洲欧美日韩在线一区国产亚洲欧美日韩在线一区2020亚洲欧美国产日韩亚洲欧美日韩精品专区欧美日韩亚洲国产精品亚洲欧美日韩综合影院日韩欧美毛片免费观看日韩欧美一中文字暮,日韩欧美亚洲欧美中文日韩在线v日本欧美日韩视费观看视频亚洲欧美日韩精品久久亚洲欧美中文日韩视频亚洲欧美偷国产日韩欧美日韩亚洲在线欧美日韩亚洲中字国产亚洲欧美日韩精品自拍欧美国产日韩中文字幕欧美日韩亚洲第一区在线欧美日韩国产在线一区二区,欧美精品v国产精品v日韩精品国产日韩精品欧美一区喷水欧美日韩免费观看在线影片欧美日韩国产在线人成久久精品国产欧美日韩亚洲欧美日韩中文久久国产一区日韩二区欧美三区国产日韩欧美高清免费视频国产亚洲欧美日韩一区欧美日韩不卡高清在线看亚洲欧美日韩综合在线一区米奇809超碰欧美日韩亚洲,亚洲欧美日韩一区二区国产日韩欧美无限制视频中文亚洲欧美日韩无线码亚洲一日韩欧美中文字幕在线亚洲欧美中文日韩在线视频欧美日韩国产码高清亚洲欧美日韩一区日韩精品视频欧美国产国产欧美日韩在线在线播放综合精品欧美日韩国产在线欧美日韩免费一区高清欧美日韩中文国产一区,欧美日韩在线视频国产欧美日韩中文久久欧美日韩视频高清一区日韩欧美亚洲每日更新在线日韩欧美中文字幕在线日韩欧美国产精品亚洲二区日韩欧美亚洲综合久久欧美日韩免费一区二区三区播放国产日韩欧美不卡在线二区手机看片日韩国产欧美日韩欧美中文字幕在线二视频天堂av亚洲欧美日韩国产综合