组件详解｜日历日期选择器 Calendar date picker

在不少产品的设计过程中，产品团队可能都会需要为产品配置日期日历选择功能，那么在日期选择器的设计上，可以从哪些维度提升用户体验呢？这篇文章里，作者就针对日期选择器这一组件进行了拆解分析，一起来看。

一、适用

1. 用户没有特定的目标日期。
2. 不久的将来或过去的日期。

二、提升日期选择器的用户体验可以考虑以下几个关键点

1. 提供额外的关键决策数据

1）价格信息

预订航班、酒店或其它涉及价格变化的服务，在日期旁边显示每个日期的价格，有助于用户找到最实惠的选择。

例如，在航旅纵横预订航班时，在日期旁边以不同的颜色显示价格，橙色表示该特定日期的航班票价相对更实惠。

航旅纵横

2）号源信息

对于需要预约且预约数量有限的服务，在日期旁边显示实时号源状态，有助于用户了解每个日期的预约情况。

例如，在浙二医院预约挂号时，在日期旁边以“有号”和“无号”字样表示实时号源状态。

浙二医院

3）公共假日（国定假日）信息

预订酒店、航班、度假租赁服务，在日期旁边显示假日信息，有助于用户识别假期，并相应的计划他们的活动。

例如，在携程旅行预订航班、火车票时，在日期旁边显示公共假日信息。

携程旅行

2. 减少不必要的数据选择和显示

在较短的日期范围内选择日期，通过缩小日期选择器的日期范围，帮助用户专注于相关日期并简化选择过程。在确定适当的日期范围时，需考虑业务背景和用户行为偏好。

例1，浙二医院所有号源提前28天开放，预约未来28天的号源时，当天16:30前，其日期选择器仅显示次日开始算起27天内的日期，当天16:30后，日期选择器仅显示后日开始算起27天内的日期。

浙二医院

不同的医院号源提前开放时间不同，根据每个医院号源提前开放时间确定日期范围。

例2，高铁票预售期是15天，铁路12306日期选择器仅显示预售期相关的月份，用户仅可选择当天开始算起15天内的日期。

铁路12306

重大节日期间，随着铁路运营商调整政策，预售期可能会发生变化。

对于较少有限数量的日期选项，提供预定义的日期选项帮助用户简化日期选择过程，不需要提供日历日期选择器。

例如，杭州市第一人民医院所有号源提前7天开放，其日期选择器仅显示次日开始算起7天内的日期选项。

杭州市第一人民医院

3. 默认的预填充值

1）下一个可用日期

需要预约且号源有限的服务，将默认的预填充值设置为下一个可用日期，减少不必要的交互。

例如，在杭州市第一人民医院预约挂号时，如果次日没有号源则默认的预填充值为下一个有号源的日期。

杭州市第一人民医院

2）当前日期

在待办事项、任务管理、笔记应用中创建需要在当天完成的任务时，将截止日期默认设置为当前日期。

例如，在滴答清单中创建当天任务时，默认截止日期为当前日期。

滴答清单

在记账应用中，用户通常会在财务活动发生的当天记录，将默认的预填充值设置为当前日期。

例如，在随手记记账时，默认的预填充值为当前日期。

随手记

在购买最后一刻的优惠时，将默认的预填充值设置为当前日期。

例如，在美团预订今夜特价酒店时，默认的预填充值为当前日期。今夜特价是酒店清理当天尾房以减少损失，用户则寻求最后一刻的优惠低价入住。

3）特定日期

对于仅适用于特定日期的优惠活动时，将默认的预填充值设置为与活动日期一致。

例1，在携程旅行预订周末低价酒店时，默认的预填充值为周末。

携程旅行

例2，在同程旅行预订特价机票时，默认的预填充值为特定出发日期。

4）最近使用的日期

预订航班、火车票或酒店等服务，用户可能多次访问预订服务来比较价格或其它影响因素才能做出最终决定，记住用户选择的日期，创造无缝的预订体验。

例如，在铁路12306预订火车票时，首次打开应用时默认乘车日期为当前日期，在关闭并重新打开应用后默认乘车日期为用户上次选择的乘车日期。

铁路12306

5）默认的预填充值为空

在待办事项、任务管理、笔记应用中创建没有特定截止日期的任务时，默认的预填充值设置为空。

例如，在滴答清单创建没有特定截止日期的任务时，默认的预填充值为空。

滴答清单

4. 本地化

1）一周的开始

在不同国家，一周的开始时间并不完全一致。

例如，国际标准ISO8601:2004将星期一指定为一周的第一天。

根据中国国家标准GB/T 7409 – 2005，我国将星期一指定为一周的第一天。该标准与国际ISO8601标准一致。

虽然美国没有具体的标准指定，但美国政府维护的设计系统U.S. Web Design System在日期选择器中将星期日作为一周的第一天。

伊朗将周六指定为一周的第一天。（伊朗读写顺序从右往左）

为什么我国国家标准将星期一指定为一周的第一天，但日历将星期日列为一周的第一天？求解。

2）星期

一周七天的命名与天体和神联系起源于古巴比伦。

古罗马采用并改编了七天周制度，以罗马神话中的神来命名一周中的日子。西方语言中星期的表达大多源于拉丁语，拉丁语是古罗马的语言，拉丁语的情况可以分为基督教崛起前和崛起后（体现了古罗马帝国对基督教立场从抵制、迫害向包容、接受的演变）。

英语继承了基督教崛起前拉丁语的表达，但用北欧神话中的神取代了星期二至星期五相关的罗马神话中的神。

西班牙语、法语、意大利语中一周七天的命名源自于基督教崛起后的拉丁语的表达。

日本、韩国、朝鲜使用七曜纪日。

星期命名

星期最小缩写名称

3）公共假日（国定假日）、周末和工作周

大多数国家工作周为星期一至星期五，周末为星期六和星期日。

例如，周五日落至周六日落是犹太安息日，以色列的周末为周五至周六。一些穆斯林占多数的国家，周五是穆斯林的主麻日，一般会将周五和相邻的一天定为周末。

一些国家周末可能只有一天。

例如，印度尼西亚劳工法允许两种不同的工作时间制度：5天和6天工作制。

伊朗劳动法规定周五为周休日。

不同国家的公共假日不同。

因此，在日期选择器清晰标记公共假日、周末时必须考虑不同的国家和地区惯例。

3）历法

大多数国家都使用公历作为官方民用历。

一些国家使用不同的历法作为官方民用历。

例如，伊朗出于不同目的使用三套历法（伊朗历、伊斯兰历、公历），伊朗历是伊朗的民用历，伊斯兰历用于确定伊斯兰节日，公历仅用于国际目的。

作为国际旅行提供商alibaba.ir支持伊朗历、公历，伊斯兰节日在伊朗历中清晰标记。

4）读写顺序

阿拉伯语国家、波斯语国家、希伯来语国家、乌尔都语国家读写顺序从右往左。

例如，伊朗历中每周从星期六开始并在星期五结束。在伊朗航空预订航班时，日期选择器中日期从右往左排列。

5）日期格式

在不同的国家，日期格式并不完全一致。

例如，美国日期格式：mm/dd/yyyy（月/日/年）

中国日期格式：yyyy-mm-dd（年/月/日）

英国日期格式：dd/mm/yyyy（日/月/年）

感谢阅读，以上就是本次分享的全部内容，希望你能从这篇文章中有所收获。

​Read More