APP页面设计前
App在设计之前已经开发完毕,功能布局客户的客户是认可的,所以只是做了视觉上的变化。
北京科锐主要从事配电设备及电力电子的研发与制造。 近年来致力于企事业单位的电力物业服务、分布式光伏、能源综合利用及配售电业务,建设微能源网平台,拥有微网群监控、电能质量治理、节能低碳、储能增效、智慧城市及有轨电车和电动车充电装置等方面的系列解决方案,并积极参与电力市场化改革实践,努力为电力用户和配网系统提供贴心、优质和增值服务。
科锐慧云产品线由科锐几家控股公司分别负责不同的产品,用于各个电力物业的能源监控和管理分析。蓝蓝设计负责设计界面设计、建立统一的UI规范,应用于不同的软件。在设计中,蓝蓝设计找到许多国内外的相关竞品和卓越设计做参考,勇于创新、敏捷迭代,用心设计,工作中,双方合作友好默契。
首页设计
原来的项目页面是上下结构的,此次为和其它二个软件统一,经过大家讨论,决定用左右结构形式做为软件框架。
根据原来页面内容梳理信息优先级重新设计新页面。
1 增加最近访问栏目,可根据使用软件频率提供快捷方式。
2 减小了项目信息区域,将系统指标与项目信息合并展示,综合展示结果。
3 以tab签的形式设计各标目的标题,简洁明确,视觉整体统一美观。
4 以圆环的形式表达指标统计设备数量及百分比。
5 优化交互 左侧菜单可以收起,上方告警信息每一个看后可关闭。
设计前
竞品分析 首页三类布局分析各自特点,选择目前交互布局形式。
设计原则
-
准确表达功能含义
-
简单
减少用户记忆负担
-
自然
界面风格统一
-
信息优先级
确定主次及顺序
-
对齐
建立元素间的视觉联系
-
关联
相关的元素放在一起
-
对比
划分层次、重点
-
重复
统一表现形式及风格
品牌及色彩
氛围和定位 体现能源互联网、新能源、电力运维服务、科锐VI . 为正确传达企业的品牌形象,软件产品的主色调以蓝色为主,红色为辅。
能源互联网
能源互联网
电力运维服务
科锐VI
设计过程和迭代
第一次提案
第二次修改 设计过程迭代修改局部、内容调整许多次。
国外优秀gis地图软件欣赏
GIS页之前的原型
根据沟通决定将两屏切换的内容放到一页上,去掉一些重复的信息。在设计过程中尝试了不同的配色及视觉表现方式。
GIS图:根据用户访问项目的权限,当访问的项目地理位置都在一个城市时,显示这个城市范围的GIS;当访问的项目地理位置不在同一个城市但在同一个省(自治区)时,显示这个省(自治区)范围的GIS图;当访问的项目地理位置不在同一个城市,也不在同一省(自治区),但在同一个国家时,显示这个国家范围的GIS图;其它情况显示世界地图。
GIS图上的项目标注:在GIS图的经纬度上显示项目标注。项目的经纬度一般是项目管理方的地址。
VI块:用户所在单位的企业VI和公司运营时间。
业绩块:根据用户访问项目的权限,所访问项目的系统名称及数量合计。系统包括:能源管控、配电自动化、故障定位系统等。
终端统计块:根据用户访问项目的权限,所访问项目的终端名称及数量合计。终端名称包括:RTU、FTU、DTU、故障定位通信终端、一遥故障指示器、二遥故障指示器、低压智能仪表……等。
行业统计块:根据用户访问项目的权限,所访问项目中各行业名称及数量合计。行业包括:供电企业、工业园区、工厂、学校、医院、政府机关、住宅小区、酒店……等
界面响应
客户信息块:鼠标点击某一项目标注时,显示项目信息和各客户信息。鼠标点击此信息块外区域时,此块消失。
客户页界面:鼠标左键双击某一项目标注时,进入客户页界面。