您将如何以图形方式表示距离?

平面设计 形状 信息图形
2022-01-25 02:10:19

好的,

所以这可能有点“主观”,但我正在寻找一些想法。

我想将距离表示为条形图(有点),人们离得越近,它就越“饱满”。

如果您愿意,它们越远,条形图就越不完整。

我不确定我会如何表示。我创建了这个图形来向您展示我的思考过程。

距离以图形方式显示

你认为人们会理解吗?我应该指定“FAR”和“CLOSE”边缘吗?还是只显示距离?

人们是否会理解,随着条形图的填充,人们离得更近了?

我还应该指定实际距离吗?(米、公里等?)还是完全放弃条形图?

您将如何以图形方式表示距离,以便人们第一眼就能很好地了解对方有多近或多远?

编辑:好的,所以与客户交谈以了解更多细节,他们想出的是类似于@Scott 提供的圆圈,当前用户在“中间”,而用户周围的人在“轨道”中。他们已经在某处看到它并想要它,而不是显示每个用户的距离。

因此,我将不得不显示诸如“150m”或“附近”之类的文本,而不是带有距离的条形图。

但是,我还要感谢每个人提供答案,其中一些示例非常棒,我喜欢它们,它提供了一个很棒的想法小组可供借鉴。由于“简要”与最初的请求有所不同,我认为最好编辑这个问题以提供更多反馈。

4个回答

更新了使用楔形设计的示例。为清楚起见,将样本距离添加到图表中,并删除了文本。

在此处输入图像描述

带有开始和结束文本的示例

在此处输入图像描述

由于小尺寸是手持设备的一个因素,这里有两个 100 x 100 像素的空间节省选项。

在此处输入图像描述

在此处输入图像描述


基于最新要求的头脑风暴

这是一个将应用程序放在下拉列表中的移动设备节省空间的想法。使用较大尺寸的下拉菜单,地图可以包含更多信息,例如用户标签和距离网格。

在此处输入图像描述

几年前,我有一款名为 F19 Stealth Fighter 的 Amiga 游戏。这上面的HUD与你描述的非常相似。对于您投下而不是发射的炸弹,您会看到一条线,每端有两个“柱子”,越靠近目标越靠近。

这是一个简单的现代表示:

在此处输入图像描述

如果要显示两个人之间的距离,显示两个人之间的距离可能是最直观的。在下面的粗略模型中,仍然有某种条形,但它指向后方。距离通过位置(通过将人向右移动)和大小(缩小人)来显示。

在此处输入图像描述

当您想要更多条形指标时,您可以为三角形的一部分着色,如下所示。您可以在线条上添加标签。

在此处输入图像描述

也许左边的“参考”人可以被删除。

我认为距离项目效果更好,更直观,但我会稍微扭转一下。远距离应长而红,短距离应短而绿。您发布的内容似乎与此相反。我希望长条“远离”并且是红色的。

在不知道您的整体布局的情况下,另一种可能性可能是使用带点的圆圈....在此处输入图像描述