年以来，随着疫情方面的数据逐渐增多，一些互联网公司也纷纷发布一些可视化的数据产品服务，让用户可以实时并直观了解最新情况，可谓一个便民利器。而本文，则通过丁香医生、以及腾讯新闻推出的“疫情实时动态”可视化服务，总结分享其中运用到的一些常见的数据可视化经验。

阅读指南：

（1）受众人群：初级产品经理

（2）阅读收获

• 产品分析的方法论实例，包括用户体验五要素、马斯洛需求理论等；
• 数据可视化的基本技巧和遵循原则。

一、前言

1.1 概念

首先，需要先简单澄清下数据可视化的基本概念。数据可视化，实质上是把一些概要信息（数据、关键内容），并结合动静态的图像视频等形式进行展示，从而清晰传递核心信息。较为注重视觉层面的触达。

所以我们需要在数据之中挖掘一些重要的价值信息，并以一个可观的方式呈现。而“重要”的定义是十分明显的，核心数据、用户感兴趣、有决策意义，都可称之为重要。

1.2 动因

根据马斯洛五层次需求理论，那么数据可视化在其中属于什么层次的需求？

受疫情影响，生命安全成了最重要的社会需求。那么满足大众对这方面的广泛需求，推出这样的数据可视化产品是十分有必要，满足用户对疫情情况、资讯信息、医疗信息等方面的获取，从而保障自己基本的需求。

1.3 基本情况

（1）脉络

初始，丁香医生率先推出一个H5的可视化页面，汇总披露病例数据。随后，一些大厂也开始陆续推出，包括头条、腾讯等等。

而为什么大家都纷纷推出这样的数据服务，从战略层来说：一是做好企业责任，满足用户的知情需求；其二是满足自己的平台用户，并吸引流量，这都是拉新、促活的宝贵方式。

而展示的信息，主要包括每日的新增、累计病例数，各地区的病例分布，以及疫情新闻、医学知识等方面的内容。

（2）价值

• 用户：主要满足3类用户：大众用户、政企用户和患者用户。其中主要是前2者。大众用户是指像我们普遍受此前疫情影响生活、工作等方面的大众群体。政企用户是指政府和企业机构，同样受此次疫情影响，对机构的运作肯定也是有影响的，他们需要基于此做合适的决策，保障企业和员工的安全。患者用户是指受此次疫情传播切身影响到的用户，包括确诊、疑似、接触、被动隔离等，这类用户对医学信息的获取会更为迫切。
• 需求：面对3类不同的用户，主要是满足2大类需求，分布是资讯信息和医疗信息的获取。其中资讯信息包括疫情信息、政府信息、权威报道等。医疗信息包括医学知识、医院信息、医学服务等。

而接下来，也将依据用户体验五要素中的范围层、框架层、表现层，分别对这个疫情数据可视化的产品服务进行分析。

二、范围层

范围层的定义是决定这样的产品服务需要提供什么范围内的功能服务，什么是不做的。以及要做的数据指标，哪些是关键的，哪些是次要的。所以我们可以罗列一下这样数据可视化产品，基于用户的需求是需要准备什么样的数据指标。

2.1 范围确认

上图摘自国家卫健委某日的全日数据，在制作可视化的时候，需要考虑数据源的出处以及能提供什么样的指标及口径。

从中可以看出，大致可以划分两类关键数据：一个是病例的数据，一个是辅助性的数据。我们需要从中挑出其适合展示同时也是用户需要关心的数据。

通常做这种可视化产品，总结性的数据是十分关键的。而基于用户的关注点，每日新增、累计，就是其中的关键。

另外，基于“时间”和“地区”，代表了数据的“属性”。而属性则反应了这个数据可以以什么样的特点进行展现。而“时间”和“地区”是，最适合以数据趋势和数据分布的两种主要数据可视化表达形式。

2.2 主次确认

从下表可以看出，3家平台的数据指标在展示上是比较一致的，核心指标都一一罗列展示。

其中在时间的“小时”级别，以及“解除医学观察”等细分指标都不做展示，我认为主要出于以下目的：

• 小时：各地数据更新时间不一致，无法保证的小时级别的统一更新。所以在时效性无法保障的前提下，不做过于实时的展示是合理的；
• 解除医学观察：类似追踪到密切接触者、解除医学观察这样的指标太大，且边界有不确定性，用户对其感知不会太深，所以不展示存在较大不确定性的指标同样也是相对合理的；

三、框架层

框架层的定义是指根据要做的功能范围，应该确定如何正确布局和设计，可以简单理解为PPT的排版一样，以什么样的方式来排列展现这些元素。

3.1 布局

首先，我们需要先看看上文提及到的几类数据指标，重新分类一下,并标记相应的优先级。

显然按照合理的布局应该是：

1. 从数据指标来看，确诊、疑似、治愈、死亡这4个是关键指标，而累计要较新增重要些。
2. 从时间和地域上看，中国整体数据、各省市数据、全球各国数据这3类为关键指标。而由于目标用户主要为国内广大用户，那么按照优先级排序应以全国到各省市，再到全球各国，这样的顺序排列。

3.2 可视化方案

大致的布局是已经清晰了，那么接下来就需要基于数据类型采用合理的可视化展示形式。

前面也提过，由于是时间和地区下的各类数据，基于这样的属性，是可以做趋势、地域、列表等分布的展示方式。支持趋势的图形则主要为折线、柱状图，支持地域分布类型则为地图，而列表则为常规的类报表方式等。

其中，由于时间跨度较长和地区明细较多，如果使用柱状图，则会显得横轴较长，所以在有限的手机屏幕尺寸下，是不适宜展示的。

1. 趋势：由于时间跨度较长和地区明细较多，如果使用柱状图，则会显得横轴较长，所以在有限的手机屏幕尺寸下，是不适宜展示的。
2. 地图：地图的可视化有很多，比如像基础的echats组件，就支持各类2D、3D图形。但是在这里我们需要考虑的是，用户主要打开的应用设备是手机。那么手机的设备性能一定程度上限制了可视化的效果呈现。先忽略开发成本，过于酷炫的效果，会导致页面加载、渲染十分久，这在体验上十分不划算的。

（Echarts部分地图特性截图）

所以在这里，更倾向于采用粗一些的2D省级行政地图形式，开发周期短，且满足最基本需求。

3.3 平台分析

（1）汇总数据

相同点：

• 从布局上，3家都采用“整体数据+地图分布”的结合布局，清晰传达全国一天的整体数据；
• 从数据时效性上，都清晰明确数据的更新时间，从而保证与官方的一致性；
• 从整体数据上，都以“标题、人数、较昨日”3个字段，展示整体数据的主要信息；
• 统一以地图分布展示全国各省的分布，并以同一色系的深浅表达各省的数据发展情况，而图标的比例尺随着数据的增加也会发生变化。

差异点：

• 丁香医生在汇总数据中间穿插了此次疫情的一些基本信息，占据了一些空间。对于前期疫情爆发，有利于做信息普及，但到了中、后期，用户已经十分感知这方面的信息，优先级已经没有那么重要，其实完全可以作为一个hover进行信息展示。
• 整体数据上，基本展示4、5个核心指标，但在“标题”、“较昨日XX”和“具体数值”的排版上有所不同，而更是把标题放在2个指标之间。

评价：正常应遵循“标题+具体数值+较昨日变化”这样的排列比较合适，上下顺序先从标题了解该指标的含义，居中放大具体数值，突出关键信息，其次显示较昨日变化对比，感知变化情况。

（2）各指标趋势

相同点：

• 基于新增和累计两个维度，都展示了确诊、疑似、死亡和治愈等指标的数据趋势；
• 数据内涵和数值接近的指标，都做合并在同一折线图中，这样使得页面简洁，且便于数据之间做比对、关联。比如新增确诊和新增疑似，2者的数据内涵相对接近，且数值是比较接近，都是千级单位。那么这样的折线展示两者关联关系，又不会因为展示其他不相关又悬殊的指标造成误解。

差异点：

• 丁香医生在展示的指标较多一些，且增加了死亡率和治愈率等百分比类型的指标。
• 和腾讯新闻的版式比较接近，且使用了不同的色系进行分类表达。而丁香医生主要以左右滑动的交互收缩形式展示。减少空间，但降低了其他图表的漏出。
• 丁香医生突出了湖北和非湖北的数据，这样的好处可以比较全国和非湖北，侧面表达目前的疫情传播困难程度主要在湖北，其他地区相较轻一些，实际比全国的平均值更低，缓轻心理压力（这就是可视化的魅力）。

（3）国内各省市分布

相同点：统一以常规列表分布展示国内各省市的疫情数据情况，并集中以地区、确诊、死亡、治愈等字段。

差异点：

• 和腾讯新闻有明确的标题进行布局区分，显示国内疫情数据。而丁香医生没有明确展示，与上面版块的边界过于混淆。
• 和腾讯新闻较丁香医生额外增加“新增确诊”指标，并且以差异色值显示。
• 列表默认展开当前省份的各市数据，而和腾讯新闻伸缩展开按钮默认统一在右侧，与丁香医生显示左侧不同，较为符合移动端产品交互习惯。
• 有趣的是，优先展示当前用户地理位置所在省份的数据展示，再以累计确诊人数进行顺序排列。而腾讯新闻和丁香新闻统一以累计确诊人数多少排列。

评价：

1. 考虑排序、筛选的展示逻辑，一般从大到小。
2. 移动端页面因为便于依据当前用户的地理位置，可以采用个性化的手段做一些差异显示，这样在保证整体数据展示的过程也优先展示用户接近的数据信息，体验更佳。

（4）海外各国分布

展示方式如国内疫情一致，这里不多说。而唯一不同的是，丁香医生在全球各国的基础做了“洲”单位的分类。这样的好处是，分类显得更有层次性，了解某个范围内的地区更有显著性。

四、表现层

表现层所关注的，是页面各个元素组件的形状、色彩和大小比例搭配。同时数据可视化十分重视图形色彩的表达，一个好的视觉设计，能够为数据的信息传递起到十分重要的作用。

4.1 汇总数据

从上图可以看出，3家平台都展示了4个关键指标“确诊”、“疑似”、“死亡”和“治愈”，以及在色彩选择上，尽管有具体色值的差别，但是理念是都较为接近的。

• 确诊：首先疫情确诊人数，本身是一个起提醒警示作用的数据含义，所以采用偏红色的表达是合理的，而丁香医生和腾讯新闻则保持了这个理念。
• 疑似：疑似的指标内涵也是有一定的警醒作用，但是由于较“确诊”的程度轻些，那么采用黄粽色系，可以相对和缓一些，而这3家在这方面是保持一致的；
• 死亡：这个指标内涵本质上是一个严肃悲伤的事情，大家可以留意在一些关于“死亡”的场合，都会着装严肃内敛，甚至几乎统一黑色色系。所以，这样的指标在色彩上选择偏暗深色系是比较合理的；
• 治愈：治愈本身代表由坏转向好的意义，那么用一种代表阳光、希望的色彩是恰到好处的，所以采用偏绿色的色彩；

4.2 地图分布

地图分布通常是以颜色深浅代表数据的“密集程度”，那么就要确定2个关键的地方，1个是色系，另外1个是合理的刻度比例。前者根据数据内涵确定合适的色系进行表达，后者是做色系的层次区分。

• 丁香医生：相对开放一些，采用深红色系，直面表达此次传播疫情的危险程度；
• ：3者中相对更为克制一些，采用和缓一点的黄棕色，同时刻度较多，所以会显得深色区不多，这样在展示哪些地区更严重一些会显得没那么突出；
• 腾讯新闻：偏淡红色系，表达的危险信息要弱一些，处于3家平台的中间，既不“激进”也不过于“保守”。

4.3 折线趋势

• 对比色：折线图通常最多展示4种数据，但大多数只会展示2-3种，极少放4种。而折线图有2种以上的时候，就需要采用2种以上的独立色系来展示，这样的好处是比较好区分。但有些产品会采用同样的色系下2种深浅颜色，在屏幕十分大的情况下是合适的，但是在手机端有限的空间情况下，还是建议使用2种不同色系。从上图可以看出，除外，其余两家基本是采用了明显的区分。
• 数据节点：很多时候为了便于用户知道每个横轴刻度对应的节点位置，都会标记一个“圆点”在上面，这样好处是便于较快对应上位置。但是，当横轴的刻度过于密集的时候，这种展示是不适合的，因为过于密集显得页面不够简洁，且没有重点。显然这3家平台都是有这样的问题。而最好的方式，只需要在当前一天显示节点及显示具体数值，这样会更清晰可观，也便于辅助阅读。

以上就是此次疫情数据下，在可视化应用上的一些体验总结，3家都遵循了一些基本原则，同时也有各自的一些风格。而数据可视化的应用需要兼顾不同的因素，达到最佳效果。

一个理想的可视化设计流程，需要经历“数据指标的范围筛选、页面的布局抉择、可视化的视觉设计“等关键步骤。

五、总结

1. 选择数据，需确保数据的准确性、稳定性和易读性；
2. 进行可视化设计前，需要了解主要用户使用的设备类型，以及开发的主程序，切勿过于追求视觉效果，毕竟设备性能之间、APP和手机网页之间，都是有较大的性能差别的；
3. 数据的内涵和属性确定了可适用的展示方式，比如地理信息适用使用地图，占比分布适宜使用饼状图等；
4. 数据可视化的核心，是需要明确展示的目的和主题，同时需要分清主要和次要关键信息；
5. 数据可视化的布局本质上就是讲好一个“故事”，所以是故事就要有先后顺序、递进关系；
6. 每个元素组件，兼顾数据及数据之间背后的逻辑、关联关系；
7. 数据的罗列展示要整齐划一，一般遵循从大到小、从外到里的原则。
8. 视觉是数据可视化的一大利器，善用有利于合理化的展示，其中图表的设计、色彩的搭配至关重要。

3家平台地址：

丁香医生：https://ncov.dxy.cn/ncovh5/view/pneumonia

：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1

腾讯新闻：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7

作者：A.D，数据产品一枚；公众号：吾某

本文由 @A.D. 原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

着携带设备的越来越普及，移动端项目会越来越多的接触。所以想给大家介绍一下移动端适配那点事。#前端#

像素（Pel, pixel, pictureelement）

每个像素都是由三原色组成的单元。

1080*1920就是横向1080 纵向1920个物理像素点。

随着手机发展 从 720p 1080p 到现在的 2k 4k，逻辑上如果手机分辨率翻倍，岂不是之前的网页都缩小成一半了，不能迭代一次开发一次吧。 为了解决这个问题，就引申出 逻辑分辨率 的概念了

逻辑分辨率（设备独立像素）

设备独立像素(Density-independent Pixel, DIP) 又称密度无关像素。这个点代表一个可以由程序使用的虚拟像素。就比如 以前 360p 屏幕（宽360个物理像素 高640个物理像素） 的时候，你的 1px（一个逻辑分辨率） 定位一个 物理像素点。等到了 720p（宽720个物理像素 高1280个物理像素） 的时候 1px 定位 2*2个物理像素点

PPI超过326的屏幕就是 视网膜屏幕（Retina）#iPhone#

设备像素比(Device Pixel Ratio, DPR)

上面设备列表图中的 Dpr算法：

设备像素比(DPR) ＝ 物理像素(DP) / 设备独立像素(DIP)

这样关系就清楚了很多，通俗的说 1个css程序像素占用多少设备像素

这个数值一般都用在多倍图中，就是UI切图，经常会有一倍图，二倍图（@2x），三倍图(@3x)。

因为图片也是由像素点组成的，如果Dpr为3 ，100*100px 的img 元素，就应该放入一张实际宽高 300*300 的图片，这样才能清楚的展示。如果放入100*100 的图片，没有占满的像素点，会通过算法去取附近点的颜色，图就会模糊。放600*600 的图，多出的像素点会通过算法取平均色，图就会钝化。

Viewport（视口）

一般认为 移动设备上有 三个 viewport

1. layout viewport

移动端浏览器的默认布局视口， 可以通过 document.documentElement.clientWidth 来获取。

移动设备流行之前，pc网页大行其道，一开始为了让所有网站正常显示，移动端浏览器就决定默认情况下把viewport 设为一个较宽的值（980px）。这样pc端的网站也可以在手机上正常显示。

2. visual viewport

代表 浏览器可视区域的大小，可以通过 window.visualViewport 来获取

3. ideal viewport

最理想的 viewport ，宽高等于设备屏幕的物理宽高，剔除了分辨率的干扰，针对同一 ideal viewport 设备开发的网站，都将完美呈现。

理想视口可以 用过 meta标签去实现

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

宽度等于设备宽度，初始页面缩放1倍（就是不缩放），最小最大缩放1倍，禁止用户缩放

最后这个 viewport-fit=cover 是针对iphone刘海屏的，刘海跟ios底部操作栏会使网页不能全屏

淘宝移动端meta设置

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

移动端适配历史

原始不适配 -- viewport控制缩放 -- 媒体查询 -- 响应式布局 -- 移动端分流 -- Rem

移动端分流

移动端分流原理，主要是通过 UA（User Agent用户代理）去判断上网设备, 比如移动端输入 pc网址 https://www.toutiao.com/，就会跳转到 https://m.toutiao.com/ （移动端适配地址）。

附上判断的js代码

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

Rem

现在项目适配使用的是 vw + rem

rem（font size of the root element）是指相对于根元素（html）的字体大小的单位。
vw是可视窗口的宽度单位，不受设备分辨率影响, width: 1vw 等于 width: 1%。倘若 浏览器宽1000px，1vw = 10px

移动设备的原型图一般都是二倍图（宽750px）

着移动互联网的迅速发展，手机网站已经成为企业和个人宣传、推广和营销的重要渠道。WAP手机网站由于其适应手机屏幕大小、便于移动端访问和下载等特点，更是受到广泛关注和应用。然而，WAP手机网站的设计和开发与传统的PC网站有所不同，需要考虑手机屏幕大小、网络速度、用户操作习惯等多方面的因素。下面小编就和大家简单介绍一下WAP手机网站设计需要注意的点。

1. 删除代码内不必要的空白区和代码内的注释。确保代码内没多余的空白区非常重要。虽然空白区在屏幕上是不可见的，但浏览器要对空白区进行分析、排版、CSS分配和显示等。
2. 尽量少使用水平滚动条，因为水平滚动除了比较费时之外，用户还将难以判断他们在整个页面中的位置。
3. 使用内部样式表，一般而言，虽然使用外部样式表无论如何都有可能把样式从标记语言中分离出来，这是一种好的方法，但应注意权衡考虑。如果样式定义包含在XHTML代码中，则XHTML页面的显示就更快。但是外部样式表的使用提供一种在整个服务中更改样式的便利方法。在整个服务器中应该使用相同的外部样式表以避免把多个样式表下载到电话上。
4. 避免过多使用文本强调属性，如粗体，斜体和下划线等，因为这降低了小显示屏上内容的可读性。
5. 尽量少用float。因为现行的手机的屏幕限制，没有太多的空间去漂移，故提倡用静态布局和尽量少的用float。
6. 图片优化，图片的大小对网站的速度影响很大，要注意图片的优化，尽量压缩图片，对于背景图片可以使用CSS定义，这可以使页面加载速度大大提高。
7. 不要使用大型背景图像。大型背景图像会导致加载时间过长，特别是当用户通过低带宽连接访问网站时。可以通过CSS代码进行优化设计，如使用CSS渐变、PNG图片、背景图像等代替大型背景图像。
8. 确保网站在所有浏览器和设备上正确且兼容性良好。不同的浏览器和设备可能对代码的解析不同，因此需要进行充分的测试和修正。