主要观点总结
本文介绍了B端相关改版中的新页面类型——地图展示类页面的改版过程。文章以一个真实的工作案例展开，首先介绍了页面的功能及现有问题，然后提出了改版方案，包括全局框架的调整、内容区域的优化、地图区域的放大、比例缩放的操作、进度条的改进等。最后展示了改版前后的对比效果，并提及了下一阶段的交互流程说明和B端产品设计的招生信息。
关键观点总结
关键观点1: 页面功能介绍
页面用于记录车辆外出作业信息，方便督查人员检查任务完成度。包含筛选车辆、出勤记录、任务明细、可视地图展示出勤路线和节点事件，以及车辆运行轨迹的操作栏。
关键观点2: 现有问题分析
问题包括页面标签组件的位置不当，增加了主体区域信息量的负担；地图模块展示不当，信息点过于密集，辨识度削弱。
关键观点3: 改版方案介绍
改版方案包括调整全局框架，优化页面标签栏，确定内容区域中的不同组件，放大地图尺寸，调整地图比例缩放，优化进度条设计等。
关键观点4: 改版效果展示
改版后的页面有全局框架的调整和内容区域的优化，提高了信息的辨识度。同时展示了改版前后的对比效果。
关键观点5: 后续计划与招生信息
文章提及了下一阶段的交互流程说明，并宣传了B端产品设计全能班的新一期招生信息。
正文
今天继续进行B端相关的改版分享，而这次的主要改版对象是之前没有涉及过的新页面类型 —— 地图展示类页面。
问题分析
首先做个简单的介绍，这个页面用来记录所属车辆外出作业的信息，方便督查人员进行任务完成度情况的检查。
上方的模块可以用于筛选不同车辆、出勤记录，左侧的相关任务是当前所选车辆记录所包含的任务明细，可以包含多条任务，右侧则是可视地图来展示每次出勤的路线和节点事件，下方则是回放车辆运行轨迹的操作栏。
了解完大致的功能，下面就可以针对当前项目已有的问题做相关的分析，我会遵循从上到下的顺序展开。
在层级较高的全局框架中使用了页面标签组件，也就是打开的不同页面会在这里切换而不是在浏览器的页面标签上切换。这个我在过去分享过，对它的作用没有概念的同学可以回去看看：
放没有问题，但是它所处的位置却很有问题，在当前设计中它和主体内容区域是连接在一起的，
导致层级的关系变模糊，增加了主体区域信息量的负担
。
第二个问题，就是地图模块的展示，这里有一个非常普遍的陷阱，就是地图要尽量“大”，还要撑满整个区域。
如果地图的价值本身就是查看地图上的信息，那确实越大越好，比如百度、谷歌地图，我们使用和查看的是地图信息本身。而在当前的场景中，我们主要关注的对象是车的运行轨迹，而不是查看地图内的其它GIS信息。
虽然理论上空间越多越好，但是界面还有别的信息需要展示，尤其是左侧的任务栏，以及下方的工具栏，这些组件全被容纳进地图区域以后，
直接导致它们的辨识度被削弱，信息点过于密集。
所以内容区域的调整，要重点针对地图展示和不同模块区分度的矛盾展开。
改版说明
改版首先从全局框架做调整，优化页面标签栏，把它和顶部栏合并到一起，和下方的内容区域做出明确的隔离。
然后确定内容区域中的不同组件，把筛选和全局操作按钮从下方隔离出来，做一个独立的操作栏。任务列表也独立出来和地图左右布局，右侧的操作栏还是放在地图内，强化它们之间的联系。
而在使用场景中，有些情况需要尽可能放大地图尺寸，查看车辆的运行轨迹和停留点，所以我们还要添加地图区域放大和地图比例放大的操作。
首先是地图区域的放大，在当前的设计中支持侧边导航和任务栏的折叠，而地图内的全屏按钮，就是同时折叠这两个组件来放大地图区域。任务栏折叠后悬浮在地图左上角，鼠标悬浮时可以展示更多的信息和选项。
而在地图本身比例缩放上，做了一个专用的拖动条，而和传统地图不同的是，
我不认为使用无极缩放（比例递进值很小）体验会好
，因为车的出勤轨迹都在市区内，往往只在一个区的范围内活动，地图的查看比例主要都集中在较小的范围内。所以缩放比例我只给出5档（可能三档就够了），不管是鼠标滚轮还是直接拖拽都只能在这个范围内切换，同时防止比例被设置得过大（没有意义）要重新定位回来。
最后还有下方的进度条，是重点需要交互的部分，
进度本身的拖动需要有尽可能长的空间，所以左右占空间的时间信息要移走
。
同时行驶里程、作业限速信息不是操作信息，所以也可以移出栏目外。
而在进度区域中，包含的信息量不少，首先Y轴可以表示车辆的速度，而每次任务会有限速，所以增加代表限速的横线，超出的部分会有颜色进行强化。同时在这个时间段内，还会包含一些其它异常的情况，如停靠过久、驶出目标区域之类的，那么这个时间段就会填充不同的颜色进行标识。
除了信息外，这个区域也有交互的需要，原来设计中用用播放器的那种进度控制球，非常不适合应用在频繁、精细的选择和拖拽上的，所以把这个选择控件做成矩形和时间区域结合，增加控制的热区更方便使用。
上面的基本框架做完以后，就可以填充最终的视觉样式了，而这里还有个知识点，就是项目如果使用了完整的地图数据，那一般就意味着接入了外部的地图API（自己开发的很少，那更好）。绝大多数地图数据供应商的API，都会支持样式的定义和 GIS信息的筛选，比如可以到 EXPing、Mapbox 之类的网站上查看地图的不同样式效果。
我们可以根据场景需要进行定义，减少不必要的地图信息，强化道路的展示且易于突出路线，然后使用合适的样式截图做示例，并和相关程序员讨论具体落地的方式。
