杭州市公安局槍械物聯(lián)智控平臺UI設計

杭州市公安局槍械物聯(lián)智控平臺UI設計

html前端 | 交互設計 | 視覺(jué)設計 | 圖標設計

html前端 | 交互設計 | 視覺(jué)設計 | 圖標設計

杭州市公安局槍械物聯(lián)智控平臺是管理全市公安系統配槍人員槍支狀態(tài),人員狀態(tài)的系統,根據對槍械基礎數據的掌握和實(shí)時(shí)動(dòng)態(tài)的告警分析,從而在管理層面做到 掌握數據-發(fā)現問(wèn)題-分析問(wèn)題-解決問(wèn)題 的目的和效果。未來(lái),槍械物聯(lián)智控平臺將接入杭州城市大腦平臺,為完善杭州數字化城市建設保駕護航。

藍藍此次負責項目的界面布局優(yōu)化,視覺(jué)設計,h交互優(yōu)化he html 切圖工作。通過(guò)和客戶(hù)溝通及原型梳理,我們把頁(yè)面分為槍支庫存板塊,槍支實(shí)時(shí)動(dòng)態(tài)數據板塊,槍支位置地圖板塊,管理數據緯度板塊。每個(gè)板塊均可以衍生二級彈出頁(yè)面。按照確定的交互方式,設計每個(gè)步驟的界面。

產(chǎn)品定位

杭州市公安局槍械物聯(lián)智控平臺集合數據展示,人員定位,報警預警,數據統計,實(shí)時(shí)態(tài)勢感知等功能,按照機構分為“市局”“分局”“派出所”三級,三級組織界面通用,根據權限不同,展示不同內容。本平臺既支持數據總覽,也支持數據分級展示詳情,滿(mǎn)足夸級別的數據查看及管理需求。

目標用戶(hù)

目標用戶(hù)為各級公安機構指揮調度人員,和部分決策人員。年齡主要分布于20-40歲之間,也有部分年齡較大的領(lǐng)導人員。辦公場(chǎng)景相對固定,多在室內且大部分情況下投屏于大屏展示。由于公安行業(yè)的特性,大屏需要保證全天24小時(shí)不同光線(xiàn)情況下清晰展示信息,對頁(yè)面整體對比度和配色舒適度要求較高。

設計風(fēng)格

視覺(jué)方面使用大屏常用的深色背景,主色采用藍色配色,通過(guò)整體排版,元素的設計,來(lái)凸顯科技感。頁(yè)面布局方面,采用模塊化布局,不同信息類(lèi)型塊使用不同的顏色,便于區分信息類(lèi)別;扁平化的視覺(jué)元素+無(wú)框式的設計,最大程度地減少頁(yè)面元素的干擾,提升頁(yè)面內容承載量。

杭州市公安局槍械物聯(lián)智控平臺UI設計

從業(yè)務(wù)訴求出發(fā),深入洞察核心功能,重塑頁(yè)面功能布局

在平臺設計前期,我們通過(guò)訪(fǎng)談形式了解到當前產(chǎn)品存在的問(wèn)題主要是:產(chǎn)品邏輯布局混亂,操作區域與數據展示區域發(fā)生重疊,交互邏輯不清晰,數據展示方式單一,難以快速定位獲取關(guān)心的數據。針對以上問(wèn)題,我們從「產(chǎn)品為誰(shuí)設計」「用戶(hù)在哪里使用平臺」「用戶(hù)怎么使用平臺」「用戶(hù)多久用一次」「用戶(hù)為什么關(guān)心這些數據」等維度深入研究所思考,將產(chǎn)品需求和用戶(hù)心理分析透徹,形成完整立體的用戶(hù)畫(huà)像,爭取為用戶(hù)設計出操作更人性化、視覺(jué)效果更好的界面。

杭州市公安局槍械物聯(lián)智控平臺UI設計
杭州市公安局槍械物聯(lián)智控平臺UI設計 杭州市公安局槍械物聯(lián)智控平臺UI設計

聚焦核心數據,優(yōu)化信息顯示層級,打造敏捷高效的人機交互閉環(huán)

聚焦核心數據,優(yōu)化信息顯示層級,打造敏捷高效的人機交互閉環(huán)

此外,在地圖上我們采用了浮動(dòng)式的彈出框,即點(diǎn)即看;彈窗內亦支持擴展,保證信息層級的清晰和交互過(guò)程的流暢。

通過(guò)分層分步驟展示信息的方式,不僅簡(jiǎn)化數據的呈現,還豐富了頁(yè)面層級,形成立體化的人機交互閉環(huán)。

充分運用大小、虛實(shí)、對比等視覺(jué)理論,達到視覺(jué)與功能的完美結合

工作人員在觀(guān)看大屏數據時(shí)難免需要面對很多冗余的數據,如何讓用戶(hù)在眾多數據中迅速找到當前工作中最需要的數據、迅速鎖定焦點(diǎn)、提高工作效率,是我們設計師所要思考解決的問(wèn)題。

藍藍設計在經(jīng)過(guò)用戶(hù)調研和交互梳理后,把“槍支數據”等基礎數據以卡片樣式放置在頁(yè)面中部頂端;通過(guò)圖文結合,大小對比,虛實(shí)對比等視覺(jué)表現手法讓界面信息主次分明,焦點(diǎn)突出,比例協(xié)調,滿(mǎn)足人眼閱讀習慣和業(yè)務(wù)數據的展示需求。

杭州市公安局槍械物聯(lián)智控平臺UI設計
杭州市公安局槍械物聯(lián)智控平臺UI設計

結合具體使用場(chǎng)景,提供人性化解決方案

雖然用戶(hù)使用的是統一的數據平臺,但不同部門(mén),角色之間關(guān)心的數據獲取,展示也存在一定差別。如果使用一致界面布局,雖然可以滿(mǎn)足用戶(hù)獲取數據的需求,但用戶(hù)獲取關(guān)鍵數據效率必然會(huì )下降,時(shí)間也會(huì )更長(cháng),這與我們當初強調高效地信息展示原則相悖,因此我們針對不同角色提供不同的布局方案,將數據展示等核心功能結合不同部門(mén)具體訴求,提供專(zhuān)門(mén)的視覺(jué)交互解決方案:

平臺用戶(hù)分為三個(gè)等級,分布為市公安局,市分局和派出所,三者為從屬關(guān)系,前兩者數據信息一致,派出所則沒(méi)有“訓練槍支實(shí)時(shí)數據”,且屏幕尺寸也和前兩者有有所區別,我們針對派出所主屏單獨進(jìn)行適配和信息顯示優(yōu)化,保證派出所用戶(hù)獲取信息同樣高效流暢。

  返回