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

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

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

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

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

产品定位

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

目标用户

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

设计风格

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

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

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

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

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

部分图标状态

原型图

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

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

创新的视觉设计

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

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

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

情景化的设计

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

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

其他典型页设计

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,containsKey)五(117)

需求:前端根据后端的返回数据:画统计图; 1.动态获取地域数据以及数据中的平均值,按照平均值降序排序; 说明: X轴是动态的,有对应区域数据则展示; X轴 区域数据降序排序;…

Android Studio实现解析HTML获取图片URL,将URL存到list,进行瀑布流展示

目录 效果展示build.gradle(app)添加的依赖(用不上的可以不加)AndroidManifest.xml错误代码activity_main.xmlitem_image.xmlMainActivityImage适配器ImageModel 接收图片URL效果展示 build.gradle(app)添加的依赖(用不上的可以不加) dependencies {implementation co…

Matlab 在一张图中画多个机械臂

在matlab中第一次画机械臂时,可能会出现的问题是Link函数不识别(如出现Link输入参数不对等) 这大概率是因为缺少matlab工具箱,如图 需要下载该软件包,然后用Matlab打开,就能自动安装到matlab中。下载地址在这个超链接…

最强自动化测试框架Playwright(34)CDPSession

在 Playwright 中,CDPSession 类是用于与浏览器的 Chrome DevTools Protocol (CDP) 会话进行交互的对象。CDP 是与Chromium浏览器通信的底层协议,它提供了许多与浏览器进行交互和控制的功能。 CDPSession 类提供了执行底层 CDP 命令的方法,并…

linux--epoll

epoll 参考文献 https://www.cnblogs.com/lojunren/p/3856290.html https://www.51cto.com/article/717096.html linux下的I/O复用epoll详解 要深刻理解epoll,首先得了解epoll的三大关键要素:mmap、红黑树、链表。 IO多路复用 首先需要了解什么是IO多…

探讨uniapp的网络通信问题

uni-app 中有很多原生的 API,其中我们经常会用到的肯定有:uni.request(OBJECT) method 有效值 注意:method有效值必须大写,每个平台支持的method有效值不同,详细见下表。 success 返回参数说明 data 数据说明 最终…

应急响应-Webshell

文章目录 一、Webshell概述什么是WebshellWebshell分类基于编程语言基于文件大小/提供的功能多少 Webshell 检测方法 二、常规处置方法三、技术指南1、初步预判2、 Webshell排查3、Web日志分析(查找攻击路径及失陷原因)4、系统排查4.1 Windows4.2 Linux …

Jmeter 二次开发 函数助手 AES加解密

Jmeter 二次开发 函数助手 AES加解密 1. 环境准备2. 关键技术说明2.1 离线导包2.2 示例代码 3. 代码包4. 结果演示 1. 环境准备 IDE :IntelliJ IDEA 2021.1.1 x64JAVA环境 :jdk1.8.0_251离线导包:导入Jmeter安装目录下lib/ext下的ApacheJmet…

【使用群晖远程链接drive挂载电脑硬盘】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

ViewFs And Federation On HDFS

序言 ViewFs 是在Federation的基础上提出的,用于通过一个HDFS路径来访问多个NameSpace,同时与ViewFs搭配的技术是client-side mount table(这个就是具体的规则配置信息可以放置在core.xml中,也可以放置在mountTable.xml中). 总的来说ViewFs的其实就是一个中间层,用于去连接不…

药品最新研究信息查询系统

查找最新药物研究进展信息在患者治疗选择、医疗实践、科学研究、药物监管和政策制定、教育和学术研究等方面都具有重要的应用价值。它可以为各个领域的人员提供最新的科学依据和决策支持,促进医学领域的发展和提高医疗质量。 但在查找药物最新研究进展信息时通常需要…

08 - 追加commit和修改最新的commit message

查看所有文章链接:(更新中)GIT常用场景- 目录 文章目录 1. 追加提交2. 修改最新的commit message 1. 追加提交 将改动追加到上一次的commit 现在我已经修改了Readme文件并且已经add、commit操作,但是还没有push到远程仓库&#x…

Kafka 什么速度那么快

批量发送消息 Kafka 采用了批量发送消息的方式,通过将多条消息按照分区进行分组,然后每次发送一个消息集合,看似很平常的一个手段,其实它大大提升了 Kafka 的吞吐量。 消息压缩 消息压缩的目的是为了进一步减少网络传输带宽。而…

NLP文本匹配任务Text Matching [无监督训练]:SimCSE、ESimCSE、DiffCSE 项目实践

NLP文本匹配任务Text Matching [无监督训练]:SimCSE、ESimCSE、DiffCSE 项目实践 文本匹配多用于计算两个文本之间的相似度,该示例会基于 ESimCSE 实现一个无监督的文本匹配模型的训练流程。文本匹配多用于计算两段「自然文本」之间的「相似度」。 例如…

【数据结构】 链表简介与单链表的实现

文章目录 ArrayList的缺陷链表链表的概念及结构链表的分类单向或者双向带头或者不带头循环或者非循环 单链表的实现创建单链表遍历链表得到单链表的长度查找是否包含关键字头插法尾插法任意位置插入删除第一次出现关键字为key的节点删除所有值为key的节点回收链表 总结 ArrayLi…

p5.js 渐变填充的实现方式

theme: smartblue 本文简介 p5.js 作为一款艺术类的 canvas 库,对颜色方面的支持是挺下功夫的,比如本文要介绍的渐变方法。 lerpColor() 要实现渐变效果,可以使用 lerpColor() 方法。 lerpColor 的作用是混合两个颜色以找到一个介于它们之间的…

Llama 2免费托管及API提供

Llama 2 是 Meta 最新的文本生成模型,目前其性能优于所有开源替代方案。 推荐:用 NSDT编辑器 快速搭建可编程3D场景 1、强大的Llama 2 它击败了 Falcon-40B(之前最好的开源基础模型),与 GPT-3.5 相当,仅低…

Springboot 在 redis 中使用 Guava 布隆过滤器机制

一、导入SpringBoot依赖 在pom.xml文件中&#xff0c;引入Spring Boot和Redis相关依赖 <!-- Google Guava 使用google的guava布隆过滤器实现--><dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><vers…

UniApp 制作高德地图插件

1、下载Uni插件项目 在Uni官网下载Uni插件项目&#xff0c;并参考官网插件项目创建插件项目. 开发者须知 | uni小程序SDK 如果下载下来项目运行不了可以参考下面链接进行处理 UniApp原生插件制作_wangdaoyin2010的博客-CSDN博客 2、引入高德SDK 2.1 在高德官网下载对应SD…

redis — 基于Spring Boot实现redis延迟队列

1. 业务场景 延时队列场景在我们日常业务开发中经常遇到&#xff0c;它是一种特殊类型的消息队列&#xff0c;它允许把消息发送到队列中&#xff0c;但不立即投递给消费者&#xff0c;而是在一定时间后再将消息投递给消费者。延迟队列的常见使用场景有以下几种&#xff1a; 在…