用户体验设计模式@IT·互联网

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

2020-05-14  本文已影响0人  喵吉斯蒂


问题总结

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

示例

用法

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

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

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

解决方案

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

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

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

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

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

快捷键

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

选择某个日期

转到上个月/下个月

转到上一年/下一年

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

关闭日期选择器

锁定选择区间

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

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

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

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

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

良好的默认值

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

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

检查日期范围有效性

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

展示完整的周数

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

使链接目标变大

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

基本原理

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

论述

国际方面的考虑

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

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

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

上一篇下一篇

猜你喜欢

热点阅读