美文网首页
组件重设思考—日历组件

组件重设思考—日历组件

作者: 路过的北燕 | 来源:发表于2017-12-07 10:59 被阅读0次

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


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

背景调研:

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

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

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

旧有问题(1):

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

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

设计优化(1):

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

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

旧有问题(2):

相关文章

  • 组件重设思考—日历组件

    /* 基础组件是后台设计的骨骼,优化ToB后台平台的用户体验,除了宏观方面,根据业务逻辑优化操作流程,还需要在地...

  • 高级任务3

    轮播组件曝光加载组件Tab组件日历组件Modal 组件

  • 面向对象实战

    代码预览 tab组件懒加载组件无限轮播组件无限轮播二次封装组件modal组件日历组件

  • 面向对象 实战 -常用JS组件

    轮播组件轮播二次封装预览 曝光加载组件预览 Tab 组件预览 日历组件预览 Modal 组件预览

  • React 文档再学习 3 管理状态 - 正确的组织状态

    保留或者重设状态 对于以下的组件 如果重置了 contact ,组件内部的 的值不会被重置。如果需要重置整个...

  • 面向对象实战

    teb切换曝光组件轮播组件日历选择Modal代码地址

  • 日历组件

    1. pc日历 http://www.my97.net/dp/demo/index.htm http://tlia...

  • 日历组件

  • 日历组件

    页面引用日历组件 数据双向绑定,监听组件得年份和月份得变化 1613692800000 2021-02-19...

  • 日历组件

    日历展现形式普通文档流弹出层 isMask 灵活控制星期的排列、星期的显示格式、月份的显示格式1月 一月 Jan...

网友评论

      本文标题:组件重设思考—日历组件

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