網頁設計中如何正確的使用日期和時間選擇器

日期和時間選擇器通常被認為是日期和時間選擇的萬無一失的要素–一致，通用和可預測。大多數人將它們用作日期和時間輸入的通用指南。但是，在某些情況下，日期和時間選擇器會有所幫助，然后在某些情況下，它們會干擾濟南網站設計的用戶體驗。因此，您應該仔細考慮您的站點是否需要日期和時間選擇器。僅當它可以快速，輕松地為用戶提供輸入時，才應包括它。您還應該將其放置在界面的前面，因為它將鼓勵訪問者使用它。但是，找到適合您的界面的日期選擇器非常具有挑戰性。但是如果需要日期和時間選擇器，指定一個日期非常繁瑣，并且通常會產生零結果頁面或不相關的結果。進行一些小的更改將使設計更易于管理。因此，這里有六個基本技巧，可為您的網站創建正確的日期和時間選擇器。

1.添加數值：

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

在設計日期選擇器時，應考慮花費時間來創建適當的數字輸入。您可以提供諸如“現在”，“一年前”，“昨天”，“今天”，“十月的5天”之類的建議。根據要設計的應用程序，您可以決定提供靈活的日期或預定義的日期選項。當然，您需要顯著地將輸入信息傳達給用戶。盡管數字輸入是確定日期的寶貴輸入，但您應該始終在六周內擁有一些默認日期。這將幫助那些試圖預訂快速周末旅行但沒有確切日期的困惑客戶。在這種情況下，日歷將是顯示所有可用選項的不錯的選擇。此外，最好在建議日期的同時考慮客戶的位置，以避免錯誤的預訂。

2.設置默認值：

如果您查看日期和時間選擇器的輸入，則將圍繞其交互設計遇到一些小而重要的決定。一些設計人員經常會遇到選擇將默認值放置在輸入字段中還是將其保留為空白或顯示正確輸入示例的選擇。進一步確定默認值和輸入值的可見性非常具有挑戰性。盡管尚未測試或發現任何偏好，但是為用戶設置隨機值并不是最佳選擇，因為這將迫使用戶將值從看似隨機更改為他們想要選擇的值。但是，如果您的用戶可能會在您的網站上預訂最后一分鐘的優惠（例如交通或酒店），那么當前日期（“今天”）或當前時間（“現在”）將是一個不錯的選擇，尤其是在以下時間段：敏感內容。

一旦用戶選擇了日期或時間段，但無意或故意刷新了頁面，則可以保留選擇或將其恢復為默認值。如果訪問者意外刷新了頁面，他們將不高興看到輸入丟失并且不得不再次輸入。但是，如果他們故意刷新頁面，他們將看到預定義的日期。在這兩種情況下，他們都不愿意發現輸入丟失。因此，最好保存輸入并在日期和時間輸入旁邊提供一個明顯的“ New Search”或“ Reset”鏈接。他們可以選擇刪除以前的輸入，而不是刪除用戶的輸入。這也是一個微型步進器，可能會有所幫助，因此日期可能不會發生重大變化。如果您確定用戶可能會選擇日期，那么最好設置日期。

3.創建日歷疊加層：

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

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

4.包括日期跳轉：

如果您的客戶可能會選擇日期范圍很短的選項，則可以在日期輸入旁邊添加快速的“下一個”和“上一個”導航。例如，在預訂周末旅行時，客戶要么想在周四晚或周五早些時候離開，要么便宜些。因此，只需讓您點擊即可提供預期的結果，而不是讓客戶在日歷中重新輸入或選擇日期。Google Flights使用此功能來提高其日期選擇器的效率。能夠在幾個月和幾年之間跳轉可能會有所幫助。除此之外，迷你步進器是日期和時間選擇器的出色增強。但是，它不能替代日歷重疊，因為過多的敲擊會變得乏味。在可用性會話中，第十次點擊可以測試客戶的耐心。最終，

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

5.提供靈活性：

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

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

6.包括一個滑塊：

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

當范圍未定義但很靈活，或者您沒有太多選擇時，滑塊會發揮最佳作用。不幸的是，日期選擇器無法以這種方式運行，因為客戶不得不非常頻繁地進行調整和細化。因此，數字輸入比滑動選擇日期和時間的數字要快得多。僅在某些情況下，它們才有幫助。

寫到最后：

因此，設計日期和時間選擇器的第一步將是確定您是否需要一個用于濟南網站設計的應用程序。確定后，您可以選擇可以幫助用戶更快地選擇日期和時間的設計。這些技巧可以幫助您創建與您的界面相匹配的日期和時間選擇器，并增強網站的可用性。為了進一步使您的日期和時間選擇器有用，您可以包括更多相關的詳細信息，例如價格或可用性。另外，輸入字段取決于客戶的喜好，因此請確保包括一個使選擇更快的字段。