界面設(shè)計 | 前端開發(fā)
北京交大思源科技有限公司是由北京交通大學(xué)發(fā)起成立，以提供行業(yè)應(yīng)用類計算機軟件產(chǎn)品、信息化技術(shù)咨詢、信息化整體解決方案、應(yīng)用系統(tǒng)運維服務(wù)為主營業(yè)務(wù)的高新技術(shù)企業(yè)和軟件企業(yè)，是北京交通大學(xué)科研成果轉(zhuǎn)化的重要產(chǎn)業(yè)平臺。公司廣泛參與了鐵路、物流、軌道與智能交通、廣電等行業(yè)信息化系統(tǒng)的建設(shè)及國家科技支撐計劃的研究。
對鐵路運輸管理、物流管理、物流信息平臺服務(wù)、城市軌道交通運營管理、廣播電影電視自動化等領(lǐng)域進(jìn)行了體系研究和信息系統(tǒng)應(yīng)用推廣，積累了豐富的行業(yè)經(jīng)驗并形成了系列化產(chǎn)品。交大思源和藍(lán)藍(lán)設(shè)計合作多年，設(shè)計多套可視化大屏監(jiān)控系統(tǒng)。大屏尺寸為：5760*1620px
“安徽省應(yīng)急廣播調(diào)度指揮綜合平臺”的大屏，主要以實時的傳播信息，數(shù)據(jù)顯示和監(jiān)控畫面為主。實現(xiàn)了互動式多媒體展示界面的開發(fā)。
第一部分的頂部滾動顯示 新接入的應(yīng)急信息的標(biāo)題及內(nèi)容，標(biāo)題前帶上具體的應(yīng)急消息級別的圖標(biāo)。滾動消息下方展示接入源，每個接入源都用不同的圖標(biāo)顯示。在接入源的下方展示消息列表，消息列表的最前放顯示的是消息的級別。
第二部分用來展示地圖，在地圖上有兩塊浮動區(qū)域，一塊展示的是覆蓋方式（包括頻道、頻率播出系統(tǒng)，調(diào)頻廣播，中波、地面數(shù)字電視、有線數(shù)字電視及下級應(yīng)急廣播平臺），一塊展示下發(fā)詳情，一塊展示信息統(tǒng)計（包括接入平臺統(tǒng)計、離線平臺統(tǒng)計、故障平臺統(tǒng)計、接入終端統(tǒng)計、離線終端統(tǒng)計、故障終端統(tǒng)計），還有一塊展示圖例說明。
1第一部分顯示接入信息和調(diào)度流程，
2第二部分展示地圖，
3第三部分的上半部分展示視頻，下半部分展示統(tǒng)計信息。
第三部分展示的是視頻和統(tǒng)計信息，上半部分為視頻區(qū)域，在這個區(qū)域中浮動的兩個按鈕一個是視頻會議，一個是無人機畫面，二者可以切換在該區(qū)域中顯示。當(dāng)顯示的是視頻會議時，因為視頻會議會接入好多市縣的視頻會議，所以要可以進(jìn)行二級切換。點擊某個小畫面后中間大的畫面就進(jìn)行切換展示。
大屏使用場景及改版前的效果
整個大屏的分辨率達(dá)到5760X1620，深藍(lán)色背景，科技感的邊框和線條來凸顯界面的科技感。數(shù)據(jù)展示和控件在主色調(diào)的基礎(chǔ)上運用一些鮮明色作為點綴，即豐富了頁面也突出了要展示的信息。
大屏左側(cè)主要為預(yù)警信息的展示和一些數(shù)據(jù)調(diào)度下發(fā)接受狀態(tài)的顯示。預(yù)警信息種類的切換采用科技感的圖標(biāo)按鈕。具體預(yù)警展示采用卡片式，將圖標(biāo)?、 標(biāo)題、 整合到一起，頁面層次感明確，用色塊預(yù)警不同程度一目了然，更好的體現(xiàn)出內(nèi)容。
中間地圖會隨著下發(fā)地區(qū)的變化而變化，地圖中間的四種種類的圖標(biāo)會隨著下發(fā)的信息的具體內(nèi)容變大亮起，同時發(fā)射出去的線條開始閃爍。整體增加了頁面的動效使頁面更加有科技感。
大屏右側(cè)為無人機的拍攝畫面，采用滑動式可左右切換，用戶關(guān)注中間視頻，也使整個頁面看起來較為炫酷。點擊上面的切換按鈕，此模塊可切換為視頻會議模塊。視頻會議共有12個攝像，可以任意點擊某個放大觀看。這樣的的交互布局可以更好的節(jié)省空間，在有限的界面內(nèi)展示更多的信息。
視頻下方是數(shù)據(jù)展示。目前展示了應(yīng)急信息接入情況、區(qū)域應(yīng)急消息數(shù)量、下級平臺離線時長和縣終端離線時長四個模塊。數(shù)據(jù)的展示目前采用折線圖和橫向的柱狀圖兩種形式。折線線圖比起常規(guī)的增加一個漸變的面，既可以更加清晰的讀出數(shù)據(jù)又增加了整個圖形的分量。由于種類較多，為了合理布局所以采用橫向柱狀圖。柱狀圖采用不同顏色的漸變，既美觀又清晰。
