关于地图的那些事 |
您所在的位置：网站首页 › 指南针插画设计意图 › 关于地图的那些事 |
关于地图的那些事
|
前言
最近做了一个从设计到编码都是自己操刀的一个地图小项目，但是demo展示的时候被一些同事吐槽了，主要槽点在数据的展示和交互方面。 后来的那个周末，我利用业余时间阅读了一些资料，然后因此也接触到了很多关于地图的展示设计和交互设计相关的知识。 我觉得前端工程师不应该只思考关于技术上的知识，作为和用户距离最近的工程师之一，前端应该有一些关于交互和设计的知识（不然以后怎么和产品有理有据地battle砍需求哈哈哈），这就是我这篇文章的初衷，也是对这些所学知识的总结。 地图的设计以及开发流程一般来说，地图的设计的制作流程一般分为3个阶段：数据准备 ——> 数据展示 ——> 界面交互。 graph TD 数据准备Data --> 数据表示Representation --> 交互Interaction我先简略地介绍一下关于地图的数据准备。 地图的开发的每一步都取决于地理相关的数据，其实数据在地图中是一个非常重要的部分，在项目的初期一定要确定自己使用的开源地图数据能够提供哪些属性，也要梳理好自己项目中需要用到数据的数据结构。 比如我在一个有3d地形的地图上标记一个地点，这时候意味着地图本身必须有每一个点的地形高程数据，此外你传递给后端的标记点数据也需要包括该标记点的海拔。 关于地图地形或者底图等开源数据，可以通过天地图、高德地图、谷歌等地理数据门户自己获取。 地图数据的准备不是这篇文章的重点，在此就不再继续展开了，接下来我会用大篇幅来介绍地图数据的展示和交互。 地图数据表示 什么是地图的数据表示？我们先来看一张pc端的百度地图的截图 看上去好像平平无奇，但是实际上包括了非常多的地图数据的表示。比如许多icon和label：许多停车场的蓝色icon分布在底图的各个部分，还可以看到代表餐饮的橙色icon（真功夫），这些都是数据在地图上的表示。此外，我们也可以看到指南针、比例尺等一些地图元素。 web地图上的视觉表示都是数据驱动的。地图数据表示设计的讨论分为两大类：地图元素及其符号化 和 视觉层次。 地图元素及其符号化地图元素是构成地图的单个组件，包括地图图例、比例尺、缩放按钮和北箭头，以及任何补充信息等。每一个地图元素都可以在进行符号化表示，比如上述截图中的各处分布的停车场，这些停车场就属于地图的地图元素。 地图元素的符号化就是指你用什么合适的视觉方式让用户理解这些地图元素，也就是说符号化指的是地图上地理数据的图形化设计。比如在上述截图中，停车场就是使用蓝色带p字母的icon符号化，让用户一看就明白地图中的停车场分布情况。 下图的表格总结了在地图中你可能需要纳入考虑的地图元素和其可能的符号化表示 地图元素可能的符号化表示地图标题Web地图可以使用临时启动的浏览器窗口作为载体，当用户开始与地图交互时，视图中的静态地图文字标题可以被删除。映射区域● 用户可以通过手势或者鼠标控制他们想要查看地图的哪一部分。单击并拖动是平移或调整当前视图中映射区域的最常见形式。● 许多具有专题数据覆盖的网络地图通常使用由地图块组成的底图，这些底图可能由公司或开源贡献者提供。地图比例● 随着交互式地图的出现，地图可以随着用户的操作进行缩放，所以地图绘制者应该为不同的缩放级别设计不同的地图，并且只允许为了绘制地图而需要的缩放级别。● 缩放按钮是最常见的可见地图元素，允许用户更改地图的比例。也可以通过手势和鼠标键盘改变地图的比例。● 有些网络地图在每个缩放级别显示给定的地图比例，但许多地图不显示。补充信息● 补充信息可以包括嵌入式文本、链接、图像、图形、视频，并以交互方式显示，例如，当用户单击按钮或地图功能时。● 这些信息可以显示为信息窗口或工具提示（在地图本身的顶部，随着指针移动）。标签（重要）● 地名标签的数量和大小可以在不同的缩放级别上更改。● 地图标签应位于web地图的最顶层，以便数据层不会遮挡它们。● 标签的UI设计要提供一个清晰的入口点，无论是以介绍性文本的形式，还是作为UI元素定位器● 当用户与地图交互时，定位器地图可以更改以匹配当前视图。地图可以帮助缩放，允许用户通过在插图上绘制所需区域的矩形来放大主地图。地图元数据● 元数据包括数据源、地图投影等。它不需要直接显示在地图上，但可以在启动屏幕或链接网页上轻松获得。指南针● 随着用户旋转地图而交互旋转。● 许多交互式地图没有指南针，因为假设北方向作为屏幕方向的上方。补充图● 用户可以通过同时突出显示或刷涂与专题地图链接的图形或图表，更好地了解专题数据。● 这些链接到地图的图形或图表不应直接显示在地图顶部，而应显示在侧面板或底部面板中。图例● 允许与图例交互以影响地图，例如能够关闭/关闭图层、调整时间地图数据的时间线等。菜单● 以菜单的形式为地图用户提供其他选项和交互帮助● 为需要帮助学习如何使用地图的地图用户提供信息链接。 视觉层次其实视觉层次也很好理解，就是每个地图元素哪个应该叠加在哪个上面的问题，也可以归纳为地图元素的展示优先级问题。（了解ps的一定知道“图层”这个概念，实际上每一个地图都是各个地图元素所组成的单个图层的叠加） 下图中，地铁线在底图的上方，各个地点的label和icon都在地图的底图和地铁线之上，比如深圳北站的label和icon覆盖了地铁线和底图的一部分，也就是说，标志性地点的优先级在百度地图的图层中是最高的。 看到这里，大家也许会觉得这不应该是一种常识吗？但是，当你真的从0开始设计一个拥有更多元素的地图中，地图各个元素是否按照一个正确的视觉层次放置，将会是影响用户体验非常关键的一个点。 关于地图数据表示的问题 在一个地图中，是否地图元素越多，用户体验就越好？当然不是？比如，新冠肺炎数据可视化地图，需要比例尺吗？需要显示各个交通干线吗？不需要！ 每个地图的目的不同，比如上述新冠肺炎数据可视化地图属于专题地图，强调的是地理属性的空间格局或关于地点和地点之间关系的统计数据：数据和地理位置的相互映射。 百度地图就属于参考地图，其强调空间现象的位置，例如国家、城市、河流等。 在设计者设计地图时，只有这些情况下，设计者才需要把某些地图元素加入到地图中 在一个地图的特定使用场景下，设计者相当确定绝大部分用户需要该元素。比如飞行区域类型图层对dji fly 中的地图来说就是一个必要的元素，但是对其他地图来说不一定需要。 用户一看到这个元素就知道它是干什么的，没有学习成本，此时即使该地图元素对用户不是极度刚需，也可以考虑将其加入到地图中。比如百度地图pc端的全景图功能。 其他非常用元素可以将其隐藏在UI中的组件中，让少数需要它的用户花一点点时间就可以找到它。如何将地图元素进行符号化表示？ 我们再来看这张截图 你会发现每个地点都是根据地点的属性来设计icon的，比如“深圳北站”的icon明显和“民治”的icon不一样，我们很容易就能知道“深圳北”是一个交通枢纽站，而“民治”是一个普通的地铁站。 再比如“深水龙华水务有限公司”的icon和“彩旺大厦”的icon一致，我们很容易就会把这两个地点归为同一类的地点。 我们会发现，地图元素的符号化表示的好坏是很容易影响用户体验的。 比如腾讯地图的符号化表示，我就很不喜欢，因为它的文字label远大于图形化的icon，在有限的时间内对这么密集的地点进行一个归类是有很大的心智负担的。当然，有人喜欢使用文字对数据进行一个归类，但是大部分人更倾向于使用带有颜色的符号对数据进行一个归类。 优先使用不同颜色对地图元素进行分类，因为颜色是一种选择性的视觉变量。 比如在下图中，一般人都更倾向于将相同颜色的元素归为一类，而不是相同形状的。所以我们更容易把右图中的紫色元素归为一类。 在各个地图中，都倾向于使用不同的颜色来区分不同地点的类别，下图的谷歌地图，我们可以很快地对各个地点进行分类。此外，你会发现每一个水滴形的icon中还是有不同的形状对每一个地点的意义进行区分的。 用户可以通过有序视觉变量对符号进行排序。例如，大小、透明度、颜色深浅。需要注意的是，颜色和形状不具备视觉排序功能。比如首都label的大小大于其他城市，商场的icon大小就明显大于其中的商家icon。 视觉层次是为了人们更加轻松有效地阅读地图，其实和 符号的视觉权重和视觉排序 的作用有异曲同工之妙。如果所有地图元素都被赋予了相同的视觉重要性，用户在地图上获取信息的效率就会变低 此外，错误的视觉层次会导致重要的信息被遮挡，比如当地图底图放在最高层展示的时候，所有地点和交通干线都会被遮挡。 我总结了关于视觉层次的两大原则： 地图元素优先级原则：越重要的元素应该放越上层，而地图用途决定了各元素优先级排序 影响最小原则：比如文字label，即使很多时候它不重要，也可以放在顶层，因为它一般不会影响其他地图元素的信息传达1. 地图元素优先级原则 在你设计的地图中，越重要的元素就是应该放在越上层，比如在新冠肺炎数据可视化地图中，关于每个省份的这个数据卡片是最高级的，位于所有省份的上方，甚至大到遮挡许多省份，但是我们并不会觉得奇怪，因为这个卡片在这个地图中就是最重要的。 2. 影响最小原则 比如文字label，即使很多时候它不重要，也可以放在顶层，因为它一般不会影响其他地图元素的信息传达 交互比界面更广泛，可以被视为“人与机器之间的合作努力”，允许两个参与者之间交换信息。 地图交互因此被定义为“通过计算设备介导的人类和地图之间的对话”。用户和地图之间的交互对话会影响用户体验，而界面是支持这种体验的数字工具。 下表总结和关于地图交互的大部分原则，所有有关地图的交互尽可能遵循这个原则 规则描述提供信息反馈● 当用户完成与地图界面或者地图上放置的组件进行交互时，地图应向用户提供响应，以确认交互结果设计对话框用户在地图上一系列交互动作都应该有一个清晰的开始、中间和结束，并在用户完成既定序列后通知用户防止错误地图界面的设计应确保用户不会犯严重错误。如果用户确实犯了错误，地图界面应该提供一个简单的解决方案来纠正它允许轻松反转操作界面应允许撤消操作支持内部控制点用户，尤其是专家，希望感觉自己控制了界面，并且他们的行为在界面内产生了预期的结果, 比如地图图层选择功能就是一个内部控制点减少短期内存负载地图界面不应强迫用户在视角移动、卡片显示与隐藏时记住大量信息利用约定如果应用得当，约定会让用户的操作变得更轻松，因为他们不必在站点之间不断地弄清楚事情是什么以及它们应该如何工作。一个新兴的地图产品的通用功能应该与百度地图、谷歌地图、高德地图等地图的通用功能交互基本保持一致。创建有效的视觉层次地图应该创造一个好的视觉层次，使得用户可以以一种可以立即掌握的方式组织和排序其内容明确什么是可点击的当用户用鼠标或者手势扫描一个页面时，用户会寻找各种视觉线索，以识别可点击的事物，并且使用hover或者点击进行尝试我举一个简单的hover后点击某地点的例子 这个简单的点击事件，就体现了4个原则 提供信息反馈：点击后，点击地点会出现一个红色定位icon进行反馈。 明确什么是可以点击的：当我鼠标hover上去以后，“南山公园”的字体颜色改变，向使用者暗示，这个label是可以点击的。 利用约定：几乎所有的主流参考地图都是这个逻辑，避免给使用者带来心智负担。 创建有效的视觉层次：出现的红色icon是处在最高级的图层，这就是用户需要的 部分常用的地图交互运算符设计约定 交互运算符何时需要何时不需要使用提示平移和缩放当可以在不同的缩放级别上显示不同级别的信息（例如，州级信息和县级信息）或当在较低的缩放级别上无法看到太小的特征（例如，美国国家地图上的哥伦比亚特区）时，提供平移和缩放当地图的目的是提供主题概述，并且用户无需更改地图的范围时，不要提供平移和缩放（1）根据地图用途限制缩放级别的数量。例如，如果地图的目的是探索一个城市，则不要允许用户缩小视图以查看整个世界或远远超出城市边界的区域；同样，如果地图的目的是查看大陆层面的信息，则不允许用户放大城市（2） 除了常用的加减缩放按钮外，还包括一个“home”按钮，用于将地图返回到其原始范围（3） 坚持传统的平移和缩放操作；在桌面上提供放大/缩小按钮，允许用户在手机上捏来捏去（4）虽然某些地图不需要平移和缩放，平移和缩放在网络地图中已变得如此普遍，用户已经默认地图有这个功能了，因此，平移和缩放的交互是很有必要的点击地点后显示该地点信息当交互式地图的目的是探索时，该功能是必不可少的当地图的目的是显示整体趋势或为用户提供引导体验时，不需要该功能（1）当检索到的信息量最小时，应使用弹出窗口。当呈现大量信息或存在链接可视化时，应使用面板（2） 对弹出窗口或面板中包含的信息要有针对性。不要简单地包含属性信息（3） 有目的地设置弹出窗口或面板中信息的格式。例如，限制数字后尾随小数的数量（例如，24.3%而不是24.33333%）（4） 对于移动设备，有两种建议的实现方法：作为地图上方下方的固定面板，或作为在检索时显示的滑动侧面板（5）尽管有了平移和缩放功能，但大部分用户希望能够在地图上四处点击以检索更多信息，而不管该地图的产品定位。因此，即使认为没有必要，也尽可能实现该功能搜索和筛选当设计者希望用户能够找到特定位置，或者用户仅使用平移和缩放很难找到位置时，搜索和筛选是最基本的当地图的目标是讲述特定故事时，不需要搜索和过滤（1）决定哪些数据层是可搜索的，以及在何种分辨率下（例如，在地址级别或城市级别）。这应取决于可用数据和搜索目的（2） 在URL中保存特定搜索或位置，以便用户可以与其他人共享覆盖当地图的目的是允许比较不同的地图图层或设计者希望允许用户包含自己的数据时（1）限制提供的图层数量，这样地图就不会被太多的图层淹没（2） 如果地图有多个覆盖层，请对其进行设计，使其在全部打开时清晰可见关于部分常用的地图交互运算符设计约定，更加具体和有趣的地图例子可以参考 www.axismaps.com/guide/map-i… 如何评价一个地图的交互好坏 指标描述可学习性用户第一次使用时可以学习界面的速度效率用户在学习界面后执行所需任务的速度可记忆性用户下次使用界面时记住界面工作方式的能力错误频率和错误严重性用户错误的发生率、这些错误对使用界面的严重影响程度、修改这些错误需要付出的努力主观满意度用户喜欢使用界面的程度 |
【本文地址】