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

Picker：iOS與Android的表現差異

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

• Date Picker（日期選擇器）Date Picker是用來選擇特定的某天，每個選項集合由年、月、日三列組成。

Date Picker

如果Date Picker呈現形式是日歷，也可以稱之為Calendar Date Picker（日歷選擇器）。Date Range Picker（日期范圍選擇器）是用來選擇某個日期范圍，常用於旅行、住宿等時間周期相關事項。

• Time Picker（時間選擇器）Time Picker視需求精確到時、分鐘或者秒，如果使用12小時制，記得增加AM（上午）和 PM（下午）的選項。

Time Picker

如何使用

Picker展示區域有限，大部分選項會被隱藏，最好是當用戶對所有選項都比較熟悉、有預期的時候，才使用Picker。

• 默認選項合理的默認選項能讓用戶減少操作次數，提升效率。假如Date Picker用來選擇最近的時間，則可把當天作為默認選項，如果Date Picker用來選擇出生日期，建議根據用戶平均出生日期作為默認選項。

• 合理的排列選項的順序選項的排列順序要依據當前上下文情景而定，例如衣服尺碼按從小到大的順序排列，而不是根據衣服尺碼的首字母在字母表的順序排列。

• 使用相對概念增強感知心理學實驗證明當事物與人的關聯越大，越容易引起人的註意（想想在嘈雜的會場突然聽到有人喊你的名字）。在Date Picker裡，比起絕對的“某年某月日”，用“今天”、“昨天”等相對概念，能更快的激發人對時間的感知。

• 選項過多可以采用其他形式如果選項非常多，而且選項本身比較復雜難理解需要輔助的解釋，建議用新頁面或Full-screen dialogs（全屏彈出框）的形式，以此容納更多的選項。

  21d399da4787561e69340f45f29dde61電話鈴聲選擇

• 滾輪選擇器控制在五列以內為瞭保證手機屏幕觸控精度，以免發生誤觸，滾輪選擇器建議控制在五列以內。

• 滾輪選擇器並不一定要放在底部滾輪選擇器放在屏幕底部手指操作更輕松，但把手指從控件觸發區域移動到屏幕底部，移動距離會很遠操作負荷大，因此把滾輪選擇器放到控件觸發區域附近，或直接展開，操作會更便利。

  滾輪選擇器在頁面內

相關資料

• 地區選擇器創新京東和蘇寧的地區選擇器選擇省份後再出現城市，選擇城市後才能選區，依次遞進，每次隻可以改變一列，相對於傳統的滾輪選擇器，這種地區選擇器不容易誤觸，操作時註意力更容易集中。

  118a6169a46dda82fc004acd193f8369地區選擇器

• 時間選擇器設計指南Nielsen Norman Group對不同的時間選擇器進行瞭研究分析，並提供相關建議和設計指南。Date-Input Form Fields: UX Design Guidelines

• Chrome另一種Date Picker樣式經過體驗，Android 7.1.1的Chrome內使用Picker是將Android 4.0時代的交互形式換上Material Design視覺風格。如果選擇日期跨度不是特別大，這種形式的認知負荷明顯比Calendar Date Picker要低。

  1d92eb7bae43d7487b0dcfb1ceb8621a另一種Date Picker風格

• iPhone 7精細的震動反饋把iPhone 7的系統觸感反饋打開，再使用滾輪選擇器，你就能感受到手機輕微的震動，很像真實世界波動滾輪時的觸感。

  系統觸感反饋