內容詳情

移動端下拉表單的更好選擇

作者: 廣西桂林日b軟件有限公司 整理   發布時間:2017-07-19 18:59:48

在表單中使用下拉菜單看起來並不重要:它們在用戶界麵上占用的空間不大,它們自動驗證輸入,所有瀏覽器和平台都可以支持它們,它們實現起來容易且方便,用戶知道它們的好。

在表單中使用下拉菜單看起來並不重要:它們在用戶界麵上占用的空間不大,它們自動驗證輸入,所有瀏覽器和平台都可以支持它們,它們實現起來容易且方便,用戶知道它們的好。

同時,根據LukeWroblewski 和一些人的說法,下拉菜單(或選擇)是最常被誤用的表格模式之一,“應該是最後的UI”。

日b來看看一些限製和擔憂:

  • 在下拉列表中,隻有點擊或按鍵才能打開它,可用選項是不可見。此外,表單的長度一見即可隱藏,即用戶無法預測下拉菜單是否包含2或50個元素。
  • 從下拉列表中選擇一個選項(特別是移動設備)是一個多步驟的過程:你必須點擊下拉菜單打開選項列表,然後滾動並掃描以選擇一個項目,然後關閉下拉列表。
  • 下拉菜單會讓設計師變懶:將所有可能的選項添加到下拉列表中是沒有任何優先級的(這與漢堡包菜單類似)是非常簡單的。
  • 更長的下拉列表,例如國家/地區選擇器可能是一個惡夢掃描,尤其是在通常無法進行鍵盤搜索的手機上。
  • 在一些移動屏幕的可見和可滾動的列表區域是很小的,滾動選項會使人不愉快:

在ioses上,可見的選項數量是乍一看是驚人的低

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

考慮選項的數量

對於二進製(開/關)的決定,下拉菜單是一個非常糟糕的選擇。你需要的是複選框或切換開關。

如果你的下拉列表僅包含“是/否”或“開/關”選項,請改用簡單的開關

對於少數互斥選項,建議使用單選按鈕或分段控件,以便無需打開列表,所有可用的選項都可以看到。

分段控件同時顯示所選項和替代選項

可視選項的數量取決於屏幕寬度和選項標簽的長度,不建議使用超過5個項目

對於大量指明的選項,當用戶知道他們正在尋找什麽時,考慮“開始輸入…”解決方案,其中過濾選項列表顯示在第一個或兩個字母之後。

不用滾動列表,讓用戶開始輸入,且僅顯示已過濾的選項

對於大型和多樣化的列表,嚐試使用現有的用戶數據來優先該選項,並將用戶首選的最流行的選擇列出。這樣一來,有90%的用戶會立即找到自己的偏好,隻有10%必須選擇“其他”,然後在下一個問題中指明。

雖然“其他”不是一個優雅的解決方案,但這樣的優先級可能會改善大多數用戶的用戶體驗

考慮預期的輸入

下拉列表的優點之一是用戶不用過多多輸入。但如果預期的輸入不是太長,並且經常被詢問(例如個人數據),則通常更容易鍵入,而不是從列表中選擇它:

使用數字鍵盤在滾動設備上輸入誕生年份比滾動瀏覽長列表更容易