航天创智-浙江省数字大花园平台交互和界面设计VUE开发

交互设计 | 界面设计 | vue开发

北京航天创智科技有限公司开发的浙江省数字大花园平台是继“桐乡县域大花园数字化治理平台”后的又一基于卫星遥感的空间治理数字化平台。作为基础平台,以国产卫星遥感以及地面传感器局、5G等技术手段构建天地一体的感知网络,通过云计算、人工智能构建多源信息提取模型,搭建省域空间治理应用服务框架,汇聚高清地图、GEP环境指标

检测,资源环境现状分析等服务功能。蓝蓝设计本次为浙江省数字大花园平台一期项目提供整体视觉设计,交互优化和产品前端优化开发服务。这个项目的难点在于创新交互设计,原有的系统交互不合理,占了许多空间,需要设计师去理解业务并创新交互方式,以图像化的语言把重要信息提取出来,围绕数字产品与空间,发掘业务的差异化价值。

产品定位

浙江省数字大花园平台整体包含“GEP一张图”“GEP核算”“环境资源现状分析”“耀眼明珠云游览”等功能模块,通过云计算,人工智能等方式为浙江省域级别范围内提供与GDP相对应、衡量生态良好的统计与核算数据,为相关部门提供决策关键数据支撑,从而实现区域更加绿色平衡的发展。

目标用户

数字大花园系统作为一个综合性的系统目标用户为政府部门各级人员,人员年龄跨度较大,多集中于20-60岁之间,平台系统横跨web端,移动端等设备,能满足不同场景下使用系统的需求。系统以数据展示为主,用户操作主要集中于地域范围选择,图层/数据切换等操作,视觉要求较高。

设计风格

视觉方面使用大屏常用的深色背景,主色采用蓝色配色,通过整体排版,细节元素的设计,来凸显科技感。布局更加强调界面风格的一致性,数据展示层叠加于地图展示层之上,通过色彩的把控和明暗虚实的对比,既保证界面的整体性又突出主体元素,主次分明。

航天创智-浙江省数字大花园平台交互和界面设计VUE开发
浙江省数字大花园平台交互和界面设计VUE开发

首页界面以“科技+未来感”风格进行设计,强调界面风格的一致性,整体布局规整简洁,形成“地图在中间,数据在四周”的布局,主次层分明,易于阅读。

探索与分析

接到项目后,我们与客户进行了更深层次的交流。
分析问题:
1空间浪费,菜单交互不合理。
2统计报表的表现形式不合理。
3信息太少,缺乏用户关心的数据。

解决问题:
1优化了交互布局
2 基于对业务的理解,重新设计了统计图的表现形式。
3 增加了用户关心的数据信息。
4 考虑到未来菜单扩展性。

浙江省数字大花园平台交互和界面设计VUE开发

善用界面空间 灵活的菜单交互

分析问题:
    之前的菜单一级三个,二级菜单的一般2-5个,三级菜单1-8个不等,二级菜单为圆形,光标移上再显示三级菜单,占据了整个界面左边的位置,三级菜单以文字形式出现,点选很不方便。

解决问题:
    优化后的菜单占用空间很小,信息主次分明,三级菜单以浮动按钮形式显示,操作清晰方便。鼠标移入展开堆叠的内容,增加页面交互趣味性。
    布局设计以高效操作为核心原则,整体操作区域集中于页面左侧和上侧3/2区域内,用户在较少的区域内完成页面的操作,减少交互时鼠标移动的距离,提升操作效率。

深度研究业务,准确传达信息,多元化视觉表现

分析问题:
1 之前的统计横向一排放在页面最低部,信息字号很小,且组合方式不太恰当。 比如环形部分,其实只是一种装饰,和信息的多少并无关系,这和用户的认识“一般环形图同时代表信息的比例,根随信息多少而即时变化”不符,易发生认识障碍。
2 GEP增加值和 GEP总值是有关联的,放成两个柱状图表现,空间利用浪费且不容易表达出对比关系。

解决问题:
1 将“数据名对称单一数字类型的信息”提取到一起,以图标+文字+数字的形式表达、创造简洁、清晰、高效的用户体验。
2 将GEP增加值和 GEP总值用一张柱状图表达,以立体的柱子,不同的色彩对比,浮动的信息层,更加直观的表达信息。

浙江省数字大花园平台交互和界面设计VUE开发
浙江省数字大花园平台交互和界面设计VUE开发

灵活的动效,可收缩交互方式

三维地形部分之前是和GEP核算放在一起,同样的表达方式的,其实他们并非同一类的内容。这三个地图的表现方式是需要客户选择切换的,之前的表达隐晦不便点选。新设计后,点选左边区域后,浮动三个选项,选择后浮动窗口消失,选择的内容会显现在左边区域,给地图留出最大空间,美观、便捷,使用方便。

浙江省数字大花园平台交互和界面设计VUE开发

精益求精,严谨的内部过稿制度

在设计中,蓝蓝每个设计师按照自己的理解设计页面,找出原有软件中不舒服的地方重新设计,在设计总监的带领下不断的讨论、梳理业务需求,尝试各种表现手法,不断优化界面细节和布局,最终输出设计方案。

浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计

最终设计稿

浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计
浙江省数字大花园平台交互和界面设计VUE开发-蓝蓝设计

  返回