日期选择器设计总结

日期选择器的设计很容易被我们忽视,因为我们潜意识都觉得日期选择器很简单。其实的确也很简单:一个输入框,一个日历图标,用户点击日历图标就会弹出一个日历浮层来供用户选择具体日期。这是每一个日期选择器的基本样式,看起来的确很简单。但是事实真的是这样的吗?在设计日期选择器之前,设计师要问自己一下几个问题:

1 你的日期选择器是选择一个特定的日期(7月18日)还是一个时间段(7月18日——7月29日)?

2 用户是否可以手动输入日期或者用户只可以选择系统自定义的日期?

3 我们是否需要给用户提供默认值?

4 我们给用户添加“上一个,当前和下一个”跳转按钮是否合适?

5 如何给用户展示不可用日期?

6 当用户需要选择日期的时候,日期选择器是否唯一合适的控件。

如果你无法回答以上的问题,我相信这篇文章对你还是有用的。

录入模式

目前日期选择器的录入模式有很多种。用户可以手动输入下拉列表选择弹出日历浮层选择,滑块表单等。手动输入是最原始的日期录入模式,用户对此很熟悉,学习成本为零。操作起来也比较简单,属于中规中矩的。使用下拉列表对于年和月的录入比较简单,但是对于具体日期来说,使用下拉列表对于用户来说就比较难操作了,因为选择项目太多了。

日历浮层是当前很受欢迎的一种日期录入模式,主要原因就是简单,其外观可以给用户一种挂历或日历的隐喻。

滑块也非常适合用于日期选择,因为滑块不仅可以选择一个单个日期还可以选择一个时间段。但是滑块的一个缺点就是无法完成精确录入,可选择范围越大,滑块的使用价值就会越低。使用滑块来录入星期几,月份都是比较适合,但是要来录入具体日期就比较难了。用户必须操作的十分小心和缓慢。

表单是一种新型的日期录入模式,效率高,但是对于年龄大的用户来说使用起来可能会比较困难。

默认值

日期输入框里给用户提供默认值肯定比直接空白要更好,但是默认值的内容和展示形式还是需要我们仔细斟酌的。

用户在使用谷歌航空时,谷歌航空基于大数据分析会给用户提供默认值。例如,你7月3日搜索航班,会默认出行日为7月19日,返回日为7月23日。其实类似的手法我们也可以应用到国内的一些购票网站中,例如今年国庆/中秋放假为10月1日到8日。所以在9月份,我们假设用户打开一款购票软件都是为了购票回家。那么我们就可以默认为10月1日为出发日,8日为返程日。这样可以极大的节省用户的输入时间。

当然默认值还可以给用户提供一个日期录入规范,例如你想输入2019年3月1日,正确的格式应该是03-01-19,但是有的用户可能会输入01-03-19。默认值可以很好的避免这类情况的出现。

当然如果你的产品足够的智能化,日期的录入格式不会局限于一种,这样无疑更加的人性化。

录入时间

日期选择器有的时候不只要选择日期还要选择时间。例如你要请人吃饭,要去预定餐位,在这种情况下就需要录入时间(段)。

时间录入模式和日期录入差不多,这里主要来说时间录入的时机。

Topvet是一个兽医网站,你可以在上面为你的宠物预约医疗服务。这里的日期选择器很有代表性,用户在左边选好日期,然后选择时间段,最后选择医生。日期-时间-医生,这个流程看起来很正常,但是仔细想想就会发现问题。

例如,一个用户平时比较忙,只有中午有时间带宠物来看病。这种情况下,日期-时间-医生这种录入顺序就不太合适了,应该让用户先选择时间段,然后反显出可以预约的日期,再选择医生。

以上的这种,其实是日期和时间相互剥离的。在一些情况下,例如屏幕空间有限(手机)或者为了简化用户操作步骤,我们就需要将日期和时间整合在一起。

日期段录入

要录入一个日期区间,意味着用户要录入两个日期。很多设计师就会下意识的使用两个日期选择器,其实是完全没有必要的。首先一个日期选择器完全可以完成日期段的录入,而且多一个日期选择器会增加用户的点击次数。

此外手机端碍于屏幕尺寸问题,同时展开两个日期选择器也不太现实。

了解产品

设计师要对产品足够的了解才可以设计出优秀的日期选择器。例如,我们有没有问过自己做的日期选择器上是否需要给用户切换年份的功能。

如果你的产品是类似去哪儿,携程之类的,那么年份是不需要加的。因为用户不可能把几年后的火车票都给买了,那样不现实而且政策也不允许。

还有我们见到一些日期选择器将周末凸显出来,我们有没有思考其背后的原因?

Skyscannet是一个类似于去哪儿的应用,这里的日历将周六和周日和其他日子隔离开来,这个设计很有心,因为周末是大多数人选择旅行的时间,所以应该突出表现,让用户更容易发现。

其他的日期录入方式

其实我们经常会陷入一个误区,例如给用户一个错误提示我们就会想到用弹出框,用户要选择日期,我们就会想到日期选择器。其实用户要录入日期,并不一定非要使用日期选择器。对话式交互也是一个很好的替代方式。

总结

以上就是我对时间选择器设计做的一个小总结,希望大家看完能有所收获。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,945评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • 这两天,晚上流传着一个段子:北京俩土著结婚,相当于两家上市公司合并。还有另外一个段子:两清华大学的毕业生在出租车上...
    虎叔2018阅读 766评论 5 3
  • 高考成绩出来后的一周里,在那样的三伏天接这么好几通电话,对无聊的我来说也是挺美好的一件事情。 “海珍,最近和家里商...
    肉都给我吃阅读 346评论 0 0