@龍爪槐守望者 ：鑒于國內(nèi)交互設計名詞混亂不統(tǒng)一，很多設計師不知道如何用專業(yè)術語稱呼一個控件，因此我開了《這個控件叫什么》專題，梳理控件的名稱和使用事項，希望能為推動交互設計發(fā)展，做出一點微小的貢獻。

往期回顧：

1. 《「這個控件叫什么」系列之小紅點+索引導航+分段控件》
2. 《「這個控件叫什么」系列之加載占位圖+頁面指示器》
3. 《「這個控件叫什么」系列之步進器+SWITCH》
4. 《「這個控件叫什么」系列之TOAST》

這個控件叫：Picker/選擇器/拾取器

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

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

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

Date Picker（日期選擇器）

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

△ ?Date Picker

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

Time Picker（時間選擇器）

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

△ ?Time Picker

如何使用

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

默認選項

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

合理的排列選項的順序

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

使用相對概念增強感知

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

選項過多可以采用其他形式

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

△ ?電話鈴聲選擇

滾輪選擇器控制在五列以內(nèi)

為了保證手機屏幕觸控精度，以免發(fā)生誤觸，滾輪選擇器建議控制在五列以內(nèi)。

滾輪選擇器并不一定要放在底部

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

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

相關資料

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

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

△ ?地區(qū)選擇器

時間選擇器設計指南

Nielsen Norman Group對不同的時間選擇器進行了研究分析，并提供相關建議和設計指南。

Date-Input Form Fields: UX Design Guidelines

Chrome另一種Date Picker樣式

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

△?另一種Date Picker風格

iPhone 7精細的震動反饋

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

△ ?系統(tǒng)觸感反饋

后面優(yōu)設會持續(xù)更新，想提前學習的可以關注作者的微信公眾號：

「新人科普好文系列」

1. 交互原型丨《術語小科普！聊聊線框稿、視覺稿與原型的區(qū)別》
2. 移動端尺寸丨《通俗易懂！超全面的移動端尺寸基礎知識科普指南》
3. 字體規(guī)范丨《界面設計必備！全方位科普常用的字體規(guī)范（附神器）》

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量200萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com