我們的設(shè)計(jì)涉及到人們吃、喝、住、行、購(gòu)、娛、醫(yī)療、教育、工作等各個(gè)方面，每個(gè)需求場(chǎng)景都是由事件觸發(fā)的，對(duì)于事件的設(shè)計(jì)離不開時(shí)間選擇，比如什么時(shí)候就餐、什么時(shí)候出行、什么時(shí)候去看電影、什么時(shí)候參加會(huì)議、什么時(shí)候去就醫(yī)、什么時(shí)候安排下一步計(jì)劃，等等。系統(tǒng)自帶的可能難以滿足設(shè)計(jì)需要，自定義其交互形式與樣式可以實(shí)現(xiàn)更多的可能性。

一．選擇到天（DAY）

排查設(shè)計(jì)的時(shí)候需要考慮以下幾點(diǎn)：

• 標(biāo)識(shí)出當(dāng)天日期
• 標(biāo)識(shí)出特殊日期
• 禁用不能選擇的日期
• 是否有默認(rèn)選中日期：比如預(yù)定車票時(shí)，默認(rèn)選中今天
• 是否需要提供幫助用戶選擇的信息
• 明確表達(dá)當(dāng)前已選的日期
• 一個(gè)清晰、明確的提交按鈕或者點(diǎn)擊即選中

1.采用彈出層的形式

這樣做的好處是不用跳轉(zhuǎn)新的頁(yè)面，在當(dāng)前環(huán)境下選擇日期（比如說當(dāng)前環(huán)境下有些內(nèi)容是影響用戶做出選擇的）；同時(shí)，可以點(diǎn)擊彈層遮罩區(qū)域快速退出選擇。如果沒有特殊需求，僅僅是選擇日期這種形式基本上夠用了。

如果需要用戶從某個(gè)月中選擇某天，并且用戶是需要參考星期幾還是周末時(shí)，是需要展示一個(gè)月的日期面板的。如下圖，“圖標(biāo)+日期”本身也是一個(gè)觸發(fā)彈出層的按鈕，用戶點(diǎn)擊某個(gè)日期即為選中，并收起彈出層。

2.打開新頁(yè)面選擇日期

打開新頁(yè)面選擇日期，毋庸置疑，新頁(yè)面可擴(kuò)展的空間比較大。更適合當(dāng)前頁(yè)面是為了表達(dá)一個(gè)整體獨(dú)立事件，比如簽到，設(shè)置行程、預(yù)約等，也就是說，除了要選擇日期外，用戶可能還需要設(shè)置事件的其他內(nèi)容?？偟膩碚f時(shí)間是規(guī)劃事情的首要元素，把選擇時(shí)間放在突出位置更符合用戶的心理模型。

3.多選

可設(shè)置多個(gè)日期，每點(diǎn)擊一個(gè)日期即代表選中，一般適用于不同日期設(shè)定的是同一事件（突然想到本人生活中的一個(gè)場(chǎng)景，我會(huì)為工作日早上的鬧鐘設(shè)置為7:30,7:45,7:59三個(gè)檔）。需要列出已選擇的日期，用戶可以選擇取消，如下圖。

二．選擇到時(shí)、分（TIME）

排查設(shè)計(jì)的時(shí)候需要考慮以下幾點(diǎn)：

• 上午與下午的區(qū)分：可以通過顯示狀態(tài)做出區(qū)分，比如8：30與20:30；或者通過AM與PM進(jìn)行區(qū)分，比如8：30 AM與8:30 PM。
• 是否有默認(rèn)選中時(shí)刻：比如默認(rèn)選中當(dāng)前時(shí)刻。
• 明確表達(dá)當(dāng)前已選的時(shí)刻
• 一個(gè)清晰、明確的提交按鈕或者點(diǎn)擊即選中

如下圖，對(duì)時(shí)、分的選擇，從左往右，依次點(diǎn)擊。好處是選擇效率很高，缺點(diǎn)是，一旦某次選擇錯(cuò)誤，需要用戶點(diǎn)擊返回。如果選擇完成后，才發(fā)現(xiàn)錯(cuò)選了，還需要從頭點(diǎn)擊選擇一遍。

如下圖，有明確的提交按鈕，用戶通過滑屏滾動(dòng)點(diǎn)選，好處是選擇時(shí)與分是單獨(dú)進(jìn)行的。

三．選擇時(shí)間段

排查設(shè)計(jì)的時(shí)候需要考慮以下幾點(diǎn)：

• 明確表達(dá)當(dāng)前選擇的是開始還是結(jié)束時(shí)刻：視覺上要突出當(dāng)前選擇項(xiàng)
• 是否有默認(rèn)選中時(shí)刻：比如設(shè)定計(jì)劃或者預(yù)定時(shí)，開始時(shí)刻默認(rèn)為今天?；蛘吆Y選過往信息時(shí)，結(jié)束時(shí)刻默認(rèn)為今天。
• 禁用不能選擇的日期：選擇結(jié)束時(shí)刻的時(shí)候，不能超越開始時(shí)刻。
• 明確表達(dá)當(dāng)前已選的時(shí)刻
• 一個(gè)清晰、明確的提交按鈕或者點(diǎn)擊即選中

1. 對(duì)開始時(shí)刻與結(jié)束時(shí)刻單獨(dú)選擇

如下圖，很明顯可以看出來當(dāng)前選擇的是開始時(shí)刻，此時(shí)的切換按鈕也承擔(dān)著顯示選擇結(jié)果的作用。如果用戶需要選擇結(jié)束時(shí)刻，需要點(diǎn)擊切換成結(jié)束時(shí)刻按鈕。

與上一個(gè)設(shè)計(jì)方案的區(qū)別是，選擇時(shí)刻采用的是平鋪日歷的方式，好處是可以直觀的感受到時(shí)間的始與末，有多少天。這個(gè)非常適合較為精細(xì)準(zhǔn)確的時(shí)間選擇場(chǎng)景，比如外出旅行計(jì)劃時(shí)間、工作任務(wù)目標(biāo)時(shí)間等等，用戶需要感知時(shí)間段的長(zhǎng)短，并且會(huì)參考工作日與周末的區(qū)別。

2.直接點(diǎn)擊或者拖拽開始時(shí)刻與結(jié)束時(shí)刻

“往前點(diǎn)擊”代表開始時(shí)刻往前設(shè)置，“往后點(diǎn)擊”代表結(jié)束時(shí)刻往后設(shè)置。

如果是計(jì)劃未來的事件，通常開始時(shí)刻不會(huì)在當(dāng)天以前，所以“今天”以前的日期都會(huì)被禁止選中，如下圖。

如果也允許用戶選擇當(dāng)天以前的日期，建議把“今天”標(biāo)識(shí)出來，以便幫助用戶快速做出決定。

3.采用新的形式選擇時(shí)間段

如下圖，選擇會(huì)議的開始時(shí)刻后，再選擇會(huì)議需要的時(shí)間即可，因?yàn)閷?duì)于用戶來講，有些事件結(jié)束時(shí)刻更明確，比如什么時(shí)候下班；而有些事件花費(fèi)的時(shí)間更為明確，比如開個(gè)產(chǎn)品需求發(fā)布會(huì)要花2個(gè)小時(shí)。對(duì)于選擇時(shí)間段這個(gè)“量”可通過圖形尺寸的變化達(dá)到直觀、可視化的效果。

四．在日歷中呈現(xiàn)對(duì)應(yīng)事件

排查設(shè)計(jì)的時(shí)候需要考慮以下幾點(diǎn)：

• 明確哪些天里有事件
• 明確表達(dá)有幾種事件類型：時(shí)間上，比如緊急的與將來要處理的；內(nèi)容上，旅行與讀書計(jì)劃安排。等等。
• 是否有默認(rèn)選中時(shí)刻：比如默認(rèn)選中今天，顯示今天的事件/內(nèi)容清單。
• 事件清單是否有清晰的時(shí)間軸
• 一個(gè)清晰、明確的增加新事件的按鈕：通常都是一個(gè)加號(hào)按鈕。
• 一個(gè)事件都沒有時(shí)的空數(shù)據(jù)設(shè)計(jì)

1.列表顯示

列表顯示，通常都會(huì)有一條較為明顯的時(shí)間軸，一般都會(huì)放在左側(cè)，方便索引、查看不同的事件。缺點(diǎn)是用戶很難看直接看出本月所要發(fā)生的事件或執(zhí)行的任務(wù)，這種做法比較適合于產(chǎn)品本身并非注重月事件，而注重即將發(fā)生的緊急事件，如下圖。

2.在日歷上顯示

與列表形式相比，日歷的形式可以讓用戶把握每個(gè)月發(fā)生（或即將發(fā)生）的事件，除了可以默認(rèn)當(dāng)前顯示的是當(dāng)天要發(fā)生的事件，但是用戶很難立刻了解緊急的幾件事具體是什么，用戶需要去點(diǎn)擊對(duì)應(yīng)的日期，才能發(fā)現(xiàn)具體事件的詳細(xì)內(nèi)容。還有一個(gè)好處是，如果一天內(nèi)發(fā)生的事件非常多，這種形式更有利于展示，如果采用列表式，那么需要用戶滾動(dòng)很久才能看到其他日期的事件，或者需要收起這一天的事件，才能快速的看到其他日期的事件。

通常在日歷上顯示對(duì)應(yīng)事件，有以下4種方式。

（1）頂部顯示：適用于一天對(duì)應(yīng)的事件數(shù)量不要太多，最好事件區(qū)域的高度不要變化，目的是能讓日歷本身不要?jiǎng)觼韯?dòng)去。

（2）底部顯示（最常用的方式）：顯而易見，好處是在日歷底部充分展示對(duì)應(yīng)的事件，并且往下滾動(dòng)查看更多事件的時(shí)候，日歷可做收起的形態(tài)；同理往上查看時(shí)，也能展開。

（3）浮層顯示：如果一天內(nèi)只能設(shè)定一個(gè)事件或者多個(gè)相同事件，那么這種方式更適合，但是缺點(diǎn)是，如果不像上面2種方式一樣提供默認(rèn)選中的日期，那么用戶可能并不知道點(diǎn)擊日期能夠查看事件，此時(shí)就需要一個(gè)小小的教學(xué)環(huán)節(jié)了。

（4）擴(kuò)展空間顯示：如下圖所示，在所選日期所在行向下?lián)伍_事件顯示面板。這種做法有高度的限制，事件很難采用列表形式展示，所以如果有多個(gè)事件的話，很難直觀感受到事件發(fā)生的前后關(guān)系以及具體有多少個(gè)事件。

3.空數(shù)據(jù)

如果最近幾天或者用戶剛使用產(chǎn)品，那么設(shè)計(jì)上需要告訴用戶這里為什么是空的，將會(huì)顯示什么內(nèi)容，最好是引導(dǎo)用戶去添加新事件。如果想深入了解空數(shù)據(jù)設(shè)計(jì)，請(qǐng)查看小白的另一篇文章《好的空數(shù)據(jù)設(shè)計(jì)如何引導(dǎo)用戶行為》。

4.日歷與列表綜合

列表顯示與日歷顯示更有優(yōu)劣，具體還是要看你的產(chǎn)品目標(biāo)。如果產(chǎn)品本身或者主功能就是為了設(shè)置事件的，并且既要看到緊急事件，又要宏觀把控整個(gè)月事件數(shù)量與內(nèi)容的，建議兩種展示方式都提供給用戶，此時(shí)就需要多設(shè)計(jì)一個(gè)明確的切換按鈕了。

你已經(jīng)看完了嗎？希望對(duì)你或多或少有些幫助。

以上素材來自?http://collectui.com或者h(yuǎn)ttp://reeoo.com

作者：小白，微信公眾號(hào)：小白的交互設(shè)計(jì)。

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