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

一．選擇到天（DAY）

排查設計的時候需要考慮以下幾點：

• 標識出當天日期
• 標識出特殊日期
• 禁用不能選擇的日期
• 是否有默認選中日期：比如預定車票時，默認選中今天
• 是否需要提供幫助用戶選擇的信息
• 明確表達當前已選的日期
• 一個清晰、明確的提交按鈕或者點擊即選中

1.采用彈出層的形式

這樣做的好處是不用跳轉新的頁面，在當前環境下選擇日期（比如說當前環境下有些內容是影響用戶做出選擇的）；同時，可以點擊彈層遮罩區域快速退出選擇。如果沒有特殊需求，僅僅是選擇日期這種形式基本上夠用了。

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

2.打開新頁面選擇日期

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

3.多選

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

二．選擇到時、分（TIME）

排查設計的時候需要考慮以下幾點：

• 上午與下午的區分：可以通過顯示狀態做出區分，比如8：30與20:30；或者通過AM與PM進行區分，比如8：30 AM與8:30 PM。
• 是否有默認選中時刻：比如默認選中當前時刻。
• 明確表達當前已選的時刻
• 一個清晰、明確的提交按鈕或者點擊即選中

如下圖，對時、分的選擇，從左往右，依次點擊。好處是選擇效率很高，缺點是，一旦某次選擇錯誤，需要用戶點擊返回。如果選擇完成后，才發現錯選了，還需要從頭點擊選擇一遍。

如下圖，有明確的提交按鈕，用戶通過滑屏滾動點選，好處是選擇時與分是單獨進行的。

三．選擇時間段

排查設計的時候需要考慮以下幾點：

• 明確表達當前選擇的是開始還是結束時刻：視覺上要突出當前選擇項
• 是否有默認選中時刻：比如設定計劃或者預定時，開始時刻默認為今天?；蛘吆Y選過往信息時，結束時刻默認為今天。
• 禁用不能選擇的日期：選擇結束時刻的時候，不能超越開始時刻。
• 明確表達當前已選的時刻
• 一個清晰、明確的提交按鈕或者點擊即選中

1. 對開始時刻與結束時刻單獨選擇

如下圖，很明顯可以看出來當前選擇的是開始時刻，此時的切換按鈕也承擔著顯示選擇結果的作用。如果用戶需要選擇結束時刻，需要點擊切換成結束時刻按鈕。

與上一個設計方案的區別是，選擇時刻采用的是平鋪日歷的方式，好處是可以直觀的感受到時間的始與末，有多少天。這個非常適合較為精細準確的時間選擇場景，比如外出旅行計劃時間、工作任務目標時間等等，用戶需要感知時間段的長短，并且會參考工作日與周末的區別。

2.直接點擊或者拖拽開始時刻與結束時刻

“往前點擊”代表開始時刻往前設置，“往后點擊”代表結束時刻往后設置。

如果是計劃未來的事件，通常開始時刻不會在當天以前，所以“今天”以前的日期都會被禁止選中，如下圖。

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

3.采用新的形式選擇時間段

如下圖，選擇會議的開始時刻后，再選擇會議需要的時間即可，因為對于用戶來講，有些事件結束時刻更明確，比如什么時候下班；而有些事件花費的時間更為明確，比如開個產品需求發布會要花2個小時。對于選擇時間段這個“量”可通過圖形尺寸的變化達到直觀、可視化的效果。

四．在日歷中呈現對應事件

排查設計的時候需要考慮以下幾點：

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

1.列表顯示

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

2.在日歷上顯示

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

通常在日歷上顯示對應事件，有以下4種方式。

（1）頂部顯示：適用于一天對應的事件數量不要太多，最好事件區域的高度不要變化，目的是能讓日歷本身不要動來動去。

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

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

（4）擴展空間顯示：如下圖所示，在所選日期所在行向下撐開事件顯示面板。這種做法有高度的限制，事件很難采用列表形式展示，所以如果有多個事件的話，很難直觀感受到事件發生的前后關系以及具體有多少個事件。

3.空數據

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

4.日歷與列表綜合

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

你已經看完了嗎？希望對你或多或少有些幫助。

以上素材來自?http://collectui.com或者http://reeoo.com

作者：小白，微信公眾號：小白的交互設計。

本文由 @小白 原創發布于人人都是產品經理。未經許可，禁止轉載。