一、业务需求

我们团队主要做的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个流程进行分解，希望能给到大家帮助。