項(xiàng)目背景

項(xiàng)目背景

DataV開發(fā)

界面設(shè)計(jì) | 交互優(yōu)化 | DataV開發(fā)

界面設(shè)計(jì) | 交互優(yōu)化 | DataV開發(fā)

北京交科院科技發(fā)展公司和藍(lán)藍(lán)設(shè)計(jì)合作“交通數(shù)據(jù)瞭望臺(tái)”。數(shù)據(jù)“瞭望臺(tái)”是結(jié)合用戶需求為中心的主題規(guī)劃,通觀全局綜合態(tài)勢(shì),將海量、不同來源、多維度的數(shù)據(jù)源深度融合關(guān)聯(lián)以支持科學(xué)決策和感知研判,一體化聯(lián)動(dòng)交互控制、可擴(kuò)展和復(fù)用、靈活部署和發(fā)布的專業(yè)級(jí)大數(shù)據(jù)可視化平臺(tái)。

基于行業(yè)數(shù)據(jù)的積累,用更生動(dòng)、友好的形式,即時(shí)呈現(xiàn)隱藏在瞬息萬變且龐雜數(shù)據(jù)背后的業(yè)務(wù)洞察,在交通運(yùn)輸領(lǐng)域通過交互式實(shí)時(shí)數(shù)據(jù)可視化視屏墻來幫助業(yè)務(wù)人員發(fā)現(xiàn)、診斷業(yè)務(wù)問題,越來越成為大數(shù)據(jù)解決方案中不可或缺的一環(huán)。

行業(yè)態(tài)勢(shì)展示了道路交通運(yùn)輸行業(yè)的基礎(chǔ)數(shù)據(jù)和走勢(shì),實(shí)時(shí)反映行業(yè)的運(yùn)行狀態(tài),將采集的數(shù)據(jù)形象化、直觀化、具體化。為了加強(qiáng)某些重點(diǎn)工作,我們還需加入“聯(lián)網(wǎng)聯(lián)控”、“互聯(lián)互通”等相關(guān)專題。系統(tǒng)所具備的數(shù)據(jù)管理能力可將現(xiàn)有的數(shù)據(jù)進(jìn)行有效的整合,快速準(zhǔn)確地提供報(bào)表并提出決策依據(jù)。

數(shù)據(jù)瞭望臺(tái)界面后期使用DataV來實(shí)現(xiàn)開發(fā)。DataV對(duì)于開發(fā)有很多好處便捷提高工作效率表現(xiàn)形式更加生動(dòng),友好。但也有一定的弊端,控件的形式有一定的局限性,必須選用控件庫里現(xiàn)有的形式。所以當(dāng)時(shí)設(shè)計(jì)時(shí)也要對(duì)這些控件有所了解才能和開發(fā)工程師更好的交接。

為了更好的和開發(fā)溝通,達(dá)到最優(yōu)實(shí)現(xiàn)效果,該項(xiàng)目藍(lán)藍(lán)設(shè)計(jì)駐場(chǎng)一個(gè)月完成全部設(shè)計(jì)。設(shè)計(jì)前要知道DataV控件庫里有哪些控件可以用,設(shè)計(jì)時(shí)盡量采用已有控件以便后期可以實(shí)現(xiàn)。設(shè)計(jì)好的頁面會(huì)及時(shí)開會(huì)討論,增加辦公效率。為了實(shí)現(xiàn)更加卓越的效果,有些控件不能實(shí)現(xiàn)的(比如藝術(shù)數(shù)字等),我們將以切圖的形式交付開發(fā)。為了開發(fā)設(shè)計(jì)完成后藍(lán)藍(lán)設(shè)計(jì)會(huì)對(duì)頁面做詳細(xì)的標(biāo)注交付開發(fā)。最后藍(lán)藍(lán)設(shè)計(jì)將開發(fā)后的界面和設(shè)計(jì)圖進(jìn)行對(duì)比,有出入的地方進(jìn)行指正、調(diào)整,以確保最后效果能和設(shè)計(jì)圖更大程度還原。

風(fēng)格定義

此次界面設(shè)計(jì)分辨率為1920X1080,主要使用場(chǎng)景為投屏的方式。在了解項(xiàng)目的大背景后,我們決定采用深藍(lán)色的系的設(shè)計(jì)風(fēng)格。界面主要以科技,大氣,信息展示清晰等為設(shè)計(jì)的重要要素。在主色調(diào)的基礎(chǔ)上圖表和數(shù)據(jù)展示運(yùn)用了多種鮮明的點(diǎn)綴色,相對(duì)比較重要的信息,視覺上采用突出的形式展示,豐富了視覺效果。

界面設(shè)計(jì)

數(shù)據(jù)“瞭望臺(tái)”是交通運(yùn)輸領(lǐng)域?qū)I(yè)級(jí)的大數(shù)據(jù)可視化平臺(tái)。通過前期的調(diào)研和溝通最終采用富有科技感的設(shè)計(jì)形式。

界面整體采用深藍(lán)背景,通過背景圖案展示界面的縱深感。富有科技感的邊框和線條來凸顯界面的科技感。數(shù)據(jù)展示和控件在主色調(diào)的基礎(chǔ)上運(yùn)用一些鮮明色作為點(diǎn)綴,即豐富了頁面也突出了要展示的信息。

細(xì)節(jié)體現(xiàn)

儀表盤:入網(wǎng)率和上線率用儀表盤的形式來展示,整體增加了整個(gè)頁面的科技感。兩個(gè)儀表盤 分別采用藍(lán)、青兩種比較亮的顏色同是也有輕微的漸變。儀表盤沒有全部封閉,下邊由數(shù)字顯示當(dāng) 前具體的百分比。

環(huán)狀圖:這里采用環(huán)狀圖來表示各個(gè)部分占總體的百分比,區(qū)別于傳統(tǒng)的餅狀圖,顯得更加精巧、 炫酷。業(yè)戶、車輛、人員三個(gè)種類通過不同的色系來表示。同時(shí)也豐富了頁面整體的色調(diào)。交互上鼠 標(biāo)移入某個(gè)部分,該部分的名稱和所占百分比在環(huán)形圖的中間顯示。

返回