交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)

交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)

界面設(shè)計(jì) | 前端開發(fā)

界面設(shè)計(jì) | 前端開發(fā)

北京交大思源科技有限公司是由北京交通大學(xué)發(fā)起成立,以提供行業(yè)應(yīng)用類計(jì)算機(jī)軟件產(chǎn)品、信息化技術(shù)咨詢、信息化整體解決方案、應(yīng)用系統(tǒng)運(yùn)維服務(wù)為主營(yíng)業(yè)務(wù)的高新技術(shù)企業(yè)和軟件企業(yè),是北京交通大學(xué)科研成果轉(zhuǎn)化的重要產(chǎn)業(yè)平臺(tái)。公司廣泛參與了鐵路、物流、軌道與智能交通、廣電等行業(yè)信息化系統(tǒng)的建設(shè)及國(guó)家科技支撐計(jì)劃的研究。

對(duì)鐵路運(yùn)輸管理、物流管理、物流信息平臺(tái)服務(wù)、城市軌道交通運(yùn)營(yíng)管理、廣播電影電視自動(dòng)化等領(lǐng)域進(jìn)行了體系研究和信息系統(tǒng)應(yīng)用推廣,積累了豐富的行業(yè)經(jīng)驗(yàn)并形成了系列化產(chǎn)品。交大思源和藍(lán)藍(lán)設(shè)計(jì)合作多年,設(shè)計(jì)多套可視化大屏監(jiān)控系統(tǒng)。大屏尺寸為:5760*1620px

交互原型介紹

“安徽省應(yīng)急廣播調(diào)度指揮綜合平臺(tái)”的大屏,主要以實(shí)時(shí)的傳播信息,數(shù)據(jù)顯示和監(jiān)控畫面為主。實(shí)現(xiàn)了互動(dòng)式多媒體展示界面的開發(fā)。

第一部分的頂部滾動(dòng)顯示 新接入的應(yīng)急信息的標(biāo)題及內(nèi)容,標(biāo)題前帶上具體的應(yīng)急消息級(jí)別的圖標(biāo)。滾動(dòng)消息下方展示接入源,每個(gè)接入源都用不同的圖標(biāo)顯示。在接入源的下方展示消息列表,消息列表的最前放顯示的是消息的級(jí)別。

第二部分用來展示地圖,在地圖上有兩塊浮動(dòng)區(qū)域,一塊展示的是覆蓋方式(包括頻道、頻率播出系統(tǒng),調(diào)頻廣播,中波、地面數(shù)字電視、有線數(shù)字電視及下級(jí)應(yīng)急廣播平臺(tái)),一塊展示下發(fā)詳情,一塊展示信息統(tǒng)計(jì)(包括接入平臺(tái)統(tǒng)計(jì)、離線平臺(tái)統(tǒng)計(jì)、故障平臺(tái)統(tǒng)計(jì)、接入終端統(tǒng)計(jì)、離線終端統(tǒng)計(jì)、故障終端統(tǒng)計(jì)),還有一塊展示圖例說明。

1第一部分顯示接入信息和調(diào)度流程,
2第二部分展示地圖,
3第三部分的上半部分展示視頻,下半部分展示統(tǒng)計(jì)信息。


交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)交互原型介紹

第三部分展示的是視頻和統(tǒng)計(jì)信息,上半部分為視頻區(qū)域,在這個(gè)區(qū)域中浮動(dòng)的兩個(gè)按鈕一個(gè)是視頻會(huì)議,一個(gè)是無人機(jī)畫面,二者可以切換在該區(qū)域中顯示。當(dāng)顯示的是視頻會(huì)議時(shí),因?yàn)橐曨l會(huì)議會(huì)接入好多市縣的視頻會(huì)議,所以要可以進(jìn)行二級(jí)切換。點(diǎn)擊某個(gè)小畫面后中間大的畫面就進(jìn)行切換展示。


交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)大屏使用場(chǎng)景及改版前的效果

大屏使用場(chǎng)景及改版前的效果

整個(gè)大屏的分辨率達(dá)到5760X1620,深藍(lán)色背景,科技感的邊框和線條來凸顯界面的科技感。數(shù)據(jù)展示和控件在主色調(diào)的基礎(chǔ)上運(yùn)用一些鮮明色作為點(diǎn)綴,即豐富了頁(yè)面也突出了要展示的信息。

大屏左側(cè)主要為預(yù)警信息的展示和一些數(shù)據(jù)調(diào)度下發(fā)接受狀態(tài)的顯示。預(yù)警信息種類的切換采用科技感的圖標(biāo)按鈕。具體預(yù)警展示采用卡片式,將圖標(biāo)?、 標(biāo)題、 整合到一起,頁(yè)面層次感明確,用色塊預(yù)警不同程度一目了然,更好的體現(xiàn)出內(nèi)容。

中間地圖會(huì)隨著下發(fā)地區(qū)的變化而變化,地圖中間的四種種類的圖標(biāo)會(huì)隨著下發(fā)的信息的具體內(nèi)容變大亮起,同時(shí)發(fā)射出去的線條開始閃爍。整體增加了頁(yè)面的動(dòng)效使頁(yè)面更加有科技感。

大屏右側(cè)為無人機(jī)的拍攝畫面,采用滑動(dòng)式可左右切換,用戶關(guān)注中間視頻,也使整個(gè)頁(yè)面看起來較為炫酷。點(diǎn)擊上面的切換按鈕,此模塊可切換為視頻會(huì)議模塊。視頻會(huì)議共有12個(gè)攝像,可以任意點(diǎn)擊某個(gè)放大觀看。這樣的的交互布局可以更好的節(jié)省空間,在有限的界面內(nèi)展示更多的信息。

視頻下方是數(shù)據(jù)展示。目前展示了應(yīng)急信息接入情況、區(qū)域應(yīng)急消息數(shù)量、下級(jí)平臺(tái)離線時(shí)長(zhǎng)和縣終端離線時(shí)長(zhǎng)四個(gè)模塊。數(shù)據(jù)的展示目前采用折線圖和橫向的柱狀圖兩種形式。折線線圖比起常規(guī)的增加一個(gè)漸變的面,既可以更加清晰的讀出數(shù)據(jù)又增加了整個(gè)圖形的分量。由于種類較多,為了合理布局所以采用橫向柱狀圖。柱狀圖采用不同顏色的漸變,既美觀又清晰。

細(xì)節(jié)說明

交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)細(xì)節(jié)說明-1 交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)細(xì)節(jié)說明-2

歷史版本

交大思源安徽應(yīng)急廣播大屏交互優(yōu)化及界面設(shè)計(jì)歷史版本

返回