『 关于平台』

在介绍平台之前，先简要介绍一下解决方案。

我们面向平台公安客户，为解决客户“无法记录案发现场”而提供硬件产品，硬件负责记录现场场景，包括三维数据和全景数据的采集。然而数据的展示需要载体，平台就负责这一块。

在展示场景的同时，我们还根据客户的实际业务，基于数据做了相应的功能。

平台支持多源数据，作为数据展示载体，在前期就要考虑不同数据类型展示方式的区别。不仅如此，我们还要考虑未来可能支持的数据，做好相应的打算。

『产品现状和问题』

1.外部

在2018年之前，市面上的竞品还很少，我们也拥有市面上几乎独一无二的解决方案。可以参考的都是行业以外的产品。但是从2018年开始，其他行业为了寻求更多盈利，纷纷踏入到公共安全领域，再加上三维展示技术的爆发，原本其他行业成熟的三维展示技术也开始涉足公共安全领域，比如三维实景看房。这就需要我们有更加优秀的解决方案。在平台这块，我们要做到别人没有的、我们要有，别人有的、我们更好。

2.内部

就目前来看，在旧版的框架体系中，功能层级复杂，重点功能难以突破和查找，关联较弱的信息架构严重影响和分散了用户的关注点。随着业务模式不断扩展，编辑页面新需求类型逐渐增多，一套更加具备灵活的拓展能力和管理能力的框架尤为重要。

『改版目标』

基于以上目前产品面临的问题，本次改版我们主要聚焦在功能板块调整，当然，视觉体系也是一定要升级的。首先我们将旧版的编辑页面布局打破重建，对现有模块进行整理，功能相似、定义模糊、低频操作的模块进行合并、删减。

旧版的编辑页面，功能杂乱堆放、几乎没有扩展性

通过调研得知，用户普遍反应：

1.界面太“高级”，向Photoshop一样，看不懂

2.工具很多，但是没有文字解释，不知道什么意思

3.不知道从哪一步开始做

优化后，采用步骤条方式，每一个模块为一个步骤，将模块下所有功能集中在当前模块中，在用户选择某一模块后，当前模块的功能才展示出来。同时在以后业务扩展，需要新增功能模块方面也可以灵活运用。

『实际操作』

1、背景层

背景承载着画面，实际为画面展示，包括全景展示和模型展示。通过对框架的重构，有效的解决了首页信息承载压力过大，功能层级复杂的问题。同时背景层面积相比旧版首页也大幅增加，带来了更好的体验。

1⃣️信息呈现更加简洁、轻量

2⃣️视野更加宽广，浏览场景获取的信息更多

3⃣️更加沉浸的体验

2、全局控制层

在改版过程中我们着重对流程化编辑的优点进行了设计分析，基于对业务的了解和竞品的分析，得出以下三个结论：

1⃣️功能整合：将相同功能及标签进行整合，大大节约空间，同时又能良好支持业务扩展

2⃣️引导作用：引导用户对整个业务流程的编辑，使其不会因为疏忽而造成一个作品有了缺陷

3⃣️视觉降噪：在用户编辑过程中，不会受到其他功能影响，更加聚焦当前动作

3、内容层

左侧内容是“场景列表”，旧版本叫“图层”，之所以叫“图层”，在于以前的思路：内容标注在相应的全景中，标注隶属于全景。将标注标在全景中后，相应的列表则会展示在全景图层之下。

物证的标注作为业务中最重要的环节之一，这样做无意大大减弱了其重要性。

场景本身是一张全景照片，如果用“照片列表”代替之前的“文字列表”，则会大大增加用户视觉体验，而图片本身就比文字有更好辨识度。

同时，将物证标注列表放在右侧内容层，右侧内容层其实类似于属性的概念，关于场景中所有参数都在这边调整。

相比上个版本，属性层并没有大的改动，主要改动是部分业务上的调整和视觉体验的提升设计。

当不同页面层级组件整理完毕时，我们就可以得到以下层级关系

4、设计语言

由于时间紧迫，团队一直在使用UI框架做研发。在迭代之前，我们一直用的是 layui 前端框架，由于业务与功能的扩展，以及样式与交互的变化。之前的框架已经不足以满足研发需求，替换了功能更强大，兼容性更好，更加美观的 Ant Design 。（并没有说之前的框架不好～）

在业务需求和功能上，对其灵活运用，极大的缩短了研发周期。

新旧页面对比展示

『总结』

实际上，这个页面只是本次改版的冰山一角，其中还有其他页面以及详细的交互思路没有写上，但是我们仍然可以以此页面为参考来了解其他页面的思路。本次改版完全改变了旧版本的编辑流程，在转换思路、参考竞品过程中，大胆的在产品中引入了新的概念。当然这也有很多来源于同事的帮助，感谢他们帮我提意见，做参考。

以上就是改版的内容，虽然时间比较紧张，只有我一个人做，但在最后的结果反馈，在各个方面都有一个较为正向的反馈，这可能只是我的一个节点，后续会持续跟进、优化、升级！

这也是我第一次写文章，分享自己的思路，欢迎各位前辈和大佬批评～