網(wǎng)頁設(shè)計(jì)之表單設(shè)計(jì)中的下拉菜單設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

開關(guān)控件適用于兩個簡單的、截然相反的選項(xiàng)。

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

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

但是最重要的是，去掉沒有必要的輸入，盡量簡化表單。在有些情況下，多個菜單可以濃縮在一個輸入控件中。這將顯著的降低用戶的認(rèn)知負(fù)荷?？偨Y(jié)選擇菜單會有很多的問題——很難定位到具體選項(xiàng)、默認(rèn)隱藏選項(xiàng)內(nèi)容、只可選擇不可編輯。但這并不意味著你在界面設(shè)計(jì)的時候就不用它。

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

當(dāng)前題目：網(wǎng)頁設(shè)計(jì)之表單設(shè)計(jì)中的下拉菜單設(shè)計(jì)
文章轉(zhuǎn)載：http://bm7419.com/news/171870.html

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

廣告

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