公安应急物资保障智能推演系统UI视觉设计+开发

vue开发 | 交互设计 | 界面设计

当前我国公共安全领域高危事件频发,自然灾害不断出现,给人民生命和财产造成重大损失,在各类突发事件和自然灾害面前,公安机关始终处于应急处突的最前沿,打好维稳处突和抢险救灾的攻坚战,建立应急物资保障系统工作尤为重要。该系统主要功能包括保障方案制定、保障方案推演、保障方案实施、历史方案管理、智能决策等。

该系统由公安部第一研究所委托蓝蓝设计负责界面视觉设计、交互设计与开发设计。基于公安系统的界面设计,蓝蓝设计人员本着更加认真严谨的态度服务。设计人员通过对十几页的客户需求进行梳理制作页面交互原型,力求在保证系统视觉效果的同时,也更加注重平台的易用性与适用性。通过几个月的努力,最终圆满完成该项目。

产品定位

基于大数据的公安应急物资保障智能推演系统主要实现能够根据应急事件的类型、规模、时间、地点及现有警力及物资配备情况等信息,从既定的方案库中匹配或实时规划合理的应急保障方案,包括物资调拨方案及运输路径规划等信息。

目标用户

系统利用仿真引擎,结合储备库实时库存信息、地图信息、实时的天气和路况等信息,推演应急保障方案的可行性, 专家可以对应急保障方案进行指导和调优。通过全国公安应急储备管理信息系统进行调拨任务的执行,并实时监控任务执行过程。

设计风格

该系统将蓝色定为主色,用黄、橙、红、绿色作为点缀色。蓝色象征纯净,代表沉稳理性和公正透明;黄橙红色稳重中又带着温暖,也传达着温情之意,保障人民生命财产安全。绿色则传达出积极向上的理念。系统结构简洁精准,页面布局版块分类明晰,要点突出醒目,使人一目了然。

公安应急软件UI设计开发

在系统首页,用户可以直接查看到系统中的事件、项目统计概览和完成情况,以及地图的直观展示。

公安保障智能推演系统承载着更多细项业务,整体界面采用扁平化设计,去除冗余、繁杂的装饰效果,突出核心的设计元素,让用户使用时更加直观和更有目的性。

首页左侧的菜单栏通过色块区分功能,用户可以快速查看,同时将带有公安系统图作为背景,在有界面效果的同时不扰乱用户视觉。

公安应急软件UI设计开发

公安应急软件UI设计开发

事件列表中的基本信息主要是描述何时、何地发生了哪类哪种类型、什么级别的应急事件。

用户可通过搜索时间、关键字查询事件信息。列表通过字号、字重、间距、留白来建立清晰的信息层级,提高用户的使用效率。同时用不同颜色色块来区分事件的紧急性质,更便于用户快速明确业务。

设计人员通过梳理业务结构,页面设计更加扁平直观,让用户快速看到真实的数据信息。

公安应急软件UI设计开发
公安应急软件UI设计开发

蓝蓝设计

公安应急软件UI设计开发

事件库管理页建立各种事件类型的所需物资种类,后续需要通过历史事件库进行优化。

用户可通过对事件级别、装备分类、装备种类以及关键词查询事件库。点击新增按钮可以添加事件。列表右侧可以通过编辑和删除修改事件信息。

公安应急软件UI设计开发

对历史方案库的管理,一种来源是通过本系统发生的事件并实施完成的记录;一种是可以对以往发生的历史事件进行增加。

警力及调拨方案主要用于了解警力情况或者现场警力配备情况;如果有明确需求物资,可以进行登记。左侧通过时间轴的样式来展现方案管理的进度,丰富页面。

同时利用卡片约束信息布局,增强页面整体性和秩序性,将板块信息有序组合,页面中的信息归类、组合,提高用户信息读取效率。

公安应急软件UI设计开发
公安应急软件UI设计开发

公安应急软件UI设计开发

这是智能决策页中的子菜单库存储备推荐,能够按下列内容给出物资推荐内容,并将相关内容导出成Excel、打印。

通过仓储名称、时间进行查询。页面中突出重要数据和按钮,用不同颜色进行区分,分层次的去引导用户阅读内容,减轻认知与读取负担,让用户更容易抓住重要信息。

公安应急软件UI设计开发
公安应急软件UI设计开发
公安应急软件UI设计开发
公安应急软件UI设计开发
公安应急软件UI设计开发
公安应急软件UI设计开发
公安应急软件UI设计开发

  返回