在手機上設置起床鬧鐘或者提醒事項時，我們都會遇到時間選擇組件的小伙伴。平日使用中大家都應該對它不陌生，但是提到要設計它，應該遵循怎樣的原則去考慮？要注意的方面有哪些？本篇文章將給大家講講~

時間選擇組件的分類

一、基于需求場景，可以分為“選擇時間點”類型和“選擇時間段”類型。

如上圖示例，在滴滴預約打車的場景下，用戶期望師傅能在某個精確的時間點間附近來接駕，由此“選擇時間點”類型組件提供了日期、小時、分鐘三個維度的選擇；在搜索機票的場景下，用戶期望對某一段日期范圍進行搜索，由此“選擇時間段”類型組件提供了日期維度的選擇。不同的需求場景催生不同的時間選擇組件。

二、基于操作方式可分為：點擊型（Click）、滾輪型（Picker）和點擊輸入型（Click&Input）。

在移動端上，常用點擊型和滾輪型這兩種類型，一般單時間維度選擇的組件用點擊型，多時間維度選擇的組件用滾輪型。如上圖所示，選擇自由程度可以從日期、時段、小時和分鐘四種維度出發的話，就需要用滾輪型來實現，因為滾輪型可以在一定的操作空間里順暢地提供用戶更多選擇。其中滾輪型是基于iOS DesignGuide的官方認證形式，大部分產品為了匹配iOS風格都會使用這種方式；但在安卓上，Material Design把滾輪型稍作了變形，把其操作方式映射為一個時鐘的模式，通過滾動時鐘表盤的操作來達到選擇時間的目的，跟調節機械手表的方式類似。

在PC端（Windows系統與MacOS系統）上，常用點擊輸入型。如上圖最右的方式所示，是從Windows早期年代延展過來的，無論是Windows系統還是MacOS系統上打開也是幾乎完全一致的形式。

設計原則

想要為它設計，我們先來明確組件設計的原則。時間選擇組件就類似一個小型表單，對于表單而言它的易用價值大于它的感官價值。所以從體感流程上考慮，設計原則有以下三點：

一、想

著手設計之前，應該想清楚場景對時間選擇組件的需求程度。這是一個驗證需求合理性的步驟，設計應該結合用戶使用場景，去評判這個組件對用戶需求滿足的價值。而且由于使用場景還決定了它的操作復雜程度，組件中的時間內容結構（只可選日期，還是既可選日期又可選小時）也要在這個階段想清楚。

二、看

得到明確的方案框架后，就需要看組件的構建內容和提示文案上是否都清晰明了地向用戶傳達功能含義。禁止花哨拐彎抹角的概念傳達，功能概念越直接明了且減輕思考成本越好。

三、用

在組件真正使用的過程中操作成本越少越好，因為大家都不想把時間花費在完成表單上。所以在設計落地方案的時候，要保證用戶在用的時候操作步驟簡單，這樣這個“小表單”才能高效地完成它的使命。為什么輸入型的操作方式現在越來越少見？就是因為它在所有操作中對比使用而言是最復雜的一種，用戶既需要鍵盤輸入又要點擊，操作成本大。如果還要兼顧輸入操作帶來的特殊狀態判斷，也浪費開發資源，倒不如直接提供點擊操作就完成需求了。

以上的原則既定，是將時間選擇組件定位于像表單的立場那樣思考。后續遇到真正表單設計的時候也可以參考這些原則。

時間選擇組件的構造

明確原則后，就可以著手考慮要怎么設計一個時間選擇組件了。先從基本構造開始了解：

一、時間信息（要選擇的時間維度內容）

二、內容存放區（存放已選擇的信息）

三、行為（操作按鈕）

四、驗證狀態（對操作的反饋展示）

一般的時間選擇組件都由以上基本元素構成。其中某些場景下，行為（操作按鈕）中的最終確認按鈕可以被省略。

比如像我在“高鐵管家”App上選擇乘車時間的時候，時間選擇組件承載于一個新頁面中，當對我對“7月17號”這個日期點擊后，則自動選中并返回上級頁面（參考上面動圖）。這種方式在操作順暢上來講沒問題，能讓我更快地進入查看搜索結果的流程，也且滿足“操作簡單”的原則。

從PC端舉個栗子

下面通過舉例一些常見產品中對時間選擇組件的設計，進而剖析設計組件中需要考慮的問題。

在“選擇時間段”類型中，舉例PC端的兩個常見旅游平臺“飛豬”和“天巡”作對比分析。評判維度就基于組件的構造元素來分別探討：

時間信息展示上：展示用戶所需

旅游用戶的需求都是為未來作計劃的，內容展示上用戶能直接查看本月和下月兩個月時間信息，可以避免過多的翻頁操作。其中當天日期被代替以相對時間概念“今天”，原因是由于很大部分情況下大家都會忘記今天到底是幾號，今天到底星期幾的實時，所以相對概念會比只展示日期數字的方式更直觀地表達現在的時間狀態，也暗示用戶的可選區間從這里開始。

從樣式上來看，信息展示隱喻了日歷的概念，使表現模型更加符合用戶的心理模型。

內容存放區上：提供有效的默認值，文本框水平排布以方便信息確認

內容存放區在PC端上會以文本框形式存在，展示狀態有兩種：默認狀態和已選狀態。

在默認狀態下，天巡會把文本框中的默認值設置為當天時間至往后四天的日期，而飛豬則將默認值以日期格式信息填充。這樣的設置方式來講，天巡的方式會更好，起碼對某些當天出發的用戶減少了出發日期的選擇成本。但像飛豬設置的時間格式，從理解上來講，可能大部分人都會懵逼這是什么，容易造成認知疑惑。

在信息排布上，飛豬對出發日期和返程日期的文本框采用了垂直排布，天巡采用了水平排布。從上圖中已選狀態的對比來看，展開日歷彈層選擇的狀態下，飛豬垂直排布的方式用戶無法對兩個時間信息進行查看確認。天巡水平排布的方式更適合令用戶隨時隨地地對已選信息進行確認。

行為上：連貫必要操作

天巡中的出發日期選中后，則會觸發文本框自動聚焦到返程日期，操作步驟上用戶最少點擊三次則可完成日期選擇。但由于飛豬上不會自動聚焦，所以最少點擊次數是四次。又因為聚焦至返程日期文本框的操作是完成日期選擇的必要步驟，所以自動聚焦能使操作更加連貫，感受上更加自然順暢地就能查看到想看的搜索結果了。

還有的是天巡還提供了別的行為操作按鈕：如“7月出發”、“8月出發”和“全年出發”。猜測的設計意圖是，來搜索機票的用戶大部分不一定都有明確旅游時間，可能注重價格偏好的用戶會考慮從某個范圍的日期內篩選機票，這些操作按鈕能將時間選擇的成本轉化為一步。這里也看出滿足了“場景為先”的設計原則。

另外還有兩個小細節值得探討：

①飛豬的時間信息選擇彈層的第一頁最左側會有一個置灰的左箭頭按鈕，由于根本沒有展示上月時間信息的必要，所以這個按鈕在第一頁的情況下完全可以去掉，待用戶切換到第二頁的時候再出現。

②飛豬中有彈層關閉按鈕（最右上角），但天巡的彈層中沒有。從飛豬角度考慮，選中就能關閉彈層，點擊其他文本框能關閉彈層，點擊頁面其他非內容區域也能關閉彈層，到底有沒有用戶會需要一個明顯按鈕去關閉它？不知道設計者是否有其他意圖，從內容復雜性和可用性來講我認為是可以去掉的。

驗證狀態上：禁止非常理的錯誤狀態被觸發

這個點上飛豬和天巡都是采用了一致的邏輯方式：當出發日期選擇了7月4日，返程日期選擇了7月8日，在修改返程日期的時候，是不能選擇7月4日前的日期。因為這是不符合常理的時間設置。通過系統的操作禁用就能減少不必要的錯誤狀態提示，也減輕了對特殊狀態判斷的開發成本。

從App端再舉個栗子

在“選擇時間點”場景中，挑選了iOS端的鬧鐘和高德地圖App來進行對比分析。

時間信息展示上：與PC端類似，以相對時間概念輔助信息定位

比較特殊的是，在高德地圖上把滾輪和篩選項的形式結合在一個彈層中了。但仔細看才發現滾輪內容上還有一個“現在出發”的選項，因為選擇內容的形式差異性太大，被忽略的概率也會增大。

內容存放區上：基于需求場景提供有效的默認值

在App端上存放區就不一定是文本框內容，比如鬧鐘就比較特殊，它的確定內容存放在上一頁鬧鐘列表頁中。而高德地圖則在首次打開的場景便在內容存放區提供了默認值，對于無需打開彈層進行修改操作的用戶比較友好，在“選擇時間點”類型的場景下，也一般使用當前時間來作為默認值。

行為上：連續的時間點可考慮循環滾動

在鬧鐘應用中發現一個值得點贊的細節點：當本機系統設置了12小時制，每滾動完小時中的12個數字，會影響到左邊上午/下午的時段信息變化。比如當前選擇的時間是“上午 11”，當把小時滾輪切換到“12”，左側滾輪會自動為你切換到“下午”選項。這樣的關聯性操作能夠令時間選擇器更加人性化，用戶只需聚焦更少的操作區域就能完成需求。但由于高德地圖中的滾輪是沒有設置循環滾動的，如果采用了這種邏輯的話，也會更加便利，體驗來講對于漸進的日期信息，推薦循環滾動這種方式。

驗證狀態上：與PC端類似，禁止非常理的錯誤狀態被觸發

由于鬧鐘的時間信息設置不會有非常理情況出現，所以不需要驗證。但在高德地圖中，如果小時滾輪被切換到了當天過去的時間點，則會被強制自動回滾當前時間點的值。當用戶在當前頁面停留過久，也會被強制回滾。比如打開頁面的時間是今天10點55分，但真正操作時的時間是11點15分，那么點擊確定按鈕后會被強制切換為“現在出發”選項下的搜索結果。

從可能遇到的特殊狀態來看，高德地圖都提供了應對措施，且把用戶的操作盡量往正確的操作。

如何對時間選擇組件進行設計

基于上面所列舉PC端和App端的例子可以發現，有的設計方向其實是趨同的。除了遵循設計原則之外，還基于競品的分析總結了以下六點注意事項來輔助我們更好地設計時間選擇組件：

一、遵循場景為先的原則，為實際用戶需求設計

開始設計前很重要的步驟，得先明確在哪個用戶使用場景設計時間選擇組件，需要展示的時間信息維度有哪些，單位時間信息維度內，值與值之間的差距應該是基于什么規則/常理。

二、選擇合適的載體和操作方式

時間選擇組件的載體有彈窗、頁面兩種形式。選擇方式還是以“操作簡單”的原則為前提。

①App端：若是一個主操作（比如設置一個系統鬧鐘），基于操作形態的穩定性，常規設置頁面以頁面載體展示，操作方式優先滾輪型。還有像選擇日期時間維度的場景，由于本月和下月的日期信息較多，在內容信息量大又需要平鋪展示的時候就適宜用頁面形式承載。

若是一個輔佐操作（比如在GTD中添加一條代辦項，提示時間設置只是個輔助功能），那可以選擇彈窗載體展示，操作方式基于功能復雜性選擇滾輪型或者點擊型。另外基于單手操作的考慮，彈窗還可以考慮底部彈出的形式。

②PC端：一般為非模態彈窗載體展示，操作方式可以只提供點擊型。

三、合理設置時間選擇組件中的默認值

像上面所提的鬧鐘和高德地圖的形式一樣，設置一個默認時間點比設置提示文案或時間格式更有意義。但默認值不僅可以代以當前時間，有的場景還是要回歸需求考慮。

舉一個項目中遇到的例子講講：如上圖“京東醫生”App截圖所示，當時的頁面需求為：為醫生設計一個添加電話問診時段的功能，以令醫生的可接診時間展示在患者端前臺頁面。在考慮默認值設置的過程中，曾糾結了好久到底要把哪個值設置為默認值。

最終從醫生的操作需求角度出發，決定提供一個醫生常設時段作為默認值，常設時段代表醫生們都會經常選擇這個時段作為問診時間，這樣設置能方便只添加這個時段區間的醫生們快速進行添加。后續也還可以基于醫生們的實際添加情況動態調整默認值，以達到更效率的效果。

四、設計操作更加連貫的交互方式

“選擇時間點”類型的組件可以考慮單個滾輪滿足循環滾動邏輯，令操作區域可以聚焦到某兩個甚至一個滾輪中；“選擇時間段”類型的組件可以考慮選擇開始時間和結束時間是連續操作的，不要從中插入其他多余步驟以額外增加操作成本。

五、注意特殊狀態場景的反饋

注意檢查當前設計是否會觸發選到過去時間點的特殊狀態。可以考慮不必要的選擇值置灰或者強制正向引導（如上文提到高德地圖的邏輯）。

另外對于“選擇時間段”類型的組件，如果遇到像上面京東醫生App中添加問診時段的需求場景，注意把連續時段信息合并。因為醫生們可以先添加“9:00—10:00”時段，再添加“10:00—11:00”時段。這種情況下，為了保證頁面信息更輕量與減輕閱讀負擔，可以將前端展示邏輯設置為把連續時段合并成一個時段展示，即“9:00—11:00”時間段。這種驗證場景也需要先向產品確認可行性并盡量推動落地，以滿足更好地展示信息。

六、時間格式的統一性

一般情況下，時間段間用“—”進行連接，時間格式選用“年/月/日”的方式。時間格式中的分隔符到底選“/”還是“-”，沒有特別的傾向，只要基于平臺統一性和內容展示區域的大小考慮清楚，選擇一種合適的即可。

五感下的創新

除了上面所說的設計關注點之外，最近還有其他在時間選擇組件中的形式創新誕生，以滿足更好地完成使命。

觸感反饋

在iOS 7之后，iOS上的滾輪選擇器在滾動信息元素時添加了振動觸感與滾動音效，令虛擬操作更加逼真。

動效反饋

跟時間選擇場景有關的交互創新驚嘆之作，便不得不提起“Peek的日歷”這款iOS端應用。它利用了炫酷的交互動效，把日歷中的時間選擇場景做的精致有趣。同時里面使用了很多種內容轉場的動效效果，把原本枯燥的功能型場景代入動效，增添了頁面活力。

由于該軟件如今在中國地區下架了，所以想了解具體效果可以查看官網首頁的視頻：http://www.peekcalendar.com。或者也可以看看最美應用對這個應用的簡單介紹：https://zhuanlan.zhihu.com/p/19683002#!

以上便是我對于時間選擇組件的思考與總結，個人觀點難免有疏漏，歡迎大家一起討論學習~

留言說說你有遇到過什么反人類的時間選擇組件么？??