概览页视觉优化

休假回来，收到的第一个任务，就是优化下刚刚上线的概览页的设计，原因就是大家觉得太丑了。。

下面主要讲述记录下自己的优化步骤：

1. 请产品讲解业务，深入理解需求，然后自己验证目前样式上  所有图表所使用的图表类型是否准确 ；

2. 经验证，图表类型没有滥用，但“敏捷项目管理”模块，明显排版过于散乱压抑  从而优先优化此模块的排版  考虑业务上“迭代名称等内容”和下面两块“任务”和“缺陷”内容有总分包含的业务关系，所以排版上由上下排列尝试改为左右排列，优化后图片如下，其中剩余时间的表现样式做了几种风格尝试：

   

   

   

   

   

3. 而后考虑“应用”和“代码质量扫描”模块，这两个模块样式是完全通用的，但是目前设计没有做出 大家期望的  点击左侧的环或图例  同时会筛选右侧列表数据的效果，视觉上没有任何引导，调研和分析后，因为图例想要可以点击的效果  所以组件上选择了 按钮 (也可以说是筛选标签) 的样式，然后右侧数据是受左侧数据影响的  所以选取了 Tab 组件引导 样式美化为小箭头样式，优化后图片如下：

   

   为引导说明 点击环和图例都可以筛选右侧的数据，引入了小动效，默认平台内其他环形图是不可点击的且 hover 时只是颜色加深 20%，这里因为环形图是可以点击的  所以 hover 时做了扩大的效果  加入动效后  有微弱的呼吸感，右侧列表主要是想更多的表明筛选后的变化  所以加入插入插出的动效效果，如下：

   

4. 其他几个模块和产品讨论有需求改变就不多说了，最终几个模块一起输出效果如下：

感谢大家阅读~

附整体输出如下：

上一版概览页设计：

CI 看板设计优化思路相同，

优化前设计如下：

优化后设计如下：