为了降低汇报业绩过程中的领导理解成本、更好地将工作成果向其他人展示，这个时候，我们可以借助大屏技术。那么，怎么做好大屏可视化、满足业务小伙伴和老板的需求呢？这篇文章里，作者结合案例做了分享，一起来看。

前言

一直以来，业务伙伴以及团队在汇报业绩的场景中都是通过常规的表格或者是PPT等静态的方式，这种汇报方式不仅仅要求业务伙伴花时间去做相关的文件（PPT或者是表格），对于听汇报的领导的总结构建能力也是一个挑战，提高了领导的理解成本。

因此，业务伙伴和团队找了外援设计师，也就是我，负责这个需求的设计。

一、前期准备

1. 业务需求分析

动手做大屏可视化之前先要分析领导的关注点，根据跟产品以及同级领导2次沟通之后，可以把所有模块化为3个指标“QCT”，分别代表的“成本”“指标”“团队提效”。

所有模块的逻辑排布以及故事线展示方式都是根据3个标准展开。

2. 用户与场景

涉及到的用户可以归为2类：演员与观众。演员通常指的是团队或者是产品的负责人，需要向更高一级老板或者是团队伙伴交代现有产品的问题以及业绩和未来的规划。

观众：通常是2类-老板和团队伙伴，团队伙伴更多的是被迫来参加会议的，所以更多是查看相关的数据。老板作为汇报的目标用户，需要了解到现有团队和产品的现况。

在会议室座位分布上，团队负责人/产品负责人负责在前面宣讲，老板一般做的位置是右上角的座位，便于更近的查看到电视屏幕上全部的内容。其余人员按照职位往后分布。团队成员一般处在最远位置，只能在笔记本电脑上查看具体的内容。

3. 故事线搭建

具体动手之前，优先按照“QCT”的思路进行逻辑排布，首先项目成熟度和解耦地图属于成本总览，整机项目与研发项目属于指标，业务触达属于团队提效，主图由地图直观呈现全球各地域。

二、设计过程

1. 布局框架

通过分析人员座位分布结合4象限设计方法，将地图放在右上角呈现。左至下呈现“L”布局将整体填充，左边则是按照项目成熟度与解耦地图满足老板查看权重，底部由指标与提效内容进行横向排列。

2. 交互

交互主要分为2各方面地图交互与“模块交互”。

地图交互：

包含4个点：悬浮/下钻/拖拽/放大缩小。

悬浮：系统监控鼠标的移动，在相应的地图模块之上时候，国家模块边缘开始发光效果放大并且增加“Z”轴的悬浮呈现效果。满足老板对于每个区域的成果查看需求，同时又满足宣讲者“演员”的简化操作需求，所以采用的是悬浮+固定位置非模态弹窗的方案来呈现。

下钻：这个是后期添加的需求，主要是满足老板想要了解每个国家的项目进度的需求，为此增加了点击下钻的操作，老板会在下一步骤下看到每个国家更多详细的信息。

拖拽与放大缩小：2个手指联动的效果，所以放在一说，在一定的区域内，以2只手和2/3指头作为大幅度交互或者是小幅度交互。

3. 定义风格

针对风格的定义，优先级制定了一系列的为“硬件”“流动线”“潮流色”为主的关键词，针对关键词搜索出相关联的图片，逐步提取出使用较多的颜色，并且根据已有的图片寻找到相关的元素制定了“图形”“色彩”“字体”“构成”“质感”“体感”“动效”风格。

4. 选择图表

可视化图表分类很多，同时又存在混合和基础样式进行选择。在我们的业务之中，使用了占比类和比类以及主图的地图类的展示方式。

地图类：主图的人力地图。

占比类-判断：以“升级项目为例”—需求是要呈现在当前阶段的进度所在的百分比，同时还存在多阶段、双阶段的业务需求，因此选用了子弹图形式展现。

比较类-对比：以数据统计为例，业务需求是针对所在的整体项目的解耦程度进行统计，用指标卡的形式更能直接告诉老板现有的解耦进度。

三、设计交付

1. 动效

主要是采用APNG进行交付，相对png和gif相比，一个是比较清晰一个是比较小。

那和lottie的区别是什么呢？

APNG 是一种基于 PNG 格式的动画格式，支持透明背景和较高的色彩深度。它可以在现代的浏览器、图片查看器和编辑软件中播放，并且不需要任何额外的库或插件。APNG 文件相对较小，易于分享和嵌入网页，但在某些老旧的浏览器中可能不被完全支持。

Lottie 是一个由 Airbnb 开发的开源库，可用于创建和交付高度可定制的矢量动画，适用于移动应用程序和 Web。Lottie 使用 JSON 文件描述动画，同时依赖于底层的矢量图形库（如 Adobe After Effects 或 Bodymovin 插件）。Lottie 动画可以在多个平台上播放，并且可以实现更复杂的交互和动画效果。然而，Lottie 文件相对较大，需要额外的解析库来播放。

选择使用哪种格式取决于你的具体需求和目标平台。如果你只需要简单的动画效果，并希望在 Web 上展示或共享文件，APNG 可能是一个不错的选择。如果你需要更复杂的交互和高度可定制的动画，或者打算在移动应用程序中使用动画，Lottie 可能更适合你的需求。

结合实际业务谈，我们的动效并不复杂，因此采用的APNG的交付方式。

2. 字体实现

一般的开发都会使用默认的字体，其实也可以采用特殊字体通过字体包加载即可，但是这种开发成本比较高。数字字体推荐“DIN”。

四、未来规划

现在做的是第一期的规划，第二期主要是要针对“CT”内容进行填充以及地图的3级下钻进行进行优化，满足老板更细化的需求。

总结

以上是从“前期准备”“中期设计”“后期交付”3个流程节点讲述设计来进行思考与复盘，希望能对伙伴们带来思考方式。

为我投票

我在参加人人都是产品经理2023年度评选，希望喜欢我的文章的朋友都能来支持我一下~

点击下方链接进入我的个人参选页面，点击红心即可为我投票。

每人每天最多可投30票，投票即可获得抽奖机会，抽取书籍、人人都是产品经理纪念周边&起点课堂会员等好礼哦！

投票传送门：https://996.pm/Y9awo