数据可视化产品设计四步法

除商业化的数据产品外，多数互联网公司内部使用的数据产品UI资源是非常匮乏的。因为没有更好的替代品，所以内部用户对数据产品的容忍度通常较高，“能用”是用户基本的期待了。

很早之前流传过一个产品需求和开发实现的段子(详见下图)，表达的核心思想是真正开发实现的过程会遇到时间成本、资源成本、开发质量等各种限制，最终上线的产品会和产品需求有一定的Gap，总结下来，“产品的美感不会超过产品经理的美感”，对于没有UI/UE的数据产品来讲，产品PRD的质量就是产品最终的上限了。如果产品方案就很粗糙，实现效果就不要有太多期待了。那如何快速设计一个高保真的数据可视化产品原型呢？

第一步：明确需求

业务基础的需求是能够快速获取到业务KPI数据，进行数据分析，数据可视化是在数据可读性、可视化、交互式分析提供更高效的解决方案。对于产品经理或运营，他们的KPI是什么，日常工作有哪些动作来达成，过程需要什么样的数据支撑决策/复盘，指标拆分的常用维度有哪些？以产品经理为例，日常要关注不同平台、不同流量入口流量及转化率，关键路径的转化漏斗，基于数据做产品功能迭代的决策支撑。

第二步：确定分析思路

没有分析思路的可视化产品是没有灵魂的，只是图标的堆叠，产品的价值就无法体现。好的可视化产品一定是有明确的分析思路包含在产品交互设计流程内。结合流量分析的例子，梳理产品分析场景如下：

• 每天上班后打开电脑，产品经理可以最直观的看到大盘KPI(访问转化率)最新数据，以及变化趋势

• 拆分到App、微信小程序、H5等不同平台，看指标是否正常，昨天微信小程序发版有没有出问题

• 发现微信小程序转化率环比上周下降20%，要进一步分析是哪个流量入口转化率降低了

• 经过分析发现，是首页底部新改版的信息流模式转化率降低40%，再进一步拆分从访问到下单全流程转化漏斗，看看是哪个步骤的用户流失最大

总结下来，产品设计时，要把用户看数据、分析数据思路，形成产品交互路径，能够指指引用户逐步进行操作，最终定位到问题，而不是把数据下载下来，excel在做筛选、分析。

第三步：设计产品方案

1.页面设计

常见的可视化页面设计有指标化管理的交互式分析、以及图表瀑布流展示两种。各有优缺点

布局方式一：指标化管理模式

优点：

• 页面简洁，重点突出，通过维度选择和tab切换获取更多的数据，避免一个页面过多图表难以聚焦

• 分析思路清晰，从汇总到维度细分，有需要时逐层拆分

• 方便权限管控，指标化管理可以从维度、指标控制权限

缺点：

• 默认展示信息量有限，分析过程依赖交互选择，信息隐藏的较深

• 指标化管理适合核心KPI数量不多的情况（10个以内），且指标维度要统一，不同指标维度不同时，交互要做一定调整，即日期作为共有维度，其他筛选条件只能随着指标tab切换位于指标卡下方。

布局方式二：瀑布流模式

优点：

• 信息平铺展示，无需过多交互操作，可快速获取需要数据信息

• 承载的信息量更多、可视化方式更丰富，每个图表都可以是一个分析主题

• 对图表共有维度要求不高，一般以日期为共有维度，作为全局筛选

缺点：

• 图表数量平铺过多时，重点不突出，难以聚焦

• 交互能力偏弱，用数据的人思路会受限于做图表的人

2.可视化图表类型选择

要避免为了炫酷的可视化效果而设计图表，每种图表有自己的适用场景(有很多专门的文章介绍)，上述例子会用到:

• 指标卡：展示指标数值及对比结果，直截了当的告诉用户昨天KPI是什么，怎么样

• 折线图(柱状图)：展示指标2.趋势，查看数据波动，多维度值时可作对比分析

• 漏斗图：流量转化漏斗，用于定位影响转化率的关键步骤

• 表格：最简单但功能最强大的图表类型，可以展示多维度交叉数据，适合查看明细、对比分析

3.  工具选择

工欲善其事，必先利其器。产品PRD工具最常用的是Axure，MAC系统也有用Sketch。以Axure为例，借助外部的组件包可以大幅提升产品交互设计效率，且可以设计出高保真的可视化原型图。把组件库文件导入Axure后，各种可视化图表就不需要再截图或者手画了，还有高保真交互。Axure可视化组件包可联系作者获取。

4.    页面示例

第四步：需求确认

产品PRD设计完成后，要首先和用户(产品、运营)确认是否可以满足日常的数据监控和分析需求，经过业务评审、产品内部优先级评审、开发评审等需求评审环节之后，就可以进入排期开发了。

继续阅读 打开APP，阅读体验更佳