美文网首页
UI组件——图表最佳实践

UI组件——图表最佳实践

作者: 嘎嘎开心 | 来源:发表于2022-04-03 10:22 被阅读0次

图表可能是一个很大的帮助,也可能是一场彻底的灾难。本文收集了一系列有用的做法来帮助您以清晰美观的方式呈现信息。 

保持图表一致

任何图表的主要目的是有效地呈现数据,以便用户无需浪费时间弄清楚它的含义。做到这一点的方法之一是使您的设计(包括字体)保持一致。它有助于让用户专注于主要任务并提高易读性。

等级制度

在不熟悉的观众面前开始演讲之前,最好先介绍一下自己。同样,在显示图表之前,最好先说明它是关于什么的——无需让用户猜测。

添加足够的空白以简化理解

空白有助于区分图表元素:标签、图例和图表本身。它增加了图表的平衡,使它们更容易扫描和理解信息。

如果仪表板上有几个图表,则应在它们之间添加足够的空间,甚至添加边框,以便用户可以轻松区分不同的组。

确保明智地使用空白。在一组元素之间添加太多空间会误导用户并使他们相信它们不相关。这是接近的基本格式塔原则之一。

使用容器分隔不同的图表

如果页面或应用程序包含两个或多个图表,请确保在视觉上将它们分开。使用边框或公共背景为每个图表中的相关项目创建一个容器,帮助用户快速有效地识别哪些元素是相关的。

它有什么帮助?根据共同区域的原则,用户将边界内的项目视为一个群体,并假设它们具有某些共同的特征或功能。因此,这些边界之外的元素被认为是不相关的。

将时间放在 x 轴上

折线图和面积图最常用于显示价值随时间的变化。通常设计师将时间放在 x 轴上。这样,人们可以自然地按时间顺序扫描您的图表。

使图表注释易于阅读

图表注释提供准确的值,帮助用户更有效地分析图表。根据图表类型,以最方便的形式放置注释。避免旋转标签或将它们放置在用户的阅读模式上。

例如,每个栏左侧的随附标签具有从左到右语言的直观位置,并且易于阅读。

坚持标准的尖角条形

在柱状图上,具有更尖角的条形有助于更精确地识别值。带圆角的条可能看起来更好——在不需要精确可视化的情况下使用它们。但是,不要过度,完全圆条形使用户无法说出确切的值。

信息对比

对于多折线图,结合焦点和非焦点状态。突出重点线——用户悬停的那条线,同时中性色为非重点线着色。否则,许多鲜艳的颜色会分散用户的注意力。

添加视觉提示

通过提供提示使分析图表更容易 。例如,绿色箭头可能表示用户的进度正在增加,红色箭头表示正在减少,等等。不要只依赖颜色并提供其他有用的标志,例如图标。对于有视觉障碍的用户,颜色并不能提供足够的线索。

确保您的提示清晰易懂

比较风格

如果图表包含两条或更多条不均匀的线条,请突出显示主要的线条。例如,如果您要比较两个不同时期的数据,请专注于当前的一个,而将另一个放在背景中,使其不那么明显。忽略层次结构并使用相似的颜色只会让用户感到困惑。

视觉层次

忽略层次结构很容易破坏整个设计,图表也不例外。将基本元素放在最前面,次要元素放后会感觉更好。

通过提供上下文亮点来帮助集中注意力

当用户将鼠标悬停在一个数据点上时,强调其标签并淡化其他数据点的标签,以帮助集中注意力和上下文层次结构

这似乎是一件小事,但它可以帮助用户更快地分析图表,关注重要的事情并忽略其他值。

将图表设置为零值基线

设计图表时,请始终牢记 零值。不从零开始 y 轴(或水平条形图的 x 轴)会使数据显得误导和不真实。

例如,当 y 轴从 10 开始时,达到 10 的条看起来比达到 30 的条要小得多。通过从零开始轴,您可以保证数据正确显示并减少用户的机会误解数据。

选择合适的间隔

选择正确的测量间隔对于折线图和面积图至关重要。您显示的时间越长,间隔应该越大。例如,如果您的图表包含超过一年的数据,最好将其划分为数月,而不是数周或数天——您将避免大量不必要的数据,这些数据会在图表上产生噪音,而不是有价值的信号。

保持标签可读

为了节省空间,使用垂直或对角文本标签可能很诱人,但它不会使图表更清晰。相反,它会降低可读性。水平定向标签,就像大多数其他文本一样。

如果标签很长,请考虑使用水平条。它们允许在图表左侧水平放置长标签,而不会影响可读性。

为清晰起见,请附上图表图例

图表的图例显示了哪个线条、条形、气泡、点或任何其他元素代表图表中的哪个数据系列。没有它,图表只是一组毫无意义的图形。

显然,您可以阅读没有图例的单线图。但是,当图表涉及比较和额外计算时,图例至关重要。

确保标签足够短且直截了当以适合移动屏幕。

在悬停时显示特定值

上下文细节不仅使图表具有交互性,而且还帮助用户更好地理解它。随意在悬停时添加特定值以最大程度地减少认知负担并帮助用户在更短的时间内分析图表或比较数据。

将鼠标悬停在数据点上后应显示特定值。

避免使用 3D 样式扭曲图表数据

虽然 3D 元素在电脑游戏和动画电影中看起来很棒,但图表并不是真正适合它们的地方。这并不是因为它们看起来很奇怪。另一个原因是 3D 元素使分析图表 确定准确值变得更加困难。最好坚持二维形状。

图表类型用法

条形图或柱形图非常适合比较不同的值或显示一段时间内的进度。那么饼图的时间是什么时候呢?当您希望您的用户对部分与整体的关系有一个大致的了解时——例如,投票结果。

工具提示位置

上下文细节有助于更好地理解图表。要从它们中受益更多,请选择正确的位置——它们不应该涵盖其他元素。

本文内容为转载

相关文章

  • UI组件——图表最佳实践

    图表可能是一个很大的帮助,也可能是一场彻底的灾难。本文收集了一系列有用的做法来帮助您以清晰美观的方式呈现信息。 保...

  • React开发相关资料

    React-Router 中文简明教程 总结 React 组件的三种写法 及最佳实践 [涨经验] React-UI组件

  • UI组件——表格最佳实践

    在理想的世界中,表格可以帮助用户分析数据、比较价值并获得无价的见解。实际上,通常情况下,它们塞满了信息,无法扫描。...

  • UI组件——卡片最佳实践

    尽管卡片的基本概念并不新鲜,但仍然有一些复杂的因素可以决定整个用户体验的成败。 首先,卡片的概念是基于共同区域的原...

  • UI组件——搜索最佳实践

    搜索设计可能看起来像是一个一小时的任务:添加一个输入、一个搜索按钮和结果页面,然后就结束了。可悲的是,许多设计师忽...

  • UI组件——分页最佳实践

    一些设计师认为分页是一种过时的设计模式,并切换到更优雅的无限滚动,而不是探索有助于整体导航的复杂性和最佳实践。 分...

  • Vue全家桶

    生态系统 UI 组件库 图表

  • UI组件——顶部导航最佳实践

    当用户迷路时,他们会查看页面顶部,而顶部导航则可以挽救这一切。从可读性和大小到响应性和设计,在将顶部导航设计为最重...

  • UI组件——标签导航最佳实践

    标签可能看起来很小,但它们实际上赋予了整体导航能力。同时,违反设计模式可能会阻止用户访问这些选项卡下的内容,造成完...

  • UI组件——图表简介

    定性数据功能强大,但给设计师带来了挑战,以使其可视化并以吸引人且易于解释的形式呈现。为此,我们使用图表和图形。 数...

网友评论

      本文标题:UI组件——图表最佳实践

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