時(shí)間選擇控件在產(chǎn)品設(shè)計(jì)中是一個(gè)非常常見(jiàn)且通用的元素，在各種產(chǎn)品中幾乎都有應(yīng)用。隨著各種App和網(wǎng)站類(lèi)產(chǎn)品在不同操作場(chǎng)景中的滲透發(fā)展，我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)時(shí)也應(yīng)更追求功能實(shí)現(xiàn)方式的“恰如其分”。本文將探討時(shí)間選擇控件在各類(lèi)場(chǎng)景中的選擇與應(yīng)用。

?

01

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

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

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

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

?

02

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

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

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

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

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

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

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

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

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

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

在下圖中，需要用戶(hù)設(shè)置預(yù)約日期，若是文本錄入的形式，很可能會(huì)引發(fā)用戶(hù)思考是否需要填寫(xiě)年度信息，還是僅僅輸入月份和日期即可。使用時(shí)間選擇控件，按照控件的設(shè)置依次選擇年月日后再進(jìn)行提交，對(duì)用戶(hù)來(lái)說(shuō)更具對(duì)操作的確認(rèn)感。

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

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

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

?

03

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

1、判斷場(chǎng)景中時(shí)間要素的類(lèi)型：

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

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

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

所以，僅需要用戶(hù)指定一個(gè)確定的時(shí)刻，即可達(dá)成功能的使用目的。

例如設(shè)置鬧鐘及預(yù)定車(chē)票，鬧鐘的響起和列車(chē)的出發(fā)，都是在某個(gè)時(shí)刻發(fā)生的：

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

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

例如預(yù)訂酒店的場(chǎng)景，用戶(hù)需選擇“入住日期”及“退房日期”來(lái)選出符合入住需求的酒店：

?

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

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

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

我們的產(chǎn)品功能，需要滿(mǎn)足不同用戶(hù)在同一場(chǎng)景下的使用目的，因此對(duì)于場(chǎng)景中，用戶(hù)參與設(shè)置的時(shí)間要素，我們也應(yīng)當(dāng)考慮其精確度上的通用性，即對(duì)于時(shí)間選擇控件來(lái)說(shuō)，選擇合適的精確度，以保證不同用戶(hù)的使用需求。

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

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

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

雖然時(shí)間選擇控件支持多種時(shí)間精確度的定義可以滿(mǎn)足不同用戶(hù)的使用需求，但也不能為此，在不考慮實(shí)際使用場(chǎng)景的情況下將時(shí)間選擇控件的精確度定義得過(guò)細(xì)。這樣反而可能造成用戶(hù)在使用時(shí)間選擇控件時(shí)，進(jìn)行在其使用目的之外的多余操作。

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

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

如果在普通用戶(hù)使用的賬單產(chǎn)品中，也像商家那樣，使用精確度到“秒”的控件，而普通用戶(hù)卻沒(méi)有這樣精確的篩選需求。當(dāng)看到這樣的時(shí)間選擇控件，用戶(hù)可能會(huì)認(rèn)為需要按照時(shí)間選擇控件的格式，一直選擇到最細(xì)的時(shí)間精確度才能完成功能的使用。這無(wú)疑為用戶(hù)帶來(lái)了產(chǎn)品使用中的多余操作。

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

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

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

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

?

04

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

經(jīng)過(guò)上面的步驟，基本已經(jīng)可以確定出我們?cè)诠δ苤幸氲臅r(shí)間選擇控件是怎樣形式與怎樣精確度的。

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

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

1、增加參考值

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

時(shí)間參考值的存在，解決了用戶(hù)面對(duì)單一維度的時(shí)間展示形式時(shí)，難以做出選擇的問(wèn)題。除非用戶(hù)對(duì)時(shí)間的選擇意愿非常明確，若是時(shí)間選擇控件中僅展示時(shí)間的主體屬性，無(wú)法體現(xiàn)出不同時(shí)間的特性，對(duì)用戶(hù)來(lái)說(shuō)，他面對(duì)的選項(xiàng)間沒(méi)有足夠的差異度，就像是要求其從同類(lèi)項(xiàng)中選出特殊項(xiàng)一樣難。

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

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

2、設(shè)置初始值

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

對(duì)于時(shí)間選擇控件設(shè)置初始值，能對(duì)不熟悉產(chǎn)品功能的用戶(hù)形成操作引導(dǎo)，直觀展示產(chǎn)品功能。某些場(chǎng)景中，時(shí)間是數(shù)據(jù)展示內(nèi)容的主要決定因素，未對(duì)時(shí)間進(jìn)行定義時(shí)，無(wú)法獲取匹配的數(shù)據(jù)進(jìn)行展示。面對(duì)沒(méi)有值的操作界面，對(duì)不熟悉功能邏輯的用戶(hù)來(lái)說(shuō)，產(chǎn)品的使用會(huì)變得更加難以上手。

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

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

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

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

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

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

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

時(shí)間選擇控件中的常用設(shè)置是指，對(duì)于固定長(zhǎng)度時(shí)間段選擇的快捷操作。例如“今天”、“最近一月”、“最近三月”等等。時(shí)間選擇控件的常用設(shè)置，經(jīng)常應(yīng)用于不同用戶(hù)對(duì)于功能的使用目標(biāo)比較穩(wěn)定或相似的場(chǎng)景中。比如訂單查詢(xún)的場(chǎng)景，用戶(hù)對(duì)于時(shí)間區(qū)間的設(shè)置就比較穩(wěn)定。每月按照固定的周期來(lái)篩選訂單數(shù)據(jù)，隨后對(duì)幾個(gè)周期內(nèi)的數(shù)據(jù)進(jìn)行比對(duì)分析，可以得到更準(zhǔn)確的分析結(jié)果。

當(dāng)功能場(chǎng)景具有“用戶(hù)范圍固定、使用目的相同”，或“用戶(hù)范圍不定、使用目的相似”的特性時(shí)，可以在時(shí)間選擇控件中增加常用時(shí)間段快速設(shè)置按鈕。這樣可以幫助用戶(hù)快速達(dá)到使用目的，提高功能的使用效率。

4、選擇恰當(dāng)?shù)慕换ナ謩?shì)

恰當(dāng)?shù)慕换ナ謩?shì)，能夠幫助用戶(hù)快速選中目標(biāo)。交互手勢(shì)根據(jù)操作終端的不同，具有不同的類(lèi)型。若時(shí)間選擇控件的交互手勢(shì)選擇不當(dāng)，會(huì)提升用戶(hù)對(duì)時(shí)間選擇控件的誤操作次數(shù)，引發(fā)用戶(hù)的不滿(mǎn)。

我們應(yīng)當(dāng)選取功能操作所在的設(shè)備上，用戶(hù)慣用的操作方式/手勢(shì)，作為時(shí)間選擇控件的交互手勢(shì)。例如，在PC上，功能的操作空間相對(duì)較大，用戶(hù)也更習(xí)慣鼠標(biāo)點(diǎn)擊的方式來(lái)選中目標(biāo)。而移動(dòng)設(shè)備的屏幕較小，對(duì)于目標(biāo)密集的區(qū)域，通過(guò)點(diǎn)擊的方式比較難以選中目標(biāo)，這樣既會(huì)引發(fā)用戶(hù)的誤操作。誤操作的次數(shù)過(guò)多，更會(huì)導(dǎo)致用戶(hù)放棄使用產(chǎn)品。

?

總結(jié)

時(shí)間選擇控件是一個(gè)非常常見(jiàn)的元素，在各類(lèi)產(chǎn)品中都可能會(huì)出現(xiàn)，正是因?yàn)檫@樣，衍生出了各種各樣的形式。我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，不能一味照搬別人的產(chǎn)品，需要代入我們產(chǎn)品對(duì)應(yīng)的實(shí)際場(chǎng)景，選擇在最恰當(dāng)?shù)臅r(shí)間選擇控件。

↘好文推薦：

王慧文清華產(chǎn)品課

寫(xiě)給未來(lái)產(chǎn)品總監(jiān)的一封信

菜鳥(niǎo)網(wǎng)絡(luò)?|?寄件業(yè)務(wù)的產(chǎn)品邏輯

點(diǎn)個(gè)“在看”吧

總結(jié)

以上是生活随笔為你收集整理的时间选择控件在不同场景下的应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。