玩转数据产品设计-小屏幕下的大数据

本文由  网易云 发布。

 

做者：魏辛逸（本篇文章仅限知乎内部分享，如需转载，请取得做者赞成受权。）

大数据的概念现在对于不少人来讲并不陌生，成功的数据分析，不但能够反映企业的经营情况，更能够帮助企业优化经营方式。但数据分析类产品使用起来会花费必定学习成本，面向的客户群体也不像to c用户那么广，因此其中的设计方法和设计观点普适性有限。本文主要整理了数据类产品从web端迁移到移动端的一些方法和浅薄感想，但愿能为同性质类产品的设计师提供一些借鉴思路。

 

 

在一些工做场合中，可能会发现这样一个场景：

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

其实，那是由于老板把“信息可视化”和“数据可视化”的概念给搞混了，这二者在现实应用中很是接近，而且有时可以互相替换使用。

信息可视化【Infographic（Information Graphic）】更注重艺术效果，它是具体化的、独立的、须要手工定制的。并无任何一个可视化程序可以基于任一数据生成具体的图片并在上面标注解释性文字。

                                                                  2013 The Information is Beautiful Awards Interactive 交互类 铜奖   U.S. Gun Deaths Periscopic

 

数据可视化【data visualization】的概念则不一样，它具备更广的普适性，同一类图表并不会由于数据不一样而改变本身的展示形式，用户经过对数据进行可视化的应用来搭建报表。制做人员大多隶属于战略规划部门或者业务部门，例如数据分析师、运营人员等等。

E-chart 柱状图

 

“网易有数”是网易推出的自助式商业智能分析产品，为用户提供了灵活的数据可视化报表制做功能，其设计原理是但愿用户按照本身的分析思路制做报表，从数据探索过程当中发现业务问题，并最终解决问题。为了知足用户随时随地灵活阅览的使用场景，产品将web端迁移到了移动端。

对于交互设计师来讲，刚拿到需求的时候绝对不能按照以往的设计流程立马就开始梳理功能模块和尝试着将大屏内容布局到小屏上。

首先应该认识到：

• to b工具类产品自己就有操做难度高，逻辑复杂的特色，光是web端的操做对于不少人来讲就很差上手，但web端的屏幕空间较大，展现内容多。相对于web端，移动端在展现内容上更要挑关键的、重要的进行展现。
• 手机的使用时间较碎片，并不会占据人们平常生活中很大一块时间，因此并不适合处理复杂的问题，将复杂的操做简化也是设计重点之一。
• 在数据的缓存上手机的性能比浏览器强大些，因此应该尽可能减小须要从网络加载的内容，可以提炼到native的控件尽可能不要从web端加载。

 

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

•   如何在有限的空间内汇总图表信息
•   如何把web端关键功能模块在移动端重构
•   如何从新定义符合移动端的交互方式

 

1、明确目标用户和使用场景

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

web端可以承载更多的功能，提供更专业的分析操做性，而移动端的特性是轻量级，灵活方便，不受时间空间等限制。对于决策层来讲，为了制做一张图表在电脑前待好久的场景很是少见，大部分决策人员应该是在会议室内围着一张已经完成的报表进行讨论和分析，或者在公司之外的地方随时随地监视关键指标的变化，并做出相应的指挥与应对措施。因此，web端的重点是“编辑”，而移动端的重心应该放在“阅览”上。

 

2、关键模块提取

明确了移动端的核心需求“阅览”，设计师就能够对web端须要迁移的功能做出取舍。首先，咱们来看下web端的使用流程和主要功能模块：

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

 

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

由上文可知，移动端的主要需求是阅览，那么咱们着重应该关注的迁移模块是web端的仪表盘。

web端仪表盘

 

明确了须要迁移的模块后，须要对该模块作一个布局整理

 

如图所示：图表区主要用以展现报表，占用了面积最大的一块区域，用户经过这一界面来了解本身的业务状况。文件列表区用以概括和整理各个文件层级，起到规划和导航的做用。过滤器更通俗一点的说法是筛选器，属于使用频率最高的操做之一，方便用户根据不一样维度筛选出本身最须要的信息。探索功能使用频率也比较高，但对于用户来讲有必定的学习成本，优先级相对低一些。还有一些经常使用功能辅助用户在浏览报表的过程当中提升效率；好比浏览数据、刷新等等。根据web端的模块布局，咱们能够尝试着结合用户的操做习惯，在移动端排列大致框架，而后在框架的基础上不断细化和完善设计。

 

3、操做手势定义

• 整理web端和移动端全部手势

工具类产品的特色之一是操做频繁，在迁移的过程当中应着重考虑符合移动端的交互方式，建议遵循如下流程：

• 整理出web端全部的操做手势以及对应的功能
• 判断哪部分操做能够直接延用
• 对不能延用的交互从新定义

 

如表：有一些web端的操做手势能够直接在移动端延用，好比单击、双击、拖动，可是有一些web端操做手势在移动端是没法延用的，须要从新设计相对应的手势。具体的操做根据具体的业务来最终肯定。

图表分类站在数据分析师的角度，通常会把图表按照其表达意义来分类，好比说适合分析趋势的图、适合分析占比的图等等；但从交互设计师的角度来看，咱们还会按照交互操做方式和操做区域来分类，这能够帮助咱们根据不一样的类别来设计不一样的交互手势。

 

带轴的图表：

包含最主流的图表类型如柱状图、折线图等；覆盖图表类型最多，可操做内容也最多，交互普适性最广

不带轴的图表：

每一个图表都有其个性化操做方式，普适性相对较窄

表格图：

操做少，和web端操做类似度最高，大部分手势可延用

 

• 按图表分类定义操做手势

带轴图表展现在移动端时，常常会遇到的一个问题：数据项很是难选中，由于web端的空间够大，咱们能够方便的选择和查看具体数据，而移动端的屏幕很小，不少时候光靠手指是没法选中密密麻麻的数据的，在这里就没法延用web端的操做。为了解决这个问题，能够引入选择器的概念。

滑块选择器

 

滑块选择器适用于经过一个方向的坐标系就可以定位数据项的图表

例如：普通柱状图、普通折线图、普通区域图等等；整个操做空间都集中在了屏幕底部，也保证了无论多小多细的数据项都能被选中。

十字选择器

 

十字选择器适用于没法经过一个方向的坐标系就可以定位数据项的图表

例如：散点图、堆叠柱状图、多折线图、多区域图等等，手指拖动十字中心选择数据项，操做区域覆盖整个屏幕。

三角选择器

 

不带轴图表通常都较为特殊，普适性没有带轴图表这么广，但也有必定的规律可循；三角选择器适用于饼图、南丁格尔图等

指针选择器

 

指针选择器适用于环形图、南丁格尔环形图等

图例

 

 

除了图表内的操做，用户还经常还须要经过图例查看不一样颜色的数据项各自的名称，通常显示在图表上方，web端屏幕够大，一眼就可以看完，几乎不须要额外操做；但在移动端，即便忽略每一个名称的字数长度，看全全部的图例也很难，在这种状况下，咱们得容许用户在这个区域横向拖动操做，必要的时候还能够作些操做引导。

探索面板

 

探索功能面板包括一些经常使用的操做，好比说排序、隐藏数据项等等，在web端是经过右键激活的；但在移动端并无右键这个操做，这个时候能够把右键替换成长按，一样可以触发面板。

tooltip

 

tooltip在web端图表操做中也很常见，当用户hover在某个数据项上时，tooltip中会列出关于这个数据项的详细信息；但在移动端有一些问题，首先，移动端没有hover的操做；其次，一些数据项的详细信息内容不少，颇有可能出现一个很大的浮层遮盖住大部分图表，当你在拖动滑块浏览数据信息的时候，这个浮层会随着你的滑动一直存在，影响美观。因此，咱们把tooltip内的信息放到屏幕最上方展现，保证浮层不会挡住图表，若是最上方展现不下，容许横向拖动浏览完整详情。

表格图

 

表格图的呈如今两个端十分类似，操做并很少。在移动端的展现须要注意宽高比和web端并不一样，可制定一些规则保证操做方便的同时能完整浏览所有数据。

最后送上一张迁移完成的对比图，若是想看更多的图表内容，欢迎搜索“网易有数”体验咱们的产品。

 

 

结语：

以上内容是我在在工做过程当中的一些摸索，对数据图表在移动端应用的一些整理和提炼，数据并不枯燥，每一个基础图表都有其特色，掌握这些特质、做出适用于不一样行业不一样业务的图表，帮助人们读懂数据并做出决策，就是数据可视化的价值所在。to b产品的受众面自己就窄，内容的侧重点也和to c产品有很大差异，但其中的一些设计方法和设计流程是通用的，但愿能为你们带来一些借鉴，以上案例、观点不免片面，期待更多的指点和交流。

 

网易有数：企业级大数据可视化分析平台。面向业务人员的自助式敏捷分析平台，采用PPT模式的报告制做，更加易学易用，具有强大的探索分析功能，真正帮助用户洞察数据发现价值。可点击这里免费试用。

 

了解 网易云 ：
网易云官网：https://www.163yun.com/
新用户大礼包：https://www.163yun.com/gift
网易云社区：https://sq.163yun.com/