日期控件，相信行業(yè)內(nèi)所有的同學(xué)都不會(huì)陌生，尤其是交互的同學(xué)，可能會(huì)看得更加的仔細(xì)，日前，我們所接觸到的各類app很多都有日期或時(shí)間的選擇，而這些同功能的控件都以各式各樣的姿態(tài)及交互呈現(xiàn)在我們的面前，出于自己的好奇，對(duì)這些不同行業(yè)、不同使用場景下的同一功能做了一個(gè)收集及總結(jié)的分析。

下面我就帶領(lǐng)大家來看看，當(dāng)前應(yīng)用的比較熱門的幾種日期控件的形式、使用場景及優(yōu)缺點(diǎn)。第一次發(fā)表干貨，如遇到分析有誤，可以留言指正。

底部彈出式

底部彈出選擇日期是ios系統(tǒng)自發(fā)布以來就附帶的系統(tǒng)控件，蘋果經(jīng)過了幾個(gè)版本的迭代，一直沿用的就是這種底部彈出日期的交互，ios7.0以前，那時(shí)候蘋果還是走的擬物風(fēng)格，到ios7.0以后推出了扁平風(fēng)格，一直沿用至今，現(xiàn)當(dāng)下的應(yīng)用中，這種形式已被廣泛應(yīng)用，且已深深影響了客戶的使用習(xí)慣，如下圖展示：

ios7.0以前

ios7.0以后

交互形式

點(diǎn)擊“選擇日期”按鈕，當(dāng)前界面便會(huì)有一個(gè)透明遮罩層，日期控件會(huì)從頁面的底部，由上往上彈出，可單獨(dú)對(duì)年、月、日進(jìn)行選擇，被選中的日期，會(huì)在控件中間顯示，以不同的顏色、字號(hào)等區(qū)別顯示，點(diǎn)擊“確定”按鈕即可結(jié)束操作。

優(yōu)缺點(diǎn)及使用場景

底部彈出的遮罩層給了用戶很好的沉浸式體驗(yàn)感，避免其它信息的干擾，使用戶能專心的對(duì)日期進(jìn)行選擇，減少誤差，同時(shí)透過遮罩層，又能看到自己下一步會(huì)有什么操作等著自己，讓用戶用自己的行為有一個(gè)預(yù)知，且加載速度比較快，但是相對(duì)而言，日期的呈現(xiàn)并不直觀，滾動(dòng)的次數(shù)也會(huì)比較多，對(duì)日期選擇的時(shí)間會(huì)顯得稍長。它適用于選填內(nèi)容較多、信息量較大的頁面，或需要呈現(xiàn)全部日期的需求，能夠很好的緩解頁面層的壓力。

下拉彈框式

下拉彈框這種交互形式最初始于pc端，屬于pc端的成熟交互形式，尤其在后臺(tái)系統(tǒng)內(nèi)使用的特別頻繁，它的好處在于方便同類型功能間的切換或篩選，后來被設(shè)計(jì)師們搬到了手持端，通過使用場景結(jié)合不同設(shè)備進(jìn)行了一定的改良。

截圖來源:（左）支付寶；（右）聚美天下

交互形式

點(diǎn)擊“選擇日期”按鈕，同底部彈出一樣，當(dāng)前界面會(huì)有一個(gè)透明遮罩層，日期控件會(huì)直接顯示在按鈕的下方，點(diǎn)擊其中的日期，下拉框會(huì)自動(dòng)收起，操作完成。

優(yōu)缺點(diǎn)及使用場景

下拉框主要應(yīng)用在“同級(jí)別時(shí)間段”的維度場景上，比如說以年、月、季度為單位的顯示形式，是某一個(gè)時(shí)間段內(nèi)的信息篩選/切換，對(duì)數(shù)量有一定的要求，越少，用戶切換的效率越高，下拉的長度不可過長，否則容易信息干擾且影響視覺美觀，它的優(yōu)點(diǎn)是同級(jí)別切換效率高，點(diǎn)擊的步驟少，方便用戶頻繁操作，缺點(diǎn)是顯示的條目數(shù)量有限；

選項(xiàng)卡式

選項(xiàng)卡相信交互的同學(xué)都有留意到，類似于二級(jí)導(dǎo)航，像現(xiàn)在很多的應(yīng)用都采取過這種方式，但選項(xiàng)卡式的日期可能大家沒有特別留意到，展現(xiàn)的形式是類似的，但應(yīng)用的場景比較特殊。

截圖來源:（左）小美到家 ?；（右）美容工具

交互形式

點(diǎn)擊“選擇日期”選項(xiàng)，會(huì)直接跳轉(zhuǎn)至新的頁面（具體的交互方式視應(yīng)用的平臺(tái)而定），頂部會(huì)有一個(gè)日期的橫向切換，內(nèi)容部分則顯示具體的時(shí)間點(diǎn)，選擇完畢，點(diǎn)擊確定，操作完成，回到原來的頁面；

優(yōu)缺點(diǎn)及使用場景

與其說是一個(gè)日期控件形式，不如說是一個(gè)時(shí)間選擇器，它所使用的特定場景對(duì)年月日時(shí)分都有一個(gè)十分精確的選擇，會(huì)精確到某一個(gè)時(shí)間點(diǎn)上甚至分，是用戶對(duì)時(shí)間點(diǎn)最精確的體現(xiàn)形式，目前應(yīng)用的最多的就是時(shí)間的預(yù)約功能，選項(xiàng)卡是對(duì)日期的一個(gè)管控，可以自由頻繁的切換日期，并對(duì)其時(shí)間點(diǎn)對(duì)操作，它的優(yōu)點(diǎn)是能完全展現(xiàn)出每一個(gè)時(shí)間點(diǎn)，而且直觀、操作效率高，缺點(diǎn)是占的空間位置相對(duì)較大，需跳轉(zhuǎn)頁面或?qū)换ミM(jìn)行特殊處理方能達(dá)到目的，且日期天數(shù)需要根據(jù)業(yè)務(wù)需求做一個(gè)數(shù)量的控制，否則會(huì)造成一個(gè)日期橫向滑動(dòng)過長、滑動(dòng)次數(shù)較多的一個(gè)操作。

小結(jié)

以上是對(duì)三種日期選擇器的一個(gè)分析與總結(jié)，每個(gè)日期控件都有它適合或特定的使用的場景、且滿足的業(yè)務(wù)目標(biāo)也都不一樣，我們需要根據(jù)它們的特性去做區(qū)別對(duì)待，在選擇使用哪種控件前，需要去深度分晰它最終的用戶體驗(yàn)?zāi)繕?biāo)和想要滿足的業(yè)務(wù)目標(biāo)，不盲目套用和照搬競品或同類產(chǎn)品，以求交互到達(dá)最佳的體驗(yàn)。

本文由 @虞小姐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。