移动端图表设计进阶
图表设计第二期分享主要以移动端的设计为主，为各位介绍图表构成和一些信息过载的解决方案。
大家应该都知道，移动端的图表设计因为受到画布大小和手势操作的影响，UI / UE都会有一些不同于Web端的展现和交互，本着图表设计的四大原则（Antv）：
准确：
从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息；
有效：
信息传达有重点，克制不冗余，避免信息过载；
清晰：
表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最少的时间内获取更多的信息；
美观：
对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。
和自己的实战经验，这篇文章会给大家说说在移动端的图表设计都有哪些特殊的地方，和该怎么处理这些特殊情况。
在这里还是以常用的三种图表类型（柱状图/饼图/折线图）给大家来介绍，我们要对图表进行设计和变化，就先了解图表，上一期文章已经介绍了三种图表的简介、适用和不适用场景（没看的同学可以去看看），这一期我们就来了解下三大图表的基本构成（移动端展现）：
移动端的图表设计可以在不影响四大原则的情况下，可以做一些基础优化，让界面看上去更美观，更专注，空间利用率更高。
柱状图+折线图
隐藏掉x轴标题（x轴一般是分类轴/连续轴/时间轴，所以很清晰，可以不需要标题）、y轴标题（移动端一般y轴标题都会在图表的左上角以该区域标题出现）、y轴线；
饼图+环图
隐藏直接显示在扇形或环形的连线数据标签，让用户点击面积区域或者对照图例去查看相应数据；
视觉优化了，另一些问题也就暴露出来了，从上面五个图可以看出：
1.基础柱状图和分组柱状图受X轴分类名称字端长度的影响，也就只能显示3-5个分类的数据；
2.产品强烈要求15个占比数据要用饼状图，饼图的规范是建议分类数据小于等于8个，多余的怎么办？
3.用户不想看饼图，觉得要一个一个点或者对照着看很麻烦，怎么样让用户可以一眼看到全部分类的数据？
这些都是实战过程中碰到的问题，我们在准备解决以上问题前，还有一个知识点需要了解下，就是移动端的特性：
a. 用户碎片化时间、浏览行为多余深入交互行为；
b. 多使用于触摸界面和手势化的简单交互操作（点击，点击并保持，平移，缩放）；
c. 硬件界面多样性；
d. 界面相对较小，内容信息呈现纵向和多线性；
e. 用户操作时环境条件多样；
f. 网络电量相对不稳定，要求具有性能高及特殊情况下的良好体验；
以上1、2、4点对于我们解决移动端的图标设计问题提供了思路和基础，我们需要运用简单的手势操作，去创造一些灵活且友好的数据可视化方案，让用户有一个可操作性强且清晰的认知过程。
经过了产品实战和竞品融合，逐渐摸索出一些解决方案，分享出来，供各位同学参考：
总结一下：
问题：分类信息过载？
解决：
饼图/环图：最后一个分类变成【其他】，来汇总剩余分类的数据，这个解决方案是需要和产品确认的，在真实的业务场景中是否可以使用这种形式来展现，如果产品非要分类数据全部展现，建议饼图/环图替换成柱状图或者条形图；
柱状图：根据X轴分类名称字段长度，确认且固定一屏宽度最多展示分类的数量，剩余的分类数据采用可以平移滑动的操作来展示，在这里，柱状图只允许有平滑移动，不允许有缩放操作（因为分类字段不允许的重叠或隐藏）；
折线图/面积图：X轴为分类数据时，方法同柱状图；X轴分类为连续或者时间轴时，允许平移+缩放功能（因为连续或者时间轴在缩小时，X轴数据允许离散分布，跨段显示）；
问题：字段长度过载？
解决：根据实际业务场景可选择折行，长度+...，字段倾斜来解决问题
问题：图表维度展示有限？
解决：
饼图/环图：多一个右上角列表与图表相互切换的按钮，给用户另一个数据查看视角；
柱状图/折线图：多一个右上角全屏按钮（股票APP用的比较多），用户可以横屏查看更多数据，方便用户查看和截图保存；
好了，以上就是本期的全部分享了，这里时间精力有限，也只梳理了常用的三种图标设计，但其中的问题和解决方案都是很典型的，其他类型的图表设计，其实都是基于这些的。
经历了这次数据可视化的设计实战，也明白了一些事情，与大家分享共勉：
设计是需要有【工匠】精神的，一个好产品没有想象的那么容易去设计和复制，我们需要精心打磨；
看似简单的事物背后其实并不简单，简单即复杂，复杂即简单；
商业设计离不开用户场景，有时间有精力一定要做前期调研和后期测试，你会有意想不到的收获；
本次分享如果这位同学觉得有用，可以帮忙点点【推荐】哦，你们的鼓励也是我输出的动力。
THANKS~
