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

往期回顧：

1. 《「這個(gè)控件叫什么」系列之小紅點(diǎn)+索引導(dǎo)航+分段控件》
2. 《「這個(gè)控件叫什么」系列之加載占位圖+頁(yè)面指示器》
3. 《「這個(gè)控件叫什么」系列之步進(jìn)器+SWITCH》
4. 《「這個(gè)控件叫什么」系列之TOAST》

這個(gè)控件叫：Picker/選擇器/拾取器

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

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

在移動(dòng)端Picker最常見(jiàn)的用途是選擇時(shí)間，iOS和Android將時(shí)間相關(guān)的Picker封裝成原生控件。

Date Picker（日期選擇器）

Date Picker是用來(lái)選擇特定的某天，每個(gè)選項(xiàng)集合由年、月、日三列組成。

△ ?Date Picker

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

Time Picker（時(shí)間選擇器）

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

△ ?Time Picker

如何使用

Picker展示區(qū)域有限，大部分選項(xiàng)會(huì)被隱藏，最好是當(dāng)用戶對(duì)所有選項(xiàng)都比較熟悉、有預(yù)期的時(shí)候，才使用Picker。

默認(rèn)選項(xiàng)

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

合理的排列選項(xiàng)的順序

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

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

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

選項(xiàng)過(guò)多可以采用其他形式

如果選項(xiàng)非常多，而且選項(xiàng)本身比較復(fù)雜難理解需要輔助的解釋?zhuān)ㄗh用新頁(yè)面或Full-screen dialogs（全屏彈出框）的形式，以此容納更多的選項(xiàng)。

△ ?電話鈴聲選擇

滾輪選擇器控制在五列以?xún)?nèi)

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

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

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

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

相關(guān)資料

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

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

△ ?地區(qū)選擇器

時(shí)間選擇器設(shè)計(jì)指南

Nielsen Norman Group對(duì)不同的時(shí)間選擇器進(jìn)行了研究分析，并提供相關(guān)建議和設(shè)計(jì)指南。

Date-Input Form Fields: UX Design Guidelines

Chrome另一種Date Picker樣式

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

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

iPhone 7精細(xì)的震動(dòng)反饋

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

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

后面優(yōu)設(shè)會(huì)持續(xù)更新，想提前學(xué)習(xí)的可以關(guān)注作者的微信公眾號(hào)：

「新人科普好文系列」

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

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

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