美文网首页
设计模式——仪表板

设计模式——仪表板

作者: 嘎嘎开心 | 来源:发表于2022-04-21 09:28 被阅读0次

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

操作仪表板

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

分析仪表板

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

增强易读性并强调内容

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

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

使用标签获得更好的导航

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

单独的内容组

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

保持仪表板简单易读

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

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

使用网格设置布局

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

优先内容

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

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

使用一致的结构

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

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

优先考虑内容并避免滚动

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

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

允许用户比较内容组

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

争取更少

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

允许用户自定义仪表板

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

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

本文内容为转载

相关文章

  • 设计模式——仪表板

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

  • 仪表板设计只需六个步骤

    仪表板的设计是一个令人头疼的事情。有几种不同类型的仪表板:关键性能指标(KPI)仪表板,分析仪表板,商业智能(BI...

  • 手把手教你从0-1做一张酷炫驾驶舱,让老板对你赞不绝口

    最近我分享很多了模板,但是没告诉大家如何从0-1做好一张仪表板。 今天我就从「仪表板的设计」和「仪表板的美化」这两...

  • UI设计 | 更好的仪表板设计的10条规则

    如今,仪表板设计是经常需要的。一种可视化的视图,该视图可以显示所有信息,显示趋势和风险区域。 对我来说,仪表板-是...

  • 优阅达“优分享”| 2018 Tableau 峰会『干货帖』:仪

    什么是仪表板?仪表板是交流有关特定数据集见解的工具,但要构建一个优秀的仪表板,仅仅将你的见解放到仪表板上是不够的。...

  • 设计模式

    常用的设计模式有,单例设计模式、观察者设计模式、工厂设计模式、装饰设计模式、代理设计模式,模板设计模式等等。 单例...

  • 设计模式笔记汇总

    目录 设计原则 “依赖倒置”原则 未完待续... 设计模式 设计模式——策略模式 设计模式——装饰者模式 设计模式...

  • 设计模式

    《C#设计模式》 《C#设计模式》-设计模式概述 《C#设计模式》-面向对象设计原则 《C#设计模式》-单例模式 ...

  • 浅谈JS的一些设计模式

    @(书籍阅读)[JavaScript, 设计模式] 常见设计模式 设计模式简介 设计模式概念解读 设计模式的发展与...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

网友评论

      本文标题:设计模式——仪表板

      本文链接:https://www.haomeiwen.com/subject/bfivdrtx.html