地图界面很容易显得丰富:底图、路线、标记和侧栏都能往里加。真正难的是,当人带着一个具体问题看图时,能不能迅速找到线索。今天兰亭妙微分享 Figma 对 Lufthansa Systems 设计团队的访谈,原文讲到他们用更接近真实数据和行为的原型讨论复杂地图。对交互设计公司的方案工作而言,这也是一个很好的阅读入口。我们借此聊聊信息层级的设计判断,后文园区和物流场景为独立概念讨论,不是航空操作规范。
以园区车辆调度为例,调度人员可能先关心车辆在哪里,接着查看某辆车为什么停留过久,再决定是否联系司机。这几个问题需要的信息不同。总览阶段若同时铺满每辆车的编号、轨迹、时间和异常说明,标记之间很快就会互相遮挡。设计可以让总览先帮助找到区域和异常,再在选中对象后补充相关细节。
原文配图:设计工作区与平板地图展示。来源为Figma对Lufthansa Systems团队的访谈。
信息层级还与地图缩放有关。较远的视角适合看分布,靠近后才有条件读具体位置。设计稿需要讨论哪些内容始终可见,哪些内容随着比例变化出现,以及这种变化是否容易理解。不是把所有信息都隐藏起来就叫简洁,而是让读者在每一步都有足够的判断依据,不必反复打开侧栏寻找同一件事。
图例最好紧挨着实际需要理解的内容。若只有颜色,没有文字或形状上的辅助,人很容易忘记每种颜色的意思。对于默认关闭的图层,也可以说明它当前不可见,避免读者把没有显示误解为没有数据。图层的开关同时也是对信息范围的说明。
地图上的一个标记和右侧的一张详情卡,需要让人一眼看出彼此对应。可以通过选中描边、相同的对象名称以及适度的定位提示建立联系。打开详情时,地图要不要自动移动,也值得讨论:移动可以帮助找到对象,但如果把用户刚刚观察的区域完全带走,下一步比较反而更费力。
原文实景配图:驾驶舱中的Lido mPilot平板界面。画面用于设计观察,不提供操作指导。
详情区的顺序也应该跟着问题走。对物流车辆来说,身份、状态和更新时间通常比一长串历史记录更适合先读;轨迹、任务和事件可以逐步展开。若从详情返回列表,保留之前的筛选与视角,会让人更容易继续比较。把这些往返行为写进原型,比只交付一张“选中以后”的静态图更容易发现理解上的断点。
选中标记在密集区域里也需要能被找到。可以检查高亮是否被其他图层覆盖,打开详情后是否仍然保留选中提示。若允许连续切换对象,详情内容更新时要让用户感到对应关系已经变化,而不是突然看到另一组没有来由的数据。
一个只有三五个标记的演示画面,往往看起来很清爽。设计评审可以再准备一组密集分布、一组无结果,以及一组部分数据暂未更新的内容。观察重点不只是元素是否重叠,还包括读者是否知道现在看到的范围、哪些信息受到筛选影响,以及空白究竟表示没有对象还是尚未加载完成。
原文配图:Lido平板应用的地图与纵向剖面。图片版权归相关作者和权利人。
原型数据不必假装真实生产数据,但应该让关键条件能够被重复触发。例如给固定的一批演示对象设置不同更新时间,再让同事尝试找出需要关注的对象。这样,讨论就能从“感觉有点乱”推进到某个具体原因:时间提示太弱、筛选结果没有说明,或者详情与地图中的对象没有对上。
检查空白状态时,还可以观察是否留有恢复路径。清除筛选、回到全部范围或重新加载,应该与空白的原因相匹配。一个笼统的“暂无数据”可能藏着好几种完全不同的情况,清楚说明原因往往比增加一张插画更有帮助。
地图原型的价值,在于允许设计师把选择、缩放、切换图层和返回等行为连起来讨论。可以先确定这一次要回答的问题,例如两个图层同时打开时,主要路线是否仍然容易辨认。暂时不需要为了演示完整而补齐所有菜单。把问题范围收小,同事更容易给出与方案有关的反馈。
AI概念示意:虚构物流地图与图层面板,使用演示数据,非Lufthansa或Figma原作界面。
评审时可以请对方完成一个任务,尽量先观察,再追问他依据哪些线索做判断。记录犹豫出现的位置,而不只记录喜欢或不喜欢。原型通过某次讨论,并不等于正式系统已经验证;后续仍需要结合实际数据、设备和业务条件继续检查。工具让讨论更具体,设计团队则负责把问题问准、把结论的边界写清楚。
同一个问题也可以准备两个可操作方案,让参与者在相同内容下比较。例如详情固定在侧边,或选中后浮在地图上。比较时记录各自方便和受影响的动作,再根据任务频率取舍。结论来自这轮条件下的观察,换了使用环境仍需要重新判断。
这篇访谈给我们的启发,是复杂界面可以更早进入接近使用过程的讨论。看地图设计时,不妨顺着“发现对象、理解状态、采取下一步、返回继续看”走一遍。层级不只存在于色块和字号里,也存在于这些连续动作之间。