对的，这又是一篇关于数据可视化设计的总结。每次做可视化设计时总会引发新的思考，因为总是希望自己的方案能最大限度的兼顾美感和可用性。
然而经历过一个完整可视化项目后，会发现可视化设计最难的地方不在于思考单个场景下如何设计会好看，而是在于如何在数据不确定的情况下最大限度地增大方案的兼容性，使得数据在各种场景下都能以比较舒适的方式展示给用户。
数据的不确定性带来的视觉感受的不确定性，是数据可视化设计必须考虑的问题。
难喏图片，但总有一些方法是可以指引你做得更好的。
01、分析业务需求
业务目的：为什么要做这个功能？为了完成数据到图形的映射，将销售数据进行可视化，挖掘数据之间存在的规律和联系。方便团队对关键信息进行讨论和决策，呈现数据价值，引导销售leader有目的性地调整战略。
业务目标：产品期望得到怎样的成果？把数据以清晰、易懂、舒适、好看的可视化图表呈现，操作简单，让用户易用、好用。
02、分析用户需求
目标用户：用户为销售背景，对数据相对敏感。
用户需求：他们为什么要使用这个功能？能对销售数据情况有更直观清晰地认知，以便做出更有针对性的决策，拔高销售业绩。
用户体验路径：对数据相对敏感的用户利用电脑打开网页，查看各类型销售数据，了解销售业绩情况。通过点选操作，查看特定时间段或者特定类型数据。通过轻移鼠标，查看图表中更为详细数据，并轻松完成数据分析。
用户体验目标：能快速地总体概览销售数据情况，也能通过轻交互行为查看详细数据项。
03、分析关键因素
(用户的动机、担忧、障碍)
动机(使用前)：更直观地了解销售情况，然后可以做出有效的激励方案，拔高销售业绩。
动机解决方案：把抽象的数据准确地转换为图表，让数据隐含的关系一目了然。
担忧(使用前)：
- 看不懂数据；
- 不确定图表代表的是哪类信息；
- 数据可能不准确；
- 可能需要很强的数据分析能力才行；
- 有不需要操作即可查看的数据吗；
- 能否主动选择观察某个时间段的特征。
担忧解决方案：
- 对数据进行适当的解释说明，帮助用户看懂数据；
- 展示合适的标题，表明图表代表的数据；
- 严格核对，确保数据准确；
- 对每个图表数据的变化进行概括性总结，让用户不需要认真分析就知道发生了什么；
- 让用户不需要操作即可查看数据概况；
- 提供机会供用户进行自主分析；
- 提供时间筛选器，让用户自主选择观察特定时间区间内的数据特征。
障碍(使用中)：不知道哪些图表可以或需要进行轻交互操作才能展示出来详细信息。
障碍解决方案：设计时需要注意让信息一目了然，对能展开详细数据的图表提供一些提示，并且交互过渡自然。
对用户使用路径中关键因素的分析其实很重要，在设计前能帮助我们有效规避问题，在设计后能把帮助我们完成设计的自检。
04、归纳设计需求
梳理总结上述问题，归纳设计需求，明确设计策略：
- 分析数据特征，选择合适的图表进行表示
- 选用具有总结性的标题，展示图表指向的数据类型的同时，直白地告诉用户发生的变化，确保不需要用户有很强的数据分析能力
- 在总结性语言后面增加箭头符号：↗️和↘️，让数据上升或下降趋势更直观明了
- 对数据进行严格核对，确保数据准确
- 对数据进行适当的解释说明，帮助用户看懂数据
- 有交互的地方要体现能进行交互的感觉，确保用户能看懂并进行交互动作
- 每个图表增加时间筛选项，便于用户自由选择观察提取时间区间内的数据变化特征
05、选择合适的图表
前提要求：这个项目中，除转介绍图表外，皆以时间为横轴，对数据进行分析。
个人销售数据中极端场景考虑：个人销售数据可能会出现很惨淡的现象。
限制：无法把累计和新增两个维度的数据放在同一图表中，因为累计和新增在数量上的跨度特别大，视觉上会造成不和谐。且同时存在两个维度的数据，对数据的直观性也造成影响。
开发实现方法：Element组件
1. 个人新增粉丝数量：
特点：数据类型单一
要求：需要分析数据的变化趋势，展示数据在连续区域上的变化规律，因此选用趋势类图表
极端场景考虑：可能在连续区间上没有发生新增，为增强图表视觉效果体验，选用面积图
图表优势：能最大程度丰富图表样式，同时又有直观的数据趋势走向
2. 个人新增助学数量：
特点：个体各类型数据平均值不高，各类型数据相对较少
要求：需要显示个人成单总数和各类型成单数占比的情况
极端场景考虑：基于个人在单日成单总数为0，或是某类型成单数据为0的极端场景考虑，选择使用占比类一般堆叠柱状图
图表优势：一方面展示各类型数据之间占比情况和总体数据情况，另一方面提升视觉体验，避免因为数据为0导致视觉上出现分裂混乱
3. 个人销售目标数据：
特点：数据类型单一，主要要求能直观展示当下和目标之间的差距大小关系
要求：需要能一眼看出当下和目标之间的差距
图表优势：选用水波图，因为它能以一种比较形象有趣的形式表示占比，而且在用户未操作的情况下，能给数据可视化页面提供一些动态的效果
极端场景考虑：目标完成率为0%或100%的情况下，会出现空白和太满两种极端视觉效果。为提升两种极端场景下视觉体验，要求前端对图表进行一些设置：完成率为0的情况下，有底；完成率为100的情况下，视觉高度为99.5%
4. 个人成单数据类型占比：
特点：数据类型固定
要求：体现同一时间维度各类型数据的占比情况
图表优势：采用环形图，能快速感知每个类型数据的占比情况，还能显示全部类型下缴费率情况
极端场景考虑：各个类型数据均为0的情况下，需提供一些提示和默认图形底色，让界面不至于空白
5. 个人成单转介绍比例：
特点：真正完成转化并进行转介绍的用户相对来说还是比较少的，分布情况不确定
要求：需要显示已转化用户进行的转介绍数，且显示转介绍数中已缴费用户的占比情况；既要能整体看，又要能详细看，还能选择转介绍用户数据区间查看
极端场景考虑：可能存在零星几个转化后用户进行了转介绍，且转介绍数很少，整体数据看起来会比较惨淡
图表优势：选用占比类百分比堆叠柱状图，既能显示每个已转化用户的转介绍情况，又能看到其中完成缴费用户的占比情况，且能通过底部操作轴的拉伸，完成整体或细节数据的查看
总结一下，关于个人销售数据可视化的界面大概长这个样子：
关于颜色的选择和排版的方式，在我这篇文章中有讲解过，想了解的朋友可以去看看?️?️?️设计方法论：聊聊我是怎么开始数据可视化设计的
出于对美观和实用性的维护，在颜色方面的选择方面需要考虑颜色的功能性和可读性，同时还要考虑协调性和舒适性。
所以，虽然暗黑模式下，看起来视觉冲击感会更强，但这个项目的目的是为了完成数据分析，而不是视觉冲击，因此选择了比较舒适的正常模式。
在排版方面，选用栅格系统排版方式。我始终相信规整对称的美，能给身心带来特别大的享受。
关于提升效率和后期维护成本的考虑，和开发展开了一些讨论，合理引用 Echarts + Element 等开源的设计组件，确实会使设计师及前端工程师事半功倍。
这个项目当然不止由这几个部分组成，但也不一一讲述了。
合理利用方法和组件有助于设计师把更多的精力投入到沉淀行业知识、梳理交互方式和创新视觉表现上。
这或许也是从设计支持到设计赋能，跨越的很大的一步。
让设计师既能切实解决问题，又能辅助业务挖掘，提升设计价值。
