選擇菜單或下拉菜單只要使用恰當都將是很好的控件——他們節(jié)約了屏幕的空間，使用戶免受錯誤數(shù)據(jù)的干擾，因為菜單中只顯示合適的選項。選擇或下拉菜單有很多好的特性，比如將選項編組、支持鍵盤方向鍵操作、平臺可靠的表現(xiàn)。設計師們會出于不同的原因采用下拉菜單，包括填寫表單時讓用戶選擇一個選項填進表單里。

用戶不喜歡填寫表單是一件眾所周知的事情。填寫表單的流程越長越復雜，用戶填完的可能性就越小，尤其是在容易造成誤操作的小屏幕手機上。下拉菜單會使這個過程更加糟糕。選擇菜單和選項數(shù)量你會發(fā)現(xiàn)選擇菜單的選項有時候只有2個，有時候超過20個。這兩種情況下使用選擇菜單都是不正確的。選項太多當選擇菜單的選項超過15個時就很難瀏覽和導航了。太長的下拉列表對于用戶來說就是噩夢，因為屏幕展示不了所有的選項，他們需要在表單上進行滑動查看。這將使用戶體驗大打折扣，減緩了整個進程。典型的例子就是下拉選擇國家，選項超過100個。用戶不可能很好的瀏覽全部選項，也沒有快捷簡便的方法找到用戶想要的選項。我每次選擇“United States”都很抓狂：“United States”因為是用戶常選項，所以應該放在前面。但是如果是按照首字母順序排列時，”Afghanistan”在最上面，“United States”會在很下面，僅次于” United Arab Emirates”。所以通常我做的第一件事就是弄清楚選項是怎么排序的。

在用戶知道自己在尋找的選項時，使用有自動補全功能的文本輸入框來代替下拉菜單。從技術的角度來講，應該自動檢測用戶的位置，然后猜想用戶最可能的位置。

輸入”United”，會自動補全國家名稱顯示在列表里小結：當選項超過15個時，考慮使用文字輸入框(帶有或不帶自動補全功能)，而不是下拉菜單。選項太少如果選項少于7個時采用下拉菜單，預先展示出來的選項就少了。用戶需要點擊下拉菜單才可以看到其他選項。

在上面這個例子中應該使用單選按鈕，這樣用戶可以在不需要任何點擊操作情況下迅速瀏覽選項數(shù)量及具體內容。

小結：當選項少于7個時，考慮使用單選按鈕。選擇菜單和標簽向表單中的其他輸入控件一樣，下拉菜單框上都會有標簽文本。但是寫在下拉菜單框里面的標簽應當是有實際意義的(不是類似于“無”“請選擇”)，告訴用戶他們實際是在選擇什么。標簽應當清晰地描述選項組的內容。

在下拉菜單的旁邊和里面打上文本標簽，避免用戶有困惑。選擇菜單和默認選項除非你確認大部分用戶會選擇其中的某一個選項，否則就不要設置默認選項。尤其是該選項為必填項。為什么呢?因為你有可能給用戶推薦的是錯誤的選項，而用戶瀏覽頁面是非?？斓模苋菀缀雎粤四J選項的值。在大部分情況下，當用戶沒有做出選擇時進行報錯提示比直接給用戶填寫錯誤的選項更加安全。選擇菜單和移動設備Josh Brewer曾經(jīng)說過，手機是可用性問題的放大鏡。下拉菜單在PC端并不難用，但是在移動設備上就會很痛苦，關系也變得模糊不清。移動設備的屏幕大小是非常有限的，所以當用戶滑動查看上下文內容，發(fā)現(xiàn)他們要找的選項占據(jù)很長一段。即使有更簡潔更合適的空間可供選擇，還是會有很多設計師在移動端設計時選擇使用下拉菜單。

左圖中每個問題都采用下拉菜單框。右圖中每個問題都使用最恰當?shù)目丶栴}一：操作數(shù)量移動端和PC端的下拉菜單的交互是分步驟的，會耗費更多的精力。下圖就是前面的例子中需要使用下拉菜單來完成的操作：

先點擊控件，然后滑動(通常不止滑動一次)，找到并且選擇選項。問題二：屏幕空間選擇菜單的界面交互沒有利用好移動端屏幕的有效空間。在iOS9的界面上，選擇菜單控件占據(jù)了屏幕近50%的空間，這就意味著用戶手勢操作的控件也在50%的空間里。

手機幾乎一半的空間被選擇菜單里的7個選項占據(jù)了總結以下控件可以用來代替下拉菜單：單選按鈕，或是分組控件，是一組相互關聯(lián)但互斥的選項(比如選擇區(qū)域)

加減步進控件用來對連續(xù)的數(shù)值進行加或減，這很適用于微調數(shù)值(比如選擇乘客的數(shù)量)

開關控件適用于兩個簡單的、截然相反的選項。

滑動控件可以允許用戶選擇在范圍內的任意一個值。

當在一個注重形式的列表中使用下拉菜單時，看一下每個問題，考慮是否有更加合適的方式使用戶得到答案。

但是最重要的是，去掉沒有必要的輸入，盡量簡化表單。在有些情況下，多個菜單可以濃縮在一個輸入控件中。這將顯著的降低用戶的認知負荷。總結選擇菜單會有很多的問題——很難定位到具體選項、默認隱藏選項內容、只可選擇不可編輯。但這并不意味著你在界面設計的時候就不用它。

當設計師不知道如何恰當使用選擇菜單時就會帶來不好的用戶體驗。好的表單設計和不好的設計之間的區(qū)別在哪里呢?好的表單設計應當選用合適的輸入控件供用戶填寫。有時候是單選框，帶有自動補全功能的文本輸入框或是選擇菜單。

當前題目：網(wǎng)頁設計之表單設計中的下拉菜單設計
文章轉載：http://jinyejixie.com/news/171870.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、App開發(fā)、手機網(wǎng)站建設、Google、響應式網(wǎng)站、App設計

廣告

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