项目编辑页面改版总结

来源:设酷网     作者:日期:2020-08-28     浏览:148    评论:0    
  
核心提示:『关于平台』在介绍平台之前,先简要介绍一下解决方案。我们面向平台公安客户,为解决客户“无法记录案发现场”而提供硬件产品,硬件负责记录现场场景,包括三维数据和全景数据的采集。然而数据的展示需要载体,平台就负责这一块。在展示场景的同时,我们还根据客户的实

 关于平台


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


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

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


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



『产品现状和问题


1.外部

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


undefined


2.内部

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



『改版目标


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


undefined

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


通过调研得知,用户普遍反应:

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

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

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


undefined


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


『实际操作

undefined

1、背景层

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

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

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

3⃣️更加沉浸的体验



2、全局控制层

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

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

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

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


undefined


3、内容层

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


undefined


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


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



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

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


undefined


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



4、设计语言

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


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


undefined

新旧页面对比展示


undefined『总结


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


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


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

本文来源:项目编辑页面改版总结    http://www.sjschina.com/archives/20970.html
相关评论