数据在网页设计中显示方式设计的基本方法.pdfVIP

数据在网页设计中显示方式设计的基本方法

数据在网页设计中显示方式设计的基本方法

在当前互联网，各种数据可视化图表层出不穷，以下是店铺为大

家搜索整理的数据在网页设计中显示方式设计的基本方法，欢迎阅读!

一般的数据图表都可以拆分成最基本的两类元素：所描述的事

物及这个事物的数值，我们暂且将其分别定义为指标和指标值。比如

一个性别分布中，男性占比30%，女性占比70%，那么指标就是男性、

女性，指标值对应为30%、70%。

1.将指标值图形化

一个指标值就是一个数据，将数据的大小以图形的方式表现。比

如用柱形图的长度或高度表现数据大小，这也是最常用的可视化形式。

传统的柱形图、饼图有可能会带来审美疲劳，可尝试从图形的视

觉样式上进行一些创新，常用的方法就是将图形与指标的含义关联起

来。

比如GoogleZeitgeist在展现top10的搜索词时，展示的就是

“搜索”形状的柱形，图形与指标的含义相吻合，同时也做了立体的

视觉变化：

2.将指标图形化

一般用与指标含义相近的icon来表现，使用场景也比较多，如下：

3.将指标关系图形化

当存在多个指标时，挖掘指标之间的关系，并将其图形化表达，

可提升图表的可视化深度。常见有以下两种方式：

借助已有的场景来表现

联想自然或社会中有无场景与指标关系类似，然后借助此场景来

表现。

比如百度统计流量研究院操作系统的分布，首先分为windows、

mac还有其他操作系统，windows又包含xp、2003等多种子系统。

根据这种关系联想，发现宇宙星系中也有类似的关系：宇宙中

有很多星系，我们最为熟悉的是太阳系，太阳系中又包括各个行星，

因此整体借用宇宙星系的场景，将熟知的windows比喻成太阳系，将

xp、window7等比喻成太阳系中的行星，将mac和其他系统比喻成

其他星系，表现如下：

构建场景来表现

指标之间往往具有一些关联特征，如从简单到复杂、从低级到高

级、从前到后等等。如无法找到已存在的对应场景，也可构建场景。

比如百度统计流量研究院中的学历分布，指标分别是小学、初中、

高中、本科等等，它们之间是一种越爬越高，从低等级到高等级的关

系，那么，这种关系可以通过构建一个台阶去表现，如下：

支付宝新出的个人年度账单中，在描述付款最多的三项时，构建

了一个领奖台的.形式：

小结：

根据之前3步，可将指标、指标值和指标关系分别进行图形化处

理。

以最简单的性别分布为例，可以得到一个线性的可视化过程，如

下：

以上图示为供参考的线性化过程，实际可视化思考中，将哪类元

素进行图形化或者图形化前后的顺序可能均有不同，需根据具体情况

处理。

4.将时间和空间可视化

时间

通过时间的维度来查看指标值的变化情况，一般通过增加时间轴

的形式，也就是常见的趋势图。

空间

当图表存在地域信息并且需要突出表现的时候，可用地图将空间

可视化，地图作为主背景呈现所有信息点。

GoogleZeitgeist在2010和2012年的年度热门回顾中，都是

以地图为主要载体(同时也结合了时间)，来呈现热门事件：

5.将数据进行概念转换

先看下生活中的概念转换，当我们需要喝水时，通常会说：给我

来一杯水;而不会说：给我来30ml的水。在这里，30ml是一个实际数

据，但是难以感知，所以用一杯的概念来转换。

同样在数据可视化，有时需要对数据进行概念转换，可加深用户

对数据的感知。常用方法有对比和比喻：

对比：

下图是一个介绍中国烟民数量的图表：如果只看左半部分