前言

在B端的业务之中，数据概览页面属于常见的页面，对主管有快速查看/查询/决策的左右，对于执行也能查询到KPI是否完成的，防止遗漏的作用。今天就结合业务之中的一个案例，跟大家做一个分享，有不同的意见可以留言或者是私聊沟通（谢谢大家）。

业务需求

我们团队主要做的OA类型的项目，主要是服务于公司内部的开发团队。随着业务的逐步拓展、用户的角色需求的多样化、角色数量的多样化、团队内部开发团队难度、设计师人手有限等矛盾不断递增，8个数据概览模块面临着体验复杂以及设计开发难度大的问题。

涉及到的元素

1. 业务：涉及8个应用，40个页面。
2. 角色分解：QA,IPM,SPM，TMDE,TES，模块owner。
3. 使用场景：管理者汇总团队信息、向上汇报以及分析数据。

现有问题

体验不一致，提高管理成本：

1. 架构组件以及样式不同的模块完全不相同，缺少规范性

开发低效，沟通成本高:

1. 组件重复开发，开发成本高
2. 设计师与开发沟通成本高

解决问题

解决流程分为：

找

高频框架

通过收集40个页面的布局，结合对执行者与决策者的角色行为进行分析，将所有的页面分为：

1. 数据概览
2. 数据分析
3. 详情查看

重复组件

将可视化按照空间分成；

1. 底层：背景
2. 内容层：页头+筛选+图表+表格
3. 顶层：动作按钮

高频样式

现有的样式杂乱无章，因此针对现有的样式进行收集和整理分类为布局，色板，字体，将所有的页面所有的元素进行拆解，统计高频样式。分成：

1. 布局：按照业务流程顺序区分
2. 高度：统计导航栏的高度重新计算高度
3. 走向：统计现有浏览器导航高度重新定高度
4. 字体：现有字体尤其是在数字的展现方式区分度不够

组

架构组合

3个场景并且对页面进行分类，提取其中高频的进行整理继续布局：

1. 数据概览：图表+页头
2. 数据分析：页头+筛选+指标+图表
3. 详情查看：页头+筛选+图表+详细表格

组件组合

模块根据业务进行“总-分”形式的：

1. 功能模块
2. 子模块
3. 子功能

上面是针对于常规的功能模块，针对非常规的模块「例如：结果页面」进行更加细化的区分“图表”“表格”“筛选”，再度细分成为主体和变体进行区分。

样式组合

1. 布局：将7个常规的布局手链成为2个：“字-左上，图表右下”，“图表左右，注释右边”
2. 高度：以win为例，导航栏分为3栏，再去保证页面的报告率格急性型分组：1920对应的是440，1600对应的是360px，1366对应的是280px
3. 走向：根据统计的数据来，3个模块会出现超过20字的注释或者是标签名，因此延伸出2套解决方案：“自上而下”，和“自下而上”，经过验证邀请几个同学发现自上而下阅读成本低，理解成本更低
4. 字体：现有字体中，常规的默认字体区区分度不高，所以引入了Din作为支持数字呈现的

总结

本次从找和组2个流程进行分解，希望能给到大家帮助。

Powered by Froala Editor