南順網絡

移動端下拉列表的(de)更好選擇

一(yī).讓我們看一(yī)看下拉菜單的(de)局限性和(hé)令人擔憂的(de)地(dì)方：

下拉菜單控件的(de)可(kě)用是選項不可(kě)見的(de)，直到你點擊或點擊打開它。所以在第一(yī)眼看到列表時，列表的(de)長(cháng)度是隐藏的(de)，即用戶無法預測一(yī)個下拉菜單是包含 2 個還是 n 個元素。

尤其考慮是在移動設備上是一(yī)個多步驟的(de)過程：你必須點擊下拉菜單打開選項列表，然後滾動和(hé)浏覽項目并選擇一(yī)個，然後關閉下拉。

下拉菜單可(kě)以懶惰：設計師很容易就把所有可(kě)能的(de)選項不分任何優先級一(yī)起放到下拉列表裏。

想地(dì)區國家選擇這種很長(cháng)的(de)下拉菜單，用眼睛掃描起來簡直是噩夢，更别說是在鍵盤搜索通常是不可(kě)用的(de)移動端。

在可(kě)見、可(kě)滾動但面積很小的(de)屏幕上滾動去(qù)選擇想要的(de)選項是一(yī)件非常傷眼的(de)事情。

二.考慮選項的(de)數量

使用下拉菜單有時是一(yī)個錯誤的(de)選擇，比如(rú)隻有兩個選項，這裏你需要用複選框(CheckBox)或者用切換開關（toggle switch）。

如(rú)果你的(de)下拉菜單僅僅包含是/否、開/關這樣的(de)選項，那麽就用開關控件來替代它。

對于個數少且互斥的(de)選項 ，建議使用單選按鈕（radio buttons）或分段控件（segmented），使所有可(kě)用的(de)選項第一(yī)眼可(kě)見，無需打開列表。

分段控件可(kě)以一(yī)次性展示出所有的(de)可(kě)選項。

可(kě)見選項的(de)數量取決于屏幕寬度和(hé)選項标簽的(de)長(cháng)度，但不要超過 5 項

當用戶确切地(dì)知道(dào)他們在尋找什麽時，對于大量确定的(de)選項，考慮使用“請輸入…”這樣的(de)解決方案，其中篩選選項列表在輸入第一(yī)個或兩個字母之後顯示用讓用戶來輸入文字來篩選選項的(de)方式替代滑動下拉菜單。

對于大型和(hé)多樣的(de)列表，嘗試使用現有的(de)用戶數據來排列優先級，隻列出幾個用戶常選的(de)選項。這種方式有一(yī)個好處就是90%的(de)用戶會立即發現自(zì)己偏好的(de)選擇項，隻有10%的(de)人選擇立即“其他”然後跳到指定的(de)下一(yī)個問題。

編輯:--ns868