在為不同的項目創(chuàng)建了許多日期選擇器之后，我仍然在尋找一個完美的設(shè)計。讓我們試著找出是什么因素讓日期選擇更好用。

我真的相信，要設(shè)計一個好的體驗，重要的是不要從一開始就匆忙做出決定。而是花點時間問問題，找到答案，創(chuàng)建用戶故事，探索網(wǎng)絡(luò)。

常用數(shù)據(jù)輸入模式

1.文本輸入 最簡單的方法是讓用戶輸入日期。如果提供了適當(dāng)?shù)尿炞C，這總是有效的?？膳c日歷日期選擇器一起使用。

日期輸入示例

2.下拉 選擇每個值:日期、月、年。仍然經(jīng)常在網(wǎng)上使用?？赡芤矔苈闊?，特別是如果用戶也需要輸入時間的話。

出生日期:夏洛特·斯威夫特

3.日歷 最常用的選擇日期范圍的方法?？梢栽诰W(wǎng)上找到多個例子。適合移動設(shè)備。

日歷作者:安德魯·盧卡斯

4.時間線 適合在有限的時間內(nèi)選擇一個日期范圍。較長的時間間隔可能會變得不準確，對移動設(shè)備不友好。

時間軸的例子：Bilal

5.滾動 移動設(shè)備上的日期選擇器。工作得很好，用戶不必滾動到過去/未來太久。

移動日期選擇器

結(jié)合或單獨使用這些模式可以在選擇日期時創(chuàng)建良好的用戶體驗。如何將它們結(jié)合起來是每個具體項目的問題。

文本輸入和日歷模式組合的示例

我們將回顧真正的用例，因為上下文驅(qū)動大多數(shù)設(shè)計決策(最好考慮到它!)我們將盡力根據(jù)情況選擇最好的模式。

案例: 設(shè)備性能分析。

用戶：技術(shù)經(jīng)理。

用戶的主要目標(biāo): 分析設(shè)備性能，檢測性能隨時間的下降。

用戶問答

所以我們已經(jīng)知道了我們的用戶和他的目標(biāo)。日期選擇器是實現(xiàn)這一目標(biāo)的工具之一。但在我們抓住這個問題之前，還有很多問題需要回答。

1.日期選擇器應(yīng)該用于什么?

“找以往的性能數(shù)據(jù)。我希望很容易地可以看到某個時期的報告?！?

2.你需要選擇一個具體的日子還是一個范圍?

“一個范圍。大概6個小時，或者一個星期。”

3.對于范圍選擇器，有經(jīng)常使用到的時間范圍嗎?

“我經(jīng)常需要6個小時。一個月用的也不少?！?

4.是否只有日期選擇器，需不需要選擇具體的時間?

“我們可以從日期開始。重要的是我如何選擇最后6個小時。”

5.日期選擇器主要用于網(wǎng)絡(luò)還是移動設(shè)備?

“我們關(guān)注的是網(wǎng)絡(luò)，或許是平板電腦。但我的管理層想在未來的某個時候推出手機版。不過，我認為這可能性不大。”

6.你需要選擇可以追溯到很久以前的日期嗎?

“我有時需要查看去年的數(shù)據(jù)，以了解性能隨時間的變化?！?

7.目前產(chǎn)品哪部分的體驗是不好的?

“我必須單擊數(shù)據(jù)表中的頁面以查看過去的報告。這有點麻煩，但我已經(jīng)習(xí)慣了。”

草圖

我們現(xiàn)在擁有的信息允許定義體驗的必要構(gòu)建塊。

1.日歷。這可能是選擇日期范圍最常見的模式，它對移動設(shè)備很友好。

日歷的細節(jié)應(yīng)該涵蓋世界某些地區(qū)用戶的需求。在我們的案例中，是周一到周日的代表。這個月的拼寫是為了更好地理解。

2。文本輸入字段。這個元素將簡化到很久以前來選擇范圍，因為用戶將有另一種輸入數(shù)據(jù)的方式——輸入數(shù)據(jù)。因此，我們需要“From”-“To”字段，以及當(dāng)前字段。它們將允許用戶查看選中的范圍，并在需要時輸入日期。需要記住的一點是，不同的國家習(xí)慣不同的數(shù)據(jù)表示。在我們的示例中，dd/mm/yyyy是用戶最熟悉的日期格式。

3.時間選擇器。這可以寫一篇完全不同的文章，但是對于第一次迭代，我們將使用用鼠標(biāo)點擊選擇分鐘或小時，再用文本輸入的方法。

4.預(yù)置。對于經(jīng)常使用的范圍，將提供“顯示最后”鏈接。預(yù)置本身應(yīng)該仔細選擇和測試，以提供最好的體驗。

下一步是合并這些構(gòu)建塊。有些東西需要在迭代時進行更改。在早期階段是這樣的。

設(shè)計

在我們組織好構(gòu)建塊之后，我們終于可以轉(zhuǎn)向我們最喜歡的工具了。我創(chuàng)建了一個快速迭代，這樣我們就可以看到它的樣子。

這是第一個數(shù)字版本的設(shè)計。我確信它將經(jīng)歷更多的迭代和測試，直到我確定它對用戶有效為止。