一、選擇一個(gè)日期
有一種場景是單純地選擇一個(gè)日期夠了，還有一種場景是除了選擇日期外還需要添加任務(wù)行程，這就用到了兩種不同的方式。
1.底部日歷彈窗
通過點(diǎn)擊頁面中的選擇日期按鈕，頁面底部彈出日歷，選擇完后自動(dòng)確認(rèn)。這種方法多使用在只需要選擇日期的場景。
優(yōu)點(diǎn)是：省去多余的操作，用戶使用方便。
缺點(diǎn)是：功能單一，除了選擇日期外不能進(jìn)行其他操作。如下圖：

日期選擇器設(shè)計(jì)

以隨手記賬為例，它的產(chǎn)品目標(biāo)是讓用戶記錄某天的花銷情況，側(cè)重點(diǎn)是讓用戶選擇花銷的具體內(nèi)容和數(shù)量，時(shí)間是次要的，所以它使用了底部日歷彈窗的方式。
2.頂部下拉日歷
默認(rèn)狀態(tài)下，頂部顯示一行日歷，下拉顯示完整日歷，可以添加其他功能。這種方式多用在除了選擇日期外還需要進(jìn)行其他操作的場景。
優(yōu)點(diǎn)是：頁面面積大，可添加其他內(nèi)容。
缺點(diǎn)是：操作相對(duì)復(fù)雜，用戶操作成本較高。如下圖：

日期選擇器設(shè)計(jì)

以滴答清單為例，它的產(chǎn)品目標(biāo)是讓用戶安排某天要做的任務(wù)行程，用戶首先要確定日期，然后再去添加當(dāng)天的任務(wù)，所以它使用了這種方式。
二、選擇兩個(gè)日期
有一種場景是單純地選擇一個(gè)日期夠了，還有一種場景是除了選擇日期外還需要添加任務(wù)行程，這就用到了兩種不同的方式。
1.兩個(gè)頁面間跳轉(zhuǎn)
首先選擇完去程時(shí)間后，再跳轉(zhuǎn)到第二個(gè)頁面選擇返程時(shí)間。常使用在需要選擇一到兩個(gè)日期的場景下。
優(yōu)點(diǎn)是：比較靈活，既可以選擇單個(gè)日期，也可以選擇兩個(gè)日期；在日歷中添加價(jià)格，讓用戶很輕易地做出對(duì)比。
缺點(diǎn)是：兩個(gè)頁面來回跳轉(zhuǎn)增加了操作成本。如下圖：

日期選擇器設(shè)計(jì)

以馬蜂窩購買機(jī)票的功能為例，它的產(chǎn)品目標(biāo)是讓用戶購買單程和往返機(jī)票。如果只是購買單程票的話，我們選擇完去程日期后直接點(diǎn)搜索就可以了；但是如果要買往返票，我們除了要選擇去程日期，還要跳轉(zhuǎn)到另一個(gè)頁面選擇返程日期。這樣做既滿足了購買單程票用戶的需求，又滿足了購買往返票用戶的需求。
這里需要注意的是：在用戶選擇返程日期的時(shí)候，去程日期要在頁面中顯示出來，給用戶一個(gè)反饋，讓用戶確認(rèn)自己之前的選擇內(nèi)容無誤，再進(jìn)行下一步操作。
2.兩個(gè) Tab 間跳轉(zhuǎn)
這種方法是通過一個(gè)頁面中用兩個(gè) Tab 跳轉(zhuǎn)來實(shí)現(xiàn)，常用在需要選擇兩個(gè)日期的場景中。
優(yōu)點(diǎn)是：操作簡單，省去來回切換頁面的步驟。
缺點(diǎn)是：比較死板，沒有上一種方式靈活，只能選擇兩個(gè)日期，如下圖：

日期選擇器設(shè)計(jì)

以攜程旅行購買火車票功能為例，它首先讓用戶選擇“單程”還是“往返”，然后跳轉(zhuǎn)到對(duì)應(yīng)的頁面，點(diǎn)擊單程就只能選擇去程的票，點(diǎn)擊往返，則可以同時(shí)選擇去程和返程的票。
三、選擇一段日期
在預(yù)定酒店的時(shí)候我們需要選擇“入住”到“離開”的這一段日期，常用同一個(gè)頁面點(diǎn)擊兩次完成操作的方式。
同一個(gè)頁面點(diǎn)擊兩次完成操作
通過點(diǎn)擊兩下，分別選擇兩個(gè)日期，之間的日期全部包含在內(nèi)。
優(yōu)點(diǎn)是：這種方法操作簡潔方便，給用戶的反饋直觀明了。
缺點(diǎn)是：如果沒有確定按鈕，用戶誤觸后必須重新選擇。如圖：

日期選擇器設(shè)計(jì)

上圖中，馬蜂窩、驢媽媽、攜程旅行的預(yù)訂酒店頁面，都使用這種方式，第一次點(diǎn)擊選擇入住日期，第二次點(diǎn)擊選擇離店日期。驢媽媽和攜程旅行沒有確定按鈕，如果用戶選擇錯(cuò)了就必須重新選擇。
（鄭重聲明：本文版權(quán)歸海鹽社青山所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請(qǐng)聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請(qǐng)聯(lián)系我們修改。）

新聞名稱：網(wǎng)頁網(wǎng)站中日期選擇器的常見設(shè)計(jì)樣式
文章位置：http://jinyejixie.com/news28/114978.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、服務(wù)器托管、外貿(mào)建站、云服務(wù)器、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)