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