一、"信息可视化"与“数据可视化”

在一些工作场合中，可能会发现这样的一个场景：老板甩了一份报表给视觉设计师，让他转换成一张美观的数据展示图，以方便做报告。看着这一堆数字，设计师犯了难：你让我对三五个数据进行艺术加工和表达没有问题，如何处理这一堆数据呢？

其实，那是因为老板把“信息可视化”和“数据可视化”的概念给搞混了，这两者在现实应用中非常接近，并且有时能够互相替换使用。

信息可视化，更注重艺术效果，它是具体化的、独立的、需要手工定制的。并没有任何一个可视化程序能够基于任一数据生成具体的图片并在上面标注解释性文字。

数据可视化的概念则不同，它具有更广的普适性，同一类图表并不会因为数据不同而改变自己的展现形式，用户通过对数据进行可视化的应用来搭建报表。制作人员大多隶属于战略规划部门或者业务部门，例如数据分析师、运营人员等。

二、明确设计任务

随着用户在移动端浏览图表和数据的需求越来越多，我们的数据产品从Web端迁移到移动端变得迫在眉睫，对于交互设计师来说，刚拿到需求的时候绝对不能按照以往的设计流程立马就开始梳理功能模块，或尝试将大屏内容布局到小屏上。

首先应该认识到：

1、To B 工具类产品本身就有操作难度高，逻辑复杂的特点，光是Web端的操作对于很多人来说就不好上手，但Web端的屏幕空间较大，展示内容多。

2、手机的使用时间较碎片化，并不会占据人们日常生活中很大一块时间，所以并不适合处理复杂的问题，将复杂的操作简化也是设计重点之一。

3、在数据的缓存上，手机的性能比浏览器强大，所以应该尽量减少需要从网络加载的内容，能够使用移动端原生的控件尽量不要从Web端加载。

总结而言：以下几点是本次设计过程中需要着重解决的问题。

1、如何在有限的空间内汇总图表信息；

2、如何把Web端关键功能模块在移动端重构；

3、如何重新定义符合移动端的交互方式。

三、分析目标用户和使用场景

曾听到过一位BI产品的销售人员说过一句话：To C类产品需要说服的是用户，而To B 类产品需要说服的是老板。相对于To C类产品的用户至上，To B类产品更重视商业利益。如果说产品的“好用”直接受益者是数据分析师，那么“好看”才是公司老板买单的理由，这里的“好看”不仅仅指界面的美观，更多的是指图表内容能否清晰地反馈有价值的信息，能否发掘内部隐藏的问题，能否为公司后期发展提供参考。

对于决策层来说，为了制作一张图表在电脑前待很久的经常非常少见，大部分决策人员应该是在会议室内围着一张已经完成的报表进行讨论和分析，或者在公司以外的地方随时随地地监视关键指标的变化，并做出相应的指挥与应对措施。所以，Web端的重点是“编辑”，而移动端的重点应该放在“阅览”上。

提取关键模块

明确了移动端的核心需求为“阅览”后，设计师就可以对Web端需要迁移的功能做出取舍。

一款数据分析产品一般由以下几个模块组成：数据源、数据模型、报表、仪表盘。

数据源是用来建立数据模型的，把导入的数据进行配置，形成了数据模型，然后通过数据模型中的数据字段绘制报表，把绘制完毕的各个报表拼合成仪表盘，整个流程就结束了。看上去好像很复杂，其实这和做菜的过程非常相似，数据源就是食材，数据模型对应经过处理的食材，编辑报表等同于烹饪食材，最终形成的仪表盘就像烹饪后一桌子的食物。

由上文可知，移动端的主要需求是阅览，那么我们应该着重关注的迁移模块是Web端的仪表盘，如下图所示。

布局

明确了需要迁移的模块后，首先需要做的是布局整理。

Web端的界面主要分为五个功能区：图表区、文件列表区、常用操作区、过滤器、探索功能区。

图表区主要用来战术报表，用户通过这一界面来了解自己的业务情况。文件列表区用来归纳整理，切换各个报表文件，起到导航的作用。常用操作区主要放置一些与图表展现无关的全局功能，如刷新数据、定时邮件等。在绝大多数的网站设计里，导航和内容都是最先布局的，因为这两个模块构成了界面的主体部分