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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

分享標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)之表單設(shè)計(jì)中的下拉菜單設(shè)計(jì)
文章地址：http://muchs.cn/news20/171870.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、云服務(wù)器、定制網(wǎng)站、網(wǎng)站排名、移動(dòng)網(wǎng)站建設(shè)

廣告

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