快好知 kuaihz

实战案例|三步设计完美的日期选择器

什么样的日期选择器是好的,而哪些又是不好用的?本文作者将结合自身经验,与你聊聊,enjoy~

这几年,我在不同的项目里做过很多“日期选择器”,不过我仍然还在努力做出最完美的那一个。今天我们就一起来研究研究什么样的日期选择器是好的,而哪些又是不好用的。日期选择器的设计看起来很简单,其实对很多用户来说“选择日期”是一种痛苦的体验。我们在网上随处可见设计糟糕的日期选择器。

我认为要想设计出体验良好的日期选择器,开始做的时候就要慎重。花点时间问问题、寻找答案、构建用户故事、查找相关资料。

常见的日期输入形式

1. 文本输入

最简单的设计形式就是让用户自己输入日期,只要有适当的检测方式,这个设计还是不错的。这种方法常常和日历日期选择器一起使用。

2. 下拉列表

采用下拉菜单的方式来选择日期、月份、年份,这种方式在网页上使用的比较多。不过呢,除了年月日,当用户还需要输入时间的时候,这种设计就让人很烦了。

3. 日历

当需要选择日期是一个范围的时候,日历的形式是最常用的。在网上随处可见这种设计形式,在移动端也是很常用的。

4. 时间轴

如果需要选择日期范围是在一段限定的时间内,这种设计还是不错的。如果时间较长的话,那么这种方式就不太准确了,同时呢,不适用移动端。

5. 移动设备上的滚动日期选择

如果用户选择日期不是特别远的话,这种设计还是挺好用的。

以上介绍的这五种日期选择器不管是单独使用还是融合在一起,只要得当,都能创造好的用户体验。重点是,在做具体的项目的时候,我们该如何选择呢?

案例解析

我们通过真实的案例分析一下,因为具体的使用场景才是我们做设计决策的依据,我们来为以下场景选择最适合的日期选择器。

案例:设备性能分析

用户:技术经理

用户主要目标:分析设备的性能,检测设备随着时间的推移性能下降的情况。

用户问答

我们已经知道了用户的目标,日期选择器就是用来实现目标的工具之一。不过在我们做决定之前还是有很多问题需要去问用户。

(1)日期选择器是用来做什么的?

“看性能数据,我希望可以方便地看到每个特定时间段的报告。”

(2)你是需要选择日期还是日期范围?

日期范围,比如6小时内或者一周内这样的。”

(3)有比较常用的日期范围吗?

“嗯,我经常需要6小时段的数据,有时候也会用一个月内的数据。”

(4)只需要选择日期吗?还是具体的时间也要选择的?

日期肯定是要的,时间也需要,不然我怎么选6小时内的数据?”

(5)您这个日期选择器是在网页上用还是在手机上用?

“我们是在网页上使用的,应该是平板电脑。但是管理层希望以后也能有手机版,我还不确定行不行呢。”

(6)关于日期选择器,目前您使用的产品有让您觉得体验不好的地方吗?

“我必须点击数据表中的页面,才能查看过去的报告。这挺麻烦的,不过我也习惯了。”

(7)你需要选择很久以前的日期吗?

“我有时候需要查看去年的数据,看看性能的变化”

画草图

通过用户访谈,我们已经获取了基本的信息,现在可以开始构建日期选择器了。

1. 日历表

这可以说是最常见的选择日期范围的模式了,而且移动端也能用。日历的具体内容应该满足世界某些地区用户的需求。在我们的案例中,用户需要的是星期制。

2. 文本输入领域

有了输入功能,当用户需要选择很久之前的一个日期的时候,他们就可以直接输入,再不用上上下下翻半天了。有一点需要注意的是,不同的国家表达日期的格式是不一样的。在我们的案例中,dd/mm/yyyy对用户来说是最熟悉的一种日期形式了。

3. 时间选择

这可是完全不同的部分了,但是在第一次的版本中,我们先用带有箭头的文本输入小时和分钟。

4. 预设

对于常用的时间段,我们在下拉列表中先预设好。为了提供最好的体验,应该对预先设定的时间段进行仔细的筛选。

下一步就是把这些部分都合在一起,在这一步很多细节都需要修改,最后呈现出来的额初步结果如下图:

做设计

完成了上述步骤后,我们就可以开始设计出来了。我快速的做了一个版本,让大家看看大概是什么样子的。

这是第一版电子稿,后续经过测试我肯定还会做很多修改,直到用户觉得好用为止。

 

原文作者:Kateryna Romanenchuk

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:实战  实战词条  案例  案例词条  日期  日期词条  完美  完美词条  选择  选择词条  
交互

 Apple Watch的人机交互...

我相信这样一条逻辑:主流计算设备的每一次形态改变,必然伴随着人机交互难度的下降。比如,自从有了鼠标和 Windows 图形界面后,PC 才开始普及;电容触控屏和...(展开)

交互

 Material Design:...

谷歌发布新操作系统“ L Developer Preview”后,也同步推出了可视化语言Material Design,它的设计美学将会融入到谷歌所有的平台之中...(展开)

交互

 22个知名APP启动引导页设计欣...

小编导读:在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式...(展开)