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

news2025/1/18 7:24:41

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

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

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

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

产品定位

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

目标用户

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

设计风格

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

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

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

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

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

部分图标状态

原型图

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

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

创新的视觉设计

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

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

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

情景化的设计

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

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

其他典型页设计

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

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

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

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

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

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

相关文章

同样都是找工作,为什么你的简历没人看?

上次的文章分享了自己软件测试面试时的一些经历,今天我想分享一下自己当时写简历以及投简历方面的经历,本文内容纯粹是个人简单分享,如果有写得不好的地方还请读者包涵与指正。 我是去年的九月初开始投递简历的,貌似各行各业的人…

μCOS-Ⅲ_简介

μCOS-Ⅲ简介 文章目录 μCOS-Ⅲ简介前言一、什么是 C/OS-III?二、C/OS-III的特点三、C/OS-III的版本和参考资料1、C/OS-III版本2、C/OS-III源码获取3、C/OS-III参考资料 四、C/OS-III源码简介总结 前言 μcos-III是一个可以基于ROM运行的、可裁剪的、抢占式、实时…

第五章.编辑资料

5.1.添加编辑页面 <template><div class="users-show"><div class="col-md-3 main-col"><div class="box"><div class="padding-md"><div class="list-group text-center"><rou…

k8s v1.27.4 部署metrics-serverv:0.6.4,kube-prometheus

只有一个问题&#xff0c;原来的httpGet存活、就绪检测一直不通过&#xff0c;于是改为tcpSocket后pod正常。 wget https://github.com/kubernetes-sigs/metrics-server/releases/latest/download/components.yaml修改后的yaml文件&#xff0c;镜像修改为阿里云 apiVersion: …

9.处理this和防抖、节流

9.1 this指向-普通函数 普通函数的调用方式决定了this的值&#xff0c;即【谁调用this的值 指向谁】 普通函数没有明确调用者时this值为window&#xff0c;严格模式下没有调用者时this的值为undefined 9.2 this指向-箭头函数 箭头函数中的this与普通函数完全不同&#xff0…

uni——遍历循环替换值

案例展示 const fraction_json ref([]) //星级数组最终我们需要的格式是&#xff1a; [{“num”: “5”, “evaluate_id”: “2”}, {“num”: “5”, “evaluate_id”: “3”}] 参考的方法&#xff1a; 【 .map() 】方法 map() 方法返回一个新数组&#xff0c;数组中的元素…

究竟什么是位图

引言 为什么要写这篇博文呢&#xff0c;是因为之前面试的时候遇到这样一个问题&#xff1a; 有一款数十亿级别的用户产品&#xff0c;如何统计一周内连续活跃的用户数&#xff1f; 这个问题的特征其实很明显&#xff1a;数据量大&#xff0c;需要交并操作&#xff0c;而且还有…

Postgresql+Postgis安装教程

Windows 下载地址 Postgresql&#xff1a;https://www.enterprisedb.com/downloads/postgres-postgresql-downloads Postgis&#xff1a;https://winnie.postgis.net/download/windows/ 我这里安装Postgresql13&#xff0c;所以对应Postgis也选择pg13版本 首先安装Postgresql…

kali 换源

kali 换源 1.使用root权限打开 vim /etc/apt/sources.list # See https://www.kali.org/docs/general-use/kali-linux-sources-list-repositories/ #deb http://http.kali.org/kali kali-rolling main contrib non-free non-free-firmware# Additional line for source pack…

标签(1)(详解)

目录 标签 部分标签 标签之标题 标题介绍与应用 VSCode插件 标签之段落 换行 水平线 标签之图片 网站中最多的元素 图片路径详解 绝对路径 相对路径 网络路径 标签之超文本链接 超链接描述 超链接属性 超链接表现 标签之文本 常用文本标签 标签 部分标签 …

Linux权限系列--给普通用户添加某个命令的sudo权限

原文网址&#xff1a;Linux权限系列--给普通用户添加某个命令的sudo权限_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Linux系统如何给普通用户添加某个命令的sudo权限。 使用场景 普通开发者可能需要sudo的命令&#xff1a; apt-get&#xff08;经常要安装软件&#x…

《Zookeeper》源码分析(十四)之 投票是如何发送与接收的

目录 MessengerWorkerSenderWorkerReceiver第5步&#xff1a;检验选票的epoch和version第6步&#xff1a;处理投票 Messenger Messenger管理接收到的消息以及待发送的消息&#xff0c;其源码如下&#xff1a; 它的源码比较简单&#xff0c;接下来着重介绍它维护的两个线程&a…

【仿写tomcat】七、项目结构优化以及代码开源

仿写tomcat 项目结构开源地址 项目结构 到目前为止&#xff0c;博主的仿写tomcat就告一段落了&#xff0c;后续有时间了还会继续补充功能&#xff0c;现在的项目结构如下。 在保证功能的前提下作出的改动有&#xff1a; 将各个类中的参数统一成了Config类&#xff0c;通过对…

Java课题笔记~ Ajax

1.1 概述 AJAX (Asynchronous JavaScript And XML)&#xff1a;异步的 JavaScript 和 XML。 我们先来说概念中的 JavaScript 和 XML&#xff0c;JavaScript 表明该技术和前端相关&#xff1b;XML 是指以此进行数据交换。 1.1.1 作用 AJAX 作用有以下两方面&#xff1a; 与服…

百度又开源一款压测工具,可模拟几十亿的并发场景,太强悍了

dperf 是百度开源的一款基于 DPDK 的 100Gbps 网络性能和负载测试软件&#xff0c;能够每秒建立千万级的 HTTP 连接、亿级别的并发请求和数百 Gbps 的吞吐量。 优点 性能强大&#xff1a; 基于 DPDK&#xff0c;使用一台普通 x86 服务器就可以产生巨大的流量&#xff1a;千万…

[oeasy]python0085_[趣味拓展]字体样式_下划线_中划线_闪动效果_反相_取消效果

字体样式 回忆上次内容 \033 xm 可以改变字体样式 0m - 10m 之间设置的 都是字体效果 0m 复原1m 变亮2m 变暗 从3m到10m 又是什么效果 呢&#xff1f;&#xff1f; 真的可以 让文字 blink闪烁吗&#xff1f;&#x1f441; 3m 3m 实现斜体字的效果 4m 4m 对应着下划线 控…

==和equals方法之间的区别,hashcode的理解,String拼接,Spring拆分

==和equals方法之间的区别 字符串有字符串常量池的概念,本身就推荐使用String s="字符串", 这种形式来创建字符串对象, 而不是通过new关键字的方式, 因为可以把字符串缓存在字符串常量池中,方便下次使用,不用遇到new就在堆上开辟一块新的空间 有一对双胞胎姐妹,晓苑…

LabVIEW开发感应电机自动测试台

LabVIEW开发感应电机自动测试台 设计开发先进的电机测试台&#xff0c;能够测试额定功率为0-15hp的单相和三相感应电动机。系统能够测量感应电动机的不同参数&#xff0c;例如电压&#xff0c;电流&#xff0c;有功功率&#xff0c;无功功率&#xff0c;视在功率&#xff0c;功…

有限状态机--实现cp的功能

有限状态机–实现cp的功能 执行的任务 上图是我们想实现的任务&#xff0c;对于A机来说&#xff0c;从fd1读取内容写到fd2&#xff0c;B机要做的是从fd2读取内容写到fd1中。 画出A机的状态。 代码示例 fsm.c #include <stdio.h> #include <stdlib.h> #include …

ShowMeBug CEO李亚飞受邀参加深圳青年创新创业系列沙龙电子信息专场

7月13日下午&#xff0c;由深圳市科技交流服务中心&#xff08;深圳市科技专家委员会办公室&#xff09;主办&#xff0c;深圳新一代产业园承办的“2023深圳青年创新创业系列沙龙——电子信息专场”活动举行。ShowMeBug CEO李亚飞受邀参加此次活动。 深圳市科学技术协会党组成员…