利亚德能源应急控制系统大屏策划及UI设计

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

近年来各行业远程监控系统应用日益广泛,在能源行业尤其突出。无论是钢铁行业的冶炼工作;石油行业的油井油田、石油管道;还是煤炭行业的生产作业,都是在比较荒芜、偏僻、甚至恶劣的环境中进行。安全管理更需要实时掌控各生产环节作业情况的变化,以便及时采取应对措施。能源行业采用远程监控系统能起到降低成本、提 率的目的,达到事半功倍的效果。在国家以信息化带动工业化的大政策背景下,能源行业采用信息化系统对各种生产活动进行监控已成为一种大趋势。

利亚德光电股份有限公司于1995年注册成立 ,注册资金15000万元,是集设计、生产、销售及服务为一体的LED显示屏和LED发光产品应用的专业公司
蓝蓝设计与利亚德公司是长期合作伙伴,为其下属各事业部提供大屏交互设计及视觉界面设计服务。蓝蓝设计此次为某能源集团策划组织大屏产品设计,包括组织内容、策划设计、交互设计及视觉.

项目成果

大屏的长宽为:11520px*3240px。
1.主体为集团展示层面数据分析,数据呈现,结合集团主要VI标准及企业文化和大屏幕显示特点进行设计

2.面对人群为管理层高素质者

3.目的展示性质为主,突出企业实力、运营状况和企业品质

4.定义为科技创新国际化类风格为主进行脑补创作

此次工作的难点在于需求分析,策划和组织内容,将客户提供数据接口内容划定工作范围,结合能源公司年报、宣传册等资料,重新定义大屏上每屏展示的核心内容,通过可视化的方式美观形象的展现,并设计相关动效和交互方式。

利亚德能源应急控制系统大屏界面设计

动效设计

数据地图

数据为示意,地图配合动效,在能服产业模块显示集团主要能服产业分布,并定时跳动展示下一个企业位置、图片、文字介绍、标签(电力、新能源等)、年产值、销售额等信息

折线图

使用年份时间轴对十三五(2005、2010、2015)年份中各月发电量等数据进行直观对比,减少手动操作步骤也使界面看起来更加丰富

动态光圈

数据为示意,使用光圈动效果展示某单项数据
如(占比、脱硝率、资产等)单项数据

利亚德能源应急控制系统大屏界面设计
利亚德能源应急控制系统大屏界面设计

首页方案1

整体左中右布局,中间和两侧比例为2:1,利用星空为背景结合科技光以及背景流星划过效果拼凑出空间感,以亮色突出主要数据,

搭配动态效果使页面突显科技感而不失稳重 中间部分突出显示企业营收数据实时变动,周围环绕气泡扩散展示企业简介和里程碑数据,三个圆点为图形式轮播展示更多数据内容,为后期更多数据融入预留扩展位。 周围分别为电力产业:电源占比,发电量占比、脱硝率、各年每月发电量对比折线图以及各项发电产业增幅百分比。燃气产业:供应户数和供应量数据、供气结构图、燃气主要数据增幅图、燃气供应户数年份柱状图。金融产业:金融产业发展里程碑、金融产业主要资产、投资、房产面积等数值。能服产业主要能服产业位置和企业详细数据动态展示。

利亚德能源应急控制系统大屏界面设计
利亚德能源应急控制系统大屏界面设计

首页方案2

整体左中右布局,中间和两侧比例为2:1,使用企业VI标准色黑背景,搭配企业VI标准色红搭配,形成浓郁的工业设计风格

TAB切换使用大色块配合上海城市剪影和白色图标来突出主题,自动轮播展示,减少用户操作次数
中间部分展示企业30年资产增长数据(模拟)、四大产业增长率、集团主要数据概况(以动态水流形式展示)和企业宣传视频,形成动静分明,当切换到发展历程模块中间部分则从右到做刷掉上一部分内容。

大屏设计语言

大屏幕显示及大数据可视化的确有其特点,可以形成特定的设计语言。

通过分析,确定设计的风格。它是实时的,有紧张感;需要新颖的图标和动效,有科技感;信息层次是丰富的;展示的数据是实时的。

1 布局栅格化。拼接的大屏尤其适合栅格化的设计。它本来就是格子间组成的嘛。大屏上内容的模块化、可以任意拼接组成一屏画面的形式,用栅格化的形式也可以发挥的很好。每一个模块是一个单元格,彼此统一又独立,可以放大和随意摆放。每一格一模块遵循统一的设计风格、UI规范。

2 色彩对比强,暗色为主巨大的屏幕在室内,如果色彩鲜艳、画面动效不断,就成了24小时长时间播放的电影,人的本能就会注意力集中在其上。在监控中心的工作人员,一排排桌椅直对着大屏,长期如此,工作人员会受不了的。屏幕内容需要动静之分。大屏以暗色为主,视觉更容易集中在上面的某处焦点(亮色为主的信息之上)。

3 地图、线路图及上面地点概况信息的设计、动效渲染。一个好的流程可以让我们事半功倍,可视化的设计流程主要有分析数据、匹配图形、优化图形、检查测试。首先,在了解需求的基础上分析我们要展示哪些数据,包含元数据、数据维度、查看的视角等;其次,我们利用可视化工具,根据一些已固化的图表类型快速做出各种图表;然后优化细节;最后检查测试。
将视觉结构进行组合,把它转换成图形传递给用户,用户通过人机交互的方式进行反向转换,去更好地了解数据背后有什么问题和规律,大屏的实时效果是加入数据之后才能看到整体,是一个不断的调整过程。

4、面积巨大——用户站远才能看全内容(所以字也不能设计很小)。字体大,对比强,要看清楚,分层次。

5、不可操作,没有滚动条——大屏主要用来给来宾观看的,来宾一般不会直接操作大屏。不同主题之间的轮播顺序及速度是事先设定好的。大屏没有滚动条。

6、统计信息——每一整屏都有具体想给来宾表达某个主题,大屏一般是用来看某个内容的统计概况信息。


数据分析

拆分维度——将需求拆分到最小维度。合并维度——对维度元素进行归类,化繁为简。 确定优先——选择最佳数据来说明观点。最佳表现——确定用哪种表现形式来体现数据。

利亚德能源应急控制系统大屏界面设计

学习研究

在这次设计过程中,通过认真研究学习集团提供的各项数据指标、十二五、十三五规划、公司简介、网上找到各项资料及和上游合作伙伴群策群力头脑风暴,加深了对业务和公司的理解,以视觉化的形式把抽象的企业文化、业务数据直观、创新的体现在独特大屏设计产品中。

利亚德能源应急控制系统大屏界面设计

局部细节

利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计

交互布局示意

利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计 利亚德能源应急控制系统大屏界面设计

  返回