45 | 产品案例分析：Chartistic的“复杂”图表
下载APP
关闭
渠道合作
推荐作者
45 | 产品案例分析：Chartistic的“复杂”图表
2018-03-03 邱岳 来自北京
《邱岳的产品手记》
课程介绍
00:00 / 00:00
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
Chartistic 是一款移动端做图表的工具。
在一般的概念中，制作图表都是一项复杂的工作，我们要处理数据、处理图表的样式，进行各种各样的配置工作；而由于手机端使用场景的不稳定，以及交互方式的限制，要为手机端设计图表工具其实是挺困难的一件事情。
除了要删掉大量的配置功能，牺牲自由度之外，我们还要尽可能地利用各种交互可能性，最大限度地拓展物理的小屏幕带来的限制。
“假数据”的靠谱
首先是选择图表样式，它将图表样式的支持删减到只剩五种，前四种我们都很熟悉，柱状图、折线图、面积图、饼图，最后一种很有意思，算是一种信息图。
我们先选择一个折线图，打开后直接看到图，所见即所得的效果。这个跟我们想象中创建一个图表的过程其实是有点不同的，按照逻辑顺序，似乎应该先维护数据表格，再基于数据表格来创建图表。
这里是用假数据填充了数据位，直接就能看到表格。这个思路很值得学习，不是按部就班地走完逻辑流程，而是用临时数据先直接完成流程，然后再回来对中间步骤做调整和修复。
这个页面中直接给出了一些编辑的位置，标题、横纵轴这些，样式设计和文案也很直观，会召唤我们直接去点击编辑。一旦我们开始动手去编辑，是直接可以看到成果变化的。
这个感觉很微妙，不是在黑影中做一大堆工作，然后一开灯看到成果。就像我们产品迭代，不论多烂，先发布一个版本，哪怕不对外，有看得见摸得着具体的东西，感觉就会很特别，英文叫：On Track，中文可以翻译成：“上轨道”，心里就有谱了。
被放大的屏幕
我们再来探索界面，左边可以直接改变图表类型，数值都会保留，然后这里的数据点都是可以拖动改变的，我很喜欢这个设计，这里很符合手机的操作场景。
之后是设计，我们可以向右或者向下拉出参数设置的部分，这里有一个动效的衔接，参数设置部分是折叠出来的，而图表的主体部分稍微缩小，还保留在屏幕内，并没有转场。
这样的设计相当于放大了屏幕的面积，让我们感觉这些设置似乎就停靠在屏幕边缘，一定程度降低这个界面复杂度，让操作流畅而连贯。
自由度的取舍
再来看这些设置项，刚才提到一个完整的图表工具在向移动端迁移时的取舍，从这些设置项里面，我们可以看到一些端倪，跟我们平时做表格的各种设置比起来，这里的设置少了很多。这背后取舍的逻辑就是保留核心价值，删除自由度，提高易用性。
我们一起来看看去掉了哪些易用性，除了我们刚才说的，图表类型只有几种之外，可以看到所有图表元素的位置和字体字号之类也是可以预定义的，只能调整是否显示之类的细节，但还是保留了一些坐标轴配置之类的东西。
还有一个有意思的设计是图表的配色，我们是没办法完全自定义图表元素配色的，只能在几种配色之间切换，甚至我们不能指定配色方案，只能依次切换。不得不说，Chartistic 这么做非常有胆量。
从场景出发
我们再看一个功能点，我们如何调整图表中的数据值？我们可以看到，有两个地方可以调整，一个是我们可以在图中直接拖拽，另一个就是可以向下拉开配置菜单去输入数值。同样的，添加或者删除数据点也有两个地方可以操作。
这个东西本身没有什么设计难度，但我感觉它背后有种设计思想，就是不从功能出发，而是从场景出发。
我们做设计的时候，可能会觉得需要有一个删除或添加数据点的功能，然后根据功能结构放好了，认为自己已经提供了这个功能，任务就完成了。
但是，完整地提供功能不是设计的终点，把每一个场景理解清楚并做好设计才也是。哪怕一个功能在一屏中以不同的形式出现两遍，也不是不能接受的。
最后介绍一下这个类似信息图的小设计，很有意思，你可以在这里选择一个图形，然后用它来指示一个百分比指标，操作也很简单，就像是调整水位一样。你可以搜索各种图形，做出来的图形虽然简单，但却精致实用。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享赞 18
提建议
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
44 | “玩”的启示：从游戏设计中学习产品设计（下）
下一篇
尾声：你的快乐是哪一种
精选留言(14)
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><rect fill-opacity="0"/></svg>)
CC置顶2018-03-03如果用户“开始 → 完成”一个任务的路径较长，需要完成较多的步骤才能看到结果，用户非常容易放弃，手机场景下更是如此。大部分用户希望自己点击一个按钮，所有的一切都如自己预期一样，自动完成。 使用“假数据”（或者说是占位数据）在一开始就产生正向反馈，让用户感觉已经“完成”任务，只需要“修改”一下，进而产生安全感和掌控感。我发现，很多用户在做一件事情时，比起重新“创建”更喜欢“拷贝”已有的任务，然后修改，这让他们感觉一切都在自己的掌握之中。 Chartistic 对手机场景的理解让我印象很深。我设计App时，经常容易套用已有的条条框框，而不是从场景设计出发考虑功能。好的设计，就是当用户想做一个动作时，那个功能就在他预期的地方；产生一个疑问时，答案就及时出现。 设计 Chartistic 的公司，Zoho，是一家开发面很广的公司。曾经因为工作需要调查一些现有解决方案的时候，经常能看到这个品牌。很佩服他们在保证广度的同时，还能在App细节上这么下功夫。 谢谢二爷的分享。 通过阅读专栏文章、回复和修改自己的评论，这段时间产生了之前从未有过的思考，学习到了新的思维方式，扫除了不少盲点，再次感恩。 非常希望这个专栏能有第二季。 :)展开作者回复: 谢谢 CC，看你每次的留言也收获颇丰，谢谢陪伴！
14
听天由己2018-03-03看完了今天的分享，我不由得想起了手机端如何处理文字编辑和写作，张小龙在年前的微信公开课上透露要推出公众号手机端管理后台，可更多支持短内容，之前也看到冯叔尝试。 我一直很好奇如何处理，总觉得用手机完成所有操作有些不合场景，缺少了一些仪式感与深度思考的过程。 细想下来，易用性和自由度很难兼得，在手机上方便高效地完成内容编辑和发布，在一定程度上要牺牲更多的设置或是排版，应当按照统一的格式规范化进行，我猜想可能是划分了具体模块和类型，将思考输出。展开作者回复: PC 向移动的大迁移之后，应该回归理性，该 PC 做的场景和事情，还会留在 PC 上，上帝的归上帝，凯撒的归凯撒。
3
不知道2018-03-05诶，周二就结束了，感觉完全没听够作者回复: 后会有期，江湖再见👋
2
Dylan2018-08-01“完整地提供功能不是设计的终点，把每一个场景理解清楚并做好设计才也是。” 这句话说到点子上了，很多产品经理甚至包括我在内，都有种倾向会变成功能经理，把功能点罗列出来，并且完成功能点的组合，就以为已经可以解决用户的问题了，确实是。但，这个问题的解决并不能贴合用户的使用场景，所以也没有提供很高的用户价值，这个时候我们往往是有更好的方案的。 此外，通过这个产品，我也学习到两点，第一点是先给用户展示结果，然后引导他去完成过程，这样的话，他是先有这种确定性，操作的意愿更强。 第二点就是页面的那个折叠的小设计，这个时候确实需要产品经理得多动动脑子了，也带一点这种交互的思维。展开2
考拉2018-05-18请问针对产品一般从哪些角度分析1
Kai2018-03-22感觉有些应用适合在手机做，有些并不适合。像excel这么重的产品，用户真愿意在手机上操作吗？觉得可能就是需要临时修改一个已建成的图表才需要1
Mr.C2018-03-06readhub可以用键盘的左右键切换看新闻，这个刚不小心点出来，确实触动到了作者回复: 那就多用用，哈哈哈哈
1
阿木君2018-03-03做轻量级操作的时候是很好用的。但如何两个信息图合成一个，这个并没有体现。是否因为自由度做了限制？作者回复: 确实合不起来……
1- 方薇2022-10-19 来自上海非常好
Deborah2021-07-22二爷，你试玩的这些App，是在哪里知道的，来源途径是什么呀？
皮特尔
2020-07-01这个应用的新版本仍然保留着这些设计，只是优化了很多交互细节、优化了UI，感觉用户体验更好了
;)2019-04-25特别喜欢这一节，二爷讲出了设计精髓。 已经反复听了很多遍了，每一次听都能理解更深～ 点赞👍
❄️霜儿❄️2018-09-29不错
summer2018-05-04写的很好......很喜欢二爷.....希望继续出专栏