日期选择器设计总结

本文是作者对时间选择器设计做的一个小总结。enjoy~


本文是作者对时间选择器设计做的一个小总结。enjoy~

日期选择器设计总结

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

在设计日期选择器之前,设计师要问自己一下几个问题:

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

其他的日期录入方式

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

日期选择器设计总结

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

原文地址

#专栏作家#

王M争,人人都是经理专栏作家,资深互联网人。

本文由 @王M争 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21212/

(0)
CatherineCatherine
上一篇 2017-04-27 18:18
下一篇 2017-04-27 20:09

相关推荐

  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • 苹果旧金山字体的秘密

    iOS 9如今已公开发布。带来了一些细微的变化,但iOS 9的系统字体变成了苹果新推出的旧金山字体,代替了之前用的Helvetica Neue。

    2017-06-03
  • 网页设计的五个实际应用的趋势

    无一例外,每当我高兴的点击类似名为“今年网页设计趋势”的链接后都会感到失望。如果你写了一个2016年设计趋势列表,其中包括了全屏视频背景那你应该回去看看一些网站之前的各个版本。总之,闲话少说,下面列出五个今年上班年的实际趋势。

    2016-08-17
  • 什么样的体验是好的用户体验?

    互联网的时代,说是一个体验为王的时代,一点也不为过。在互联网时代,产品是否能够做成功,用户体验成为一个关键点,用户购买你的产品,并非是与你结束了交易,而是一个新的开始。当用户拿起你的产品,使用你的产品的时候,用户体验之旅才真正开始,而用户的体验之旅是否愉快,将直接影响到你的口碑,影响到你的销售。

    2017-05-23
  • 干货时间|交互设计线上讲座内容回顾总结

    学艺术的大表姐带你走上艺术留学的不归路Hello~Everybody~上礼拜元宵节的结束宣告着新的一年的真的要开始了!这下我们也再没有借口偷懒了小伙伴们要用新的节奏开始奋斗啦~2018,告别懒惰,发愤图强吧!!最怕的就是:“比你优秀的人还比你努力!”当然为了给大家缓冲的时间大表姐特意送上年前的交互设计分享讲座的干货回顾总结对交互设计感兴趣的同学,可千万不能错过接下来的内容了~并且还能拓宽自己的艺术设计领域想了解更多关于英美交互院校、专业...

    2018-03-09
  • 2017赶集招聘节项目总结:建一座招聘之城

    为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。注:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的有景深的视觉体验。作为近年网页设计的热点趋势,越来越多的网站应用了这项技术。

    2017-04-30
  • Axure画产品原型最新常用组件分享(一)

    画产品原型是产品经理必备的一项硬技能,一般使用axure进行制作,很多人可能都知道axure,但是怎么利用axure把产品原型画的又快又好并不是一件容易的事;原型要画的好,最重要的不是你掌握多复杂的功能,而是要制定好设计规范;下面我把移动产品原型制作中常见的一些元素按照一定的设计规范制作成组件分享给大家,你只要把相应的元件拖动到自己的工作界面,简单修改文字就可以使用了,这是第一个部分,包括以下内容:一. 手机外壳二. 空页面模板三. 常...

    2018-04-05
  • 基于用户体验的污泥脱水干化解决方案

    点击上方蓝字关注“公众号”题  目:基于用户体验的污泥脱水干化解决方案报告人:上海复洁环保科技股份有限公司  许太明  总经理第一部分:背景与缘起各位领导、各位专家、各位同行,中午好。我给大家做的报告是基于用户体验的污泥脱水干化解决方案。作为我们公司来说,主要的产品是低温真空脱水干化成套技术,所以我从这个技术本身给大家分享一下应用性能与效益的评价。主要分三部分,一个是背景与缘起,第二是用户体验与详情,第三个是总结与展望。污泥脱水干化设备...

    2018-04-30
  • 【笔记】Google设计师传授Whiteboarding新技能(附视频)

    公元2016年2月20日星期六,丙申猴年正月十三。正是广大交互设计师出门聚会交流的黄道吉日啊!紫气东来,应在中城WeWork Madision,此地必有祥瑞!小编掐指一算,原来是UXRen纽约第二期活动啊!(^o^)/~   笔记:JayJ…

    交互专题 2017-08-07
  • 案例分析:聊聊扁平化设计的六点优势

    著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

    2017-05-10