提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
时间选择器设计过程中的思考
时间选择器,听到这个组建的名字大家很轻松的想到:一个下拉框,有日期可以选择。
公司现有网站上针对历史订单有时间选择器,只是每次只能选择一个时间点,接到需求现有的时间选择器无法满足业务要求,要求优化下时间选择器,在一个下拉框内选择一个时间段。接到这个需求的第一反应就是这不简单吗,赶紧打开Antdesign参考(chao)起来,一会儿就有了下图几个交互样式,果真机智如我,考虑这么严谨,窃笑ing。
在这个设计的时候考虑到的交互如下:
1、时间段选择由左右两个月份日历组成
2、每页会有当月和相邻月份的日期,因此当月日期黑色字体显示,相邻月份的日期灰色字体显示
3、可以通过点击年份和月份进行月份选择
4、如果同一页中,月份相隔一个月,每个月份都可以单独向前翻和向后翻。
5、选择时间段跨月份时,相邻月份中灰色日期不给选中状态。
6、我们这个是针对历史订单查询,所以今天以前的时间应不可选。
这些交互的思考都是基于使用antdesign的时间选择器(https://ant.design/components/date-picker-cn/),但是在使用antdesign的时间选择器的过程并没有感觉很清爽,
发现了两个问题:
1、选择年份和月份的时候,选择的过程中容易混淆
2、同一页中相邻月份日期灰色日期容易混淆
3、看了苹果系统的日历发现,每个单独月份会有6行。而我的5行就可以了,是不是漏掉了什么?
针对以上三个问题,又进行了一次优化,
1、点击年份,切换到年份选择的时候,日历的表头为当前选中的年份,点击表头或者任意一个年份回到日期页。
2、点击月份显示当年的某个选择的月份,点击表头或者任意某月份回到日期页。
3、左右两个月份日历中,非当月日期去掉不显示。
4、左右两个日历默认5行,当出现6行情况下自动向下撑。
优化后有了下图
总结:任何一个小组建在设计的过程中,都应该考虑考虑再考虑,现有的不一定适合你的需求。
ps:近期喜欢的一句话“你就是自己的伯乐,与其等待别人发现自己,倒不如自己先发现自己。”
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册