除了系統默認樣式,日期選擇器設計還有哪些選擇?

1 評論 15105 瀏覽 62 收藏 14 分鐘

我們的設計涉及到人們吃、喝、住、行、購、娛、醫療、教育、工作等各個方面,每個需求場景都是由事件觸發的,對于事件的設計離不開時間選擇,比如什么時候就餐、什么時候出行、什么時候去看電影、什么時候參加會議、什么時候去就醫、什么時候安排下一步計劃,等等。系統自帶的可能難以滿足設計需要,自定義其交互形式與樣式可以實現更多的可能性。

一.選擇到天(DAY)

排查設計的時候需要考慮以下幾點:

  • 標識出當天日期
  • 標識出特殊日期
  • 禁用不能選擇的日期
  • 是否有默認選中日期:比如預定車票時,默認選中今天
  • 是否需要提供幫助用戶選擇的信息
  • 明確表達當前已選的日期
  • 一個清晰、明確的提交按鈕或者點擊即選中

1.采用彈出層的形式

這樣做的好處是不用跳轉新的頁面,在當前環境下選擇日期(比如說當前環境下有些內容是影響用戶做出選擇的);同時,可以點擊彈層遮罩區域快速退出選擇。如果沒有特殊需求,僅僅是選擇日期這種形式基本上夠用了。

如果需要用戶從某個月中選擇某天,并且用戶是需要參考星期幾還是周末時,是需要展示一個月的日期面板的。如下圖,“圖標+日期”本身也是一個觸發彈出層的按鈕,用戶點擊某個日期即為選中,并收起彈出層。

2.打開新頁面選擇日期

打開新頁面選擇日期,毋庸置疑,新頁面可擴展的空間比較大。更適合當前頁面是為了表達一個整體獨立事件,比如簽到,設置行程、預約等,也就是說,除了要選擇日期外,用戶可能還需要設置事件的其他內容??偟膩碚f時間是規劃事情的首要元素,把選擇時間放在突出位置更符合用戶的心理模型。

3.多選

可設置多個日期,每點擊一個日期即代表選中,一般適用于不同日期設定的是同一事件(突然想到本人生活中的一個場景,我會為工作日早上的鬧鐘設置為7:30,7:45,7:59三個檔)。需要列出已選擇的日期,用戶可以選擇取消,如下圖。

二.選擇到時、分(TIME)

排查設計的時候需要考慮以下幾點:

  • 上午與下午的區分:可以通過顯示狀態做出區分,比如8:30與20:30;或者通過AM與PM進行區分,比如8:30 AM與8:30 PM。
  • 是否有默認選中時刻:比如默認選中當前時刻。
  • 明確表達當前已選的時刻
  • 一個清晰、明確的提交按鈕或者點擊即選中

如下圖,對時、分的選擇,從左往右,依次點擊。好處是選擇效率很高,缺點是,一旦某次選擇錯誤,需要用戶點擊返回。如果選擇完成后,才發現錯選了,還需要從頭點擊選擇一遍。

如下圖,有明確的提交按鈕,用戶通過滑屏滾動點選,好處是選擇時與分是單獨進行的。

三.選擇時間段

排查設計的時候需要考慮以下幾點:

  • 明確表達當前選擇的是開始還是結束時刻:視覺上要突出當前選擇項
  • 是否有默認選中時刻:比如設定計劃或者預定時,開始時刻默認為今天?;蛘吆Y選過往信息時,結束時刻默認為今天。
  • 禁用不能選擇的日期:選擇結束時刻的時候,不能超越開始時刻。
  • 明確表達當前已選的時刻
  • 一個清晰、明確的提交按鈕或者點擊即選中

1. 對開始時刻與結束時刻單獨選擇

如下圖,很明顯可以看出來當前選擇的是開始時刻,此時的切換按鈕也承擔著顯示選擇結果的作用。如果用戶需要選擇結束時刻,需要點擊切換成結束時刻按鈕。

與上一個設計方案的區別是,選擇時刻采用的是平鋪日歷的方式,好處是可以直觀的感受到時間的始與末,有多少天。這個非常適合較為精細準確的時間選擇場景,比如外出旅行計劃時間、工作任務目標時間等等,用戶需要感知時間段的長短,并且會參考工作日與周末的區別。

2.直接點擊或者拖拽開始時刻與結束時刻

“往前點擊”代表開始時刻往前設置,“往后點擊”代表結束時刻往后設置。

如果是計劃未來的事件,通常開始時刻不會在當天以前,所以“今天”以前的日期都會被禁止選中,如下圖。

如果也允許用戶選擇當天以前的日期,建議把“今天”標識出來,以便幫助用戶快速做出決定。

3.采用新的形式選擇時間段

如下圖,選擇會議的開始時刻后,再選擇會議需要的時間即可,因為對于用戶來講,有些事件結束時刻更明確,比如什么時候下班;而有些事件花費的時間更為明確,比如開個產品需求發布會要花2個小時。對于選擇時間段這個“量”可通過圖形尺寸的變化達到直觀、可視化的效果。

四.在日歷中呈現對應事件

排查設計的時候需要考慮以下幾點:

  • 明確哪些天里有事件
  • 明確表達有幾種事件類型:時間上,比如緊急的與將來要處理的;內容上,旅行與讀書計劃安排。等等。
  • 是否有默認選中時刻:比如默認選中今天,顯示今天的事件/內容清單。
  • 事件清單是否有清晰的時間軸
  • 一個清晰、明確的增加新事件的按鈕:通常都是一個加號按鈕。
  • 一個事件都沒有時的空數據設計

1.列表顯示

列表顯示,通常都會有一條較為明顯的時間軸,一般都會放在左側,方便索引、查看不同的事件。缺點是用戶很難看直接看出本月所要發生的事件或執行的任務,這種做法比較適合于產品本身并非注重月事件,而注重即將發生的緊急事件,如下圖。

2.在日歷上顯示

與列表形式相比,日歷的形式可以讓用戶把握每個月發生(或即將發生)的事件,除了可以默認當前顯示的是當天要發生的事件,但是用戶很難立刻了解緊急的幾件事具體是什么,用戶需要去點擊對應的日期,才能發現具體事件的詳細內容。還有一個好處是,如果一天內發生的事件非常多,這種形式更有利于展示,如果采用列表式,那么需要用戶滾動很久才能看到其他日期的事件,或者需要收起這一天的事件,才能快速的看到其他日期的事件。

通常在日歷上顯示對應事件,有以下4種方式。

(1)頂部顯示:適用于一天對應的事件數量不要太多,最好事件區域的高度不要變化,目的是能讓日歷本身不要動來動去。

(2)底部顯示(最常用的方式):顯而易見,好處是在日歷底部充分展示對應的事件,并且往下滾動查看更多事件的時候,日歷可做收起的形態;同理往上查看時,也能展開。


(3)浮層顯示:如果一天內只能設定一個事件或者多個相同事件,那么這種方式更適合,但是缺點是,如果不像上面2種方式一樣提供默認選中的日期,那么用戶可能并不知道點擊日期能夠查看事件,此時就需要一個小小的教學環節了。

(4)擴展空間顯示:如下圖所示,在所選日期所在行向下撐開事件顯示面板。這種做法有高度的限制,事件很難采用列表形式展示,所以如果有多個事件的話,很難直觀感受到事件發生的前后關系以及具體有多少個事件。

3.空數據

如果最近幾天或者用戶剛使用產品,那么設計上需要告訴用戶這里為什么是空的,將會顯示什么內容,最好是引導用戶去添加新事件。如果想深入了解空數據設計,請查看小白的另一篇文章《好的空數據設計如何引導用戶行為》。

4.日歷與列表綜合

列表顯示與日歷顯示更有優劣,具體還是要看你的產品目標。如果產品本身或者主功能就是為了設置事件的,并且既要看到緊急事件,又要宏觀把控整個月事件數量與內容的,建議兩種展示方式都提供給用戶,此時就需要多設計一個明確的切換按鈕了。

你已經看完了嗎?希望對你或多或少有些幫助。

以上素材來自?http://collectui.com或者http://reeoo.com

 

作者:小白,微信公眾號:小白的交互設計。

本文由 @小白 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 能把這些應用的名字發出來嗎?想下來試試看??

    回復