移動(dòng)端下拉表單如何設(shè)計(jì)體驗(yàn)好

在表單中使用下拉菜單看起來(lái)并不重要：它們?cè)谟脩艚缑嫔险加玫目臻g不大，它們自動(dòng)驗(yàn)證輸入，所有瀏覽器和平臺(tái)都可以支持它們，它們實(shí)現(xiàn)起來(lái)容易且方便，用戶知道它們的好。

在表單中使用下拉菜單看起來(lái)并不重要：它們?cè)谟脩艚缑嫔险加玫目臻g不大，它們自動(dòng)驗(yàn)證輸入，所有瀏覽器和平臺(tái)都可以支持它們，它們實(shí)現(xiàn)起來(lái)容易且方便，用戶知道它們的好。

同時(shí)，根據(jù)Luke Wroblewski和一些人的說(shuō)法，下拉菜單(或選擇)是最常被誤用的表格模式之一，“應(yīng)該是最后的UI”。

我們來(lái)看看一些限制和擔(dān)憂：

在下拉列表中，只有點(diǎn)擊或按鍵才能打開(kāi)它，可用選項(xiàng)是不可見(jiàn)。此外，表單的長(zhǎng)度一見(jiàn)即可隱藏，即用戶無(wú)法預(yù)測(cè)下拉菜單是否包含2或50個(gè)元素。

從下拉列表中選擇一個(gè)選項(xiàng)(特別是移動(dòng)設(shè)備)是一個(gè)多步驟的過(guò)程：你必須點(diǎn)擊下拉菜單打開(kāi)選項(xiàng)列表，然后滾動(dòng)并掃描以選擇一個(gè)項(xiàng)目，然后關(guān)閉下拉列表。

下拉菜單會(huì)讓設(shè)計(jì)師變懶：將所有可能的選項(xiàng)添加到下拉列表中是沒(méi)有任何優(yōu)先級(jí)的(這與漢堡包菜單類似)是非常簡(jiǎn)單的。

更長(zhǎng)的下拉列表，例如國(guó)家/地區(qū)選擇器可能是一個(gè)惡夢(mèng)掃描，尤其是在通常無(wú)法進(jìn)行鍵盤(pán)搜索的手機(jī)上。

在一些移動(dòng)屏幕的可見(jiàn)和可滾動(dòng)的列表區(qū)域是很小的，滾動(dòng)選項(xiàng)會(huì)使人不愉快：

在iOS上，可見(jiàn)的選項(xiàng)數(shù)量是乍一看是驚人的低

在許多情況下，有很多替代輸入控件可以為你更好地工作。

考慮選項(xiàng)的數(shù)量

對(duì)于二進(jìn)制(開(kāi)/關(guān))的決定，下拉菜單是一個(gè)非常糟糕的選擇。你需要的是復(fù)選框或切換開(kāi)關(guān)。

如果你的下拉列表僅包含“是/否”或“開(kāi)/關(guān)”選項(xiàng)，請(qǐng)改用簡(jiǎn)單的開(kāi)關(guān)

對(duì)于少數(shù)互斥選項(xiàng)，建議使用單選按鈕或分段控件，以便無(wú)需打開(kāi)列表，所有可用的選項(xiàng)都可以看到。

分段控件同時(shí)顯示所選項(xiàng)和替代選項(xiàng)

可視選項(xiàng)的數(shù)量取決于屏幕寬度和選項(xiàng)標(biāo)簽的長(zhǎng)度，不建議使用超過(guò)5個(gè)項(xiàng)目

對(duì)于大量指明的選項(xiàng)，當(dāng)用戶知道他們正在尋找什么時(shí)，考慮“開(kāi)始輸入…”解決方案，其中過(guò)濾選項(xiàng)列表顯示在第一個(gè)或兩個(gè)字母之后。

不用滾動(dòng)列表，讓用戶開(kāi)始輸入，且僅顯示已過(guò)濾的選項(xiàng)

對(duì)于大型和多樣化的列表，嘗試使用現(xiàn)有的用戶數(shù)據(jù)來(lái)優(yōu)先該選項(xiàng)，并將用戶選的最流行的選擇列出。這樣一來(lái)，有90%的用戶會(huì)立即找到自己的偏好，只有10%必須選擇“其他”，然后在下一個(gè)問(wèn)題中指明。

雖然“其他”不是一個(gè)優(yōu)雅的解決方案，但這樣的優(yōu)先級(jí)可能會(huì)改善大多數(shù)用戶的用戶體驗(yàn)

考慮預(yù)期的輸入

下拉列表的優(yōu)點(diǎn)之一是用戶不用過(guò)多多輸入。但如果預(yù)期的輸入不是太長(zhǎng)，并且經(jīng)常被詢問(wèn)(例如個(gè)人數(shù)據(jù))，則通常更容易鍵入，而不是從列表中選擇它：

使用數(shù)字鍵盤(pán)在滾動(dòng)設(shè)備上輸入誕生年份比滾動(dòng)瀏覽長(zhǎng)列表更容易

總之，在移動(dòng)設(shè)備的數(shù)字鍵盤(pán)上輸入數(shù)字值通常會(huì)更有效。

盡管數(shù)字下拉列表的排序順序是清晰的，但它可能比滾動(dòng)更容易鍵入

如果驗(yàn)證用戶輸入是非常重要，“開(kāi)始輸入…”方法對(duì)使用輸入字段來(lái)過(guò)濾掉可用的選項(xiàng)是很有用的。

當(dāng)舉出USA的狀態(tài)時(shí)，只輸入一個(gè)字母可以很好的篩選出來(lái)

當(dāng)元素的排序順序不清晰時(shí)，在選項(xiàng)列表中的搜索能力是非常有幫助。

貨幣的排序順序或許對(duì)用戶不清晰，所以確保他們的搜索名稱和貨幣代碼

同樣的技術(shù)應(yīng)該適用于美好的的國(guó)家列表：而不是列出200多個(gè)項(xiàng)目，讓用戶開(kāi)始輸入并盡快過(guò)濾結(jié)果。

對(duì)于表示數(shù)量(如乘客人數(shù)或購(gòu)物車(chē)中的物品數(shù)量)的預(yù)估值，步進(jìn)器允許用戶通過(guò)一次點(diǎn)擊或按鍵即可快速增加或減少數(shù)量。

對(duì)于位于數(shù)字范圍內(nèi)的的非預(yù)估值和預(yù)估值，考慮使用滑塊。

顯示最小值和大值的數(shù)值范圍有助于理解上下文

選擇多個(gè)選擇菜單的日期可能是一個(gè)不堪的體驗(yàn)，所以進(jìn)入就近的日期，總是使用日期選擇器。(但不要用它來(lái)輸入出生日期!)

考慮設(shè)計(jì)更智能的下拉列表

下拉菜單不應(yīng)該總被避免。你會(huì)發(fā)現(xiàn)當(dāng)選擇菜單是最合適的輸入控件時(shí)，只需要使其盡可能的用戶友好。

使用有意義的標(biāo)簽：即使列表打開(kāi)，菜單標(biāo)簽的描述也應(yīng)該是清晰可見(jiàn)的。在選擇菜單中，使用描述性標(biāo)簽，告訴用戶他們正在選擇什么(即“選擇類型”而不是“請(qǐng)選擇”)。

以合理的方式分配物品：基于用戶數(shù)據(jù)，嘗試將最受歡迎的選擇放在列表的頂部。或者，甚至以默認(rèn)的方式預(yù)先選擇最流行的。

使用智能默認(rèn)值：手機(jī)和瀏覽器知道用戶的位置，日期和許多其他信息。使用該數(shù)據(jù)為每個(gè)用戶預(yù)先選擇最可能的選項(xiàng)。

減少字段數(shù)讓計(jì)算機(jī)進(jìn)行工作：如果用戶輸入郵政編碼，則計(jì)算機(jī)就知道城市和州——不需任何要求。如果用戶輸入信用卡卡號(hào)，則計(jì)算機(jī)就知道它是萬(wàn)事達(dá)卡——不需任何要求。

考慮使用API：使用Facebook 的Connect按鈕注冊(cè)比填寫(xiě)注冊(cè)表更容易。使用Paypal付款比輸入你的信用卡數(shù)據(jù)更容易。

網(wǎng)頁(yè)標(biāo)題：移動(dòng)端下拉表單如何設(shè)計(jì)體驗(yàn)好
URL標(biāo)題：http://www.muchs.cn/news15/173015.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、標(biāo)簽優(yōu)化、ChatGPT、用戶體驗(yàn)、定制網(wǎng)站、外貿(mào)網(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)