<sup id="612n1"></sup>
    <menuitem id="612n1"></menuitem>
    
    

    <tr id="612n1"><nobr id="612n1"><delect id="612n1"></delect></nobr></tr>
    <tr id="612n1"></tr>

    1. 交大思源安徽應急廣播大屏交互優化及界面設計

      界面設計 | 前端開發

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

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

      交互原型介紹

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

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

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

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


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

      第三部分展示的是視頻和統計信息,上半部分為視頻區域,在這個區域中浮動的兩個按鈕一個是視頻會議,一個是無人機畫面,二者可以切換在該區域中顯示。當顯示的是視頻會議時,因為視頻會議會接入好多市縣的視頻會議,所以要可以進行二級切換。點擊某個小畫面后中間大的畫面就進行切換展示。


      交大思源安徽應急廣播大屏交互優化及界面設計大屏使用場景及改版前的效果

      大屏使用場景及改版前的效果

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

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

      中間地圖會隨著下發地區的變化而變化,地圖中間的四種種類的圖標會隨著下發的信息的具體內容變大亮起,同時發射出去的線條開始閃爍。整體增加了頁面的動效使頁面更加有科技感。

      大屏右側為無人機的拍攝畫面,采用滑動式可左右切換,用戶關注中間視頻,也使整個頁面看起來較為炫酷。點擊上面的切換按鈕,此模塊可切換為視頻會議模塊。視頻會議共有12個攝像,可以任意點擊某個放大觀看。這樣的的交互布局可以更好的節省空間,在有限的界面內展示更多的信息。

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

      細節說明

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

      歷史版本

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

      返回

      一本到在线视频免费不卡观看_久久人人超碰97精品_一级做a爱过程免费_猫咪最新永久在线网站

      <sup id="612n1"></sup>
      <menuitem id="612n1"></menuitem>
      
      

      <tr id="612n1"><nobr id="612n1"><delect id="612n1"></delect></nobr></tr>
      <tr id="612n1"></tr>