資金運營管理監(jiān)控系統(tǒng)交互設(shè)計、UI設(shè)計及VUE開發(fā) 發(fā)表于：2024-05-14
金融軟件 | UI設(shè)計 | 大屏設(shè)計 | VUE 開發(fā)
九恒星科技股份有限公司是一家企業(yè)資金管理軟件產(chǎn)品及企業(yè)金融信息增值服務(wù)的提供商，致力于通過信息技術(shù)的應(yīng)用，幫助企業(yè)改善現(xiàn)金流；在金融機構(gòu)與企業(yè)之間架起橋梁，讓企業(yè)的資金流更加順暢。大屏主要應(yīng)用場景：公司會議、集團(tuán)視察、行業(yè)參觀等。領(lǐng)導(dǎo)駕駛艙是系統(tǒng)重要的展示功能，主要應(yīng)用場景：財務(wù)公司各級領(lǐng)導(dǎo)日常運營決策查詢、公司會議等，可作為系統(tǒng)特色功能，使用較為頻繁。
本次合作九恒星委托藍(lán)藍(lán)設(shè)計負(fù)責(zé)PC端界面視覺設(shè)計、大屏界面設(shè)計以及VUE前端開發(fā)。在交互設(shè)計中做了較多優(yōu)化，重點展示領(lǐng)導(dǎo)關(guān)注內(nèi)容，視覺設(shè)計嘗試了多種國際國內(nèi)中公認(rèn)較好的風(fēng)格和布局，在UI設(shè)計和開發(fā)中，考慮到后期不同客戶的定制化程度高，重點在于母版布局的擴展性和組件的通用性。最終設(shè)計出既有國際流行風(fēng)格、又契合國內(nèi)用戶喜好的UI設(shè)計。
產(chǎn)品定位
通過智能化的數(shù)據(jù)分析和報告生成，幫助用戶深入了解資金運營狀況，識別潛在風(fēng)險，并優(yōu)化資金配置和投資決策。注重安全性和數(shù)據(jù)保護(hù)，確保用戶的財務(wù)信息得到保密和可靠的處理。通過定制化服務(wù)和用戶友好的界面設(shè)計，資金運營管理監(jiān)控系統(tǒng)旨在成為企業(yè)財務(wù)團(tuán)隊和高管層的得力助手，促進(jìn)資金管理的效率和透明度。
目標(biāo)用戶
系統(tǒng)主要的目標(biāo)用戶是財務(wù)部門人員、高管層、投資者以及審計與監(jiān)管機構(gòu)等。負(fù)責(zé)企業(yè)或組織財務(wù)管理的專業(yè)人士，需要監(jiān)控系統(tǒng)提供的數(shù)據(jù)支持決策，進(jìn)行資金流動、投資和風(fēng)險管理等方面的工作。負(fù)責(zé)對企業(yè)財務(wù)運營情況進(jìn)行審計和監(jiān)管的相關(guān)機構(gòu)，可以通過監(jiān)控系統(tǒng)獲得必要的數(shù)據(jù)和信息用于審核和監(jiān)管。
設(shè)計風(fēng)格
本次藍(lán)藍(lán)設(shè)計負(fù)責(zé)兩個系統(tǒng)的UI設(shè)計，大屏的設(shè)計風(fēng)格是高科技感并體現(xiàn)出金融的元素，主色調(diào)采用藍(lán)色和黃色相結(jié)合，大屏中有許多動效的使用。 PC 端的設(shè)計采用簡潔扁平化的卡片式設(shè)計，以數(shù)據(jù)本身做視覺傳達(dá)設(shè)計，突出主要數(shù)據(jù)，減少用戶的視覺思考，提升用戶體驗。
突出主要數(shù)據(jù)，增加輪播動效，以便用戶快速識別和理解
右側(cè)是客戶給的原型,只是把要展示的數(shù)據(jù)簡單羅列了一下。考慮到大屏應(yīng)用場景,比如公司會議,集團(tuán)視察,行業(yè)參觀等,都是宏觀數(shù)據(jù)展示為主。所以在設(shè)計時不僅要考慮美觀性,更要考慮到整體的交互布局以及交互方式,確保關(guān)鍵數(shù)據(jù)和指標(biāo)在界面上以醒目的方式呈現(xiàn),以便用戶快速識別和理解。設(shè)計清晰簡潔的布局,避免信息過載,使用戶能夠輕松找到需要的信息。
設(shè)計后三大主題采用輪播的形式,當(dāng)某一個主題轉(zhuǎn)到前面時,周圍的數(shù)據(jù)會隨之變化,頁面添加適當(dāng)?shù)膭有Э梢栽鰪娪脩襞c界面的互動感,提升用戶體驗和參與度。
卡片化設(shè)計提高了信息的獲取效率，多彩的色彩使用戶感受到朝氣蓬勃
PC端駕駛艙頁面雖然和大屏的內(nèi)容大部分相似,但使用的場景是財務(wù)公司各業(yè)務(wù)部門領(lǐng)導(dǎo)、數(shù)據(jù)分析人員使用,也包括各級領(lǐng)導(dǎo)日常運營決策查詢,公司會議。重點展示領(lǐng)導(dǎo)關(guān)注內(nèi)容,定制化程度高,所以重點在于母版布局的擴展性和組件的通用性。
界面整體采用簡潔風(fēng)格設(shè)計,去除多余的裝飾和復(fù)雜元素,使用戶專注于核心信息,減少干擾。采用卡片化設(shè)計,卡片設(shè)計將信息分割成獨立的模塊,使內(nèi)容更易管理和組織。通過卡片設(shè)計,重要的信息可以被突出顯示,吸引用戶注意力,讓用戶能夠快速瀏覽和掃視頁面內(nèi)容,找到他們感興趣的信息。同時卡片設(shè)計可以更好的適配響應(yīng)式布局,適合不同屏幕尺寸和設(shè)備,能夠靈活地調(diào)整布局和展示方式。
提升頁面的整體美感，增強用戶的信任感和好感度
右側(cè)是“價格數(shù)據(jù)看板”的原型,是多個看板的一個,原型中內(nèi)容過于雜亂,沒有統(tǒng)一規(guī)范,重點數(shù)據(jù)不突出等痛點。
看板的設(shè)計統(tǒng)一在上面加了一個小 banner 圖,banner 圖有的右側(cè)插畫和標(biāo)題相呼應(yīng),每個看板有一個主題顏色,下面數(shù)據(jù)沿用首頁的的卡片化設(shè)計。餅、柱、折線等控件設(shè)計新穎,合理,具有高可復(fù)用性。
