# 可视化设计最佳实践

## 清理应用程序

应用程序中的信息太多会让人难以区分哪些内容更重要。如今，现代用户界面样式采用更加整洁、简单、直白的设计。简化的设计可以微妙地引导读者并让他们保持专注。

#### 简单即是美

用户常常会尝试在一个应用程序里加入过多信息。包含多个度量的折线图可能会产生混淆，难以解读。尝试创建多个较小的可视化，以将这些信息分散在页面中。它还可使读者高效地比较和对比并排出现的可视化画面。 您还可以使用可选维度和度量，使读者能够在度量之间快速切换而不会造成可视化画面过度拥挤。有关更多信息，请参阅[更改可视化的数据](https://help.qlik.com/zh-CN/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/change-data-of-visualization.htm)。

有很多不同的方法可改善应用程序的观感和功能。根据您的受众以及要突出显示的数据，您设计可视化的方式可能对读者解读数据有重要影响。

#### 了解您的限制

您可视化的使用者可使用有限的屏幕空间或分辨率。Qlik Sense 使用响应式设计来解决这些限制。然而，如果屏幕空间或分辨率过于受限，可能需要特定设计调整。这些可包括：

* 显示在条形图和折线图中的数据的子集。当维度值的数量超过可视化的宽度时，会显示一个带有滚动条的小型图表。
* 用于选择数据筛选器的折叠菜单。当维度值超出对筛选器窗格可用的空间时，菜单会折叠。应用程序使用者必须单击筛选器窗格的标题中的维度名称方可打开新的窗格。然后他们可以在新的窗格中进行自己的选择。此外，当存在受限空间时，在筛选器窗格标题中维度名称可能显示为椭圆。应用程序使用者必须单击椭圆方可查看筛选器窗格的名称。
* 图表图例中截断的名称。名称对于可用于维度和度量的空间过长而被截断。向截断的名称的末尾添加了省略号。应用程序使用者可将鼠标指针悬停在截断的名称上以查看完整名称。
* 缺少图例、标签和标题。

应用程序使用者可展开可视化以解决这些问题中的一些。但是，我们建议您在可能使用应用程序的设备上测试自己的应用程序。您也可使用各种工具来进行测试，诸如 Firefox 中的响应式设计模式 (Ctrl + Shift + M)。如果必要，可将可视化移动至新的工作表，减少可视化中显示的数据的量等。

## 颜色易懂性

有人患有基于颜色的某些类型的视觉损伤，他们的色谱变窄。他们可能会以不同的方式解读您的可视化。

例如，在有些人眼中，红色和绿色看起来更像黄色或褐色。这种形式的红-绿色觉缺陷最常见。这很值得注意，因为红色在数据可视化中通常带有负面含义，特别是在财务领域。

红色或绿色 KPI 状态可让人混淆。您可将形状搭配颜色使用，作为性能指示器，让您的设计更加易用。例如，使用红色空心圆圈来注释不良，并使用绿色实心圆来注释良好，并将三角形作为警告符号，仅在 KPI 状态处于不可接受的水平时出现。

当颜色被曲解时，折线图、条形图和饼图切片很难被区分。

有关更多信息，请参阅[更改可视化外观](https://help.qlik.com/zh-CN/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/change-appearance-of-visualization.htm)。

## 筛选器和图标布置

筛选器和图标是数据可视化的重要组成部分，但是可能很难明确将它们放在哪里或如何将它们排序。您通常可以根据一些公认的设计原理预测用户将从哪里开始阅读。

### 左侧布置

有些流行网站使用左侧导航标题和筛选器。这是由于许多语言是从左至右阅读。因此，屏幕的左侧是读者最常查看的地方。快速查找内容的用户倾向于向屏幕左侧导航。对象越位于右侧，用户对它们的关注越少。如果所有筛选器和图标在左侧垂直堆叠，则它们具有同等的重要性。

而对于文字书写顺序为从右至左的语言，则与此相反的设计更为适用。如果您的应用程序翻译为这些语言，则应牢记这一点。

### 顶部布置

图标和筛选器的另一个常见放置选项是沿着应用程序顶部。不在左侧布置筛选器和图标，可提供更多空间以获得更大的带有各种菜单的可视化画面。当筛选器和图标布置在可视化画面上方时，它们看上去也好像已与下面的内容隔开。这可能有助于向读者表明您优先使用筛选器或图标。如果所有筛选器和图标并排出现在顶部，最左侧的一个最为明显，将会被读者优先选择。

### 信息层次结构

有时您希望自己的读者优先查看特定可视化。您可使用一些关键设计最佳实践来显示信息层次结构。例如，您可使用不同的尺寸来强调某些可视化。信息的尺寸越大则看上去就越重要，具体方法包括增大字体或图表大小，让读者知道先从何处查看。

页面布置也对信息层次结构有影响。在页面顶部的信息被视为比页面底部的信息更重要，因为顶部的信息会先被看到。在第一页的信息会被视为比最后一页的信息更重要。

## 向 KPI 添加上下文

KPI 是在您的应用程序内部交流一些重要想法的有效方式。但是，KPI 值不会为幕后发生的数字和计算提供任何上下文。KPI 旁的绿光并不能让读者了解是勉强达到目标还是远远超越目标。

为了让您的 KPI 具有上下文，可以较小的文字在值旁边加入支持信息。例如，可以将当前的 KPI 值和去年的值进行比较。您还可添加没有轴或值的小型条形图来提供有关当前趋势的信息。

## 避免数据可视化缺陷

为了体验数据可视化的优势，必须避免缺陷。某些常见缺陷如下：

### 颜色滥用

不能过度使用颜色。请注意，在错误的位置使用错误的颜色可能导致混乱不清。另外，同一颜色在世界上的不同地方可能意味这不同的东西。

### 饼图误用

避免让饼图进行并排比较。尽量不要在其中包含过多信息。

### 视觉混乱

信息过多，导致不清楚。最多使用九个 KPI，消除各种视觉混乱。

### 形式重于内容

漂亮的可视化不一定是最有效的。始终使用最佳设计实践。

### 不正确的数据

发现并更正数据问题后再显示数据。不要让可视化为无效信息承担责任。