关于一个数据概览的复盘

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

一、业务需求

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

涉及到的元素：

业务：涉及8个应用，40个页面。

角色分解：QA,IPM,SPM，TMDE,TES，模块owner。

使用场景：管理者汇总团队信息、向上汇报以及分析数据。

二、现有问题

体验不一致，提高管理成本：架构组件以及样式不同的模块完全不相同，缺少规范性

开发低效，沟通成本高:

解决问题解决流程分为：

1. 找

高频框架

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

重复组件

将可视化按照空间分成；

高频样式

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

布局：按照业务流程顺序区分

高度：统计导航栏的高度重新计算高度

走向：统计现有浏览器导航高度重新定高度

字体：现有字体尤其是在数字的展现方式区分度不够

2. 组

架构组合

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

数据概览：图表+页头

数据分析：页头+筛选+指标+图表

详情查看：页头+筛选+图表+详细表格

组件组合

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

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

样式组合

布局：将7个常规的布局手链成为2个：“字-左上，图表右下”，“图表左右，注释右边”

高度：以win为例，导航栏分为3栏，再去保证页面的报告率格急性型分组：1920对应的是440，1600对应的是360px，1366对应的是280px

走向：根据统计的数据来，3个模块会出现超过20字的注释或者是标签名，因此延伸出2套解决方案：“自上而下”，和“自下而上”，经过验证邀请几个同学发现自上而下阅读成本低，理解成本更低

字体：现有字体中，常规的默认字体区区分度不高，所以引入了Din作为支持数字呈现的

总结

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

专栏作家

一只鸡腿，微信公众号：B端设计一只鸡腿，人人都是产品经理专栏作家。一个吃货的B端设计师。

本文原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。