美文网首页用户体验设计模式@IT·互联网
用户界面设计模式1.5表单:日期选择器

用户界面设计模式1.5表单:日期选择器

作者: 喵吉斯蒂 | 来源:发表于2020-05-14 11:11 被阅读0次


    问题总结

    用户希望通过日期或日期的范围,对信息进行查找或提交信息。

    示例

    用法

    当用户想要轻松地选择日期或日期范围以便提交、跟踪、排序或筛选数据时使用。

    当用户更熟悉和高效地使用另一种输入日期的方式时,请不要单独使用。因为有些用户更喜欢通过文本字段输入日期。

    当输入的日期更容易通过文本形式输入时,不要使用。例如生日(需要多次点击才能选择的18、30、50或70年前)

    解决方案

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

    当单击某个链接提示选择日期时

    当选择用于输入日期的字段时

    当单击最常放置于用于输入日期的字段旁边的日历图标时

    激活时,当前页面上会显示一个带有当月日历的框,提示用户在框中选择日期。最常见的是仅显示一个月,但有些界面会显示最多3个月的日历,以减轻用户的点击负担并提供更好的概览。

    快捷键

    月份日历常带有几个不同的快捷键:

    选择某个日期

    转到上个月/下个月

    转到上一年/下一年

    转到今天(当当天的日期不是默认日期时尤其重要)

    关闭日期选择器

    锁定选择区间

    对于某些界面,会出现某些日期不允许选择的情况。这种情况通常是出现在只能选择银行工作日,或者是未来的几天、未来某个月的几天。

    两种输入数据的方式:快速简便

    在为提高Web应用程序的效率而设计时,输入的上下文这一块是较少受到关注的。在大多数台式计算机上,最常用的输入数据的方式是通过键盘或鼠标。在移动设备上,点触,小键盘和相机是最常用的输入方法。

    使用日期选择器是输入日期的简便方法。但也要找到一种快速而轻松的输入日期的方法—— 这种方法是用户不需要在输入工具之间切换,而是可以通过一个输入工具就完成他们的输入任务。

    为了方便文本输入,请考虑使用“ 容错模式“来减少输入错误。

    良好的默认值

    通过预先选择适当的日期,使用“良好的默认模式”来获得更好的数据和拼写准确性。

    预选择的默认值将取决于上下文,但通常是当前日期或时间。但是,如果你正在设计公共交通路线规划器,你可能会把默认值设为从现在开始后的半小时,因为大多数旅行者在搜索票价时不会马上开始他们的旅行。

    检查日期范围有效性

    如果用户正在选择日期范围,最好不要让结束日期在开始日期之前。这意味着要留心开始日期的设置,如果开始日期设置为任何更大的日期,就要更改结束日期。

    展示完整的周数

    展示完整的周数,即使这个月不是在周末开始。用灰色显示上个月和下个月的可见日期,但请确保它们仍然可以选择。

    使链接目标变大

    请确保链接目标很大,因为这样很容易点击。

    基本原理

    日期选择器是被用户普遍理解的一个熟悉的图形界面。它可以帮助用户轻松地选择日期或日期范围,以便在提交信息或过滤数据时使用。

    论述

    国际方面的考虑

    在一些国家,人们通常会把周日作为一周的第一天,而在许多欧洲和亚洲国家,周一通常被描述为一周的第一天。

    一些国家(如德国和斯堪的纳维亚国家)使用周数进行总体规划。在这些国家,使用周数几乎与使用月份名称来描述日期范围一样常见。请考虑显示每周行的周数。

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

    相关文章

      网友评论

        本文标题:用户界面设计模式1.5表单:日期选择器

        本文链接:https://www.haomeiwen.com/subject/ytnonhtx.html