组件重设思考—日历组件

 /*    基础组件是后台设计的骨骼，优化ToB后台平台的用户体验，除了宏观方面，根据业务逻辑优化操作流程，还需要在地基工程上根据不同平台的用户习惯、开发性能等做好用且低开发成本的基础组件设计。在近期为前端开源项目做组件重新设计的工作中，进行了大量调研和优化思考，希望为部门之后的平台类设计打好坚固地基。*/

---

        由于前端开发成本等原因，旧有的日历组件难以进行大幅度改进。本次前端开源项目，给予了设计师对所有组件交互与视觉重设的机会，首当其冲进行优化的即一直被我视为工作中的芒刺的日历组件。

背景调研：

现有项目调用日历功能大致分为两种类型：

1.以「内网监控—NetRadar」为代表的异常实时监测系统。内网是连接百度数十万台服务器的庞大复杂网络，对于服务稳定、高效运行有着至关重要的作用，所以NetRadar的主要功能是实现7×24的持续实时监测。此类项目中日历使用需求集中在一天范围内，以小时等「短时段」为单位，进行时间切换。

2.以「天秤」为代表的数据统计平台。天秤一款是度量与评估百度运维工作效率的平台，主要功能为通过统计较长时段的数据，指导并检验运维工作的效率。此类项目中日历使用往往在本年度范围内，按天、月等「长时段」为单位，进行时间切换。

旧有问题（1）：

将起始时间与终止时间分离，增加用户的使用成本：用户在使用旧版日历时，需要经过八次视线停留和思考才能确定是符合预期的操作。这样的设计严重扩散了「短时段」用户的操作范围，增加操作步骤，使操作成本剧增。

图1.旧版日历用户操作路线

设计优化（1）：

减少「短时段」用户的操作步骤，将操作集中在小区域，降低操作成本。同时在不打开日历的情况下，为「长时段」用户提供日、月、年等快速选择按钮。如图2

图2.新版日历用户操作路线

旧有问题（2）：