編輯導(dǎo)語：我們在使用很多產(chǎn)品時(shí)，都能夠接觸到時(shí)間選擇控件，這也是產(chǎn)品設(shè)計(jì)中常用的一個(gè)元素，也因此衍生出了各種各樣的形式。時(shí)間選擇控件的應(yīng)用也需要代入到產(chǎn)品對(duì)應(yīng)的實(shí)際場景，從而去選擇最恰當(dāng)?shù)臅r(shí)間選擇控件。接下來，本文作者就為我們分析了時(shí)間選擇控件在不同場景下的應(yīng)用。

時(shí)間選擇控件在產(chǎn)品設(shè)計(jì)中是一個(gè)非常常見且通用的元素，在各種產(chǎn)品中幾乎都有應(yīng)用。

隨著各種App和網(wǎng)站類產(chǎn)品在不同操作場景中的滲透發(fā)展，我們在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)也應(yīng)更追求功能實(shí)現(xiàn)方式的“恰如其分”。本文將探討時(shí)間選擇控件在各類場景中的選擇與應(yīng)用。

一、什么是時(shí)間選擇控件

時(shí)間選擇控件是引導(dǎo)用戶選擇時(shí)刻或時(shí)段的一種可操作對(duì)象。

時(shí)間選擇控件的出現(xiàn)，表明了功能的實(shí)現(xiàn)需要用戶參與設(shè)置時(shí)間，或用戶可以按照時(shí)間維度來獲取所需信息。并且，它限定了功能中時(shí)間可被設(shè)置的格式，簡化了時(shí)間設(shè)置的操作流程，避免了用戶直接使用鍵盤輸入的情況下可能出現(xiàn)的多次試錯(cuò)操作。

用戶通過功能中的時(shí)間選擇控件，可以快速了解功產(chǎn)品支持的功能操作，并且可以明確產(chǎn)品支持的時(shí)間設(shè)置格式，節(jié)省了用戶對(duì)產(chǎn)品功能的學(xué)習(xí)時(shí)間。

二、為什么需要在功能中加入時(shí)間選擇控件

時(shí)間格式可以看作是文本+數(shù)字+符號(hào)的選用及組合，具有非常多種。比如，我們在填寫一些登記表時(shí)，在出生日期那一欄，我們可以寫作：1990.1.1或1990/1/1或1990年1月1日，又或1990-1-1等等。

在設(shè)計(jì)產(chǎn)品功能時(shí)，使用時(shí)間選擇控件和文本錄入控件均可完成對(duì)時(shí)間的設(shè)置，但文本錄入控件需要用戶自行輸入，面對(duì)時(shí)間格式的多種選擇，勢必會(huì)令用戶感到為難。

若使用時(shí)間選擇控件則可以規(guī)避這樣的問題，這主要是由于時(shí)間選擇控件具有以下三個(gè)作用：

1. 明確時(shí)間設(shè)置格式

時(shí)間選擇控件明確了功能中時(shí)間設(shè)置的格式，用戶操作控件進(jìn)行選擇即可。若使用文本輸入控件，有太多時(shí)間格式可選擇，這會(huì)在用戶操作時(shí)給用戶帶來使用負(fù)擔(dān)。

比如，在Excel中對(duì)于時(shí)間格式的設(shè)置，就有這么多種選擇，若將語言切換還為英語，還會(huì)出現(xiàn)更多類型。

使用時(shí)間選擇控件，用戶可以直接從界面的顯示上了解功能中的時(shí)間格式，免去了用戶對(duì)于時(shí)間格式選擇的苦惱。

2. 增強(qiáng)用戶操作的確認(rèn)感

使用文本錄入的形式設(shè)置時(shí)間，由于時(shí)間格式太多又涉及到中英文語言的切換，在輸入的時(shí)候，用戶并不能確認(rèn)自己選擇的格式是否時(shí)正確的。使用時(shí)間選擇控件，會(huì)消除用戶操作時(shí)的疑慮，增強(qiáng)操作的確認(rèn)感。

在下圖中，需要用戶設(shè)置預(yù)約日期，若是文本錄入的形式，很可能會(huì)引發(fā)用戶思考是否需要填寫年度信息，還是僅僅輸入月份和日期即可。

使用時(shí)間選擇控件，按照控件的設(shè)置依次選擇年月日后再進(jìn)行提交，對(duì)用戶來說更具對(duì)操作的確認(rèn)感。

3. 避免用戶錯(cuò)誤的錄入操作

文本輸入的多種時(shí)間格式和符號(hào)語言類型選擇，會(huì)明顯提高用戶錯(cuò)誤錄入的幾率。在多次試錯(cuò)操作后，用戶或許仍舊無法完成時(shí)間的設(shè)置。使用時(shí)間選擇控件，可以有效降低用戶錄入錯(cuò)誤的幾率。

還是舉上面填寫預(yù)約日期的例子，如果用戶連續(xù)嘗試輸入多種符號(hào)與阿拉伯?dāng)?shù)字組合成的年月日格式，一直無法成功保存，最后發(fā)現(xiàn)功能限制預(yù)約日期為純數(shù)字的格式，用戶一定會(huì)非常崩潰。

三、怎樣選擇合適的時(shí)間選擇控件

1. 判斷場景中時(shí)間要素的類型

時(shí)間選擇控件從形式上可大致分為兩大類：選擇時(shí)間點(diǎn)和選擇時(shí)間段，我們可以根據(jù)場景中對(duì)時(shí)間要素類型的要求來進(jìn)行引用。

1）場景中，功能完成的時(shí)間要素為確定的時(shí)刻，選擇指定時(shí)刻的控件

在這類場景中，用戶的行為或功能的執(zhí)行是在某個(gè)時(shí)刻發(fā)生且能立即完成的，不具備時(shí)間上的連續(xù)性。

所以，僅需要用戶指定一個(gè)確定的時(shí)刻，即可達(dá)成功能的使用目的。例如設(shè)置鬧鐘及預(yù)定車票，鬧鐘的響起和列車的出發(fā)，都是在某個(gè)時(shí)刻發(fā)生的：

2）場景中，功能完成的時(shí)間要素為一段時(shí)間，選擇指定時(shí)段的控件

當(dāng)用戶行為或功能執(zhí)行具有“自某時(shí)開始，至某時(shí)結(jié)束，以及期間內(nèi)所有時(shí)刻，當(dāng)前操作均生效”的屬性時(shí)，場景中的時(shí)間要素為時(shí)間區(qū)間，就需要使用至少兩個(gè)指定時(shí)刻的控件來進(jìn)行時(shí)段的設(shè)置。

這兩個(gè)指定時(shí)刻的控件，分別對(duì)應(yīng)時(shí)間段中的開始時(shí)間和結(jié)束時(shí)間。例如：預(yù)訂酒店的場景，用戶需選擇“入住日期”及“退房日期”來選出符合入住需求的酒店：

2. 判斷場景對(duì)時(shí)間精確度的要求

在確定時(shí)間要素的類型之后，需要判斷場景中時(shí)間要素的精確度，從而得出時(shí)間選擇控件的形式。場景中時(shí)間要素的精確度，需要滿足用戶對(duì)于時(shí)間要素設(shè)置的需求，同時(shí)避免場景中時(shí)間設(shè)置功能的冗余操作。

1）恰當(dāng)?shù)臅r(shí)間精確度，需要滿足同一場景中不同用戶對(duì)時(shí)間要素的設(shè)置需求

我們的產(chǎn)品功能，需要滿足不同用戶在同一場景下的使用目的。

因此對(duì)于場景中，用戶參與設(shè)置的時(shí)間要素，我們也應(yīng)當(dāng)考慮其精確度上的通用性，即對(duì)于時(shí)間選擇控件來說，選擇合適的精確度，以保證不同用戶的使用需求。

例如同樣是設(shè)置提醒，當(dāng)事件的時(shí)間跨度為一天時(shí)。

例如紀(jì)念日，用戶需要對(duì)事件進(jìn)行全天提醒設(shè)置，則僅需要時(shí)間精確度為“天”的時(shí)間選擇控件即可；若是需要將事件的提醒范圍設(shè)置成一天中的某個(gè)時(shí)間段時(shí)，時(shí)間選擇控件的精確度便需要到“小時(shí)”或“分鐘”。

定義功能中的時(shí)間選擇控件精確度時(shí)，需要滿足場景下不同用戶的使用需求，提升功能的通用性。

2）恰當(dāng)?shù)臅r(shí)間精確度，應(yīng)當(dāng)避免場景中時(shí)間設(shè)置功能的冗余操作

雖然時(shí)間選擇控件支持多種時(shí)間精確度的定義可以滿足不同用戶的使用需求，但也不能為此，在不考慮實(shí)際使用場景的情況下將時(shí)間選擇控件的精確度定義得過細(xì)。

這樣反而可能造成用戶在使用時(shí)間選擇控件時(shí)，進(jìn)行在其使用目的之外的多余操作。

例如，在支付寶查看交易記錄的場景中，對(duì)于普通用戶和入駐商家這兩類角色的用戶，兩者用到的時(shí)間選擇控件精確度是不同的。

商家使用精確度到“秒”的控件，由于其擁有的交易數(shù)據(jù)量很大，使用精確度更細(xì)的時(shí)間選擇控件，可以便于其篩選目標(biāo)數(shù)據(jù)，若是使用精確度更粗的時(shí)間選擇控件，對(duì)于大量的交易數(shù)據(jù)可能起不到商家希望達(dá)到的篩選作用。

如果在普通用戶使用的賬單產(chǎn)品中，也像商家那樣，使用精確度到“秒”的控件，而普通用戶卻沒有這樣精確的篩選需求。

當(dāng)看到這樣的時(shí)間選擇控件，用戶可能會(huì)認(rèn)為需要按照時(shí)間選擇控件的格式，一直選擇到最細(xì)的時(shí)間精確度才能完成功能的使用。這無疑為用戶帶來了產(chǎn)品使用中的多余操作。

粗略來看，常用的時(shí)間選擇控件的精確度按照由粗到細(xì)可分為以下幾個(gè)層級(jí)：

我們可以先根據(jù)場景中用戶對(duì)功能的需求將時(shí)間選擇控件的精確度定位到較高的層級(jí)，再選擇對(duì)應(yīng)層級(jí)中最合適的精確度。

若是最終選定的精確度顆粒較大，需注意是否滿足場景中不同用戶對(duì)功能的使用需求；若是精確度顆粒較小，則需確認(rèn)是否會(huì)給目標(biāo)用戶造成疑惑，從而進(jìn)行不必要的操作。

另外，對(duì)于指定時(shí)間段的同一組控件，開始時(shí)間與結(jié)束時(shí)間的精確度需保證統(tǒng)一。

四、提升時(shí)間選擇控件在場景下的易用性

經(jīng)過上面的步驟，基本已經(jīng)可以確定出我們在功能中引入的時(shí)間選擇控件是怎樣形式與怎樣精確度的。

然而，同類型場景下衍生出的各個(gè)產(chǎn)品，在功能實(shí)現(xiàn)形式上大同小異，卻往往有那么幾個(gè)產(chǎn)品讓人感覺特別順手且便捷。他們的特殊在于，在功能設(shè)計(jì)上，通過一些小細(xì)節(jié)提升了產(chǎn)品整體的易用性。

我認(rèn)為，對(duì)于時(shí)間選擇控件這個(gè)元素，可以從以下幾個(gè)維度來提升產(chǎn)品易用性。

1. 增加參考值

時(shí)間選擇控件中的參考值，指的是控件中時(shí)間在其他維度的屬性。

時(shí)間參考值的存在，解決了用戶面對(duì)單一維度的時(shí)間展示形式時(shí)，難以做出選擇的問題。

除非用戶對(duì)時(shí)間的選擇意愿非常明確，若是時(shí)間選擇控件中僅展示時(shí)間的主體屬性，無法體現(xiàn)出不同時(shí)間的特性，對(duì)用戶來說，他面對(duì)的選項(xiàng)間沒有足夠的差異度，就像是要求其從同類項(xiàng)中選出特殊項(xiàng)一樣難。

在時(shí)間選擇控件中增加時(shí)間的其他屬性，可令時(shí)間之間的差異度變得明顯，用戶借助這些參考值，更容易進(jìn)行判斷并做出決定。

比較常見的做法有，將日期選擇控件設(shè)計(jì)成月歷的形式，用戶使用時(shí)可以參考某個(gè)日期對(duì)應(yīng)的是禮拜幾。就像在一些出行類產(chǎn)品中，時(shí)間選擇控件上還會(huì)標(biāo)注公休日、法定節(jié)假日，幫助用戶順利地選出時(shí)間。

2. 設(shè)置初始值

時(shí)間選擇控件中的初始值指的是，在用戶未對(duì)時(shí)間選擇控件進(jìn)行操作前，時(shí)間選擇控件中默認(rèn)選中的時(shí)間。

對(duì)于時(shí)間選擇控件設(shè)置初始值，能對(duì)不熟悉產(chǎn)品功能的用戶形成操作引導(dǎo)，直觀展示產(chǎn)品功能。

某些場景中，時(shí)間是數(shù)據(jù)展示內(nèi)容的主要決定因素，未對(duì)時(shí)間進(jìn)行定義時(shí)，無法獲取匹配的數(shù)據(jù)進(jìn)行展示。面對(duì)沒有值的操作界面，對(duì)不熟悉功能邏輯的用戶來說，產(chǎn)品的使用會(huì)變得更加難以上手。

所以在這樣的功能場景中，通過為時(shí)間選擇控件定義初始值，可以幫助初次進(jìn)入功能的用戶快速知曉產(chǎn)品功能，進(jìn)行主動(dòng)操作后進(jìn)一步了解產(chǎn)品功能。

通常，在時(shí)刻選擇控件中，初始值會(huì)設(shè)置為用戶進(jìn)入當(dāng)前功能的時(shí)間。

而在時(shí)段選擇控件中，會(huì)對(duì)開始時(shí)間和結(jié)束時(shí)間都設(shè)置初始值，其中結(jié)束時(shí)間的初始值常常取用戶進(jìn)入當(dāng)前功能的時(shí)間。

另外，時(shí)段選擇控件的初始值的設(shè)置需要遵循業(yè)務(wù)屬性。

比如在查詢交易賬單的功能中，賬單中的數(shù)據(jù)產(chǎn)生于過去，賬單查詢具有“至今為止”的業(yè)務(wù)特性。所以，在為賬單篩選器中的時(shí)間選擇控件設(shè)置默認(rèn)時(shí)間時(shí)，首先能夠確定的是結(jié)束時(shí)間對(duì)應(yīng)的默認(rèn)值。

但在預(yù)訂酒店功能中，入住日期和離店日期均是未來的日期，到店入住的行為具有“自今而后”的屬性。并且入住日期是離店日期確定的前提，所以會(huì)對(duì)入住日期取初始值，再順延n個(gè)自然日，作為離店日期的初始值。

3. 提供常用設(shè)置

時(shí)間選擇控件中的常用設(shè)置是指，對(duì)于固定長度時(shí)間段選擇的快捷操作，例如“今天”、“最近一月”、“最近三月”等等。

時(shí)間選擇控件的常用設(shè)置，經(jīng)常應(yīng)用于不同用戶對(duì)于功能的使用目標(biāo)比較穩(wěn)定或相似的場景中。

比如訂單查詢的場景，用戶對(duì)于時(shí)間區(qū)間的設(shè)置就比較穩(wěn)定。每月按照固定的周期來篩選訂單數(shù)據(jù)，隨后對(duì)幾個(gè)周期內(nèi)的數(shù)據(jù)進(jìn)行比對(duì)分析，可以得到更準(zhǔn)確的分析結(jié)果。

當(dāng)功能場景具有“用戶范圍固定、使用目的相同”，或“用戶范圍不定、使用目的相似”的特性時(shí)，可以在時(shí)間選擇控件中增加常用時(shí)間段快速設(shè)置按鈕。

這樣可以幫助用戶快速達(dá)到使用目的，提高功能的使用效率。

4. 選擇恰當(dāng)?shù)慕换ナ謩?/h3>

恰當(dāng)?shù)慕换ナ謩荩軌驇椭脩艨焖龠x中目標(biāo)。

交互手勢根據(jù)操作終端的不同，具有不同的類型。若時(shí)間選擇控件的交互手勢選擇不當(dāng)，會(huì)提升用戶對(duì)時(shí)間選擇控件的誤操作次數(shù)，引發(fā)用戶的不滿。

我們應(yīng)當(dāng)選取功能操作所在的設(shè)備上，用戶慣用的操作方式/手勢，作為時(shí)間選擇控件的交互手勢。

例如：在PC上，功能的操作空間相對(duì)較大，用戶也更習(xí)慣鼠標(biāo)點(diǎn)擊的方式來選中目標(biāo)。

而移動(dòng)設(shè)備的屏幕較小，對(duì)于目標(biāo)密集的區(qū)域，通過點(diǎn)擊的方式比較難以選中目標(biāo)，這樣既會(huì)引發(fā)用戶的誤操作。誤操作的次數(shù)過多，更會(huì)導(dǎo)致用戶放棄使用產(chǎn)品。

五、總結(jié)

時(shí)間選擇控件是一個(gè)非常常見的元素，在各類產(chǎn)品中都可能會(huì)出現(xiàn)，正是因?yàn)檫@樣，衍生出了各種各樣的形式。

我們在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，不能一味照搬別人的產(chǎn)品，需要代入我們產(chǎn)品對(duì)應(yīng)的實(shí)際場景，選擇在最恰當(dāng)?shù)臅r(shí)間選擇控件。

作者：今天吃洋蔥；公眾號(hào)：今天吃洋蔥

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

題圖來自Unsplash，基于CC0協(xié)議