关于Dashboard设计的总结

Posted 2023-03-24

参考技术A 作为一个TOB产品的设计师，一定设计过仪表盘 （ Dashboard）无论是哪一种数据产品，仪表盘（Dashboard）都是最核心的功能。他是用户接触数据的第一个页面，相当于数据产品的门户，担负着提纲挈领，引导分析的重要职能，帮助用户能够快速判断业务情况，支持他们做出决策并行动。概括的来说Dashboard的作用可以分为三大类，监控、分析和概览。

1.在监控场景中，Dashboard主要为用户集中提供便捷的关键指标实时监测，及时告知异常状态，并引导用户定位问题。

2.在分析场景中，Dashboard主要通过数据图表，配合控件进行不同维度的数据分析。例如，用户可以通过时间筛选控件过滤图表上的数据范围等。

3.在复杂业务中，Dashboard还用于概览场景，集中呈现业务分散的重点信息，用户还可以通过提供的入口快速跳转至相关模块。

介绍完场景，接下来说下如何做好一个Dashboard的设计，我会分为两个部分说下，设计制作之前需要考虑的与开始设计要做的。

首先设计之前

1. 划分用户角色

对于不同行业，不同业务，不同职位的人们来讲，关注的内容自然不一样。所以首先需要清楚Dashboard的目标用户是谁？一般会从业务线或岗位入手。不同业务线间，关注的核心指标自然不同，比如酒店管理系统，酒店区域经理关心的是区域酒店的经营情况，酒店的店长又会关心自己酒店的营业额。管理层重在把握全局，而执行层重在每个细节的执行效果，关注的数据层级和指标也会有所差异。

2. 分析使用场景

思考用户在什么场景下使用dashboard、使用频率如何、是否有特殊使用场景。

一般来说主要的数据分析场景包括：实时监控场景，指定主题分析场景，移动查询场景，周日会汇报场景和大屏显示场景等。

比如从实时监控场景来讲，Dashboard 会被分为实时和历史两种，两种略有差异。实时侧重于监控，历史侧重于了解和分析。这两种没有明显的分界，实时需要历史的信息作为对比，来判断当前的数据是否正常。而历史也需要准实时的信息来更快地了解当前的情况。这两种形态的Dashboard 对于数据产品来讲都必不可少。

在比如移动场景考虑到屏幕等硬件条件的限制，则侧重于通知和展示，不深入到分析部分。到具体产品设计上，提供最核心的数据查看和智能挖掘，不做过多的查询功能和复杂的交互。同时，基于现有大部分人通过手机进行沟通，那么页面或数据的分析也变得重要

3. 选定内容

在了解用户与场景后，接下来就要选择到底要展示哪些内容了。

例如我在做酒店管理系统的时候，首先明确了有哪些角色使用，比如店长、服务大使、工程管理等，其次是分析场景。店长关注酒店的客房入住率，每天的收益，但在交付日时他们不仅是只看数据，还想得到的是对数据的分析，所以我们不只是做数据展示，还要做数据分析，还要分清他们关注的是趋势，还是关注异常。需要突出收益趋势与客房入住率异常的提示等等。

此外我要说对于专业的领域内容主要还是由客户方提供，因为对于专业的数据与角色他们要比我们更加了解。这里就需要我们有与客户方沟通的能力了。设计师需要做的是去引导客户方给出真正的需求内容。

获取内容后，我们就要对内容进行布局

4. 内容布局

在《Information Dashboard Design》一书中指出：“Dashboard内容必须合理组织，从而反映信息的本质和支持有效且有意义的监控；信息不能随便放置，也不能只是根据剩余空间来设定大小；相互关联的项目应该放置在临近的位置；重要的项目版面要大一些，这样才能比相对次要的信息更加突出；有特定顺序的项目，要以一种视觉上被关注的顺序排列。”

以上是对需求分析的一些理论知识，

接下来第二部分开始实践画图了（个人总结）

1. 梳理需求

我一般会将所有的需求列出来，然后对其进行排序，我会分为三中程度梳理

1. 必要的[★] 系统可以运行所需的最基本的功能。

2. 有会很好的[-] 可以增加亮点，但是不属于核心服务的功能

3. 不是必要的[x] 没有这个功能的情况下也能很好使用产品，虽然没有必要的功能，但是最好也要记录下来。

我一般会用笔记来记录，电子文本的话我推荐可以使用 Trello 。

2.对功能进行缩减

记录的时候可能会发现有很必要的功能，这是就要对必要清单进行缩减，你可以对功能分阶段，在产品初期更需要那些功能。对于TOB的产品功能固然重要，但在操作体验上来说越简单越好。现在不做，不代表未来不会有。在不断迭代测试反馈中去优化产品。是在设计的时候一直要坚持的。

所以要缩小列表的范围，并确定哪些内容需要始终可见并且可以随时访问，哪些可以隐藏或不那么突出的。

3. 可定制的仪表板

有时，你会发现，无论你多努力，一个Dashboard布局都不会适合每个用户。在这些情况下，你可以让用户自己定制，下面有两个例子可以参考。但是：定制并不是一个好的方案。设计出直观的解决方案是设计师的工作，而不是用户。

WordPress是定制Dashboard的一个很好的例子。可以通过拖放卡片来制定适合自己想要的仪表板。非常适合用于模块需求优先级不同又有多项任务的用户。

如果你可以轻松的将用户分类，就可以参考与 Panda 类似的操作，将用户分为不同的职业属性，对内容进行布置。 Panda 还提供了很多预先设置好的模板可以切换。这种设计非常适合自定义的体验，用户不需要花费时间手动更改所有内容。如果用户想进一步自定义，可以提供完全自定义体验的选项。

4. 开始设计页面布局

经过以上步骤，你已经大致明确了自己要做的了，那就开始动手画吧，我的习惯是现在纸上快速画出布局。我会出最少3种以上的方案，不需要画的多好，只要自己能看懂，并不断的推翻改进。

要记住的一点是，我们并不是为了做出最好看的仪表板设计，而是做最有用。在设计的时候你会发现还有很多不了解的或是不确定的，就要去和客户、产品沟通。

TOB的产品都会有Dashboard。花一些时间来玩这些应用程序，思考为什么这样做，优点与缺点，哪写可以借鉴。

1.像任何的UI工作一样，在设计时始终假设自己是用户去不提问推敲自己的设计。

2.不要用非必要的功能来填充仪表板。思考用户需要知道的是什么，并确保用户可以找到。

3.要考虑手机端的体验。用户可能需要在外出时检查仪表板。

4.收集反馈并实际观察用户在使用仪表板时的行为。做好可用性测试

5.不要忘记空状态。在仪表板上没有数据时，它会是什么样？将如何向用户展示？

以上都是我在做Dashboard时的一些经验和心得，一些也是看一些文章学到与了解的，希望对大家有所帮助。