怎样设计出色的移动端可视化作品

时间：2023-09-17 07:24:01 | 来源：网站运营

时间：2023-09-17 07:24:01 来源：网站运营

怎样设计出色的移动端可视化作品：随着移动办公成为发展趋势，移动端可视化报表成为了企业运营管理的重要工具。特别是企业的中高层管理者以及外勤工作人员（如销售人员），使用移动报表可以随时随地掌握最新的信息，决策效率大幅提升。

为什么移动端报表需要重新设计？

这一趋势下，过去PC端的报表有了新的舞台——在移动设备，特别是手机上进行展现。然而移动端报表应该怎么做呢？有些人认为只是进行简单的适配，如同一个网页既可以在PC端查看，也可以在手机浏览器查看，只不过画面变小一点，仅此而已。然而是否对于特定设备进行适配，用户体验上会有明显的差别。让我们先来看一个知达学院官网的例子。

左边的网页未对手机屏幕进行适配。当用手机浏览器打开的时候看到的只是PC端网页的等比例缩小版本。由于屏幕变小了，logo、菜单文字都显得非常小，中间的图片也小了很多，而两侧又多了一些空白区域，效果非常不好。而右边的网页则采用响应式布局，根据设备的类型、分辨率、像素密度动态展现对应的布局设计和素材。logo、文字、图片大小恰到好处，菜单的部分也利用了移动控件集中到屏幕左上角。值得一提的是手机端考虑到一屏展现效果，默认只展示四幅课程图片，观众可以点击“更多课程”（有些网站设计的是上下滑动）以查看其他课程信息。可以看出，是否适配，视觉效果和用户体验差别很大，因此现在很多网站都针对手机端做了特别的设计。

网页如此，可视化报表亦如此。

让我们来看一个商场拍照积分识别监控仪表板的例子。原本设计的是PC分辨率，结构方正，PC端查看视觉效果不错。

但当我们用手机打开这幅仪表板的时候，如果不做适配的话，效果就比较糟糕了。可以看到在手机纵屏的情况下，图片缩在手机屏幕的上方，显的非常小，如果不进行拖动和缩放，根本看不清楚。

即便是将手机横过来，也不能一屏看完，最下方的内容依然需要滚动才能看完整。另外对于手机屏幕来说，一下子呈现这么多图表，信息量未免太大了。

于是我们针对手机屏幕进行了适配，同时舍弃了一些不关键的图标，最后的效果是第一屏呈现最为关键的统计信息，满足观众的基本需求。而上下滑动，可以查看更多的图表。基于手机的大小，屏幕上一般只展现两幅图表，这样观众可以在任意位置轻松的看清当时屏幕上所展现的图表。

由此可见，将可视化作品对于移动设备进行适配非常关键。可是随之而来的问题也产生了：数据分析师对于制作PC端的仪表板驾轻就熟，而对于移动端设计缺乏经验。这里我们来探讨几点移动端可视化作品设计原则，助各位小伙伴一臂之力。

一屏看懂

把最重要的信息放在最上方。人们对于手机端阅读的习惯和PC端存在很大不同。PC端仪表板焦点在中心位置，因此最重要的信息往往放在画面的中部。而手机仪表板，人们通常是从上往下阅读，很多观众甚至只看第一屏的图表而不往下滚动屏幕，因此越是下方的图表损失的观众就越多。这个时候重要的信息就需要放置在最上方，让观众一目了然的看到最重要的内容。

一屏讲清楚一个问题。近年来“一文读懂”、“一图看懂”系列的作品非常受欢迎，这是因为信息爆炸时代人们面对海量的信息，每天需要做大量的筛选，自然对于每篇内容的关注时间会变短。一个作品只有在最短时间内吸引观众才能成功。对于移动端的数据可视化作品而言，第一屏展现内容非常关键。且每一屏应当讲清楚一个问题，不同的内容可以以板块区分，而不是向下无限拼接延展。事实上如果内容不够有趣，没有多少观众会看到最后。

布局合理

区别于仪表板PC端设计——各种各样的布局存在即合理，手机端受屏幕大小限制，推荐使用以下常用的几种布局方式。

卡片布局。卡片布局是移动端仪表板最佳实践之一，特别是展现多个指标数据的时候，内容清晰，结构合理，同时可以结合一些艺术图形和图标，深受观众喜爱。

横向布局。将版面横向切割摆放，每一个横向区域平行展现图表，也是常用的布局方式，但是与卡片布局相比，就显得传统了一些。

总分布局。总分布局往往由一幅主图位于画面上方概括分析内容，然后下方展开更多的明细数据或者更多的分析维度。

简化与优化

图片要“大”，文字要少。

• 图片篇幅要大：一屏空间内展现1-4幅图片为宜，避免用户通过缩放才能看清的情况出现。
• 使用简单的图：一些在PC端取得良好效果的复杂图形展现太多数据点，并不适合手机。如散点图、桑基图、玫瑰图等包含较多数据点的图表就适合PC端而不适合手机，反之条形图、折线图、饼图等展现较少数据点的简单图形既适合PC端也适合手机端。
• 避免使用图例：图例是图表的辅助说明信息，比图表尺寸小的多，在移动设备上如果不放大基本看不清，应当避免使用。
• 使用较少的文字：为了便于观众看懂，PC端仪表板通常会有很多说明文字，移动端恰恰相反，观众基本以看图为主，因此应当尽量减少文字信息，使用一目了然的图表。

上方是一个移动端用户分析作品案例。数据来自于微信小程序后台，微信提供了到天的用户统计信息，包含新老用户、性别、年龄、省份、手机品牌等几项标签。分析师设计了手机端的展现界面，该作品使用了四幅简单的图片，没有使用图例，取而代之的是直接将文字标注在图上，非常易于理解。

避免使用交互控件。筛选器、参数是PC端可视化仪表板常用的交互控件，可以为仪表板增加互动性和探索性，让用户按需查看自己需要的数据，非常受欢迎。然而移动端恰恰相反，由于狭小的屏幕空间限制了控件的操作性，用户难以用手指从众多选项中精准的选到所需内容。同时移动设备往往会放大互动控件，内容过多的筛选器和参数将大篇幅的占用屏幕并遮挡其他图表，体验非常不好。

整体来说移动端仪表板是不适合使用交互控件的。如果必须要用，也尽量减少选项，使用单选框、图片文字点选、滑块等便于手指操控的方式。

上方的案例使用了移动端的筛选控件。由于选项较多，点击筛选器会看到整屏的选项，遮挡了其他图表，更多的选项甚至需要向下滚动。事实上用户很难从这样的筛选器选到自己需要的内容，既然如此，还是应该换一种设计思路。

使用移动端原生功能。移动设备自带了很多实用功能，如手势操作、截屏功能、交互控件差异、横竖屏切换等等。这些功能会让用户在移动端执行不同于PC端的操作。因而我们在设计移动端仪表板的时候也要充分考虑与利用这些移动端特性，给用户带来更好的体验。

便于分享

PC端的作品用于移动端查看，经常会扫描二维码，然而这一招不适用于移动端分享。假设你拿着一部手机，有人通过微信或邮件发了你一个二维码，或者在手机浏览器里看到了一个二维码链接，这个时候如果你的应用或设备不支持长按识别二维码功能，你是不是很抓狂这要怎么打开？

为了避免这样的问题发生，我们将对可视化作品如何在移动端分享进行总结。要在移动端分享可视化作品，除了将作品导出成图片、PDF做静态查看以外，基本的做法是将可视化作品发布成网页链接，网页可以最好的保留可视化作品的互动功能。

原生App。不少可视化工具提供了原生的移动端应用，如Tableau Mobile。用户可以通过下载安装相应的App，配置连接信息，并搜索相应的报表进行查看。

浏览器查看。通过移动端浏览器打开报表网址，报表会根据设备类型获取预置的移动端设计或者根据屏幕大小进行自动适配。

微信分享。通过普通的网页链接或二维码进行分享，用户难以通过网址或者二维码分辨这是什么内容，所以这种分享方式并不理想。优化的做法是采用插件、分享接口、开发有辨识度的分享链接或二维码、与其他内容集成或者截图的方式进行分享。

订阅推送。订阅的效果是用户会收到推送信息，而推送的内容包括图文、链接，是一种非常方便用户获取信息的方式。

集成方式。集成方式指通过开发方式将PC报表嵌入进企业其他应用：如企业微信、门户网站、公众号、企业App等。集成过程中还可以做单点登录和权限管理，是很多企业会采用的一种方式。

以上是将Tableau报表与企业微信做集成的例子。图一展现的是在企业微信里新增Tableau报表功能。图二是点击进去看见的一级报表目录，总共5个文件夹。图三是点其中的一个文件夹看到的二级目录，其中有三个是文件夹和一张报表。图四是打开报表的样子。用户只要进入了企业微信，就无需再输入密码即可根据设定的权限看到自己的报表。值得一提的是，根据权限设计，每位用户看到的文件夹、报表甚至报表的内容都可以不同。

总结

这一期我们对于移动端可视化作品为什么需要重新设计，以及怎样设计进行了经验分享。移动端可视化作品设计主要把握四大原则：

• 一屏看懂

• 布局合理

• 简化与优化

• 便于分享

根据这个思路，大家可以尝试改造自己PC端的可视化作品，让它们在移动端绽放新的活力。




生活中大大小小的事情，都离不开决策。我们相信数据驱动的决策行为不仅理性，而且更具有说服力。我们想借「数据星球」这个栏目触达各类生活及工作中与数据相关的场景，与大家一起了解其背后蕴含的数据思维。




文章内容会同步更新在知达学院微信公众号中，可添加关注我们。

公众号微信号：JEDI_EDU

公众号名称：知达学院

咨询详情可添加客服。

知达客服微信号：jedi-edu