杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)

杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)

html前端 | 交互設(shè)計(jì) | 視覺設(shè)計(jì) | 圖標(biāo)設(shè)計(jì)

html前端 | 交互設(shè)計(jì) | 視覺設(shè)計(jì) | 圖標(biāo)設(shè)計(jì)

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

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

產(chǎn)品定位

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

目標(biāo)用戶

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

設(shè)計(jì)風(fēng)格

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

杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)

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

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

杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)
杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì) 杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)

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

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

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

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

充分運(yùn)用大小、虛實(shí)、對(duì)比等視覺理論,達(dá)到視覺與功能的完美結(jié)合

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

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

杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)
杭州市公安局槍械物聯(lián)智控平臺(tái)UI設(shè)計(jì)

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

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

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

  返回