设计 - To B 端的 Dashboard 设计方法 - 《产品经理知识库》

一、Dashboard的含义
二、设计步骤
三、小结

如何用最准确的媒介来清晰、直接地传达数据和其所表示的信息？Dashboard可以帮到你。

To B 端的 Dashboard 设计方法 - 图1

一、Dashboard的含义

**
早期dashboard是指汽车等产品上的信息面板，中文译名即仪表盘。

To B 端的 Dashboard 设计方法 - 图2

在Mac的OS系统内，dashboard是指包含各类小widget的面板。

To B 端的 Dashboard 设计方法 - 图3

目前我们说的dashboard承袭了仪表板的核心概念——通过图表、列表等形式，直接、高效、准确地向用户传递重要信息。
**
在dribble等网站上可以搜到很多作品（如下图）。不过除非是用于对外展示，否则dashboard的形式不必特别华丽。

因为对于To B用户而言，它的核心始终是传递信息。界面上的内容都应有存在的理由，一些额外的装饰可能会造成干扰。

我们要做的事情是：少做没意义的事情，多把有用的信息呈现并突显出来。

To B 端的 Dashboard 设计方法 - 图4

二、设计步骤

**
设计dashboard时，可以按照以下四项逐步推进：

To B 端的 Dashboard 设计方法 - 图5

2.1 用户场景

进行用户场景分析时，需要明确“用户”和“任务”“数据内容”这三个要素。

用户需要通过（监测、分析、评估）内容去完成（一些特定的）目的。

To B 端的 Dashboard 设计方法 - 图6

对于用户：需要了解其身份、在公司内的职位、工作内容等。

对于目的：需要弄清是什么触发了用户使用dashboard的行为？用户访问dashboard的原因是什么？为了达到目的需要以什么频率访问dashboard？

对于内容：需要明白用户使用dashboard后需要做出哪些决定？哪些关键信息辅助自己做出决定？有哪些情况需要提醒用户等。

2.2 展示形式

根据数据内容选择不同形式或形式组合，例如dashboard内常用的图表、表格或列表等。其中，图表的特点是可以方便看出趋势但是难以索引，表格与列表反之。

同时，并不是所有内容都要以可视化的形式展现，只可视化必要而且能迅速看出端倪的东西。

关于图表形式，印象中初中的数学课就已经介绍过，在此就不赘述了。需要特别说明几点细节问题，信息设计大牛Stephen Few在他的《information Dashboard Design》一书中有提到：

人对于面积和角度的敏感度不如对长度的感觉。饼图通常不是一个好的选择，除非很强调个体在整体中的比例，此时也可以用堆积条形图；
人对于横向长度的敏感度又高于纵向；
3D的数据图表又增加了纵深的维度会影响阅读和记忆；
要做到图表上每个像素都是有用不多余的，一般折线或柱状图已经足够用了。

2.3 数据排布

要通过对业务的了解、对用户的访谈等对界面内各项内容的重要性进行区分。用户必须看到或者必须去做的事情要放在醒目的位置，或者要给与强烈的视觉暗示，避免用户因为数据的不起眼而错过重要信息。

ToB产品内涉及的数据信息通常也很多，要对各部分内容进行有逻辑地分组。在排版上给与用户分组的暗示，让用户能更快速定位到需要的信息。在《Information Dashboard Design》这本书里，作者也在一直强调，设计dashboard即要让重要的信息一目了然。（关于数据排布的部分，还会再写一篇格式塔心理学的应用~之后奉上）

10.31更新：

数据排布主要涉及到三个心理学小知识：格式塔原则、短时记忆和神奇的X

2.3.1 格式塔原则
**
设计方法上，利用视觉感知的格式塔原则可以更合理地进行排布，以便用户高效获取信息。具体可以运用到以下几点：

接近性

通常我们认为彼此靠近的物体是属于同一组的。这个是最简单常用的分组的方式。

To B 端的 Dashboard 设计方法 - 图7

同时，可以灵活应用空格来引导用户浏览数据的方向。下图是作者在书中的例子，可以感受到因为间距的不同，会自动形成不同的浏览顺序。

To B 端的 Dashboard 设计方法 - 图8

相似性

相似性 – 我们倾向于将大小、形状、颜色、方向等一致的元素归为一组。可以通过这些特征来区分这些数据的集合，或者加强某一数据的集合。当我们想要表现的元素在dashboard中不得不分散的时候，可以用相似性来加强彼此的联系。

To B 端的 Dashboard 设计方法 - 图9

封闭性

视觉边界使我们将物体归为一组。通过使用边界，无论是颜色填充还是边框，可以圈定出一个区域，这是最直接有效的对信息进行分组的方式。

To B 端的 Dashboard 设计方法 - 图10

闭合性

很多时候我们会将开放的／不完整／不常见的结构视为闭合的／完整的／常规的。这一原则有助于减少dashboard内视觉元素的数量。

连续性

如果数据是连续出现的，那容易认为它们是作为一个整体的一部分，相邻的数据是彼此的延续。用这个原理来展示数据之间的关系，也可减少类似于网格线这样的视觉元素。

2.3.2 短时记忆
**
短时记忆（STM）储存的是当前最新的经验或思索内容，是刚刚产生的记忆。信息进入短时记忆，人们可以毫不费力地回忆起来，但这种记忆的容量非常有限。

在进行信息设计时，为了增强短时记忆，可以从视觉上对数据进行加工。例如运用颜色（结合亮度与饱和度）、空间位置、外形（方向、长度、大小、形状、标记等）、还有运动等。这些都可用于dashboard来强化分组或强调某信息。这些特征不光能让用户注意到该信息，还可以让用户对该信息的印象更深。

此外，干扰信息可能会打断当前任务，并影响短时记忆。可以通过弱化干扰的方式来减轻其影响，例如将弹窗状态改为非模态；或者转换干扰的形式，用不同的感官模式呈现不同的信息，例如下载完毕的提示音，对视觉信息也不会有过多干扰。

2.3.3 神奇的X
**
神奇的7（Magic 7）是指人的短时记忆是有局限性的，能够记住的模块上限通常为7±2个。

这个理论由G.Miller在1956年提出，教育和设计领域都有很多应用。例如在教育领域中，我们在记单词时，可以将长单词划分为几个小模块进行记忆。在设计领域中常见的例子是手机号。如果直接显示十一位数字，既不利于识别，也不利于记忆。iPhone就采用了xxx xxxx xxxx的形式进行展示，可读性提升，记忆难度降低。当然，344的划分结构我猜可能和运营商与归属地也有关系，应该是综合考量后的结果。

Magic 7是流传比较广泛的一种说法。查找了一些资料后发现，其实学界有人提出了更进一步的观点，将短时记忆的容量定位在4个模块左右。具体到个例的话，每个组块所包含内容的复杂程度、间接干扰等对记忆的难度都会有影响。但总的来说，在进行信息设计时，可以试着将重要的模块控制在4个左右，以获得更好的信息传达效果。