如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

文章从项目流程的各阶段来讲解UI设计师应该做些什么，如何做才能把自己的价值在项目中体现出最大化！

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

写在前面

2019年6月18日Material Design更新了设计指南中数据可视化部分，这是谷歌数据可视化团队形成的一套全面的数据可视化指南， 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译，希望能够分享给更多对数据可视化有兴趣的设计同学！

全文章节目录：

原则

类型

选择图表

样式

行为

仪表板

数据可视化

数据可视化就是用图形描绘信息。

原则

数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。

数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。

类型

数据可视化可以以不同的形式表达。图表是表达数据的常用方式，因为它们能够展示和对比多种不同的数据。

图表类型的选择主要取决于两点：要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。

图表类型

1. 随时间变化

随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较。

常见用例包括：

股价表现、卫生统计、年表

2. 类别比较

类别比较图表是多个不同类别数据之间的比较。

常见用例包括：

不同国家的收入、热门场地时间、团队分配

3. 排名

排名图表显示项目在有序列表中的位置。

常见用例包括：

选举结果、性能统计

4. 占比

占比类图表显示了局部与整体的关系。

常见用例包括：

产品类别的综合收入、预算

5. 关联

关联类图表显示两个或以上变量之间的关系。

常见用例包括：

收入和预期寿命

6. 分布

分布类图表显示每个值在数据集中出现的频率。

常见用例包括：

人口分布、收入分布

7. 流程

流程类图表显示了多个状态之间的数据移动。

常见用例包括：

资金转移、投票计数和选举结果

8. 关系

关系图表显示多个项目之间的关系。

常见用例包括：

社交网络、词图

选择图表

面对多种类型的图表，以下指南提供了关于如何选择合适的图表见解。

显示随时间的变化

可以使用时间序列图表来表示随时间的变化，就是按时间顺序表示数据点的图表。表示随时间变化的图表包括：折线图，柱状图（条形图）和面积图。

*基线值是y轴上的起始值。

柱状图（条形图）和饼图

柱状图（条形图）和饼图都可用于显示比例，表示部分与总体的对比。

· 柱状图（条形图）使用共同的基线，通过条形长度表示数量

· 饼图使用圆的圆弧或角度表示整体的一部分

柱状图（条形图），折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线，因此可以更轻松地根据条形长度比较值的差异。

面积图

面积图有多种类型，包括堆叠面积图和层叠面积图：

· 堆叠面积图显示多个时间序列（在同一时间段内）堆叠在一起

· 层叠面积图显示多个时间序列（在同一时间段内）重叠在一起

层叠面积图建议不要使用超过两个时间序列，因为这样做会使数据模糊不清。取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。

样式

数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。

图表可以从以下方面进行优化：

· 图形元素

· 文字排版

· 图标

· 轴和标签

· 图例和注释

不同类型数据的样式设计

可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。

这些图形属性包括：

· 形状

· 颜色

· 大小

· 面积

· 体积

· 长度

· 角度

· 位置

· 方向

· 密度

不同属性的表现

多个视觉处理方法可以综合应用于数据点的多个方面。例如，在条形图中，条形颜色可以表示类别，而条形长度可以表示值（如人口数量）。

形状可用于表示定性数据。在此图表中，每个类别由特定形状（圆形，正方形和三角形）表示，这样可以在一张图表中轻松实现特定范围的比较，同时也可以进行类别之间比较。

1. 形状

图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者和高保真的等等。

形状程度

图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。

2. 颜色

颜色可用于以四种主要方式区分图表数据：

· 区分类别

· 表示数量

· 突出特定数据

· 表示含义

颜色区分类别

例：圆环图中，颜色用于表示类别。

颜色表示数量

例：地图中，颜色用于表示数据值。

颜色突出数据

例：散点图中，颜色用于突出特定数据。

重点区域

在不滥用的情况下，颜色可以突出焦点区域。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。

颜色表示含义

无障碍

为了适应看不到颜色差异的用户，您可以使用其他方法来强调数据，例如高对比度着色，形状或纹理。

将文本标签应用于数据还有助于说明其含义，同时消除对图例的需求。

3. 线

图表中的线可以表示数据的特性，例如层次结构，突出和比较。线条可以有多种不同的样式，例如点划线或不同的不透明度。

线可以应用于特定元素，包括：

· 注释

· 预测元素

· 比较工具

· 可靠区间

· 异常

4. 文字排版

文本可用于不同的图表元素，包括：

· 图表标题

· 数据标签

· 轴标签

· 图例

图表标题通常是具有最高层次结构的文本，轴标签和图例具有级别的层次结构。

字重

标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制，使用有限的字体样式。

5. 图标

图标可以表示图表中不同类型的数据，并提高图表的整体可用性。

图标可用于：

· 分类数据：用于区分组或类别

· UI控件和操作：例如筛选，缩放，保存和下载

· 状态：例如错误，空状态，完成状态和危险

在图表中使用图标时，建议使用通用可识别符号，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。

6. 坐标轴

一个或多个坐标轴显示数据的比例和范围。例如，折线图沿水平和垂直坐标轴显示一系列值。

柱状图（条形图）基线

柱状图（条形图）应从为零的基线（y轴上的起始值）开始。从不为零的基线开始可能导致数据被错误地理解。

坐标轴标签

标签的设计应体现图表中最重要的数据。应根据需要使用标签，并在UI中保持一致性。他们的出现不应该妨碍查看图表。

文字方向

为便于阅读，文本标签应水平放置在图表上。

文字标签不应该：

· 旋转

· 垂直堆叠

7. 图例和注释

图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和任何值得注意的内容。

1. 注释

2. 图例

在PC端，建议在图表下方放置图例。在移动端，将图例放在图表上方，以便在交互过程中保持可见。

标签和图例

在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。

8. 小显示屏

可穿戴设备（或其他小屏幕）上显示的图表应该是移动端或PC端图表的简化版本。

行为

图表具有交互模式，使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。

以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：

渐进式披露

提供了按需求逐步展示详细信息的明确途径。

直接操作

允许用户直接对UI元素进行操作，最大限度地减少屏幕上所需的操作数量，包括：缩放和平移，分页和数据控件。

改变视角

使一种设计可以适用于不同的用户和数据类型，例如数据控件和动效。

1. 渐进式披露

使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。

2. 缩放和平移

缩放和平移是常用的图表交互，会影响用户对图表数据深入的研究和探索。

缩放

缩放改变界面显示的远近。设备类型决定了如何执行缩放。

· 在PC端，通过单击、拖动或滚动进行缩放

· 在移动端，通过捏合进行缩放

当缩放不是主要操作时，可以通过单击和拖动（在PC端）或双击（在移动端）来实现。

平移

平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如，如果图表的一个维度比另一个维度更重要，则平移的方向可以仅限于该维度。

· 平移通常与缩放功能同时使用。

· 在移动端，平移通常通过手势实现，例如单指滑动。

3. 分页

在移动端，分页是一种常见模式，让用户通过向右或向左滑动来查看上一个或下一个图表。

在移动端，用户可以向右滑动以查看前一天。

4. 数据控制

可以使用切换控件，选项卡和下拉菜单筛选或改变数据。

用户调节控件时，这些控件还可以显示指标。

切换控件，选项卡和下拉菜单可以更改或筛选数据。

5. 动效

动效可以强化数据之间的联系，提升交互体验。应该有目的地使用运动（不是装饰性地），表达不同状态和空间之间的联系。

运动应该是合理，平稳，反应灵敏，不会妨碍用户的使用。

在此示例中，图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据，从而降低了复杂性。

动画能够体现两个不同图表的相关性。

6. 空状态

图表数据为空的情况下，可以提供相关数据的预期。

在合适的情况下，可以展示角色动画创造愉悦和鼓励。

有特色的动画提升了空状态的效果。

仪表板

在称为仪表板的UI界面中，数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。

仪表板设计

仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。

仪表板应该：

· 突出最重要信息（使用布局）

· 根据信息层级确定信息的焦点（使用颜色，位置，大小和视觉权重）

应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板，考虑了以下用户问题：

1. 需要注意的问题
2. 发生问题的时间

3.发生问题的位置

4.受问题影响的其他变量

1. 分析类仪表板

分析仪类表板让用户能够研究多组数据并发现趋势。通常，这些仪表板包含能够深入洞察数据的复杂图表。

用例包括：

· 随时间变化的突出趋势

· 回答“为什么”和“假设”的问题

· 预测

· 创建有深度的报告

分析类仪表板示例：

· 跟踪广告活动的收效

· 跟踪产品在其整个生命周期中的销售额和收入

· 随时间变化的城市人口趋势

· 跟踪随时间变化气候数据

分析类仪表板显示气候数据

2. 操作类仪表板

操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。

在大多数情况下，这些类型的仪表板具有一系列关于当前信息的简单图表。

用例包括：

· 跟踪目标的当前进度

· 实时跟踪系统性能

操作类仪表板示例：

· 跟踪呼叫中心的活动，例如呼叫音量，等待时间，呼叫长度或呼叫类型

· 监控在云端应用程序的运行状况

· 显示股市情况

· 监控赛车上的遥测数据

操作类仪表板显示设备存储指标

3. 演示类仪表板

演示类仪表板是为感兴趣的主题提供的展示视图。

这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。

用例包括：

· 提供关键绩效指标的总览

· 创建高级执行情况的概要

演示类仪表板示例：

· 提供投资账户绩效的总览

· 提供产品销售和市场份额数据的概要

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

「元辰」数据概念控制中心，基于真实的使用场景和概念的表现手法，打造的企业及个人后台数据管理系统。

主要分为首页概览、作品编辑、信息收集、数据统计和常规配置等，简单的动效使操作回馈有了更好的交互体验，且真实可依。

-

「元辰」注重真实的数据体验，致力把数据信息通过大屏实时简洁、有效的传达给使用者。针对精准用户“迅速获取信息、简化操作流程、减少学习成本”，我们将这些问题作为传达的核心要素，一直贯穿始终。

-

欢迎沟通探讨、合作交流。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

让设计更有说服力

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

自从上一篇发文得到一些发表方向，以后决定以个人独特的总结以及符合商业的思维逻辑来写作设计拆解的相关文章教程，前期我还是按大类去诠释我的整个想法，看看大家的反馈，如果理解门槛还是有很大障碍，我在后期的文章中会再将文章细化出来。

拆解分类

拆解1、视觉面积的影响

拆解2、明度对比的影响

拆解3、色彩的影响

拆解4、视觉位置的影响

拆解5、丰富层度的影响

拆解6、其他（浮层、常用点、角标、动效）

拆解1、视觉面积的影响

视觉面积越大层级越高，而且与比较层的面积倍数有关，参考层如果为1级，那比较层的等级是由和参考层的倍数有关，大一倍那就为2级，大两倍那就是3级，依次类推。这是美术基础中的近远的关系，越靠近的视觉点越大，越靠远的视觉点越远，这样也很容易知道，越近获得关注越高，越远越低。

界面举例我们告一段落，这里再说一下比较常遇到的文字视觉面积，这块很容易被忽略，其实文字也是具有视觉面积的，而且有不同的视觉大小。接下来我会将所有可能性都拆解出来。

同字号大小，不同粗细层度的影响/文字的边宽形成的格式塔大小就是文字面积，但不一样的是，文字是线性结构，所以他不是实面，而是虚面，所以它相对于实面来说还是低一个等级，再说回到粗细的层级比较，越粗的文字他是越靠近实面的，所以这就能判断越粗的文字层级越高这个道理。

同粗细，同字号大小，一个是有文字底块，一个没有，这样有文字底块的视觉层级会比没有文字底块的视觉层级要高，因为有底块相当于为实面，这样就比没有文字底块的层级要高了

同粗细，不同字号大小，这个不难理解，这个不存在实面虚面的概念了，因为都是一样的粗细，但是这个格式塔大小不一样，也就是说，格式塔越大的层级越高，字号越大的层级越高。

拆解2、明度对比的影响

明度对比越高的视觉点会比明度对比低的视觉点视觉层级要高，这里其实也是美术基础中的空间的视觉差，越远的物体越模糊（对比小），越近的物体越清晰（对比大）。所以对比大的层级会比对比小的层级会高。（这里插一句，色相也是有明度的，不同的色相也是有不同明度解析，这个可以运用到电商banner的配色上）

下面来看看文字和背景不同对比度对视觉层级的影响。我们将统一文字大小和粗细，背景为白色。

拆解3、色彩的影响 

有色的视觉点总会比无色的视觉点更吸引人，因为色彩也是美术的一类，给没有色彩的视觉上色是提升视觉体验的一步。

文字为例：同等大小同等粗细同等明度的字，有颜色的字体会有更大的关注点。

拆解4、视觉位置的影响

给界面一个横轴和纵轴，从横轴的左边到右边起视觉层级逐渐减弱，从纵轴的上到下边视觉层级逐渐减弱。这是因为用户阅读习惯的问题，人们习惯从左上方开始往右边阅读，然后慢慢的往下读取信息。

拆解5、丰富层度的影响

丰富层度越高的视觉层级越高，丰富层度越高的点信息量越大，越需要花时间停留。

文字为例：设计过的字体丰富层度会比默认字体高，所以有些需要强调的标题或者banner上的字体都是有精心设计过，为了拉开于界面的层级。

界面为例：界面首页中的banner是丰富层度最高，其次是金刚区，再是标签栏。

拆解6、其他

除了上诉的主要层级影响，还有其他一些特殊的影响，我这就说两三个子吧。一个呢是给模块直接加投影，硬生生的造成前后层级。还有角标的影响，在干净的页面中突然来个提示角标，例如微信有消息时的小角标。还一个就是用户常用关键点，那个视觉层级整个产品中的最高层级，这个需要打破所有规则，这个是由用户主动选择的视觉层级点，例如电商软件的搜索框，不管这个搜索框大小如何，层级怎么低都行，但对于用户进来，第一个渴望的点就是这里，最后是动效的影响，每个动效就是一个互动，动的东西永远比静止的东西有活力更加吸引人。

图片来源UIGREAT的作者JGM

总结

视觉层级的梳理可以很大幅度的提升视觉规范和用户体验，通过视觉层级的分析，可以从不同方面去诠释复杂的页面，也可以更好的去处理文本关系。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

虎牙直播是以游戏直播为主的弹幕式互动直播平台，累计注册用户2亿，提供热门游戏直播、电竞赛事直播与游戏赛事直播，手游直播等。

最近虎牙在上市一周年之际，发布了全新的公司级LOGO，也就是为虎牙母公司设计的全新企业品牌形象系统。

新logo的造型结合大写英文字母“H”和小写英文“hy”，将其演化为平行空间的两个45度对称且平行的立面图像。

文字logo上由“虎牙”和拼音“huya”两部分组成，中文“虎”字也进行了笔画的调整，将虎”与“h”笔画末端进行了切斜收尾的处理，从而来呼应新logo的平行表现形式。

不同形式组合的新logo效果

在新logo的颜色方面，选用了比较青春具有活力，且明亮的“阳光黄”与“星云紫”。

图形部分的延展也极具灵活性，灵活的视觉变化使品牌更具多样性，也同时表现虎牙在数字时代的不同场景中，所呈现的多元化和创新。

图形延展效果

再来看看，虎牙新logo应用在各种衍生产品的效果。

 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。