9、控件系列之_Picker/選擇器/拾取器

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

Picker:iOS與Android的表現(xiàn)差異?

在移動端Picker最常見的用途是選擇時間,iOS和Android將時間相關(guān)的Picker封裝成原生控件。

1.Date Picker(日期選擇器):是用來選擇特定的某天,每個選項(xiàng)集合由年、月、日三列組成。

Date Picker

如果Date Picker呈現(xiàn)形式是日歷,也可以稱之為Calendar Date Picker(日歷選擇器)。Date Range Picker(日期范圍選擇器)是用來選擇某個日期范圍,常用于旅行、住宿等時間周期相關(guān)事項(xiàng)。

2.Time Picker(時間選擇器):是需求精確到時、分鐘或者秒,如果使用12小時制,記得增加AM(上午)和 PM(下午)的選項(xiàng)。

Time Picker

二、如何使用

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ā)人對時間的感知。

使用相對概念增強(qiáng)感知

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ū)域附近,或直接展開,操作會更便利。

滾輪選擇器在頁面內(nèi)

三、相關(guān)資料

1.地區(qū)選擇器創(chuàng)新

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

地區(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要低。

另一種Date Picker風(fēng)格

4.iPhone 7精細(xì)的震動反饋

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

系統(tǒng)觸感反饋
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容