杭州市公安局枪械物联智控平台UI设计

html前端 | 交互设计 | 视觉设计 | 图标设计

杭州市公安局枪械物联智控平台是管理全市公安系统配枪人员枪支状态,人员状态的系统,根据对枪械基础数据的掌握和实时动态的告警分析,从而在管理层面做到 掌握数据-发现问题-分析问题-解决问题 的目的和效果。未来,枪械物联智控平台将接入杭州城市大脑平台,为完善杭州数字化城市建设保驾护航。

蓝蓝此次负责项目的界面布局优化,视觉设计,h交互优化he html 切图工作。通过和客户沟通及原型梳理,我们把页面分为枪支库存板块,枪支实时动态数据板块,枪支位置地图板块,管理数据纬度板块。每个板块均可以衍生二级弹出页面。按照确定的交互方式,设计每个步骤的界面。

产品定位

杭州市公安局枪械物联智控平台集合数据展示,人员定位,报警预警,数据统计,实时态势感知等功能,按照机构分为“市局”“分局”“派出所”三级,三级组织界面通用,根据权限不同,展示不同内容。本平台既支持数据总览,也支持数据分级展示详情,满足夸级别的数据查看及管理需求。

目标用户

目标用户为各级公安机构指挥调度人员,和部分决策人员。年龄主要分布于20-40岁之间,也有部分年龄较大的领导人员。办公场景相对固定,多在室内且大部分情况下投屏于大屏展示。由于公安行业的特性,大屏需要保证全天24小时不同光线情况下清晰展示信息,对页面整体对比度和配色舒适度要求较高。

设计风格

视觉方面使用大屏常用的深色背景,主色采用蓝色配色,通过整体排版,元素的设计,来凸显科技感。页面布局方面,采用模块化布局,不同信息类型块使用不同的颜色,便于区分信息类别;扁平化的视觉元素+无框式的设计,最大程度地减少页面元素的干扰,提升页面内容承载量。

杭州市公安局枪械物联智控平台UI设计

从业务诉求出发,深入洞察核心功能,重塑页面功能布局

在平台设计前期,我们通过访谈形式了解到当前产品存在的问题主要是:产品逻辑布局混乱,操作区域与数据展示区域发生重叠,交互逻辑不清晰,数据展示方式单一,难以快速定位获取关心的数据。针对以上问题,我们从「产品为谁设计」「用户在哪里使用平台」「用户怎么使用平台」「用户多久用一次」「用户为什么关心这些数据」等维度深入研究所思考,将产品需求和用户心理分析透彻,形成完整立体的用户画像,争取为用户设计出操作更人性化、视觉效果更好的界面。

杭州市公安局枪械物联智控平台UI设计
杭州市公安局枪械物联智控平台UI设计 杭州市公安局枪械物联智控平台UI设计

聚焦核心数据,优化信息显示层级,打造敏捷高效的人机交互闭环

聚焦核心数据,优化信息显示层级,打造敏捷高效的人机交互闭环

此外,在地图上我们采用了浮动式的弹出框,即点即看;弹窗内亦支持扩展,保证信息层级的清晰和交互过程的流畅。

通过分层分步骤展示信息的方式,不仅简化数据的呈现,还丰富了页面层级,形成立体化的人机交互闭环。

充分运用大小、虚实、对比等视觉理论,达到视觉与功能的完美结合

工作人员在观看大屏数据时难免需要面对很多冗余的数据,如何让用户在众多数据中迅速找到当前工作中最需要的数据、迅速锁定焦点、提高工作效率,是我们设计师所要思考解决的问题。

蓝蓝设计在经过用户调研和交互梳理后,把“枪支数据”等基础数据以卡片样式放置在页面中部顶端;通过图文结合,大小对比,虚实对比等视觉表现手法让界面信息主次分明,焦点突出,比例协调,满足人眼阅读习惯和业务数据的展示需求。

杭州市公安局枪械物联智控平台UI设计
杭州市公安局枪械物联智控平台UI设计

结合具体使用场景,提供人性化解决方案

虽然用户使用的是统一的数据平台,但不同部门,角色之间关心的数据获取,展示也存在一定差别。如果使用一致界面布局,虽然可以满足用户获取数据的需求,但用户获取关键数据效率必然会下降,时间也会更长,这与我们当初强调高效地信息展示原则相悖,因此我们针对不同角色提供不同的布局方案,将数据展示等核心功能结合不同部门具体诉求,提供专门的视觉交互解决方案:

平台用户分为三个等级,分布为市公安局,市分局和派出所,三者为从属关系,前两者数据信息一致,派出所则没有“训练枪支实时数据”,且屏幕尺寸也和前两者有有所区别,我们针对派出所主屏单独进行适配和信息显示优化,保证派出所用户获取信息同样高效流畅。

  返回