UI设计的外延信息图表设计

1、信息图表设计l 信息图表的设计流程信息图表的设计流程l 信息图表设计的要素信息图表设计的要素l 设计信息可视化的设计信息可视化的1010条建议条建议通常的通常的Infographic设计流程如下：设计流程如下：确立类型：空间类、时间类、定量类或三者综合。确立类型：空间类、时间类、定量类或三者综合。构成形式：合理运用图量、图状或时间轴等视觉元构成形式：合理运用图量、图状或时间轴等视觉元素表达一个连贯的信息整体。素表达一个连贯的信息整体。1. 选择手法：使用与主体相吻合的表现方式，平面静选择手法：使用与主体相吻合的表现方式，平面静态、视频动态、网络交互。态、视频动态、网络交互。 信息图表中最基本的

2、要素就是需要进行视觉化表达信息图表中最基本的要素就是需要进行视觉化表达的各种数据、信息和知识等。的各种数据、信息和知识等。 以数据为例，设计师通常会使用已有的软件，生以数据为例，设计师通常会使用已有的软件，生成线条、色块、箭头以及各种符号标成线条、色块、箭头以及各种符号标 记等要素对数据记等要素对数据进行表达，有时还需要使用简单直接的文字语言对图形进行表达，有时还需要使用简单直接的文字语言对图形化的信息进行注解。化的信息进行注解。 比例尺和标签等要素也常常出现在信息图表当中。比例尺和标签等要素也常常出现在信息图表当中。信息图表中的元素根据道格根据道格纽瑟姆纽瑟姆2004年定义，从表现年定义，从

3、表现形式的角度，形式的角度，“信息图表信息图表”作为视觉作为视觉工具应包括以下六类：工具应包括以下六类： 图表图表(charts)， 图解图解(diagrams)， 图形图形(graphs)， 表格表格(tables)， 地图地图(maps)， 名单名单(list)http:/ 图解 图形 表格 地图 名单 柱形图柱形图，条形图条形图，饼图饼图，折线图，XY 散点图，面积图，圆环图，雷达图，曲面图，气泡图，股价图，圆锥图、圆柱图或棱锥图柱形图显示一段时间内数据的变化，或者显示不同项目之间的对比。柱形图具有下列子图表类型。l 簇状柱形图簇状柱形图这种图表类型比较类别间的值。它还可以以三维效果显示

4、。如以下图表所示，水平方向表示类别，垂直方向表示各类别的值，从而强调值随时间的变化。l 堆积柱形图堆积柱形图这种图表类型显示各个项目与整体之间的关系，从而比较各类别的值在总和中的分布情况。它也可以以三维效果显示。l 百分比堆积柱形图百分比堆积柱形图这种图表类型以百分比形式比较各类别的值在总和中的分布情况。它也可以以三维效果显示。l 三维柱形图三维柱形图这种图表类型沿着两个数轴比较数据点（数据点：在图表中绘制的单个值，这些值由条形、柱形、折线、饼图或圆环图的扇面、圆点和其他被称为数据标记的图形表示。相同颜色的数据标记组成一个数据系列。）。例如，在下面的三维图表中，您可以比较欧洲的四个销售部门和其

5、他两个地区的业绩。柱形图条形图显示各个项目之间的对比。它具有以下子图表类型：l 簇状条形图簇状条形图 这种图表类型比较类别间的值。它也可以以三维效果显示。在下面的图表中，水平方向表示类别，垂直方向表示各类别的值，从而关注值的对比情况。l 堆积条形图堆积条形图 这种图表类型显示各个项目与整体之间的关系。它还可以以三维效果显示。l 百分比堆积条形图百分比堆积条形图 这种图表类型以百分比形式比较各类别的值在总和中的分布情况。它也可以以三维效果显示。条形图饼图显示组成数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示

6、。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）的项目在项目总和中所占的比例。饼图通常只显示一个数据系列，当您希望强调数据中的某个重要元素时可以采用饼图。饼图具有下列子图表类型：l 饼图饼图这种图表类型显示各个值在总和中的分布情况。它也可以以三维效果显示，如以下图表所示。l 分离型饼图分离型饼图这种图表类型显示各个值在总和中的分布情况，同时强调各个值的重要性。它也可以以三维效果显示。l 复合饼图复合饼图这是一种将用户定义的值提取出来并显示在另一个饼图中的饼图。例如，为了看清楚细小的扇区，您可以将它们组合成一个项目，然后在主图表旁的小型饼图或条形图中将该项目的各个成员分别显示出来。

7、l 复合条饼图复合条饼图这是一种将用户定义的数据提取处理出来并显示在另一个堆叠条形图中的饼图。饼图折线图按照相同间隔显示数据的趋势。它具有以下子图表类型：l 折线图折线图这种图表类型显示随时间或类别的变化趋势。在每个数据值处还可以显示标记。l 堆叠折线图堆叠折线图这种图表类型显示各个值的分布随时间或类别的变化趋势。在每个数据值处还可以显示标记。l 百分比堆叠折线图百分比堆叠折线图这种图表类型以百分比方式显示各个值的分布随时间或类别的变化趋势。在每个数据值处还可以显示标记。l 三维折线图三维折线图这是具有三维效果的折线图。折线图XY散点图显示若干数据系列（数据系列：在图表中绘制的相关数据点，这些

8、数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）中各数值之间的关系，或者将两组数绘制为xy坐标的一个系列。散点图通常用于科学数据，具有下列子图表类型：l 散点图散点图这种图表类型比较成对的数值。例如，以下散点图显示的是两组数据的不规则间隔（簇）。在为绘制散点图而准备数据时，将X值放在一行或一列，并在相邻的行或列中输入对应的y值。l 折线散点图折线散点图显示这种图表时，数据点之间可以显示也可以不显示直的或平滑的连接线。显示连接线时可以显示标记，也可以不显示标记。XY 散点图面积图强调大小随时间发生

9、的变化，它具有下列子图表类型：l 面积图面积图这种图表类型显示数值随时间或类别的变化趋势。它也可以以三维效果显示。通过显示已绘制的值的总和，面积图还可以显示部分与整体的关系。在下面的示例中，面积图强调了北京地区增长的销售额，并显示了每个地区对销售总额的贡献。l 堆叠面积图堆叠面积图这种图表类型显示各个值的分布随时间或类别的变化趋势。它也可以以三维效果显示。l 百分比堆叠面积图百分比堆叠面积图这种图表类型以百分比方式显示各个值的分布随时间或类别的变化趋势。它也可以以三维效果显示。面积图像饼图一样，圆环图显示部分和整体之间的关系，但是它可以包含多个数据系列（数据系列：在图表中绘制的相关数据点，这些

10、数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）。它具有下列子图表类型：l 圆环图圆环图 圆环图的每个环分别代表一个数据系列。例如在下图中，内环代表汽油税的收入，外环代表财产税的收入。l 分离型圆环图分离型圆环图分离型圆环图与分离型饼图类似，但可以包含多个数据系列。圆环图雷达图比较大量数据系列（数据系列：在图表中绘制的相关数据点，这些数据源自数据表的行或列。图表中的每个数据系列具有唯一的颜色或图案并且在图表的图例中表示。可以在图表中绘制一个或多个数据系列。饼图只有一个数据系列。）的合计值，它具有

11、下列子图表类型：l 雷达图雷达图这种图表类型显示数值相对于中心点的变化情况。显示时可以为每个数据点显示标记。例如，在下面的雷达图中，覆盖最大区域的数据系列（A品牌）表示该品牌含有最丰富的维生素。l 填充雷达图填充雷达图 在这种类型的图表中，数据系列覆盖的区域填充有颜色。雷达图如果您希望找到两组数据之间的最佳组合，可以通过曲面图来实现。就像在地形图中一样，颜色和图案表示具有相同取值范围的区域。曲面图具有下列子图表类型：l 三维曲面图三维曲面图这种图表类型在连续曲面上跨两维显示数值的变化趋势。例如，下图表显示产生相同抗拉强度值的温度和时间的各种组合。图表中的颜色表示特定的数值范围。不带颜色的三维曲

12、面图称为框架式三维曲面图。l 曲面图（俯视）曲面图（俯视）俯视曲面图，其中的颜色代表数值范围。不带颜色的曲面图（俯视）称为框架式曲面图（俯视）。曲面图气泡图是一种XY散点图。它以三个数值为一组对数据进行比较，而且可以三维效果显示。气泡的大小，即数据标记（数据标记：图表中的条形、面积、圆点、扇面或其他符号，代表源于数据表单元格的单个数据点或值。图表中的相关数据标记构成了数据系列。）表示第三个变量的值。在为绘制气泡图准备数据时，请将X值放在一行或一列，并在相邻的行或列中输入对应的Y值和气泡的大小。气泡图例如，可以按下图组织数据。下面的气泡图显示A公司拥有最多的产品并占有最大的市场份额，但其销售额并

13、不是最高的。这种图表类型通常用于显示股票价格，但是也可以用于科学数据（如表示温度的变化）。为了创建股价图，必须按正确的顺序组织数据。股价图具有下列子图表类型：l 盘高盘高-盘低盘低-收盘收盘 盘高-盘低-收盘”图经常用于显示股票价格。它要求三个数值系列，且按盘高-盘低-收盘的顺序排列。l 开盘开盘-盘高盘高-盘低盘低-收盘收盘这种类型的图表要求四个数值系列，且按开盘-盘高-盘低-收盘的顺序排列。l 成交量成交量-盘高盘高-盘低盘低-收盘收盘这种类型的图表要求四个数值系列，且按成交量-盘高-盘低-收盘的顺序排列。下面的股价图在估算成交量时使用了两个数值轴：一个用于计算成交量，另一个用于股票价格。

14、l 成交量成交量-开盘开盘-盘高盘高-盘低盘低-收盘收盘这种类型的图表要求五个数值系列，且按成交量-开盘-盘高-盘低-收盘的顺序排列。股价图这些图表类型使用圆锥、圆柱或棱锥数据标记来增强柱形图、条形图和三维柱形图产生生动效果。与柱形图和条形图类似，圆锥图、圆柱图和棱锥图也具有下列子图表类型：柱形图、堆叠柱形图或百分比堆叠柱形图这些图表类型中的柱形用圆锥、圆柱或棱锥表示。条形图、堆叠条形图或百分比堆叠条形图这些图表类型中的条形用圆锥、圆柱或棱锥表示。三维柱形图这种图表类型中的三维柱形用圆锥、圆柱或棱锥表示。圆锥图、圆柱图或棱锥图图解diagrams图解通常被用来表达某系统是如何运作的图表 图解

15、图形 表格 地图 名单 流程图流程图树状结构图树状结构图连结方式图连结方式图图形graphs合理的图形设计通常用于转译各种人们熟知的概念图表 图解 图形 表格 地图 名单 表格 tables 表格中通常用于表达包含大量数字的信息等马德里2016申奥材料图表 图解 图形 表格 地图 名单 地图/映象maps图表 图解 图形 表格 地图 名单 名单/列表lists图表 图解 图形 表格 地图 名单 http:/ 2.大小合适大小合适事先规划好图形最终的尺寸是多大，能不能看的清楚。要知道，并不是人人都愿意“点击查看大图”的。如果图片实在太大的话，那至少在缩小版上保证概要内容能看的清楚，让有兴趣的人“

16、点击查看细节”。从整体的排版和布局上考虑这个 信息图表怎么和文章匹配，放在哪个位置、占多大篇幅等等。 3.表达专业表达专业把数字与相应的注解融入到信息图表中去，让它看起来专业化。但注意不要专业过头，让普通读者觉得太难懂了，读者是不会花太长的时间来专研这些图表的。更不要简单地把图表、数据和注解分散在不同位置，迫使读者不得不在这些内容间不停地来回移动。 4.数据清晰数据清晰图表也常常让人得出错误的结论。 适当保留详细的数据源表，或者提供一个链接、文档什么的，让有心的读者可以深入挖掘下去。 5.与众不同与众不同如果可以的话，避免使用常规的柱状图、线图和饼图。可以加入些互动元素，让图表活起来。 /periodic_table/periodic_table.html6准确性准确性当你使用不同尺