关于 Dashboard 设计的总结

作为一个 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

对功能进行缩减

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

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

**2.**可定制的仪表板

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

Wordpress

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

WordPress

Panda

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

Panda

Panda

**4.**开始设计页面布局

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

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

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

总结了一些设计 Dashboard 时要记住的几点

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

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

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

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

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