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

阅读指南：

（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协议。

、系统结构：

① B/S架构：Browser/Server（浏览器/服务器的交互形式。）

• Browser支持的语言：HTML、CSS、JavaScript；S是服务器端Server支持的语言有：C、C++、Java等
• B/S架构系统有什么优点和缺点？ 优点：升级方便，只升级服务器代码即可，维护成本低。缺点：速度慢、体验不好、界面不炫酷
• 企业大部分使用B/S架构
• B/S架构的系统代表有：京东、百度、天猫等

② C/S架构：Client/Server（客户端/服务器的交互形式。）

• C/S架构的优点和缺点？
• 优点：速度快、体验好、界面炫酷（娱乐性多数是C/S架构）
• 缺点：升级麻烦、维护成本较高。
• C/S架构的系统代表有：QQ、微信、支付宝等

2、 HTML概述

① 什么是HTML？② 怎么开发HTML？③ 怎么运行HTML?

• ① HTML：Hyper Text Markup Language（超文本标记语言）

•由大量的标签组成，每一个标签都有开始标签和结束标签。

•超文本：图片、声音、视频等

• ② HTML开发使用普通的文本编辑器就行，创建扩展名是.html或.htm

•编辑器有：HBuilder、vscode等

③ 直接采用浏览器打开HTML文件就能运行

④ HTML是谁制定的？

• ④ W3C：世界万维网联盟

•W3C制定了HTML的规范：每个浏览器生产厂家都会遵守规范。HTML也会按照规范去写代码

•HTML规范目前最高的版本是：HTML5.0，简称H5

•我们现在主要学的HTML4.0（基本用法）

• 为了方便中国Web前端程序员开发，提供了大量帮助文档。为开发提供方便。

•w3school：先出现的，和W3C无关

•w3cschool：后出现的，和W3C无关

•W3C制定了很多规范：HTML/XML/http协议/https协议……

3、 第一个HTML

4、基本标签

• p：段落标记
• h1~h6：标题字，与word的标题字相同
• br：换行标记（独目标记）
• hr：横线（独目标记）
• color：横线颜色
• width：横线宽度（可以px和%）
• pre：预留格式
• del：删除字
• ins：插入字（有下划线）
• b：粗体字
• i：斜体字
• sup：上标
• sub：下标
• font：字体标签
• color：字体颜色
• size：字体大小（1~7）

页面效果图：

5、实体符号：为了避免和标签冲突，所以需要使用实体符号

• <：<
• >：>
• 空格：
• 注：html中按多个空格键，在网页中只显示一个空格。

6、HTML表格

• table：表格
• tr：行
• td：列
• th：列（比td加粗居中）
• 合并行：rowspan（一个格占两个位置）
• 注：row合并的时候，删除下面的单元格
• 合并列：colspan（一个格占两个位置）
• 注：col合并的时候，删除哪个没有要求

7、thead、tbody、tfoot标签

• thead、tbody、tfoot不是必须的，便于后期JS编写。

8、body的背景颜色和背景图片

• bgcolor：背景色
• background：背景图片
• 背景图片在背景色的上面

9、img标签

• src：图片的路径
• 只设置width，height会等比例缩放
• 只设置height，不起作用
• title：鼠标悬停时显示的信息
• alt：设置图片加载失败时显示的提示信息

10、 超链接或热链接

• href：hot references 热引用；
• 后面一定是一个资源的地址。
• 后面的路径可以是绝对路径也可以是相对路径，可以是网络某个资源的路径。
• target：
• _blank：新窗口
• _self：当前窗口（默认）
• _top：顶级窗口
• _parent：父级窗口

超链接的作用：

通过超链接可以从浏览器向服务器发送请求。

11、request与response的概念

• request：浏览器向服务器发送数据（请求）
• B --》S
• response：服务器向浏览器发送数据（响应）
• S--》B

12、列表

• 有序列表：ol
• type：1、A、a、I、i
• 无序列表：ul
• type：circle（○）、square（□）、disc（●）

13、表单（重点）

• action：写提交的URL地址
• method：默认get；还有post
• 表单有什么用？
• 答：收集用户的信息。表单展现之后，用户填写表单，点击提交。 （submit）
• 怎么画一个表单？
• 答：用form标签
• 一个网页可以有多个表单form
• 表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址。
• action属性用来指定数据提交给哪个服务器
• action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
• http://192.168.111.3:8080/oa/save 这是请求路径，
• 表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件。
• input中的type取值:
• radio：单选控件
• checkbox：多选控件
• submit：提交控件
• reset：重置控件
• button：普通控件
• text：文本控件
• password：密码控
• file：文件控件
• 上传文件专用
• hidden：隐藏域
• 网页上看不到，但是表单提交的时候数据会自动提交给服务器。
• input中的value属性用来指定按钮上显示的文本信息。
• 超链接a与表单form的区别？
• 答：表达form可以收集信息，而超链接a无法收集信息。
• 表单提交里面的按钮input中属性必须定义name，不然提交不了。
• 表单是以什么格式提交数据给服务器的？
• 格式：action?name=value&name=value&name=value..
• HTTP协议规定的，必须以这种格式提交给服务器
• java中String split('&');
• 重点强调：表单项写了name属性的，一律会提交给服务器。不想提交就不要写name属性。
• 文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
• 当name没有写的时候，该项不会提交给服务器
• 但是当value没有写的时候，value的默认值是空字符串"",将空字符串提交给服务器。java代码得到的是：String s = "";

效果图：

地址栏提交的信息：

?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我没有value属性；&position=ln&myFile=&myHidden=

14、表单的说明：

• ① 用户手动输入的文本框，都不需要给value赋值
• ② textarea没有value属性
• ③ radio、checkbox默认选项需要使用，checked="checked"（简写：checked）
• ④ select中的option属性：• selected="selected" 为默认选中 •size：显示条目数量
• multiple="multiple" 支持多选(select的属性)
• ⑤ input的属性
• readonly和disabled：
• 都是只读不能修改
• 数据不会提交
• maxlength：设置文本框中输入的字符数量。

15、HTML中的结点

• 在HTML文档中，任何元素（结点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档中id值不能重复。
• 注意：表单提交数据的时候，只和name有关系，和id无关
• id有什么作用？
• javascript语言：可以对HTML文档中的任何节点进行增删改操作。
• 获取节点时，通常通过id来获取节点
• HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id（DOM树）

16、div和span

• div和span有什么用？
• div和span都可以称为图层。
• 有什么用？
• 图层的作用为了保证页面可以灵活的布局。
• div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
• div和span的区别？
• di独占一行
• span不会独占一行

话说：“出门要看天”。我们出门办事、行车驶船、旅游观光、经商购物等等，都和天气的变化息息相关。给爱车贴膜也要看天，阴天和雨后是最适合的贴膜天气。因为在阴天和雨后，空气比较潮湿，悬浮物少，此时贴膜不会因为出现杂质而影响美观。很多车主知道，贴防爆膜要去有室内贴膜条件的装饰店，贴膜前，专业装饰店还会适当保持室内的湿度，避免灰尘造成膜内有沙砾、气泡和划痕。但可能多数车主并不知道，阴天和雨后空气湿度较大，静电减少，室内外的灰尘也明显减少，这正是贴膜的最好时机。需要提醒的是，不要在多尘天气和环境下贴膜。

【车友论坛热帖】

http://a.xcar.com.cn/bbs/hotposts.html

【爱卡汽车APP下载】

http://dw.xcar.com.cn/adcount.php?id=366