一、Picker(選擇器/拾取器/選取器)是指提供多個選項(xiàng)集合供用戶選擇其中一項(xiàng)的控件。在不同平臺Picker的具體控件表現(xiàn)形式不同。在iOS端Picker一般稱之為滾輪選擇器,而在Android端,Picker的主要表現(xiàn)形式是Dialog(對話框)或dropdown menu(下拉菜單)。

在移動端Picker最常見的用途是選擇時間,iOS和Android將時間相關(guān)的Picker封裝成原生控件。
1.Date Picker(日期選擇器):是用來選擇特定的某天,每個選項(xiàng)集合由年、月、日三列組成。

如果Date Picker呈現(xiàn)形式是日歷,也可以稱之為Calendar Date Picker(日歷選擇器)。Date Range Picker(日期范圍選擇器)是用來選擇某個日期范圍,常用于旅行、住宿等時間周期相關(guān)事項(xiàng)。
2.Time Picker(時間選擇器):是需求精確到時、分鐘或者秒,如果使用12小時制,記得增加AM(上午)和 PM(下午)的選項(xiàng)。

二、如何使用
Picker展示區(qū)域有限,大部分選項(xiàng)會被隱藏,最好是當(dāng)用戶對所有選項(xiàng)都比較熟悉、有預(yù)期的時候,才使用Picker。
1.默認(rèn)選項(xiàng)
合理的默認(rèn)選項(xiàng)能讓用戶減少操作次數(shù),提升效率。假如Date Picker用來選擇最近的時間,則可把當(dāng)天作為默認(rèn)選項(xiàng),如果Date Picker用來選擇出生日期,建議根據(jù)用戶平均出生日期作為默認(rèn)選項(xiàng)。
2.合理的排列選項(xiàng)的順序
選項(xiàng)的排列順序要依據(jù)當(dāng)前上下文情景而定,例如衣服尺碼按從小到大的順序排列,而不是根據(jù)衣服尺碼的首字母在字母表的順序排列。
3.使用相對概念增強(qiáng)感知
心理學(xué)實(shí)驗(yàn)證明當(dāng)事物與人的關(guān)聯(lián)越大,越容易引起人的注意(想想在嘈雜的會場突然聽到有人喊你的名字)。在Date Picker里,比起絕對的“某年某月日”,用“今天”、“昨天”等相對概念,能更快的激發(fā)人對時間的感知。

4.選項(xiàng)過多可以采用其他形式
如果選項(xiàng)非常多,而且選項(xiàng)本身比較復(fù)雜難理解需要輔助的解釋,建議用新頁面或Full-screen dialogs(全屏彈出框)的形式,以此容納更多的選項(xiàng)。

5.滾輪選擇器控制在五列以內(nèi)
為了保證手機(jī)屏幕觸控精度,以免發(fā)生誤觸,滾輪選擇器建議控制在五列以內(nèi)。
6.滾輪選擇器并不一定要放在底部
滾輪選擇器放在屏幕底部手指操作更輕松,但把手指從控件觸發(fā)區(qū)域移動到屏幕底部,移動距離會很遠(yuǎn)操作負(fù)荷大,因此把滾輪選擇器放到控件觸發(fā)區(qū)域附近,或直接展開,操作會更便利。

三、相關(guān)資料
1.地區(qū)選擇器創(chuàng)新
京東和蘇寧的地區(qū)選擇器選擇省份后再出現(xiàn)城市,選擇城市后才能選區(qū),依次遞進(jìn),每次只可以改變一列,相對于傳統(tǒng)的滾輪選擇器,這種地區(qū)選擇器不容易誤觸,操作時注意力更容易集中。

2.時間選擇器設(shè)計(jì)指南
Nielsen Norman Group對不同的時間選擇器進(jìn)行了研究分析,并提供相關(guān)建議和設(shè)計(jì)指南。(鏈接:Date-Input Form Fields: UX Design Guidelines)
3.Chrome另一種Date Picker樣式
經(jīng)過體驗(yàn),Android 7.1.1的Chrome內(nèi)使用Picker是將Android 4.0時代的交互形式換上Material Design視覺風(fēng)格。如果選擇日期跨度不是特別大,這種形式的認(rèn)知負(fù)荷明顯比Calendar Date Picker要低。

4.iPhone 7精細(xì)的震動反饋
把iPhone 7的系統(tǒng)觸感反饋打開,再使用滾輪選擇器,你就能感受到手機(jī)輕微的震動,很像真實(shí)世界波動滾輪時的觸感。
