這周我們來(lái)講講一個(gè)常用組件的交互設(shè)計(jì)-下拉菜單
下拉菜單是最早的交互組件之一，幾乎所有的web app都有用到捌朴，看起來(lái)是無(wú)腦的操作，開(kāi)發(fā)實(shí)現(xiàn)的難度也很低男旗。但是欣鳖，下拉菜單又是一種非常容易被誤用的組件。
先來(lái)了解一下下拉菜單本身的一些局限
1. 普通的下拉菜單里面泽台，選項(xiàng)默認(rèn)是不可見(jiàn)的，而且菜單長(zhǎng)度也是不可預(yù)知的
2. 在移動(dòng)設(shè)備上怀酷，下拉菜單操作比較繁瑣，點(diǎn)開(kāi)菜單蜕依，滑動(dòng)查找選項(xiàng)琉雳，選中友瘤，關(guān)閉
3. 產(chǎn)品和設(shè)計(jì)師偷懶的利器翠肘，無(wú)需考慮優(yōu)先級(jí)辫秧，把選項(xiàng)全部塞進(jìn)菜單就完事
4. 很長(zhǎng)的下拉菜單特別難用，比如國(guó)家選擇盟戏，尤其是在移動(dòng)設(shè)備上不能通過(guò)鍵盤(pán)檢索的時(shí)候
5. 移動(dòng)設(shè)備上的菜單通常比較小，點(diǎn)按和滑動(dòng)比較費(fèi)力
現(xiàn)在的移動(dòng)設(shè)備已經(jīng)想出了一些方法來(lái)規(guī)避上面說(shuō)的這些局限邮旷，比如iphone的滾動(dòng)菜單。但是從設(shè)計(jì)的角度考慮廊移，我們應(yīng)該把場(chǎng)景分得更細(xì)，為不同的應(yīng)用場(chǎng)景設(shè)計(jì)最合適的交互狡孔。
考慮選項(xiàng)數(shù)量
2選1，下拉菜單是沒(méi)有必要的苗膝，這時(shí)候需要一個(gè)checkbox或者toggle switch
對(duì)于少量選項(xiàng)植旧，且沒(méi)有優(yōu)先級(jí)區(qū)別的情況辱揭，segments可以保證所有選項(xiàng)同時(shí)被看到病附。
選項(xiàng)數(shù)量要根據(jù)屏幕寬度和選項(xiàng)長(zhǎng)度綜合考慮，但是一般建議不超過(guò)5個(gè)
針對(duì)較多選項(xiàng)的菜單域庇，如果用戶知道他們想要找什么，可以嘗試提供鍵盤(pán)搜索功能听皿，一兩個(gè)字就可以把范圍縮小很多。
如果數(shù)據(jù)顯示某些有部分高頻選項(xiàng)可以覆蓋大多數(shù)場(chǎng)景尉姨，可以嘗試這些選項(xiàng)排在前面吗冤，然后將其他低頻選項(xiàng)放在other里面又厉，這樣90%的情況用戶可以直接在高頻選項(xiàng)里面快速查找而不被低頻選項(xiàng)感染
考慮直接輸入
很多時(shí)候使用下拉菜單是為了減少打字，特別是在移動(dòng)設(shè)備上昔逗。但是如果輸入內(nèi)容不多且無(wú)需頻繁切換大小寫(xiě)或者符合的時(shí)候，打字其實(shí)更加容易一些勾怒。常用的場(chǎng)景有數(shù)字，國(guó)家/省市等等笔链。
對(duì)于數(shù)字有增減的情況，可以考慮使用stepper或者slider
“智能”下拉菜單
可以考慮預(yù)填充最常用的選項(xiàng)
在輸入地址或者日期這類數(shù)據(jù)的時(shí)候鉴扫，可以借助GPS等傳感器預(yù)填充選項(xiàng)
考慮不同字段之間的聯(lián)動(dòng)澈缺，比如輸入銀行卡號(hào)，智能判斷銀行
使用API姐赡，這就是為什么支付寶比銀行卡要火的原因之一
