蓝蓝设计-ui设计公司-界面设计案例作品

泛亚高科-光伏电站控制系统界面设计

html前端 | 交互设计 | 视觉设计 | 图标设计

泛亚高科(北京)科技有限公司(以下简称“泛亚高科”),一个以实时监控、高精度数值计算为基础的科技公司, 自成立以来,组成了以博士、硕士为核心的技术团队,整合了华北电力大学等高校资源,凭借在电力系统内多年的工作经验, 研究并致力于帮助客户解决在风电、光伏领域内的实时监控、大数据、电站科技运维、数据挖掘、功率预测及控制、 故障诊断等问题。

设计前期,蓝蓝设计通过问卷调查方式确定客户风格和喜好,并和客户沟通页面交互逻辑和优化方法,确定交互方式后,再进入视觉设计阶段,这样可以快速确定设计方向,节省大量时间。视觉设计方面,蓝蓝设计尝试将2.5d图标融入界面设计中,通过立体化,场景化的图标,更加直观地展示出产品功能属性和使用场景,为光伏电站UI设计方向提供蓝蓝的设计方案。

产品定位

光伏电站控制系统用于监视各分布式光伏电站各系统和设备的运行数据,对系统和设备进行远程控制。产品定位是为分布式光伏电站、远端集中控制中心提供设备远监控,设备控制,设备告警,数据统计,决策支持等可视化,专业化服务。

目标用户

系统主要面向光伏电站站内运行人员、集控中心运行人员及有权限的其他远端人员操作,使用场景相对单一。目标用户具有强大的专业背景知识,熟悉站内硬件设备,对系统专业化,便捷性要求较高。年龄分布多在20-40岁之间,熟悉计算机操作。

设计风格

整体设计风格采用极简设计,综合运用情感化设计理念,场景化设计思维,立体化视觉表达手法,为用户提供高效便捷,专业直观的系统界面。设计过程中,注重信息本身的展示,功能至上,尽量减少不必要的视觉干扰和冗余信息,打造展示专业,操作友好,交互有趣的工业控制系统。

泛亚高科-光伏电站控制系统界面设计-首页

聚焦数据展示,明确视觉焦点

发现问题
产品初始原型图由客户提供,拿到原型图后,经过团队认证讨论分析,发现首页部分存在数据展示不清晰,图表选区不恰当,无法准确反映数据的类型等问题。我们随即与客户进行沟通并通过用户访谈佐证问题发现的问题,发掘更深层次的不足,并思考优化策略。

解决问题
经过用户访谈后我们发现,原型界面中确实存在用户不关注的冗余信息,而更为核心的「发电量信息」「排放信息」「功率信息」未能体现在原行中。 蓝蓝团队将收集到的信息梳理整合后从以下几个方面优化页面:
1.核心数据突出显示-页面内容区通过图标+文字方式展示用户关心的核心数据,取消原型图中「装机」「经纬度」「安装角度」等冗余数据,明确用户视觉焦点。
2.明确数据内容,合理表现数据-每个图表数据都对应其自身的属性和价值,我们在每个数据模块增加模块标题,优化数据表现方式,利用柱状图表示对比,折线图表示趋势,强化页面引导性,指示性。"

部分图标状态

原型图

泛亚高科-光伏电站控制系统界面设计

泛亚高科-光伏电站控制系统界面设计

创新的视觉设计

逆变器视图界面需求变更比较大,围绕逆变器这一核心部件,增加很多前后环节中实时数据信息,但展示本质并未发生变化。

针对数据信息发生的变化,我们使用“场景化设计原则“,用立体图标方式绘制出从”光伏板-逆变器-交流汇流箱“发电原理图,把数据展示在对应的环节中,形成可视化的实时监控图谱。;其余与发电流程无关的数据也均以图标+文字的形式展示页页面右侧。

通过流程图+数据展示这种创新的视觉展示方式,将原本晦涩的数据更加直观,清晰地表达出来,体现出产品的专业性,交互的友好性,升华产品的价值。

情景化的设计

工业控制系统由于其特有的专业性和使用场景,需要大量图元作为辅助显示,蓝蓝设计在系统设计之初就将场景化设计和情感化设计融入系统设计中,把设计图元用立体化形式表现,形成模拟实际的工业场景,让用户使用系统是眼前一亮,减少用户初次使用系统时的恐惧感,减轻用户认知负担,提高操作和信息获取效率,为行业发展贡献蓝蓝智慧。

泛亚高科-光伏电站控制系统界面设计

其他典型页设计

泛亚高科-光伏电站控制系统界面设计-蓝蓝设计

泛亚高科-光伏电站控制系统界面设计-蓝蓝设计

泛亚高科-光伏电站控制系统界面设计-蓝蓝设计

泛亚高科-光伏电站控制系统界面设计-蓝蓝设计

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/47065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式搜索引擎----elasticsearch

目录 1、初识elasticsearch 1.1、什么是elasticsearch 1.2.ELK技术栈 2、正向索引和倒排索引 2.1、正向索引 2.2、倒排索引 2.3、正向索引和倒排索引的区别 3、elasticsearch中的概念理解 3.1、文档和字段 3.2、索引和映射 3.3、mysql与elasticsearch 1、初识elasti…

为什么选择elasticsearch分布式搜索引擎

文章目录 🔭什么是elasticsearch🌠ELK技术栈🌠elasticsearch和lucene🌠为什么不是其他搜索技术? 🔭总结 🔭什么是elasticsearch elasticsearch是一款非常强大的开源搜索引擎,具备非常…

SQL有关表的左连接,右连接,以及内连接

首先我们需要想一下,我们为什么需要将表连接在一起呢?换种说法,即我们需要查询的数据不在同一张表里面,而是在A表中查出一部分,然后再去B表中查出一部分,然后两者结合在一起,才是我们需要的部分…

动漫3D虚拟人物制作为企业数字化转型提供强大动力

一个 3D 虚拟数字人角色的制作流程,可以分为概念设定-3D 建模-贴图-蒙皮-动画-引擎测试六个步骤,涉及到的岗位有原画师、模型师、动画师等。角色概念设定、贴图绘制一般是由视觉设计师来完成;而建模、装配(骨骼绑定)、渲染动画是由三维设计师来制作完成。…

R package org.Hs.eg.db to convert gene id

文章目录 install使用org.Hs.egENSEMBL将Ensembl id convert to gene idorg.Hs.egGENENAME 将Ensembl id convert to gene nameorg.Hs.egSYMBOL 将 gene symbol convert to gene id我现在有一些ensembl id 如何转为 gene name注意你会遇到一些record不全的情况,gtf文…

商业智能BI是什么都不明白,如何实现数字化?

2021年下半年中国商业智能软件市场规模为4.8亿美元,2021年度市场规模达到7.8亿美元,同比增长34.9%,呈现飞速增长的趋势。数字化时代,商业智能BI对于企业的落地应用有着巨大价值,逐渐成为了现代企业信息化、数字化转型中…

怎么借助ChatGPT处理数据结构的问题

目录 使用ChatGPT进行数据格式化转换 代码示例 ChatGPT格式化数据提示语 代码示例 批量格式化数据提示语 代码示例 ChatGPT生成的格式化批处理代码 使用ChatGPT合并不同数据源的数据 合并数据提示语 自动合并数据提示语 ChatGPT生成的自动合并代码 结论 数据合并是…

在Windows下安装PIP+Phantomjs+Selenium

最近准备深入学习Python相关的爬虫知识了,如果说在使用Python爬取相对正规的网页使用"urllib2 BeautifulSoup 正则表达式"就能搞定的话;那么动态生成的信息页面,如Ajax、JavaScript等就需要通过"Phantomjs CasperJS Selen…

【从零开始的rust web开发之路 二】axum中间件和共享状态使用

系列文章目录 第一章 axum学习使用 第二章 axum中间件使用 文章目录 系列文章目录前言一、中间件是什么二、中间件使用常用中间件使用中间件使用TraceLayer中间件实现请求日志打印自定义中间件 共享状态 前言 上篇文件讲了路由和参数相应相关的。axum还有个关键的地方是中间件…

电工-学习电工有哪些好处

学习电工有哪些好处?在哪学习电工? 学习电工有哪些好处?在哪学习电工?学习电工可以做什么?优势有哪些? 学习电工可以做什么?学习电工有哪些好处? 就业去向:可在企业单位…

基于微信小程序的垃圾分类系统设计与实现(2.0 版本,附前后端代码)

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 1 简介 视频演示地址: 基于微信小程序的智能垃圾分类回收系统,可作为毕业设计 小…

PyCharm PyQt5 开发环境搭建

环境 python:3.6.x PyCharm:PyCharm 2019.3.5 (Community Edition) 安装PyQT5 pip install PyQt5 -i https://pypi.douban.com/simplepip install PyQt5-tools -i https://pypi.douban.com/simple配置PyCharm PyQtUIC Program :D:\Pytho…

Android kotlin 跳转手机热点开关页面和判断热点是否打开

Android kotlin 跳转手机热点开关页面和判断热点是否打开 判断热点是否打开跳转手机热点开关页面顺带介绍一些其他常用的设置页面跳转 其他热点的一些相关知识Local-only hotspot 参考 判断热点是否打开 网上方法比较多,我这边使用了通过WifiManager 拿反射的getWi…

从C语言到C++_33(C++11_上)initializer_list+右值引用+完美转发+移动构造/赋值

目录 1. 列表初始化initializer_list 2. 前面提到的一些知识点 2.1 小语法 2.2 STL中的一些变化 3. 右值和右值引用 3.1 右值和右值引用概念 3.2 右值引用类型的左值属性 3.3 左值引用与右值引用比较 3.4 右值引用的使用场景 3.4.1 左值引用的功能和短板 3.4.2 移动…

【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

目录 一、Ajax 1、简介 2、Axios (没懂 暂留) (1)请求方式别名 (2)发送get请求 (3)发送post请求 (4)案例 二、前端工程化 1、Vue项目-目录结构 2、…

第10步---MySQL的日志操作

第10步---MySQL的日志操作 错误日志 慢日志 1.查看错误日志 -- 查看日志信息 show VARIABLES like log_error%;2.查看binlog 高版本是默认开启的,低的是默认是不开启的 binlog日志文件是与事务相关 -- 查看binlog日志的格式 show variables like binlog_format;-- …

【Python机器学习】实验15 将Lenet5应用于Cifar10数据集(PyTorch实现)

文章目录 CIFAR10数据集介绍1. 数据的下载2.修改模型与前面的参数设置保持一致3. 新建模型4. 从数据集中分批量读取数据5. 定义损失函数6. 定义优化器7. 开始训练8.测试模型 9. 手写体图片的可视化10. 多幅图片的可视化 思考题11. 读取测试集的图片预测值(神经网络的…

qt中窗口的布局

qt中窗口的布局 常用的窗口布局方式使用拖拽控件的方式调用窗口布局使用Widget控件完成窗口布局布局中嵌套布局demo(制作登录页面) 如果不使用窗口布局,会带来的后果: 控件可能显示不出来不能按照期望的大小显示不能跟随窗口进行…

如何最简单、通俗地理解什么是机器学习?

那就究竟什么是学习呢?诺贝尔经济学奖和图灵奖双料得主、卡耐基梅隆大学的赫伯特 西蒙 (Herbert Simon) 教授是这样定义的:“学习是系统通过经验提升性能的过程”。可以看到,学习是一个过程,并且这里有3个关键词,即经验、提升和…

CSS中如何实现文字溢出省略号(text-overflow: ellipsis)效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中如何实现文字溢出省略号(text-overflow: ellipsis)效果?⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 …