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

好，

因此，这可能有点“主观”，但我正在寻找一些想法。

我想用条形图（种类）来表示距离，人们越近，条形图就变得越“饱满”。

它们越远，条形图的填充就越少。

我不确定如何代表这一点。我创建了此图以向您展示我的思考过程。

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

人们会理解，随着条形图的填充，人们会越来越近吗？

我还应该指定实际距离吗？（是米，公里等？）还是完全放弃了条形图？

您将如何以图形方式表示距离，以便人们乍一看就知道另一个人的距离是多少？

编辑：好的，所以与客户交流以获取更多详细信息，他们想出了什么，类似于@Scott提供的圈子，当前用户位于“中间”，周围的人处于“轨道”。他们已经在某个地方看到它并想要它，而不是显示每个用户的距离。

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

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

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

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

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

根据最新要求进行头脑风暴

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

多年前，我玩过一款名为F19 Stealth Fighter的Amiga游戏。HUD在此方面与您所描述的非常相似。对于投下而不是发射的炸弹，会看到一条线，两端各有两个“柱”，越靠近目标，它们越靠近。

这是一个简单的现代表示形式：

如果要显示两个人之间的距离，则显示两个人之间的距离可能是最直观的。在下面的粗略模型中，仍然存在某种类型的条，但是它指向后方。距离通过位置（通过将人向右移动）和大小（收缩人）显示。

当您需要更多条形指示器时，可以按如下所示为三角形的一部分上色。您可以在行中添加标签。

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

我认为距离项目可以更好地工作并且更加直观，但是我有点颠倒了。长距离应长红色，短距离应短绿色。您发布的内容似乎与这恰恰相反。我希望长条会“很远”并呈红色。

在不知道整体布局的情况下，另一种可能是使用带点的圆...。

使用Talkingrock创建的图像：

我认为对我来说，最有意义的是像这样交换它：

从“ Far Apart”开始，并在您靠近时亮起。我认为将文本从“ Far Close”更改为“ Far Apart”，“ Together”或“ Met”之类的东西，或者指示两个人到达同一目的地的东西，将有助于进一步传达想法。

我想用条形图（种类）来表示距离，人们越近，条形图就变得越“饱满”。

不过，这与条形图相反。值越高，条形越大。要做相反的事情可能会给实际数据增加混乱或视觉不和谐。

为了使观点更直接一点，将“远/近”替换为“大/小”。这根本没有任何意义：

                            ---        
                     ---    | |        
              ---    | |    | |        
       ---    | |    | |    | |
       | |    | |    | |    | |
big    ---    ---    ---    ---     small

因此，我认为您需要放弃使用标签“翻转”刻度的想法。如果您想传达更大的距离，请用大号指示。这是最直观的关联。

但是也许解决方案根本不是条形图。听起来您正在尝试实现某种“定位器信号”隐喻。您离得越近，信号越强。我认为这是个好主意，但可以考虑使用条形图以外的其他视觉效果。也许是某种“斑点”（或点）。

您询问如何以图形方式表示距离，但所有答案似乎都取决于图像中的文字（单词“ far”和“ close”等）。因此，我建议您只写“相距3英里”或“要走200m”，并使用水平填充的任何“进度表”背景。

给出数字距离不一定对阅读实际数字的人有用，但是数字和度量单位的确使您一眼就能清楚地清楚所测量的内容以及是否发生了变化。

您的上下文不清楚，但很重要。从概念上讲，距离真的是您想要代表的吗？还是实际上是在表示用户与他们要进入的状态有多近，而“距离”恰好是该指标？

考虑到您实际上要代表的是用户离达到理想状态的距离。理想状态应在屏幕上给人最强烈的印象。

换句话说，在您的应用程序上下文中，如果用户寻求与其他用户更接近，则您不希望随着距离的增加而变得更强的条（或任何东西），因为这种印象与用户的印象正好相反。目标。

这也适用于颜色；在红色->绿色方案中，您通常希望绿色与目标状态相对应，而红色则相反。因此，如果用户试图离得更近，则希望绿色距离更短。

考虑到这一点，无论是条形还是楔形都可以，但是在任何一种情况下，您都希望条形/楔形在所需状态侧变绿且充满（楔形较大）（例如，如果用户想要更接近）。

沿着这些思路，除了可访问性（这只是一个示例），如果您真正想做的只是给人一种印象，即用户离他们期望的状态有多近，而不是给出距离的准确信息，那么指示符可能是简单，就像一个静态方块，在目标状态（从近或远）从红色逐渐变淡为黄色，然后变为绿色，可能在接近目标状态时获得标签，边框或动画。

这里其他答案中的设计选项都很不错，但是从UX角度来看，请务必考虑一下您如何使用这些设计以及您打算做什么：如果您试图鼓励用户达到目标状态，例如，您不希望您的酒吧变短并在该状态下消失。那是反动机。

有趣的是（我手头没有证据）我也会怀疑，用户一眼就能看出一组中最大的条，而不是最小的条。然后，我可以想象一下，如果屏幕上有多个指示器，并且您的应用程序希望让用户快速找到“最佳”（取决于上下文，则是最接近或最远），那么指示器越强，表示更理想的状态将对此有所帮助。

就我个人而言，我更喜欢一个楔形，其较大的一侧在右侧，充满时变绿，而较大的一侧则越靠近（假设目标越近），因为这使我想起了现在熟悉且无处不在的手机信号仪表（4条棒令人兴奋，1条没有）

我认为您应该将条形设置为全部一种颜色，然后使用诸如箭头之类的显着标记或垂直覆盖的其他有色条形来显示距左侧起点和右侧终点的相对距离。（编辑：我相信官方术语是滑块）

这是一个游戏示例，其中角色图标用作标记，并且存在多个标记：

这是一个更现实的示例：

编辑：（我的建议有点道理）

问题中显示的原始版本看起来太像进度条，应该表示进度而不是距离。如果看起来像进度条（即使带有标签）的东西开始倒退，则某些用户会感到困惑，因为它看起来太不自然并且与人们的期望背道而驰。

通过使用带有某种形式的标记的单个彩色条，标记将成为焦点，它应该能够沿该条沿任一方向移动，这是更自然的选择。在其上添加槽口还可以感觉到正在进行某种形式的测量（在这种情况下为距离）。