利亞德能源應(yīng)急控制系統(tǒng)大屏策劃及UI設(shè)計

利亞德能源應(yīng)急控制系統(tǒng)大屏策劃及UI設(shè)計

圖標(biāo)設(shè)計 | 交互設(shè)計 | 界面設(shè)計

圖標(biāo)設(shè)計 | 交互設(shè)計 | 界面設(shè)計

近年來各行業(yè)遠(yuǎn)程監(jiān)控系統(tǒng)應(yīng)用日益廣泛,在能源行業(yè)尤其突出。無論是鋼鐵行業(yè)的冶煉工作;石油行業(yè)的油井油田、石油管道;還是煤炭行業(yè)的生產(chǎn)作業(yè),都是在比較荒蕪、偏僻、甚至惡劣的環(huán)境中進(jìn)行。安全管理更需要實時掌控各生產(chǎn)環(huán)節(jié)作業(yè)情況的變化,以便及時采取應(yīng)對措施。能源行業(yè)采用遠(yuǎn)程監(jiān)控系統(tǒng)能起到降低成本、提 率的目的,達(dá)到事半功倍的效果。在國家以信息化帶動工業(yè)化的大政策背景下,能源行業(yè)采用信息化系統(tǒng)對各種生產(chǎn)活動進(jìn)行監(jiān)控已成為一種大趨勢。

利亞德光電股份有限公司于1995年注冊成立 ,注冊資金15000萬元,是集設(shè)計、生產(chǎn)、銷售及服務(wù)為一體的LED顯示屏和LED發(fā)光產(chǎn)品應(yīng)用的專業(yè)公司
藍(lán)藍(lán)設(shè)計與利亞德公司是長期合作伙伴,為其下屬各事業(yè)部提供大屏交互設(shè)計及視覺界面設(shè)計服務(wù)。藍(lán)藍(lán)設(shè)計此次為某能源集團策劃組織大屏產(chǎn)品設(shè)計,包括組織內(nèi)容、策劃設(shè)計、交互設(shè)計及視覺.

項目成果

大屏的長寬為:11520px*3240px。
1.主體為集團展示層面數(shù)據(jù)分析,數(shù)據(jù)呈現(xiàn),結(jié)合集團主要VI標(biāo)準(zhǔn)及企業(yè)文化和大屏幕顯示特點進(jìn)行設(shè)計

2.面對人群為管理層高素質(zhì)者

3.目的展示性質(zhì)為主,突出企業(yè)實力、運營狀況和企業(yè)品質(zhì)

4.定義為科技創(chuàng)新國際化類風(fēng)格為主進(jìn)行腦補創(chuàng)作

此次工作的難點在于需求分析,策劃和組織內(nèi)容,將客戶提供數(shù)據(jù)接口內(nèi)容劃定工作范圍,結(jié)合能源公司年報、宣傳冊等資料,重新定義大屏上每屏展示的核心內(nèi)容,通過可視化的方式美觀形象的展現(xiàn),并設(shè)計相關(guān)動效和交互方式。

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

動效設(shè)計

數(shù)據(jù)地圖

數(shù)據(jù)為示意,地圖配合動效,在能服產(chǎn)業(yè)模塊顯示集團主要能服產(chǎn)業(yè)分布,并定時跳動展示下一個企業(yè)位置、圖片、文字介紹、標(biāo)簽(電力、新能源等)、年產(chǎn)值、銷售額等信息

折線圖

使用年份時間軸對十三五(2005、2010、2015)年份中各月發(fā)電量等數(shù)據(jù)進(jìn)行直觀對比,減少手動操作步驟也使界面看起來更加豐富

動態(tài)光圈

數(shù)據(jù)為示意,使用光圈動效果展示某單項數(shù)據(jù)
如(占比、脫硝率、資產(chǎn)等)單項數(shù)據(jù)

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計
利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

首頁方案1

整體左中右布局,中間和兩側(cè)比例為2:1,利用星空為背景結(jié)合科技光以及背景流星劃過效果拼湊出空間感,以亮色突出主要數(shù)據(jù),

搭配動態(tài)效果使頁面突顯科技感而不失穩(wěn)重 中間部分突出顯示企業(yè)營收數(shù)據(jù)實時變動,周圍環(huán)繞氣泡擴散展示企業(yè)簡介和里程碑?dāng)?shù)據(jù),三個圓點為圖形式輪播展示更多數(shù)據(jù)內(nèi)容,為后期更多數(shù)據(jù)融入預(yù)留擴展位。 周圍分別為電力產(chǎn)業(yè):電源占比,發(fā)電量占比、脫硝率、各年每月發(fā)電量對比折線圖以及各項發(fā)電產(chǎn)業(yè)增幅百分比。燃?xì)猱a(chǎn)業(yè):供應(yīng)戶數(shù)和供應(yīng)量數(shù)據(jù)、供氣結(jié)構(gòu)圖、燃?xì)庵饕獢?shù)據(jù)增幅圖、燃?xì)夤?yīng)戶數(shù)年份柱狀圖。金融產(chǎn)業(yè):金融產(chǎn)業(yè)發(fā)展里程碑、金融產(chǎn)業(yè)主要資產(chǎn)、投資、房產(chǎn)面積等數(shù)值。能服產(chǎn)業(yè)主要能服產(chǎn)業(yè)位置和企業(yè)詳細(xì)數(shù)據(jù)動態(tài)展示。

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計
利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

首頁方案2

整體左中右布局,中間和兩側(cè)比例為2:1,使用企業(yè)VI標(biāo)準(zhǔn)色黑背景,搭配企業(yè)VI標(biāo)準(zhǔn)色紅搭配,形成濃郁的工業(yè)設(shè)計風(fēng)格

TAB切換使用大色塊配合上海城市剪影和白色圖標(biāo)來突出主題,自動輪播展示,減少用戶操作次數(shù)
中間部分展示企業(yè)30年資產(chǎn)增長數(shù)據(jù)(模擬)、四大產(chǎn)業(yè)增長率、集團主要數(shù)據(jù)概況(以動態(tài)水流形式展示)和企業(yè)宣傳視頻,形成動靜分明,當(dāng)切換到發(fā)展歷程模塊中間部分則從右到做刷掉上一部分內(nèi)容。

大屏設(shè)計語言

大屏幕顯示及大數(shù)據(jù)可視化的確有其特點,可以形成特定的設(shè)計語言。

通過分析,確定設(shè)計的風(fēng)格。它是實時的,有緊張感;需要新穎的圖標(biāo)和動效,有科技感;信息層次是豐富的;展示的數(shù)據(jù)是實時的。

1 布局柵格化。拼接的大屏尤其適合柵格化的設(shè)計。它本來就是格子間組成的嘛。大屏上內(nèi)容的模塊化、可以任意拼接組成一屏畫面的形式,用柵格化的形式也可以發(fā)揮的很好。每一個模塊是一個單元格,彼此統(tǒng)一又獨立,可以放大和隨意擺放。每一格一模塊遵循統(tǒng)一的設(shè)計風(fēng)格、UI規(guī)范。

2 色彩對比強,暗色為主巨大的屏幕在室內(nèi),如果色彩鮮艷、畫面動效不斷,就成了24小時長時間播放的電影,人的本能就會注意力集中在其上。在監(jiān)控中心的工作人員,一排排桌椅直對著大屏,長期如此,工作人員會受不了的。屏幕內(nèi)容需要動靜之分。大屏以暗色為主,視覺更容易集中在上面的某處焦點(亮色為主的信息之上)。

3 地圖、線路圖及上面地點概況信息的設(shè)計、動效渲染。一個好的流程可以讓我們事半功倍,可視化的設(shè)計流程主要有分析數(shù)據(jù)、匹配圖形、優(yōu)化圖形、檢查測試。首先,在了解需求的基礎(chǔ)上分析我們要展示哪些數(shù)據(jù),包含元數(shù)據(jù)、數(shù)據(jù)維度、查看的視角等;其次,我們利用可視化工具,根據(jù)一些已固化的圖表類型快速做出各種圖表;然后優(yōu)化細(xì)節(jié);最后檢查測試。
將視覺結(jié)構(gòu)進(jìn)行組合,把它轉(zhuǎn)換成圖形傳遞給用戶,用戶通過人機交互的方式進(jìn)行反向轉(zhuǎn)換,去更好地了解數(shù)據(jù)背后有什么問題和規(guī)律,大屏的實時效果是加入數(shù)據(jù)之后才能看到整體,是一個不斷的調(diào)整過程。

4、面積巨大——用戶站遠(yuǎn)才能看全內(nèi)容(所以字也不能設(shè)計很?。?。字體大,對比強,要看清楚,分層次。

5、不可操作,沒有滾動條——大屏主要用來給來賓觀看的,來賓一般不會直接操作大屏。不同主題之間的輪播順序及速度是事先設(shè)定好的。大屏沒有滾動條。

6、統(tǒng)計信息——每一整屏都有具體想給來賓表達(dá)某個主題,大屏一般是用來看某個內(nèi)容的統(tǒng)計概況信息。


數(shù)據(jù)分析

拆分維度——將需求拆分到最小維度。合并維度——對維度元素進(jìn)行歸類,化繁為簡。 確定優(yōu)先——選擇最佳數(shù)據(jù)來說明觀點。最佳表現(xiàn)——確定用哪種表現(xiàn)形式來體現(xiàn)數(shù)據(jù)。

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

學(xué)習(xí)研究

在這次設(shè)計過程中,通過認(rèn)真研究學(xué)習(xí)集團提供的各項數(shù)據(jù)指標(biāo)、十二五、十三五規(guī)劃、公司簡介、網(wǎng)上找到各項資料及和上游合作伙伴群策群力頭腦風(fēng)暴,加深了對業(yè)務(wù)和公司的理解,以視覺化的形式把抽象的企業(yè)文化、業(yè)務(wù)數(shù)據(jù)直觀、創(chuàng)新的體現(xiàn)在獨特大屏設(shè)計產(chǎn)品中。

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

局部細(xì)節(jié)

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

交互布局示意

利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計 利亞德能源應(yīng)急控制系統(tǒng)大屏界面設(shè)計

  返回