产品设计交互规范-datepicker日期选择器(十一)

datepicker日期选择器
视频及原型文件下载:https://study.163.com/course/courseMain.htm?courseId=1209770824&share=2&shareId=400000000540015
定义:

选择日期的组件。

交互原则:

1、应该有一个合适的默认值,并不是所有的控件默认值都是今天或当前时间的。
2、控制可选/录入的字段范围,为了减少用户出错,保证产品数据的正常显示,日期/时间控件应当要控制可选的范围。
3、清晰明确的提交或确定按钮,我见过很多非常糟糕的日期控件,在你选择或切换选项后,还需要点击输入框或者空白处,才能填入/显示已选择的项目。
4、减少点击次数
5、标识出特定日期,用户并非总是“记忆”在选择器中显示或标注例如当天、已选默认值、周末、节假日等特殊的日期,可以帮助用户更好、更快地做出选择。
6、特殊的操作按钮,对于一些通过填入日期或时间来筛选数据的选择器,有必要在选择器中加上如“清空”的按钮,允许用户快速清除已选项,回到数据的初始状态。


交互说明:

1、【默认文案】:默认的提示文案内容,例如:开始日期;
2、【默认的日期】:为了方便用户,减少用户输入可以使用默认的日期,默认的日期尽量与当前业务需要有关,例如:默认显示本周的开始和结束日期;
3、【日期样式】:需要注明需要的日期控件的样式,例如选择日、月、年、年月日、日期时间段等。

使用场景:

1、当用户需要填写年月日/年月时
2、点击选择框,出现日期选择浮层

例如在boss直聘填写工作经理的表单中,需要填写在职时间,这里使用的就是datepicker日期选择器。

基础样式:

非时间段日期选择器。点击选择框,出现日期选择浮层,默认停留在用户当天日期。用户未选择时,清空按钮默认置灰,已选清空按钮恢复正常状态。


年月样式:

只能选择年月,用户激活输入框,出现年月选择浮层。默认停留在用户当月,清空按钮默认置灰。用户点击选择时,浮层收起,选择框出现已选择当年月。


时间段样式:

时间段日期组件在结束时会多一个选项为至今。用户选择至今,则结束时间一直持续到未来。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 兼容性 1、自适应1280*768px及以上的分辨率 默认窗口设置下,不应出现水平滚动条,尽量避免出现垂直滚动条(...
    reloaded么阅读 2,132评论 0 0
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,688评论 1 48
  • #相约星期二# 晚上时光 静静的读上几页 一位睿智老人 在人生结束之际依旧智慧乐观 敬仰 勇敢爱与被爱 让时间缝隙...
    schizophreniabb阅读 108评论 0 0
  • 关注了惠心公众号的家人们 都不约而同地关注了这个简书 你所经历的一切全是你心识投射出来的...
    罗泽天阅读 10,465评论 7 13
  • 其实我今天要看的也不是五遁忍术,是想怀旧另一部关于五行忍术的片子,题材背景是三国时期,只是想不起名字来。本...
    zzfznp阅读 1,888评论 0 0