北京科锐慧云智慧能源服务平台界面设计

图标交互 | 交互设计 | 界面设计

APP页面设计前

App在设计之前已经开发完毕,功能布局客户的客户是认可的,所以只是做了视觉上的变化。

APP页面设计前01
APP页面设计前02
APP页面设计前03
APP页面设计前04
APP页面设计前05
APP页面设计前06
APP页面设计前07

北京科锐主要从事配电设备及电力电子的研发与制造。 近年来致力于企事业单位的电力物业服务、分布式光伏、能源综合利用及配售电业务,建设微能源网平台,拥有微网群监控、电能质量治理、节能低碳、储能增效、智慧城市及有轨电车和电动车充电装置等方面的系列解决方案,并积极参与电力市场化改革实践,努力为电力用户和配网系统提供贴心、优质和增值服务。

科锐慧云产品线由科锐几家控股公司分别负责不同的产品,用于各个电力物业的能源监控和管理分析。蓝蓝设计负责设计界面设计、建立统一的UI规范,应用于不同的软件。在设计中,蓝蓝设计找到许多国内外的相关竞品和卓越设计做参考,勇于创新、敏捷迭代,用心设计,工作中,双方合作友好默契。

首页设计

原来的项目页面是上下结构的,此次为和其它二个软件统一,经过大家讨论,决定用左右结构形式做为软件框架。

根据原来页面内容梳理信息优先级重新设计新页面。

1 增加最近访问栏目,可根据使用软件频率提供快捷方式。

2 减小了项目信息区域,将系统指标与项目信息合并展示,综合展示结果。

3 以tab签的形式设计各标目的标题,简洁明确,视觉整体统一美观。

4 以圆环的形式表达指标统计设备数量及百分比。

5 优化交互 左侧菜单可以收起,上方告警信息每一个看后可关闭。

设计前

首页设计--设计前
首页设计

竞品分析   首页三类布局分析各自特点,选择目前交互布局形式。

竞品分析
上下结构
左右结构
整体结构

设计原则

  • 准确表达功能含义

  • 简单

    减少用户记忆负担

  • 自然

    界面风格统一

  • 信息优先级

    确定主次及顺序

  • 对齐

    建立元素间的视觉联系

  • 关联

    相关的元素放在一起

  • 对比

    划分层次、重点

  • 重复

    统一表现形式及风格

品牌及色彩

品牌及色彩01
品牌及色彩02

氛围和定位     体现能源互联网、新能源、电力运维服务、科锐VI . 为正确传达企业的品牌形象,软件产品的主色调以蓝色为主,红色为辅。

能源互联网

能源互联网

能源互联网

能源互联网

电力运维服务

电力运维服务

科锐VI

科锐VI

设计过程和迭代

第一次提案

第一次提案

第二次修改   设计过程迭代修改局部、内容调整许多次。

第二次修改

国外优秀gis地图软件欣赏

国外优秀gis地图软件

GIS页之前的原型

根据沟通决定将两屏切换的内容放到一页上,去掉一些重复的信息。在设计过程中尝试了不同的配色及视觉表现方式。

GIS页之前的原型01GIS页之前的原型02GIS页之前的原型03

GIS图:根据用户访问项目的权限,当访问的项目地理位置都在一个城市时,显示这个城市范围的GIS;当访问的项目地理位置不在同一个城市但在同一个省(自治区)时,显示这个省(自治区)范围的GIS图;当访问的项目地理位置不在同一个城市,也不在同一省(自治区),但在同一个国家时,显示这个国家范围的GIS图;其它情况显示世界地图。

GIS图上的项目标注:在GIS图的经纬度上显示项目标注。项目的经纬度一般是项目管理方的地址。

VI块:用户所在单位的企业VI和公司运营时间。

业绩块:根据用户访问项目的权限,所访问项目的系统名称及数量合计。系统包括:能源管控、配电自动化、故障定位系统等。

终端统计块:根据用户访问项目的权限,所访问项目的终端名称及数量合计。终端名称包括:RTU、FTU、DTU、故障定位通信终端、一遥故障指示器、二遥故障指示器、低压智能仪表……等。

行业统计块:根据用户访问项目的权限,所访问项目中各行业名称及数量合计。行业包括:供电企业、工业园区、工厂、学校、医院、政府机关、住宅小区、酒店……等

界面响应

客户信息块:鼠标点击某一项目标注时,显示项目信息和各客户信息。鼠标点击此信息块外区域时,此块消失。

客户页界面:鼠标左键双击某一项目标注时,进入客户页界面。

GIS页三个配色新方案

GIS页三个配色新方案01GIS页三个配色新方案02GIS页三个配色新方案03

GIS页定稿方案

GIS页定稿方案

其他页面

其他页面01
其他页面02
其他页面03
其他页面04

  返回