交大思源安徽应急广播大屏交互优化及界面设计

界面设计 | 前端开发

北京交大思源科技有限公司是由北京交通大学发起成立,以提供行业应用类计算机软件产品、信息化技术咨询、信息化整体解决方案、应用系统运维服务为主营业务的高新技术企业和软件企业,是北京交通大学科研成果转化的重要产业平台。公司广泛参与了铁路、物流、轨道与智能交通、广电等行业信息化系统的建设及国家科技支撑计划的研究。

对铁路运输管理、物流管理、物流信息平台服务、城市轨道交通运营管理、广播电影电视自动化等领域进行了体系研究和信息系统应用推广,积累了丰富的行业经验并形成了系列化产品。交大思源和蓝蓝设计合作多年,设计多套可视化大屏监控系统。大屏尺寸为:5760*1620px

交互原型介绍

“安徽省应急广播调度指挥综合平台”的大屏,主要以实时的传播信息,数据显示和监控画面为主。实现了互动式多媒体展示界面的开发。

第一部分的顶部滚动显示 新接入的应急信息的标题及内容,标题前带上具体的应急消息级别的图标。滚动消息下方展示接入源,每个接入源都用不同的图标显示。在接入源的下方展示消息列表,消息列表的最前放显示的是消息的级别。

第二部分用来展示地图,在地图上有两块浮动区域,一块展示的是覆盖方式(包括频道、频率播出系统,调频广播,中波、地面数字电视、有线数字电视及下级应急广播平台),一块展示下发详情,一块展示信息统计(包括接入平台统计、离线平台统计、故障平台统计、接入终端统计、离线终端统计、故障终端统计),还有一块展示图例说明。

1第一部分显示接入信息和调度流程,
2第二部分展示地图,
3第三部分的上半部分展示视频,下半部分展示统计信息。


交大思源安徽应急广播大屏交互优化及界面设计交互原型介绍

第三部分展示的是视频和统计信息,上半部分为视频区域,在这个区域中浮动的两个按钮一个是视频会议,一个是无人机画面,二者可以切换在该区域中显示。当显示的是视频会议时,因为视频会议会接入好多市县的视频会议,所以要可以进行二级切换。点击某个小画面后中间大的画面就进行切换展示。


交大思源安徽应急广播大屏交互优化及界面设计大屏使用场景及改版前的效果

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

整个大屏的分辨率达到5760X1620,深蓝色背景,科技感的边框和线条来凸显界面的科技感。数据展示和控件在主色调的基础上运用一些鲜明色作为点缀,即丰富了页面也突出了要展示的信息。

大屏左侧主要为预警信息的展示和一些数据调度下发接受状态的显示。预警信息种类的切换采用科技感的图标按钮。具体预警展示采用卡片式,将图标 、 标题、 整合到一起,页面层次感明确,用色块预警不同程度一目了然,更好的体现出内容。

中间地图会随着下发地区的变化而变化,地图中间的四种种类的图标会随着下发的信息的具体内容变大亮起,同时发射出去的线条开始闪烁。整体增加了页面的动效使页面更加有科技感。

大屏右侧为无人机的拍摄画面,采用滑动式可左右切换,用户关注中间视频,也使整个页面看起来较为炫酷。点击上面的切换按钮,此模块可切换为视频会议模块。视频会议共有12个摄像,可以任意点击某个放大观看。这样的的交互布局可以更好的节省空间,在有限的界面内展示更多的信息。

视频下方是数据展示。目前展示了应急信息接入情况、区域应急消息数量、下级平台离线时长和县终端离线时长四个模块。数据的展示目前采用折线图和横向的柱状图两种形式。折线线图比起常规的增加一个渐变的面,既可以更加清晰的读出数据又增加了整个图形的分量。由于种类较多,为了合理布局所以采用横向柱状图。柱状图采用不同颜色的渐变,既美观又清晰。

细节说明

交大思源安徽应急广播大屏交互优化及界面设计细节说明-1 交大思源安徽应急广播大屏交互优化及界面设计细节说明-2

历史版本

交大思源安徽应急广播大屏交互优化及界面设计历史版本

返回