你未曾見過的移動端下拉式清單替代方案

標籤：F12   美國   alt   運算   模式   問題   表格   協助   複選框   

以下內容由Mockplus團隊翻譯整理，僅供學習交流，Mockplus是更快更簡單的原型設計工具。

在表單中使用下拉式清單似乎不是什麼很費勁的事情，它們在使用者介面上佔用的空間不大，可自動驗證輸入，支援所有的瀏覽器和各平台。而且實現起來簡單方便，使用者對其也足夠瞭解。

同時，根據Luke Wroblewski和其他一些人的說法，下拉式功能表（或選擇）是最常被誤用的表格模式之一，“應該是UI的最終介面”。

讓我們看看其一些局限性和使用者的擔憂：

• 在下拉式清單中，可用選項一般不可見，除非你點擊或按鍵才能開啟它。此外，列表的長度是被隱藏了的，也就是說，使用者無法預測下拉式功能表裡面到底包含了多少個元素。
• 從下拉式清單中選擇一個選項（特別是在行動裝置上）是個多步驟的過程：您必須點擊下拉式功能表開啟選項列表，然後滾動並瀏覽項目來選擇一個，然後關閉下拉式清單。
• 下拉式功能表可能會使設計人員變得懶惰：只需將所有可能的選項添加到下拉式清單中而不需要排列其優先順序是是極其簡單的（順便說一下，與漢堡包菜單非常的類似）
• 較長的下拉式清單，比如國家或地區選取器對於使用者來講簡直就是噩夢，特別是在一些無法使用鍵盤搜尋的裝置上。
• 在某些列表可見和可捲動區域很小的行動裝置螢幕上滾動選擇可能會很痛苦：

在iOS上，可視選項的數量乍一看可能會出奇地少。

但好訊息是，在許多情況下，有很多替代性輸入控制項可以更好地協助你完成工作。

 

考慮選項的數量

對於一個二擇其一（開或關）的選項，下拉式功能表是個非常不明智的選擇。而你需要用的是一個複選框和開關切換控制項。

如果你的下拉式清單只包含是或否，開或關的選項，只需用一個簡單的開關控制項。

對於少數互斥選項，建議使用選項按鈕或分段控制項，以便所有選項一次可見，而無需開啟列表。

分段控制項可一次顯示所選項和替代選項

可見選項的數量取決於螢幕寬度和選項標籤的長度，但建議使用不超過5個項目

對於大量指定明確的選項，當使用者非常確定他們正在尋找的內容時，請考慮“開始輸入... ”解決方案，其中在輸入第一個或兩個字母之後選項列表會篩選出使用者所需的選項。

不用滾動列表，讓使用者開始輸入而只顯示已過濾的選項

對於大型和多樣化的列表，請嘗試使用現有的使用者資料來優先選擇該選項，只需列出少數最流行的選項給使用者。這樣一來，有90％的使用者會立即找到自己的喜好，只有10％必須選擇“ 其他”，然後在下一個問題中詳細瞭解。

雖然“其他”不是一個完美的解決方案，但這樣的優先性可能會改善大多數使用者的使用者體驗

考慮預期的輸入

下拉式清單的優勢之一就是使用者不必輸入太多。但是，如果預期的輸入不是太長或者不會被頻繁詢問的話（例如個人資料），則輸入起來更容易一些，而不是從列表中選擇它：

使用數字鍵台在滾動裝置上輸入出生年份比滾動瀏覽長列表更容易

通常，在數字鍵台上輸入數字值通常更有效。

儘管數字下拉式清單的排序次序是很清楚的，但比起滾動選擇，輸入數值更簡單些。

如果驗證使用者的輸入非常重要，那麼使用輸入欄位來篩選可用選項時，“輸入...”方法可能很有用。

列出美國的選項時，只需輸入一個字母可以很好地篩選出來。

當元素的排序次序不清楚時，在選項列表中進行搜尋的方法特別有用。

貨幣的排序次序使用者可能不清楚，因此請確保他們可以搜尋名稱和貨幣代碼。

同樣的方法也應該應用於國家列表：而不是列出200多重專案。應允許使用者輸入儘可能快的篩選出結果。

對於表示數量的離散值（例如乘客數量或購物車中的物品數量），步進器允許使用者通過一次點擊或按鍵來快速增加或減少數量。

對於位於刻度上的值或非離散值，請考慮使用滑塊。

顯示最小值和最大值的數值範圍可有助於理解上下文。

選擇一個由多個選擇菜單組成的日期可能是一個痛苦的體驗，所以選擇就近的日期，需使用日期選取器。（但不要用它來輸入出生日期！）

考慮設計更智能的下拉式清單

不用說，不應該總是避免下拉式功能表的使用。您會發現一個選擇菜單是最合適的輸入控制項的情況，這很好。試著讓它儘可能的對方便使用。

• 使用有意義的標籤：即使列表開啟，功能表標籤的描述也應該是清楚有效。在選擇菜單中，使用描述性標籤，告訴使用者他們正在選擇什麼（即“ 選擇類型 ”而不是“ 請選擇 ”）。

• 以明智的方式排序項目：根據使用者資料，將最受歡迎的選擇放在列表的前列。或者，甚至以預設的方式預先選擇最流行的。
• 使用智能預設值：手機和瀏覽器知道使用者的定位，日期和許多其他資訊。使用該資料為每個使用者預先選擇最可能的選項。
• 減少欄位數量，讓電腦進行運算：如果使用者輸入郵遞區號，電腦可能自動匹配出了城市和國家 - 不需要問。如果使用者輸入信用卡號碼，則電腦可能已經知道它是萬事達卡，無需其他詢問。
• 考慮使用API：使用 Facebook Connect按鈕註冊比填寫註冊表更容易。使用Paypal付款比輸入您的信用卡資料更方便。

如果您想瞭解更多關於下拉式清單的資訊， 請查看GoldenKrishna和Eric Campbell的精采SXSW主旨演講

原文地址：https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53

學習工具，但不受限於某種工具。Mockplus做原型，更快更簡單，現在下載Mockplus，免費體驗暢快的原型設計之旅。

你未曾見過的移動端下拉式清單替代方案