起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識時間選擇控件在不同場景下的應用
編輯導語：我們在使用很多產品時，都能夠接觸到時間選擇控件，這也是產品設計中常用的一個元素，也因此衍生出了各種各樣的形式。時間選擇控件的應用也需要代入到產品對應的實際場景，從而去選擇最恰當的時間選擇控件。接下來，本文作者就為我們分析了時間選擇控件在不同場景下的應用。
時間選擇控件在產品設計中是一個非常常見且通用的元素，在各種產品中幾乎都有應用。
隨著各種App和網站類產品在不同操作場景中的滲透發展，我們在進行產品設計時也應更追求功能實現方式的“恰如其分”。本文將探討時間選擇控件在各類場景中的選擇與應用。
一、什么是時間選擇控件
時間選擇控件是引導用戶選擇時刻或時段的一種可操作對象。
時間選擇控件的出現，表明了功能的實現需要用戶參與設置時間，或用戶可以按照時間維度來獲取所需信息。并且，它限定了功能中時間可被設置的格式，簡化了時間設置的操作流程，避免了用戶直接使用鍵盤輸入的情況下可能出現的多次試錯操作。
用戶通過功能中的時間選擇控件，可以快速了解功產品支持的功能操作，并且可以明確產品支持的時間設置格式，節省了用戶對產品功能的學習時間。
二、為什么需要在功能中加入時間選擇控件
時間格式可以看作是文本+數字+符號的選用及組合，具有非常多種。比如，我們在填寫一些登記表時，在出生日期那一欄，我們可以寫作：1990.1.1或1990/1/1或1990年1月1日，又或1990-1-1等等。
在設計產品功能時，使用時間選擇控件和文本錄入控件均可完成對時間的設置，但文本錄入控件需要用戶自行輸入，面對時間格式的多種選擇，勢必會令用戶感到為難。
若使用時間選擇控件則可以規避這樣的問題，這主要是由于時間選擇控件具有以下三個作用：
1. 明確時間設置格式
時間選擇控件明確了功能中時間設置的格式，用戶操作控件進行選擇即可。若使用文本輸入控件，有太多時間格式可選擇，這會在用戶操作時給用戶帶來使用負擔。
比如，在Excel中對于時間格式的設置，就有這么多種選擇，若將語言切換還為英語，還會出現更多類型。
使用時間選擇控件，用戶可以直接從界面的顯示上了解功能中的時間格式，免去了用戶對于時間格式選擇的苦惱。
2. 增強用戶操作的確認感
使用文本錄入的形式設置時間，由于時間格式太多又涉及到中英文語言的切換，在輸入的時候，用戶并不能確認自己選擇的格式是否時正確的。使用時間選擇控件，會消除用戶操作時的疑慮，增強操作的確認感。
在下圖中，需要用戶設置預約日期，若是文本錄入的形式，很可能會引發用戶思考是否需要填寫年度信息，還是僅僅輸入月份和日期即可。
使用時間選擇控件，按照控件的設置依次選擇年月日后再進行提交，對用戶來說更具對操作的確認感。
3. 避免用戶錯誤的錄入操作
文本輸入的多種時間格式和符號語言類型選擇，會明顯提高用戶錯誤錄入的幾率。在多次試錯操作后，用戶或許仍舊無法完成時間的設置。使用時間選擇控件，可以有效降低用戶錄入錯誤的幾率。
還是舉上面填寫預約日期的例子，如果用戶連續嘗試輸入多種符號與阿拉伯數字組合成的年月日格式，一直無法成功保存，最后發現功能限制預約日期為純數字的格式，用戶一定會非常崩潰。
三、怎樣選擇合適的時間選擇控件
1. 判斷場景中時間要素的類型
時間選擇控件從形式上可大致分為兩大類：選擇時間點和選擇時間段，我們可以根據場景中對時間要素類型的要求來進行引用。
1）場景中，功能完成的時間要素為確定的時刻，選擇指定時刻的控件
在這類場景中，用戶的行為或功能的執行是在某個時刻發生且能立即完成的，不具備時間上的連續性。
所以，僅需要用戶指定一個確定的時刻，即可達成功能的使用目的。例如設置鬧鐘及預定車票，鬧鐘的響起和列車的出發，都是在某個時刻發生的：
2）場景中，功能完成的時間要素為一段時間，選擇指定時段的控件
當用戶行為或功能執行具有“自某時開始，至某時結束，以及期間內所有時刻，當前操作均生效”的屬性時，場景中的時間要素為時間區間，就需要使用至少兩個指定時刻的控件來進行時段的設置。
這兩個指定時刻的控件，分別對應時間段中的開始時間和結束時間。例如：預訂酒店的場景，用戶需選擇“入住日期”及“退房日期”來選出符合入住需求的酒店：
2. 判斷場景對時間精確度的要求
在確定時間要素的類型之后，需要判斷場景中時間要素的精確度，從而得出時間選擇控件的形式。場景中時間要素的精確度，需要滿足用戶對于時間要素設置的需求，同時避免場景中時間設置功能的冗余操作。
1）恰當的時間精確度，需要滿足同一場景中不同用戶對時間要素的設置需求
我們的產品功能，需要滿足不同用戶在同一場景下的使用目的。
因此對于場景中，用戶參與設置的時間要素，我們也應當考慮其精確度上的通用性，即對于時間選擇控件來說，選擇合適的精確度，以保證不同用戶的使用需求。
例如同樣是設置提醒，當事件的時間跨度為一天時。
例如紀念日，用戶需要對事件進行全天提醒設置，則僅需要時間精確度為“天”的時間選擇控件即可；若是需要將事件的提醒范圍設置成一天中的某個時間段時，時間選擇控件的精確度便需要到“小時”或“分鐘”。
定義功能中的時間選擇控件精確度時，需要滿足場景下不同用戶的使用需求，提升功能的通用性。
2）恰當的時間精確度，應當避免場景中時間設置功能的冗余操作
雖然時間選擇控件支持多種時間精確度的定義可以滿足不同用戶的使用需求，但也不能為此，在不考慮實際使用場景的情況下將時間選擇控件的精確度定義得過細。
這樣反而可能造成用戶在使用時間選擇控件時，進行在其使用目的之外的多余操作。
例如，在支付寶查看交易記錄的場景中，對于普通用戶和入駐商家這兩類角色的用戶，兩者用到的時間選擇控件精確度是不同的。
商家使用精確度到“秒”的控件，由于其擁有的交易數據量很大，使用精確度更細的時間選擇控件，可以便于其篩選目標數據，若是使用精確度更粗的時間選擇控件，對于大量的交易數據可能起不到商家希望達到的篩選作用。
如果在普通用戶使用的賬單產品中，也像商家那樣，使用精確度到“秒”的控件，而普通用戶卻沒有這樣精確的篩選需求。
當看到這樣的時間選擇控件，用戶可能會認為需要按照時間選擇控件的格式，一直選擇到最細的時間精確度才能完成功能的使用。這無疑為用戶帶來了產品使用中的多余操作。
粗略來看，常用的時間選擇控件的精確度按照由粗到細可分為以下幾個層級：
我們可以先根據場景中用戶對功能的需求將時間選擇控件的精確度定位到較高的層級，再選擇對應層級中最合適的精確度。
若是最終選定的精確度顆粒較大，需注意是否滿足場景中不同用戶對功能的使用需求；若是精確度顆粒較小，則需確認是否會給目標用戶造成疑惑，從而進行不必要的操作。
另外，對于指定時間段的同一組控件，開始時間與結束時間的精確度需保證統一。
四、提升時間選擇控件在場景下的易用性
經過上面的步驟，基本已經可以確定出我們在功能中引入的時間選擇控件是怎樣形式與怎樣精確度的。
然而，同類型場景下衍生出的各個產品，在功能實現形式上大同小異，卻往往有那么幾個產品讓人感覺特別順手且便捷。他們的特殊在于，在功能設計上，通過一些小細節提升了產品整體的易用性。
我認為，對于時間選擇控件這個元素，可以從以下幾個維度來提升產品易用性。
1. 增加參考值
時間選擇控件中的參考值，指的是控件中時間在其他維度的屬性。
時間參考值的存在，解決了用戶面對單一維度的時間展示形式時，難以做出選擇的問題。
除非用戶對時間的選擇意愿非常明確，若是時間選擇控件中僅展示時間的主體屬性，無法體現出不同時間的特性，對用戶來說，他面對的選項間沒有足夠的差異度，就像是要求其從同類項中選出特殊項一樣難。
在時間選擇控件中增加時間的其他屬性，可令時間之間的差異度變得明顯，用戶借助這些參考值，更容易進行判斷并做出決定。
比較常見的做法有，將日期選擇控件設計成月歷的形式，用戶使用時可以參考某個日期對應的是禮拜幾。就像在一些出行類產品中，時間選擇控件上還會標注公休日、法定節假日，幫助用戶順利地選出時間。
2. 設置初始值
時間選擇控件中的初始值指的是，在用戶未對時間選擇控件進行操作前，時間選擇控件中默認選中的時間。
對于時間選擇控件設置初始值，能對不熟悉產品功能的用戶形成操作引導，直觀展示產品功能。
某些場景中，時間是數據展示內容的主要決定因素，未對時間進行定義時，無法獲取匹配的數據進行展示。面對沒有值的操作界面，對不熟悉功能邏輯的用戶來說，產品的使用會變得更加難以上手。
所以在這樣的功能場景中，通過為時間選擇控件定義初始值，可以幫助初次進入功能的用戶快速知曉產品功能，進行主動操作后進一步了解產品功能。
通常，在時刻選擇控件中，初始值會設置為用戶進入當前功能的時間。
而在時段選擇控件中，會對開始時間和結束時間都設置初始值，其中結束時間的初始值常常取用戶進入當前功能的時間。
另外，時段選擇控件的初始值的設置需要遵循業務屬性。
比如在查詢交易賬單的功能中，賬單中的數據產生于過去，賬單查詢具有“至今為止”的業務特性。所以，在為賬單篩選器中的時間選擇控件設置默認時間時，首先能夠確定的是結束時間對應的默認值。
但在預訂酒店功能中，入住日期和離店日期均是未來的日期，到店入住的行為具有“自今而后”的屬性。并且入住日期是離店日期確定的前提，所以會對入住日期取初始值，再順延n個自然日，作為離店日期的初始值。
3. 提供常用設置
時間選擇控件中的常用設置是指，對于固定長度時間段選擇的快捷操作，例如“今天”、“最近一月”、“最近三月”等等。
時間選擇控件的常用設置，經常應用于不同用戶對于功能的使用目標比較穩定或相似的場景中。
比如訂單查詢的場景，用戶對于時間區間的設置就比較穩定。每月按照固定的周期來篩選訂單數據，隨后對幾個周期內的數據進行比對分析，可以得到更準確的分析結果。
當功能場景具有“用戶范圍固定、使用目的相同”，或“用戶范圍不定、使用目的相似”的特性時，可以在時間選擇控件中增加常用時間段快速設置按鈕。
這樣可以幫助用戶快速達到使用目的，提高功能的使用效率。
4. 選擇恰當的交互手勢
恰當的交互手勢，能夠幫助用戶快速選中目標。
交互手勢根據操作終端的不同，具有不同的類型。若時間選擇控件的交互手勢選擇不當，會提升用戶對時間選擇控件的誤操作次數，引發用戶的不滿。
我們應當選取功能操作所在的設備上，用戶慣用的操作方式/手勢，作為時間選擇控件的交互手勢。
例如：在PC上，功能的操作空間相對較大，用戶也更習慣鼠標點擊的方式來選中目標。
而移動設備的屏幕較小，對于目標密集的區域，通過點擊的方式比較難以選中目標，這樣既會引發用戶的誤操作。誤操作的次數過多，更會導致用戶放棄使用產品。
五、總結
時間選擇控件是一個非常常見的元素，在各類產品中都可能會出現，正是因為這樣，衍生出了各種各樣的形式。
我們在進行產品設計時，不能一味照搬別人的產品，需要代入我們產品對應的實際場景，選擇在最恰當的時間選擇控件。
作者：今天吃洋蔥；公眾號：今天吃洋蔥
本文由 @今天吃洋蔥 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
