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

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

界面設計 | 前端開(kāi)發(fā)

界面設計 | 前端開(kāi)發(fā)

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

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

交互原型介紹

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

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

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

1第一部分顯示接入信息和調度流程,
2第二部分展示地圖,
3第三部分的上半部分展示視頻,下半部分展示統計信息。


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

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


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

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

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

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

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

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

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

細節說(shuō)明

交大思源安徽應急廣播大屏交互優(yōu)化及界面設計細節說(shuō)明-1 交大思源安徽應急廣播大屏交互優(yōu)化及界面設計細節說(shuō)明-2

歷史版本

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

返回