45 | 产品案例分析：Chartistic的“复杂”图表

Chartistic 是一款移动端做图表的工具。

在一般的概念中，制作图表都是一项复杂的工作，我们要处理数据、处理图表的样式，进行各种各样的配置工作；而由于手机端使用场景的不稳定，以及交互方式的限制，要为手机端设计图表工具其实是挺困难的一件事情。

除了要删掉大量的配置功能，牺牲自由度之外，我们还要尽可能地利用各种交互可能性，最大限度地拓展物理的小屏幕带来的限制。

“假数据”的靠谱

首先是选择图表样式，它将图表样式的支持删减到只剩五种，前四种我们都很熟悉，柱状图、折线图、面积图、饼图，最后一种很有意思，算是一种信息图。

我们先选择一个折线图，打开后直接看到图，所见即所得的效果。这个跟我们想象中创建一个图表的过程其实是有点不同的，按照逻辑顺序，似乎应该先维护数据表格，再基于数据表格来创建图表。

这里是用假数据填充了数据位，直接就能看到表格。这个思路很值得学习，不是按部就班地走完逻辑流程，而是用临时数据先直接完成流程，然后再回来对中间步骤做调整和修复。

这个页面中直接给出了一些编辑的位置，标题、横纵轴这些，样式设计和文案也很直观，会召唤我们直接去点击编辑。一旦我们开始动手去编辑，是直接可以看到成果变化的。

这个感觉很微妙，不是在黑影中做一大堆工作，然后一开灯看到成果。就像我们产品迭代，不论多烂，先发布一个版本，哪怕不对外，有看得见摸得着具体的东西，感觉就会很特别，英文叫：On Track，中文可以翻译成：“上轨道”，心里就有谱了。

被放大的屏幕

我们再来探索界面，左边可以直接改变图表类型，数值都会保留，然后这里的数据点都是可以拖动改变的，我很喜欢这个设计，这里很符合手机的操作场景。

之后是设计，我们可以向右或者向下拉出参数设置的部分，这里有一个动效的衔接，参数设置部分是折叠出来的，而图表的主体部分稍微缩小，还保留在屏幕内，并没有转场。

这样的设计相当于放大了屏幕的面积，让我们感觉这些设置似乎就停靠在屏幕边缘，一定程度降低这个界面复杂度，让操作流畅而连贯。

自由度的取舍

再来看这些设置项，刚才提到一个完整的图表工具在向移动端迁移时的取舍，从这些设置项里面，我们可以看到一些端倪，跟我们平时做表格的各种设置比起来，这里的设置少了很多。这背后取舍的逻辑就是保留核心价值，删除自由度，提高易用性。

我们一起来看看去掉了哪些易用性，除了我们刚才说的，图表类型只有几种之外，可以看到所有图表元素的位置和字体字号之类也是可以预定义的，只能调整是否显示之类的细节，但还是保留了一些坐标轴配置之类的东西。

还有一个有意思的设计是图表的配色，我们是没办法完全自定义图表元素配色的，只能在几种配色之间切换，甚至我们不能指定配色方案，只能依次切换。不得不说，Chartistic 这么做非常有胆量。

从场景出发

我们再看一个功能点，我们如何调整图表中的数据值？我们可以看到，有两个地方可以调整，一个是我们可以在图中直接拖拽，另一个就是可以向下拉开配置菜单去输入数值。同样的，添加或者删除数据点也有两个地方可以操作。

这个东西本身没有什么设计难度，但我感觉它背后有种设计思想，就是不从功能出发，而是从场景出发。

我们做设计的时候，可能会觉得需要有一个删除或添加数据点的功能，然后根据功能结构放好了，认为自己已经提供了这个功能，任务就完成了。

但是，完整地提供功能不是设计的终点，把每一个场景理解清楚并做好设计才也是。哪怕一个功能在一屏中以不同的形式出现两遍，也不是不能接受的。

最后介绍一下这个类似信息图的小设计，很有意思，你可以在这里选择一个图形，然后用它来指示一个百分比指标，操作也很简单，就像是调整水位一样。你可以搜索各种图形，做出来的图形虽然简单，但却精致实用。

!

戳此获取你的专属海报