作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Stelian Subotin
验证专家 在设计
10 的经验

Stelian是一名UI设计师,在设计和建造不同规模的项目方面拥有超过七年的经验.

分享

听听这篇文章的音频版本

仪表板是一种独特而强大的方式,可以使用显示相关信息的数据可视化技术来呈现基于数据的智能, 可操作数据以及跟踪统计数据和关键绩效指标(kpi). 仪表板布局应该设计成以快速的方式显示这些数据, 易于扫描的格式,最相关的信息一目了然.

这个词源于传统的汽车仪表盘, 它们已经进化到在数字世界中发挥同样的作用. 在他的书中Stephen Few说得最好:

A dashboard is a visual display of the most important information needed to achieve one or more 目标; consolidated and arranged on a single screen so the information can be monitored at a glance.

移动仪表板设计

在本文中, 我们概述战略, 分析, 操作, 和信息的例子,以及在最好的仪表板设计的核心的基本原则, 不管它是什么类型.

有正确的方法 数据可视化 为设计仪表板奠定基础的关键功能是什么. 数据可视化是通过图形和图片表示数据—其主要目标是帮助决策者识别模式或理解在基于文本的应用程序中可能无法检测到的困难概念.

在他们的书中, 数据可视化,诺亚·伊林斯基和朱莉·斯蒂尔指出:

设计人员设计数据可视化的目的是创建一个可交付的,将很好地接受和容易理解的读者. 所有的设计选择和特定的实现都必须服务于这个目的.

优秀仪表板的关键特征

一个有效的仪表板可以一目了然地显示可操作和有用的信息. 它简化了复杂数据的可视化表示,并帮助涉众理解, 分析, 并提出关键的见解.

仪表板设计中的元素

好的仪表板是清晰、直观和可定制的.

  • 他们交流信息很快.
  • 他们清晰有效地显示信息.
  • 它们显示了数据随时间变化的趋势和变化.
  • 它们很容易定制.
  • 最重要的小部件和数据组件有效地呈现在有限的空间中.

针对关键用户需求的可视化数据和信息的初始定制将有助于提高可用性,并消除对不同用户角色的需求.

可定制仪表板元素的表示

伟大的仪表板提供一切只需点击一下.

  • 所有重要信息都可以立即获取.
  • 数据优先级.
  • 信息以视觉层次清晰地显示在一个屏幕上.
  • 设计提供了一个连贯的概述,包括稀疏, 清除初始数据,并提供进一步深入获取更多数据的机会.
  • 元素(图, table, 表单)显示在最小化的视图中,能够在模态窗口中显示更多细节,或者转到具有更多细节的页面.
  • 该设计提高了过滤器的可用性,允许用户自定义数据的显示方式,并使用标签过滤内容, 类别, 和kpi.

桌面仪表盘设计

降低复杂性提供清晰度

在一个充斥着数据的世界里, 提供清晰的信息是最难完成的事情之一. 在仪表板上只显示最相关的数据是必要的——我们显示的信息越多, 用户就越难找到他们需要的东西.

当面对太多的数据可供选择时, 设计师 应该只显示最相关的子集吗. 我们需要优先考虑并小心删除误导和不明确的指标.

有效的仪表板设计决策应遵循以下原则:

  • 项目目标
  • 数据的性质
  • 用户需求

仪表板设计元素

当阅读可视化(或任何其他形式的交流)时, 你的读者在这个问题上的脑力是有限的. Some of this brainpower will be dedicated to decoding the visualization; any brainpower that is left may then be used to understand the message (if the reader hasn’t yet given up in frustration). Noah Iliinsky和Julie Steele(数据可视化)

仪表板的核心目标是使复杂的信息易于访问和消化. 因此, 呈现数据的界面应该是干净和直接的,以尽量减少用户的认知负荷和搜索时间.

信息体系结构应该首先显示基本数据,同时允许访问支持或次要指标. 应该设计一个逐步深入的系统,从总体概述开始,然后进入更详细的内容——这有助于数据的优先级划分, 创造了清晰.

iOS手机仪表板设计

确定仪表板目标并显示适当的数据

设计仪表板时,成功 仪表板的设计师 从一组明确的目标开始,重点关注要解决的问题和关键, 人们需要从数据中获得可操作的见解.

好的设计目标促进高效和精确的执行. 采用 S.M.A.R.T框架 因为目标设定把焦点放在 具体的, 可衡量的, 可操作的, 现实的, 基于时间的 目标.

招聘美国全职自由用户体验设计师

在确定仪表板设计目标时,需要考虑以下几个关键问题:

  • 用户需要采取多少步骤才能实现特定的目标?
  • 界面是否足够直观,足以让用户自己达到目标?
  • 用户需要什么信息才能成功实现他们的目标?

确定特定仪表板设计的目标可能是什么, 通过询问来定义它, “这个设计能为用户解决什么具体问题?这个问题的答案将为我们提供关于什么指标的见解, 属性, 值, 视觉效果, 数据很重要.

在仪表板设计中使用甜甜圈图

以目标为中心的设计专注于解决实际问题,是所有伟大的仪表板设计的基础. 首先要清楚地了解业务目标, 考虑用户目标, 然后传达需要传达的关键信息.

仪表板设计中的背景

仪表板设计的最大挑战之一是服务于多个角色. 一旦定义了每个用户角色, 了解他们的需求在哪里重叠,在哪里不同变得至关重要.

有效的沟通是每一个成功的仪表盘设计的基本原则. 预见用户可能发现自己的潜在场景将有助于更好地了解用户的情况.

在设计时始终牢记用户上下文——确定他们的技术知识, 他们对整个系统的熟悉程度, 他们的目标, 等等.......

仪表板设计中的上下文元素

在试图确定用户行为和情境时,一定要问以下问题:

  • 设计是否考虑了访问者习惯阅读的方向?
  • 与仪表板的交互是否需要技术知识?
  • 用户能在几次点击中完成大部分操作吗?
  • Does the design align with user context by creating drill-down menus; does it use suggestive iconography and color palettes?

仪表板设计中使用的调色板也应该被视为一个上下文. 很多企业对企业 SaaS产品 仪表板设计成深色主题的UI,因为它们可以连续使用几个小时.

深色主题的ui可以帮助减少眼睛疲劳,并支持界面内的视觉清晰度. 然而, 采用这种方法需要仔细评估设计方向——优点, 在之前的设计博客文章中概述的缺点和潜在缺陷: 暗黑UI应该做和不应该做.

分析仪表板UI设计

更好的仪表盘设计与用户研究

用户研究有助于创造一个向用户展示相关数据的环境, 清晰的, 简洁. 这有助于他们思考他们正在寻找的内容和数据, 而不是如何使用和访问它.

有些仪表板必须能够工作,或者可以毫不费力地为查看相同基本仪表板的不同角色的用户进行定制. 用户研究很重要,因为它有助于确定用户的目标, 心智模式, 环境背景下, 痛点. 这些因素极大地影响了最终的仪表板设计.

仪表板设计概述

用户体验设计师、研究员和作家Mike Kuniavsky指出,确实如此 理解设计对受众的影响的过程.”

设计师必须定义不同的用户类型,并理解他们的目标是相同的, 它们的不同之处. 哪些信息对一种用户类型最具可操作性. 另一个? 他们必须考虑不同用户类型是否需要不同的布局, 或者是否有更一般用例的解决方案.

记住这一点, 在用户研究阶段,从基本的线框图开始,然后转向可以在实际用户中进行测试的原型,这是个好主意. 真正有价值的见解可以从只有5个用户的短时间用户研究阶段中产生——这将节省大量的时间.

仪表板设计低保真线框

仪表板设计中的渐进式披露

进步的信息披露 是否使用了一种通过减少杂乱来保持用户注意力的技术. 创建渐进公开系统有助于创建以用户为中心的环境, 这有助于优先考虑用户的注意力, 避免错误, 节省时间. 它还允许用户专注于对他们重要的关键功能,而不是被迫浏览所有功能——包括他们不需要或不感兴趣的功能.

进步的信息披露 is a dashboard design best practice that will also reduce error rates considerably; it will improve efficiency and help users improve their 理解 当一个系统是基于功能优先级的时候.

仪表板UI设计和数据可视化

渐进式公开将高级或很少使用的功能延迟到次要屏幕, 使应用程序更容易学习,更不容易出错. – Jakob Nielsen

动画是一种很好的方式来满足各种用户需求,同时也实现多种功能. 在加载数据和视觉效果时使用它是一个很好的选择,并且是一个先进的渐进披露解决方案.

Animation is the process of creating the illusion of motion; it is a dynamic that creates a sense of progress and constant feedback, 从而减少用户的不确定性和提高感知性能.

仪表板UI动画

在仪表板中使用渐进式信息披露的优点:

  • 减少用户的不确定性和焦虑(通过显示进展的迹象), 用户确信一切都按预期工作)
  • 为用户提供可查看的内容(数据的部分显示),而不是让他们等待
  • 为用户提供对即将到来的步骤的明确预期, 建立对信息分层呈现方式的理解

逐步披露和加载数据的潜在问题包括:

  • 以不适当的方式使用指标和披露. 较短的加载时间和无用的步骤会分散注意力,并违背可用性原则.
  • 如果在检索数据时没有明确的进度指示,则会导致用户的不确定性和更高的跳出率.
  • 使用静态进度指示器是一个没有什么意义的解决方案, 也没有提供足够的进展信息, 这也会导致用户的不确定性和更高的跳出率.

仪表板UI和UX设计

Summary

仪表板是一种交流数据和其他信息的强大方式, 尤其是以用户为中心, 以目标为中心的设计,遵循仪表板设计最佳实践和适当的数据可视化. 虽然每个仪表盘都是不同的,有自己的目标, 需求, 和局限性, 遵循这些基本原则并将其应用于仪表板布局示例将有助于创建出色的设计,而不管具体情况如何:

  • 首先,理解你的用户类型并理解他们的目标.
  • 通过使用暗示性的视觉效果向用户传达一个清晰的故事, 标签, 渐进式披露技术, 和动画.
  • 通过应用用户研究技术使复杂的事情变得简单.
  • 在向下钻取系统中,在适当的时间显示数据和信息.
  • 使用数据可视化以有意义的方式表达信息.
聘请Toptal这方面的专家.
现在雇佣
Stelian Subotin

Stelian Subotin

验证专家 在设计
10 的经验

英国伦敦

2017年2月23日成为会员

作者简介

Stelian是一名UI设计师,在设计和建造不同规模的项目方面拥有超过七年的经验.

作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

世界级的文章,每周发一次.

输入您的电子邮件,即表示您同意我们的 隐私政策.

Toptal设计师

加入总冠军® 社区.