網(wǎng)頁設(shè)計中如何正確的使用日期和時間選擇器

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

1.添加數(shù)值：

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

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

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

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

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

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

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

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

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

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

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

5.提供靈活性：

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

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

6.包括一個滑塊：

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

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

寫到最后：

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

網(wǎng)站標(biāo)題：網(wǎng)頁設(shè)計中如何正確的使用日期和時間選擇器
文章路徑：http://muchs.cn/news/192124.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、Google、響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站策劃、App開發(fā)

廣告

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