dashboard总结

Posted 2023-04-02

参考技术A 前言：我现在的大部分时间都在做这些设计。给自己做一个沉淀。很多思路来源于 Jan Losert 的《26 Steps of Product & Dashboard Design》

一、关于dashboard

      Dashboard主要是后台产品。 To  B产品主要包括两类，一类是 平台型产品 ，比如百度推广、微信公众平台、UCloud。另一类是公司自己 内部的平台 ，比如OA、CRM、WMS等，用户全部是内部员工。而这两大类无论是哪一种，普通用户都很难接触到，除非有明确需求的用户才会接触到。

后台产品多数都以下长这样，一般都是满屏的图表、表格、输入框、按钮：

        1）无疑就是了解业务，2B产品的业务相对来说，了解起来非常困难。那这个其实也没有很多办法，唯有多看几遍需求，多和产品和后台同学沟通多了解了。

        2）最好让客户发2-3个喜欢的参考案例过来，了解他喜欢的内容，以及他对设计结果的期望。

        3）用户画像。它让你明确为谁设计；在解决方案模棱两可时，它能有效地帮助选出一个最合适方案。用户画像其实只是一个需求的一个描述，它虽然能帮助不同角色在产品研发过程中，站在用户的角度思考问题，但是用户会随着你产品的扩大，时间的推移等也会跟着一起变化，所以也需要进行更新和调研。（我基本都是通过咨询市场运营的人，进行描述，很难实际接触到真正的人。）

        4）设立一个明确的目标。

        5）建好项目文件夹。看到比较好的东西，就档下来。为之后做情绪板做准备。下图是我创建时的文件命名。

              关于找参考。1.设计相关。由于相对而言，在市场上很少能够让你直接登录后台的系统，所以我一般会在dribble、Behance、花瓣上面找一些相关的设计。  2.  新功能。我会直接百度谷歌搜界面，虽然很丑，但是大致需要放什么内容，也能够大致了解到人家的交互逻辑

      这个时候一般我们产品都会出一份很草的原型图（不解释的情况下很多情况是看不懂的）。但也因为如此，自己可以发挥的空间就很大了，可以进一步站在产品的角度思考问题。

        回归正题，比如出一个新功能，我会重新思考一下整个操作流程和交互逻辑，看是否有更好的方案。这个阶段思考最多的是极端边缘情况，然后反馈给大家。在这个阶段，就把边缘情况定下来非常重要。不要等到设计阶段再去想这些问题；更糟糕的是要到开发阶段才去想，那样你会浪费大量时间和精力。

          1）情绪板

              这个时候根据业务，思考好整个设计的关键词，比如，我设计的是大数据，那我这边可以是科技感，真实，数据，直观之类的词。根据之前找的一些图，提取一些相关词的颜色、代表形状等等。那这个时候，整个设计的调性和icon的一些元素都可以定掉了。

          2）各个部分的设计

              ① dashboard。你要明确，dashboard是谁看的，市场销售？领导？技术人员？运维？这一步其实蛮重要的，明确之后，我们再提供相应的数据，否则就会有部分和用户相关，部分和用户半毛钱关系都没有的情况。如下，这种大数据的统计，很明显是给领导看的。那我实际用的是运维人员，那这些统计对于用户人员来说是没有用的。

（ 这篇文章讲的是给领导和市场人员的dashboard的设计：https://www.geckoboard.com/blog/building-great-dashboards-6-golden-rules-to-successful-dashboard-design/#.WZ_gcpOg_yI）

            ② 有逻辑组织信息，善用留白。

                ·将所要展示的数据梳理清楚后，思考不同数据之间，谁和谁有相关性，适合放在一起。比如，KPI数据和销售渠道放一块，财务信息统一放一起。

                ·同时考虑每种信息的重要性，分层级展示。

                ·只放重要的信息。别放无用的信息。

此处在公司深有体会，不管是产品还是开发，都喜欢多而全，密而重，却不讲有用性和呼吸感。表示很无奈

            ③  布局。

                  为了获得第一反馈并开展讨论，我第一稿不会考虑像素，会把之前用的元素拖过来用，这让我不到一天就凑出来一个像模像样的页面。

                讨论过后就要考虑像素的问题了。这个时候我一般会用栅格来做，做栅格之前我会先大致定一个，然后和程序员沟通，他们用的是什么方式，我这套栅格系统是否适用？更精细的我会用格式塔原理进行排版。

                ④配色。我是根据情绪板提炼出来的颜色进行配色的。这样到时候评审的时候，别人问你，为什么是这个颜色，你也是有理有据的。当然由于行业内的一些特殊用色，会进行稍微的修改。

                  这里不太建议，使用相近的颜色进行做柱状图的。毕竟要考虑色盲的情况。提供工具是 Corlor Oracle ，用来检测自己所用的颜色，是否能让色盲色弱患者正常使用（ http://colororacle.org/ ）。 体量轻巧，用起来极方便。

所以在设计的时候  1.色调和明度的跨度一定要大；2.仿照自然的配色；3.使用渐变，不要使用一系列固定颜色

              ⑤控件。对于控件，我经常使用原子理论。例如，一个表单标签，搜索框和按钮共同打造一了个搜索表单分子。分子组成好了，我就可能会有有机体。每个组件都设计好了之后，更换配色，替换掉之前的占位的部分就好了。（有兴趣的可以看下《设计的形状》这本书）

              ⑥表格。数据表格方便用户浏览、分析、对比、筛选、搜索、操作信息、以获得相应信息，进行相关操作。

              对齐方式 ：文字用左对齐；数字用右对齐；表头遵循数字对齐的方式；别用居中对齐。

              表头 ：样式与表格主体，最好有明显的视觉区分。标题文案尽量简约清晰。

              分割线 ：水平分割线最有用；垂直分割线有时可以用有效的对齐方式代替。别在需要垂直浏览的表格中使用斑马线。用分割线的时候，一定要非常淡，不要影响查看数据，一定要淡！！！降噪！！

              借助图形化表达： 过多的文字却会给界面带来阅读负担，适当使用图形表达，可减少占用空间，让表格主次分明。

              ⑦表单。管理平台的功能大部分需要通过填写表单来实现，但由于其业务特点，它的表单填写内容繁多，逻辑复杂。若直接罗列所有表单内容，一定会让用户望而生畏，且容易出错。

              合理组织表单内容： 加标题，加进度提示（有研究表明，比起完成一项大任务，人们更愿意去完成10个小任务，因为每完成一个小任务就能给人带来一定成就感）

 

                对齐： 业界比较认可的标签对齐方式有顶对齐、左对齐和右对齐三种。

                          对于简易表单可以使用顶对齐；对于较复杂表单，更倾向于选择右对齐，而对于布局复杂的表单则可以用左对齐的方式。

我一般都是上传到 “蓝湖”，然后配上交互，这样开发和产品看都没什么问题了。然后等开发完就走查。

目标： 我曾经同时做4个项目，但到最终都很无力。现在只负责1-2个项目，我对项目会进行更多的思考，自己进步也大了很多。

别太信dribble ：1、我给我领导看了些dribble里面我认为神乎其神的图，领导看过之后觉得毫无感觉，反倒是一些内容很多看上去很复杂的图，领导倒是很喜欢。（此处要考虑国人的审美，看看国内的大街和国外的大街就知道了）2.考虑实际运用情况，dribble里的图很多只care视觉形式，实际运用情况和实际性能相对来说很弱，

但人家的设计思路还是很值得借鉴的！

关于Dashboard设计的总结

参考技术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时的一些经验和心得，一些也是看一些文章学到与了解的，希望对大家有所帮助。