今天继续进行B端相关的改版分享，而这次的主要改版对象是之前没有涉及过的新页面类型 —— 地图展示类页面。

下面是我学员的真实工作案例：

问题分析

首先做个简单的介绍，这个页面用来记录所属车辆外出作业的信息，方便督查人员进行任务完成度情况的检查。

上方的模块可以用于筛选不同车辆、出勤记录，左侧的相关任务是当前所选车辆记录所包含的任务明细，可以包含多条任务，右侧则是可视地图来展示每次出勤的路线和节点事件，下方则是回放车辆运行轨迹的操作栏。

了解完大致的功能，下面就可以针对当前项目已有的问题做相关的分析，我会遵循从上到下的顺序展开。

在层级较高的全局框架中使用了页面标签组件，也就是打开的不同页面会在这里切换而不是在浏览器的页面标签上切换。这个我在过去分享过，对它的作用没有概念的同学可以回去看看：

文章链接：B端设计｜页面标签的认识和实操应用​

放没有问题，但是它所处的位置却很有问题，在当前设计中它和主体内容区域是连接在一起的，导致层级的关系变模糊，增加了主体区域信息量的负担。

第二个问题，就是地图模块的展示，这里有一个非常普遍的陷阱，就是地图要尽量“大”，还要撑满整个区域。

如果地图的价值本身就是查看地图上的信息，那确实越大越好，比如百度、谷歌地图，我们使用和查看的是地图信息本身。而在当前的场景中，我们主要关注的对象是车的运行轨迹，而不是查看地图内的其它GIS信息。

虽然理论上空间越多越好，但是界面还有别的信息需要展示，尤其是左侧的任务栏，以及下方的工具栏，这些组件全被容纳进地图区域以后，直接导致它们的辨识度被削弱，信息点过于密集。

所以内容区域的调整，要重点针对地图展示和不同模块区分度的矛盾展开。

改版说明

改版首先从全局框架做调整，优化页面标签栏，把它和顶部栏合并到一起，和下方的内容区域做出明确的隔离。

然后确定内容区域中的不同组件，把筛选和全局操作按钮从下方隔离出来，做一个独立的操作栏。任务列表也独立出来和地图左右布局，右侧的操作栏还是放在地图内，强化它们之间的联系。

而在使用场景中，有些情况需要尽可能放大地图尺寸，查看车辆的运行轨迹和停留点，所以我们还要添加地图区域放大和地图比例放大的操作。

首先是地图区域的放大，在当前的设计中支持侧边导航和任务栏的折叠，而地图内的全屏按钮，就是同时折叠这两个组件来放大地图区域。任务栏折叠后悬浮在地图左上角，鼠标悬浮时可以展示更多的信息和选项。

而在地图本身比例缩放上，做了一个专用的拖动条，而和传统地图不同的是，我不认为使用无极缩放（比例递进值很小）体验会好，因为车的出勤轨迹都在市区内，往往只在一个区的范围内活动，地图的查看比例主要都集中在较小的范围内。所以缩放比例我只给出5档（可能三档就够了），不管是鼠标滚轮还是直接拖拽都只能在这个范围内切换，同时防止比例被设置得过大（没有意义）要重新定位回来。

最后还有下方的进度条，是重点需要交互的部分，进度本身的拖动需要有尽可能长的空间，所以左右占空间的时间信息要移走。同时行驶里程、作业限速信息不是操作信息，所以也可以移出栏目外。

而在进度区域中，包含的信息量不少，首先Y轴可以表示车辆的速度，而每次任务会有限速，所以增加代表限速的横线，超出的部分会有颜色进行强化。同时在这个时间段内，还会包含一些其它异常的情况，如停靠过久、驶出目标区域之类的，那么这个时间段就会填充不同的颜色进行标识。

除了信息外，这个区域也有交互的需要，原来设计中用用播放器的那种进度控制球，非常不适合应用在频繁、精细的选择和拖拽上的，所以把这个选择控件做成矩形和时间区域结合，增加控制的热区更方便使用。

上面的基本框架做完以后，就可以填充最终的视觉样式了，而这里还有个知识点，就是项目如果使用了完整的地图数据，那一般就意味着接入了外部的地图API（自己开发的很少，那更好）。绝大多数地图数据供应商的API，都会支持样式的定义和 GIS信息的筛选，比如可以到 EXPing、Mapbox 之类的网站上查看地图的不同样式效果。

我们可以根据场景需要进行定义，减少不必要的地图信息，强化道路的展示且易于突出路线，然后使用合适的样式截图做示例，并和相关程序员讨论具体落地的方式。

下面，是完成调整后的完整效果，包含正常和放大两个状态：

然后再看看改版前和改版后的对比（横版查看更佳）：

结尾

进入这个页面之前还有不少交互的操作，如果看得人多，下周可以再做一个交互流程说明出来~有好的案例也可以分享给我们。

我们下篇再贱~

我们 B 端产品设计全能班新一期也是招生在即，想要解决工作项目真实问题，或者拥有一套独立优秀的 B 端作品集入行或是跳槽，都可以来课程找我变强~