设计模式——仪表板

仪表板显示您的应用程序中最重要和最有用的信息。如果您从未使用过此组件，那么您有机会进入它并学习如何设计一个完美的仪表板。

操作仪表板

操作仪表板专注于显示不断改变其价值和状态的实时关键数据。它们非常适合监控可能需要立即响应的任务。设计这样的仪表板乍一看就足够全面，以便用户可以快速做出反应并采取行动。

分析仪表板

与运营仪表板相比，分析仪表板反映了更长期的数据，这些数据显示了一段时间内的变化。顾名思义，此类仪表板为分析、思考过程和“aha”时刻提供信息。他们更具反思性，不要求立即采取行动。

增强易读性并强调内容

人脑一次无法处理大量信息。尽管这一事实似乎与加载数据的仪表板不一致，但有一个解决方案。空白有助于分割相关内容并提高其易读性。此外，它强调了更重要的元素，在它们周围创造了喘息的空间。

仔细完成后，间隔良好的仪表板看起来更有吸引力和专业。

使用标签获得更好的导航

当信息过多时，人眼需要视觉锚来帮助更有效地扫描仪表板。将此工作分配给标签或章节标题，因为它们将相关内容分组并在整个页面中引导用户。

单独的内容组

为了减少厨房里的所有杂物，您可以使用容器盛放香料、茶包、咖啡、糖和其他烹饪材料。容器也有助于整理仪表板的东西。为它们加上白色间距、标题、视觉分隔线，以区分内容组并组织布局。

保持仪表板简单易读

说“仪表板”，图表会立即出现在您的脑海中。但是，并非所有图表样式都足以解决这个问题。3D 图表和色彩强烈的图表严重损害了易读性和用户的审美！此外，它们分散了数据的注意力，通常难以分析。

选择图表，考虑它的目标和它将显示的数据类型。有气泡图、雷达图、饼图、条形图等。

使用网格设置布局

设计师为网格祈祷，因为它们有助于构建布局并定义界面中的层次结构和平衡，尤其是在仪表板中。使用网格（水平和垂直线的网）来制作整洁的构图并相应地放置元素。白色间距和接近的原则在这里也可以帮助你。

优先内容

在制作仪表板并考虑每个容器的位置时，首先要确定优先级。根据眼球追踪研究，用户在整个页面中的眼球运动有两种最常见的方式——F 和 Z 模式。眼睛从左上角开始，重复 F 和 Z 字母的形状，搜索有趣或相关的内容。相应地放置基本元素，以引导用户前往所需的目的地。

记住视觉层次并使用图形、颜色、排版和其他视觉工具来引导用户的注意力。

使用一致的结构

使用内容容器时，请记住它们的结构一致性。与任何家庭一样，其成员可能具有不同的特征和内心世界，但他们的外表有很多共同点。因此，应用相同的左对齐，使用相同大小的标题，为每个容器设置相同的边距。这样的仪表板对用户来说似乎更可靠，因为他们知道会发生什么。

在响应式设计方面，结构一致的仪表板具有灵活性和可扩展性。

优先考虑内容并避免滚动

可滚动的仪表板没有多大意义——它们被忽视了！问题是用户倾向于只发现屏幕折叠上方的信息，而积极地忽略下面的所有内容。该怎么办？力求减少，优先考虑并总结过于描述性的内容。对仪表板应用更多交互，在悬停或单击时显示更多内容。因此，您可以保留更多内容，但不要用大量信息吓跑用户。

如果仪表板越来越重，请减少杂乱。在将所有内容容器放置在仪表板上之前，请仔细检查它们的用途。

允许用户比较内容组

当您拥有大量信息并且只有一个仪表板可以容纳所有内容时，交互式组件（例如选项卡、工具提示、覆盖）是必不可少的。但总有一个“但是”。避免对用户通常同时比较和分析的内容组使用交互。此外，一定要避免隐藏应该始终在视图中的数据。

争取更少

有时，设计师试图将海量数据压缩到一个仪表板中，直言不讳地说，它变得一团糟。研究表明，人脑一次最多可以操作 5-7 个元素，从而关闭其他信息的大门。因此，请尊重您的用户，避免让他们无法处理的数据压垮他们。

允许用户自定义仪表板

个性化的方法让用户有宾至如归的感觉。它包括提供与用户角色相匹配的内容和功能。定制是个性化的一部分，因为它使用户可以自由地以他们喜欢的方式管理内容和功能。

对于具有许多角色的系统而言，仪表板定制是必须的，这些角色的需求和任务可能像白天和黑夜一样不同。

本文内容为转载