項(xiàng)目背景

項(xiàng)目背景

用戶調(diào)研

UI大屏界面設(shè)計(jì) | html前端開發(fā)

UI大屏界面設(shè)計(jì) | html前端開發(fā)

北京自來(lái)水集團(tuán)朝陽(yáng)營(yíng)銷分公司基于一體化支撐平臺(tái),研發(fā)實(shí)時(shí)數(shù)據(jù)搜集、數(shù)據(jù)上報(bào)、質(zhì)量監(jiān)管和決策指揮四大類數(shù)據(jù)模塊,實(shí)現(xiàn)了調(diào)度控制業(yè)務(wù)質(zhì)量的橫向集成和縱向貫通,充分考慮集團(tuán)業(yè)務(wù)數(shù)據(jù)多的特點(diǎn)和相互之間的內(nèi)在聯(lián)系,實(shí)現(xiàn)集團(tuán)業(yè)務(wù)數(shù)據(jù)一體化,能夠滿足各用戶群體查看及專業(yè)工作人員的業(yè)務(wù)需要,提高集團(tuán)各分公司工作效率和監(jiān)督,實(shí)現(xiàn)大數(shù)據(jù)可視化,支撐了自來(lái)水集團(tuán)從業(yè)質(zhì)量、營(yíng)業(yè)收支和服務(wù)器狀態(tài)的協(xié)調(diào)運(yùn)作和控制。

項(xiàng)目初期我們做了相關(guān)用戶研究和相關(guān)業(yè)務(wù)人員的業(yè)務(wù)需求溝通,藍(lán)藍(lán)認(rèn)為對(duì)業(yè)務(wù)思路的關(guān)注和學(xué)習(xí),有助于跳出研究的思維慣性,有意識(shí)的用做業(yè)務(wù)的思路來(lái)做研究,這也是在當(dāng)下交互設(shè)計(jì)藍(lán)藍(lán)設(shè)計(jì)全體設(shè)計(jì)工作者努力去探索的,不僅只關(guān)注研究本身,要將更多的視角放在業(yè)務(wù)和產(chǎn)品層面。

視覺/交互

數(shù)據(jù)質(zhì)量管理系統(tǒng)從業(yè)務(wù)到數(shù)據(jù)和服務(wù)器狀態(tài),本產(chǎn)品以數(shù)據(jù)為主的性質(zhì),在界面設(shè)計(jì)的時(shí)候需要以簡(jiǎn)潔直觀與突出特殊數(shù)據(jù)項(xiàng)為主要的方向,每個(gè)頁(yè)面顏色不超過三種,并且以對(duì)話框分版塊,減少數(shù)字與地圖背景的干擾。為了使用戶更易于讀取各營(yíng)業(yè)所的信息,我們將地圖以立體的形式展現(xiàn),并以以亮色對(duì)話窗口以區(qū)分關(guān)系,集團(tuán)下屬營(yíng)業(yè)所各項(xiàng)數(shù)據(jù)一目了然,便于用戶查看。

整體顏色以深藍(lán)色為底搭配藍(lán)、綠、橙紅、紅等亮色使用這樣的顏色組合,藍(lán)色為水的顏色同時(shí)為自來(lái)水集團(tuán)Vl標(biāo)準(zhǔn)色配合綠黃使用相互互補(bǔ),同時(shí)藍(lán)綠與橙綠分別是相鄰色而黃色與藍(lán)色又互為互補(bǔ)色,能在設(shè)計(jì)中起到關(guān)鍵信息點(diǎn)、事件強(qiáng)烈對(duì)比作用,以吸引用戶的注意

整體界面的系統(tǒng)規(guī)劃,各元素的協(xié)商統(tǒng)一,點(diǎn)擊區(qū)域與操作焦點(diǎn)做好分區(qū),使操作及時(shí)得到反饋。頁(yè)面中數(shù)據(jù)元素元素重設(shè)計(jì),盡量減少用戶或領(lǐng)導(dǎo)在查看業(yè)務(wù)數(shù)據(jù)后所產(chǎn)生的視覺疲勞。

朝陽(yáng)自來(lái)水公司大屏界面設(shè)計(jì) 朝陽(yáng)自來(lái)水公司大屏界面設(shè)計(jì)
朝陽(yáng)自來(lái)水公司大屏界面設(shè)計(jì) 朝陽(yáng)自來(lái)水公司大屏界面設(shè)計(jì)

效果展示

朝陽(yáng)自來(lái)水公司大屏界面設(shè)計(jì) 朝陽(yáng)自來(lái)水公司大屏界面設(shè)計(jì)藍(lán)藍(lán)設(shè)計(jì)重要客戶滿意度調(diào)查表

返回