日期和時(shí)間選擇器通常被認(rèn)為是日期和時(shí)間選擇的萬(wàn)無(wú)一失的要素–一致，通用和可預(yù)測(cè)。大多數(shù)人將它們用作日期和時(shí)間輸入的通用指南。但是，在某些情況下，日期和時(shí)間選擇器會(huì)有所幫助，然后在某些情況下，它們會(huì)干擾用戶(hù)體驗(yàn)。因此，您應(yīng)該仔細(xì)考慮您的站點(diǎn)是否需要日期和時(shí)間選擇器。僅當(dāng)它可以快速，輕松地為用戶(hù)提供輸入時(shí)，才應(yīng)包括它。您還應(yīng)該將其放置在界面的前面，因?yàn)樗鼘⒐膭?lì)訪(fǎng)問(wèn)者使用它。但是，找到適合您的界面的日期選擇器非常具有挑戰(zhàn)性。但是如果需要日期和時(shí)間選擇器，指定一個(gè)日期非常繁瑣，并且通常會(huì)產(chǎn)生零結(jié)果頁(yè)面或不相關(guān)的結(jié)果。進(jìn)行一些小的更改將使設(shè)計(jì)更易于管理。因此，這里有六個(gè)基本技巧，可為您的網(wǎng)站創(chuàng)建正確的日期和時(shí)間選擇器。

1.添加數(shù)值：

在設(shè)計(jì)日期和時(shí)間選擇器時(shí)，首先要考慮的是某種日期和時(shí)間輸入。對(duì)于日期，應(yīng)使用三個(gè)單獨(dú)的數(shù)字輸入，對(duì)于時(shí)間輸入，應(yīng)至少使用兩個(gè)數(shù)字輸入。這些輸入應(yīng)以"-"或" /"分隔，您還可以將下拉菜單用于日，月，年，甚至小時(shí)和分鐘。但是，點(diǎn)擊和滾動(dòng)并不是最無(wú)縫或最快的體驗(yàn)。您應(yīng)該快速選擇一個(gè)日期和時(shí)間，可能要輕按兩下（一次打開(kāi)日歷或時(shí)間設(shè)置）和其他人選擇日期或時(shí)間）。要解決此問(wèn)題，您可以設(shè)計(jì)一種格式，該格式將在用戶(hù)開(kāi)始鍵入用于確定日期的數(shù)值時(shí)自動(dòng)更改月份和年份。另外，我們必須確保數(shù)值輸入的可靠性足以管理所有邊緣情況。您還應(yīng)該使用某種占位符或標(biāo)簽來(lái)指示日期和時(shí)間選擇器的格式。您應(yīng)該確保當(dāng)用戶(hù)激活輸入字段時(shí)，出現(xiàn)日期格式建議。

在設(shè)計(jì)日期選擇器時(shí)，應(yīng)考慮花費(fèi)時(shí)間來(lái)創(chuàng)建適當(dāng)?shù)臄?shù)字輸入。您可以提供諸如"現(xiàn)在"，"一年前"，"昨天"，"今天"，"十月的5天"之類(lèi)的建議。根據(jù)要設(shè)計(jì)的應(yīng)用程序，您可以決定提供靈活的日期或預(yù)定義的日期選項(xiàng)。當(dāng)然，您需要顯著地將輸入信息傳達(dá)給用戶(hù)。盡管數(shù)字輸入是確定日期的寶貴輸入，但您應(yīng)該始終在六周內(nèi)擁有一些默認(rèn)日期。這將幫助那些試圖預(yù)訂快速周末旅行但沒(méi)有確切日期的困惑客戶(hù)。在這種情況下，日歷將是顯示所有可用選項(xiàng)的不錯(cuò)的選擇。此外，最好在建議日期的同時(shí)考慮客戶(hù)的位置，以避免錯(cuò)誤的預(yù)訂。

2.設(shè)置默認(rèn)值：

如果您查看日期和時(shí)間選擇器的輸入，則將圍繞其交互設(shè)計(jì)遇到一些小而重要的決定。一些設(shè)計(jì)人員經(jīng)常會(huì)遇到選擇將默認(rèn)值放置在輸入字段中還是將其保留為空白或顯示正確輸入示例的選擇。進(jìn)一步確定默認(rèn)值和輸入值的可見(jiàn)性非常具有挑戰(zhàn)性。盡管尚未測(cè)試或發(fā)現(xiàn)任何偏好，但是為用戶(hù)設(shè)置隨機(jī)值并不是最佳選擇，因?yàn)檫@將迫使用戶(hù)將值從看似隨機(jī)更改為他們想要選擇的值。但是，如果您的用戶(hù)可能會(huì)在您的網(wǎng)站上預(yù)訂最后一分鐘的優(yōu)惠（例如交通或酒店），那么當(dāng)前日期（"今天"）或當(dāng)前時(shí)間（"現(xiàn)在"）將是一個(gè)不錯(cuò)的選擇，尤其是在以下時(shí)間段：敏感內(nèi)容。

一旦用戶(hù)選擇了日期或時(shí)間段，但無(wú)意或故意刷新了頁(yè)面，則可以保留選擇或?qū)⑵浠謴?fù)為默認(rèn)值。如果訪(fǎng)問(wèn)者意外刷新了頁(yè)面，他們將不高興看到輸入丟失并且不得不再次輸入。但是，如果他們故意刷新頁(yè)面，他們將看到預(yù)定義的日期。在這兩種情況下，他們都不愿意發(fā)現(xiàn)輸入丟失。因此，最好保存輸入并在日期和時(shí)間輸入旁邊提供一個(gè)明顯的" New Search"或" Reset"鏈接。他們可以選擇刪除以前的輸入，而不是刪除用戶(hù)的輸入。這也是一個(gè)微型步進(jìn)器，可能會(huì)有所幫助，因此日期可能不會(huì)發(fā)生重大變化。如果您確定用戶(hù)可能會(huì)選擇日期，那么最好設(shè)置日期。

3.創(chuàng)建日歷疊加層：

設(shè)計(jì)清晰的日歷覆蓋圖時(shí)，您無(wú)需發(fā)揮創(chuàng)意。通常，日歷疊加層顯示在日期輸入字段下方，在桌面上顯示為一個(gè)小面板，在狹窄屏幕上顯示為全屏視圖。這些日期按行組織，按星期分組，并帶有一個(gè)下拉菜單，可瀏覽月份和年份。日歷疊加層可以包含各種級(jí)別的導(dǎo)航和詳細(xì)信息，例如星期幾應(yīng)何時(shí)開(kāi)始或是否包含年份。所有這些僅取決于您的受眾和網(wǎng)站的應(yīng)用程序。如果您有公共交通網(wǎng)站，那么餐飲服務(wù)或電視只要輸入一年就沒(méi)有意義。另外，如果您有租車(chē)網(wǎng)站，則顯示月份輸入無(wú)濟(jì)于事。

如果人們想預(yù)定約會(huì)，則在顯示一周中的某一天時(shí)會(huì)發(fā)生另一種復(fù)雜性。有時(shí)您還想顯示價(jià)格或空房情況（例如預(yù)訂機(jī)票）。另外，您可能要添加日期范圍和確切的時(shí)間段。在這種情況下，您需要在日期選擇中包括時(shí)隙選擇，或指出開(kāi)始日期和結(jié)束日期之間的聯(lián)系。因此，值得花時(shí)間在日歷中添加詳細(xì)信息，以幫助用戶(hù)快速選擇日期和時(shí)間。如果可用性很重要，則最好以顏色編碼的方式分隔可用和不可用的日期，以便于區(qū)分。此外，如果不同日期的價(jià)格不同，最好在日歷中顯示。如果您的客戶(hù)在周末或公共假期更感興趣，最好也顯示這些。另外，最好在日歷本身中指示和限制選擇，以便客戶(hù)立即獲得提示。

4.包括日期跳轉(zhuǎn)：

如果您的客戶(hù)可能會(huì)選擇日期范圍很短的選項(xiàng)，則可以在日期輸入旁邊添加快速的"下一個(gè)"和"上一個(gè)"導(dǎo)航。例如，在預(yù)訂周末旅行時(shí)，客戶(hù)要么想在周四晚或周五早些時(shí)候離開(kāi)，要么便宜些。因此，只需讓您點(diǎn)擊即可提供預(yù)期的結(jié)果，而不是讓客戶(hù)在日歷中重新輸入或選擇日期。Google Flights使用此功能來(lái)提高其日期選擇器的效率。能夠在幾個(gè)月和幾年之間跳轉(zhuǎn)可能會(huì)有所幫助。除此之外，迷你步進(jìn)器是日期和時(shí)間選擇器的出色增強(qiáng)。但是，它不能替代日歷重疊，因?yàn)檫^(guò)多的敲擊會(huì)變得乏味。在可用性會(huì)話(huà)中，第十次點(diǎn)擊可以測(cè)試客戶(hù)的耐心。最終，

因此，您應(yīng)該首先研究日期輸入范圍的范圍和日歷的用途。例如，如果預(yù)訂日期是將來(lái)的日期，則最好在日期選擇器中提供數(shù)字輸入。另一方面，如果日期輸入范圍短，則可以考慮添加一個(gè)小型步進(jìn)器以快速跳轉(zhuǎn)。理想情況下，您應(yīng)該提供全部三個(gè)（日歷覆蓋圖，微型步進(jìn)器和數(shù)字輸入），以便客戶(hù)有可靠的選擇。如果有一些顯示時(shí)間的選項(xiàng)，那么您可能不需要日期選擇器。您應(yīng)該考慮顯示預(yù)定義的選項(xiàng)，例如按鈕，鏈接或滑塊，而不要使用日歷覆蓋圖。另外，除非清晰可見(jiàn)，否則您的日期選擇器將不會(huì)出現(xiàn)。因此，應(yīng)通過(guò)點(diǎn)擊或單擊日期選擇器圖標(biāo)或輸入字段來(lái)提示日期和時(shí)間選擇器。

5.提供靈活性：

如果您的客戶(hù)感到困惑并且不知道確切的日期，那么日期選擇器應(yīng)該是最后的選擇。更常見(jiàn)的是，一些一般性的和預(yù)設(shè)的建議以及過(guò)濾器會(huì)比瀏覽數(shù)月和數(shù)月更好。在這種情況下，您仍然可以使用顏色編碼和顯示為用戶(hù)提供詳細(xì)的日歷視圖例如，一次展示所有價(jià)格，以展示最優(yōu)惠的價(jià)格。Google Flight在顯示選定的靈活日期時(shí)會(huì)使用這種方法。但是，該選項(xiàng)將落到窄屏上。另一方面，Dohop使用靈活的日期以及靈活的位置作為其主要功能。一旦用戶(hù)開(kāi)始輸入日期或目的地，他們就會(huì)突出顯示這兩個(gè)功能。除了價(jià)格以外，它們還具有日歷視圖，突出顯示了間接和直接航班的可用性，并顯示了沒(méi)有聯(lián)系的航班日期。

為了進(jìn)一步使日期選擇器對(duì)用戶(hù)有所幫助，您可以使用對(duì)比色對(duì)背景進(jìn)行顏色編碼，同時(shí)顯示高價(jià)和低價(jià)。在可訪(fǎng)問(wèn)性的情況下，在為背景選擇顏色時(shí)考慮調(diào)色板是很有用的。該設(shè)計(jì)對(duì)用戶(hù)使用日期選擇器很有幫助。此外，您應(yīng)該在底部描述顏色的含義，以免造成混淆。如果要設(shè)計(jì)運(yùn)輸日期選擇器，則在日歷疊加層的頂部提供"單向"和"往返"之間的選項(xiàng)將很有幫助。而且，僅給出特定月份的靈活日期還不夠，您可以進(jìn)一步走一步，并提供更多常規(guī)日期范圍，例如春季，冬季，夏季和秋季。

6.包括一個(gè)滑塊：

與其他任何輸入一樣，可以使用滑塊的旋鈕瀏覽日期和時(shí)間數(shù)據(jù)?；瑝K可用于單個(gè)值輸入或指定日期范圍。它經(jīng)常出現(xiàn)在界面中，客戶(hù)可以在其中設(shè)置一些預(yù)定義的日期范圍。但是，滑塊也會(huì)帶來(lái)選擇精確輸入的問(wèn)題。越密集，或者通過(guò)滑塊可選擇的范圍越寬，使用起來(lái)就越困難。在可用性測(cè)試中，滑塊使客戶(hù)非常緩慢且小心地移動(dòng)旋鈕。因此，在狹窄的屏幕上選擇日期和時(shí)間范圍時(shí)，它不是用戶(hù)友好的。

當(dāng)范圍未定義但很靈活，或者您沒(méi)有太多選擇時(shí)，滑塊會(huì)發(fā)揮最佳作用。不幸的是，日期選擇器無(wú)法以這種方式運(yùn)行，因?yàn)榭蛻?hù)不得不非常頻繁地進(jìn)行調(diào)整和細(xì)化。因此，數(shù)字輸入比滑動(dòng)選擇日期和時(shí)間的數(shù)字要快得多。僅在某些情況下，它們才有幫助。

寫(xiě)到最后：

因此，設(shè)計(jì)日期和時(shí)間選擇器的第一步將是確定您是否需要一個(gè)用于的應(yīng)用程序。確定后，您可以選擇可以幫助用戶(hù)更快地選擇日期和時(shí)間的設(shè)計(jì)。這些技巧可以幫助您創(chuàng)建與您的界面相匹配的日期和時(shí)間選擇器，并增強(qiáng)網(wǎng)站的可用性。為了進(jìn)一步使您的日期和時(shí)間選擇器有用，您可以包括更多相關(guān)的詳細(xì)信息，例如價(jià)格或可用性。另外，輸入字段取決于客戶(hù)的喜好，因此請(qǐng)確保包括一個(gè)使選擇更快的字段。