在 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 协议
