(翻译)日期选择器(Calendar Picker)

问题概述

用户想查找、提交指定日期或者一段时期内的信息。

示例

(翻译)日期选择器 - gc_2299 - gc_2299的博客

 

用途

  • 用于用户对数据进行提交、追踪、排序、过滤时方便选择时间点或者时间范围;
  • 如果用户熟悉另外的高效日期输入方式,则不要限制只能选择日期。例如有些用户喜欢手动输入日期而不是选择日期;
  • 不要在手动输入日期更容易时使用选择日期的方式。例如输入生日,如果是选择的话,选择18、30、50或70年前需要多次点击,不如直接输入。

解决方案

可以通过多种方式激活日期选择器:

  • 当点击一个提示选择日期的连接时;
  • 当选择一个日期输入项时;
  • 当点击一个常放于日期输入项旁边的日历图标时。

日期选择器被激活时,在当前页面显示一个带月份的日历的框,提示用户在日历框中选择日期。最常见的是每次只显示一个月份,但有些网页一次并排显示三个日历框,这样可以减少用户点击量,提供更好的视角。

便捷操作

带月份的日历通常包含下列便捷操作:

    • 选择日期
    • 跳转到上一个月/下一个月
    • 跳转到上一年/下一年
    • 跳转到今天(此操作在日历的默认日期不是今天时尤为重要)
    • 关闭日历

限定日期选择范围

在某些界面中,不允许选择某些特定的日期是有意义的。例如选择日期时只能选择银行工作日,或者只能选择未来的日期,亦或只能选择未来几个月中的日期。

两种数据输入方式:快捷和便捷

当针对提高网络应用程序效率而进行程序设计时,很少关注的一个领域是输入内容的上下文。在台式计算机中常用的数据输入方式是键盘或者鼠标,而在移动设备上最常用的是触摸、键盘和摄像头。

使用日期选择器是种简单的日期输入方法,但也需要考虑以快速和轻松的方式输入日期。一种方式是用户不需要切换输入设备,仅靠一种输入设备就可以完成日期输入。

对于文本输入,考虑采用Forgiving Format(注1)模式减少输入错误。

用好默认值

使用Good default(注1)模式,通过预先选择合适的日期,提高输入日期数据的内容和拼写准确度。

预先选择的默认值依赖于日期输入当下文,通常为当前日期或者时间。但是,如果你正在设计一个公交路线规划程序,最好将默认发车时间设置为半小时之后,因为大多数旅客不想上了公交车再找车票钱买票。

检查日期范围有效性

如果用户正在选择日期范围,最好别让结束时间早于起始时间。这意味着随时监控起始时间的变化,如果起始时间晚于结束时间,则需要动态调整结束时间的值。

在日历中显示完整的周

即使本月起始日期在一周的周中,也要完整的显示这周的日期。将不在本月日期范围内的临近日期变灰,但要保证用户依然可以选择这些变灰地日期。

确保日期链接明显

确保选择日期的链接比较明显,用户可以很容易点中。

说明

日期选择器是一个用户易于理解的图形界面,它帮助用户在提交信息或者过滤数据时很容易地选择时间点或者时间范围。

讨论

国际化因素。

在一些国家的日历中,每周的第一天一般是星期天,而在许多欧洲和亚洲国家,每周的第一天是星期一。

在有些国家,例如德国或者斯堪的纳维亚诸国,在做总体规划时使用周数。在这些国家中,使用周数描述时间范围几乎和使用月份一样。可以考虑在日期选择器的每行显示周数(一行表示一周)。

 

原文地址:http://ui-patterns.com/patterns/CalendarPicker

 

注1Forgiving Format模式和Good default模式还没有进行翻译

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值