日期选择器设计

今天是日期选择日!在为不同的项目创建了很多这样的项目后,我仍然在寻找完美的项目。让我们试着找出使日期选择器好用或痛苦的原因。

日期选择器设计看起来很简单。事实上,选择日期往往是一个痛苦的经历。糟糕的例子可以在网络上找到。

我真的相信,要设计一个好的体验,重要的是不要从一开始就跳入决策。花点时间提问,找到答案,创建用户故事并浏览网页。

通用日期输入模式

1.文本输入。最简单的方法是让用户输入日期。如果提供了适当的验证,这总是有效的。可以与日历日期选择器一起使用。

日期输入示例

2.下拉选择每个值:日期,月份,年份。仍然经常在网络上使用。会变得非常令人沮丧,特别是如果用户需要输入时间。

夏洛特斯威夫特的出生日期选择器

3.日历。选择日期范围的最常用方法。多个示例可以在网上找到。移动友好。

日历由安德鲁卢卡斯

4.时间表。适合在有限的时间内挑选日期范围。长时间不准确,不适合移动设备。

Bilal的时间线示例

5.在移动设备上滚动日期选择器。很好地工作,当用户不必滚动过去/将来太远。

移动日期选择器

选择合并或单独使用这些模式可以在选择日期时创建良好的用户体验。如何合并它们是每个特定项目的问题。

文本输入和日历模式组合的示例

我们将审查实际用例,因为上下文驱动大多数设计决策(并且最好将其考虑在内!)。我们会尝试为情况选择最佳模式。

案例:设备性能分析。 

用户:技术经理。 

用户的主要目标:分析设备性能,随时检测性能下降。

用户问答

所以我们已经知道我们的用户和他的目标。日期选择器是实现此目标的工具之一。但是在我们抓住那个尖锐的人之前,仍然有问题需要回答。

日期选择器应该用于什么?

“深入到老的性能数据。我想很容易地看到特定时期的报道。“

2.你需要选择一个日期还是范围?

“范围。像6小时范围,或一周。“

3.对于范围选择器,有没有经常使用的范围?

“呃...我经常需要6​​个小时。一个月也会很好。“

4.仅仅是日期选择器,还是应该选择时间?

“我们可以从日期开始。但我如何选择最近的6个小时。“

日期选择器主要用于网络还是手机

“我们专注于网络,也许是平板电脑。但我的管理想要在未来某个时候使用移动版本。不过,我认为它不会起作用。“

6.你需要选择日期,这在很久以前?

“有时我需要查看去年的数据,以查看随时间推移的性能变化。”

7.您目前在这部分产品中的经历有什么不好?

“我必须点击数据表中的页面才能查看过去的报告。这有点令人沮丧,但我已经习惯了。“

草绘它

我们现在所拥有的信息可以确定体验的必要构建模块。

1.Calendar。这可以说是选择日期范围的最常见模式,即移动友好型。 日历的具体细节应该涵盖世界某些地区用户的需求。在我们的情况下,它是星期一至星期日的周表示。这个月拼写为更好的理解。

2.文本输入字段。这个元素将简化选择范围的时间,因为用户将有另一种输入数据的方式 - 输入数据。因此,我们需要“From” - “To”字段以及时间字段。他们将允许用户看到选取的范围并根据需要键入日期。有一点需要记住的是,不同的国家习惯于不同的数据表示。在我们的例子中,dd / mm / yyyy是用户最熟悉的日期格式。

3.时间选择器。这可以是完全不同的帖子,但对于第一次迭代,我们将使用带箭头的文本输入点击小时和分钟。

4.预设。对于经常使用的范围,将提供“显示最后”链接。预设本身应该仔细选择和测试,以提供最佳体验。

下一步是组合这些构建块。迭代时需要修改一些内容。这在最初阶段最终看起来像这样:

设计它

在我们组织完积木后,我们最终可以转移到我们最喜欢的工具上。我创建了一个快速迭代,所以我们可以看到它的外观。

这是该设计的第一个数字版本。我相信它会经历更多的迭代和测试,直到我确信它对用户有效。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容