无遮挡18禁啪啪免费观看 I 秋霞成人av I brandilove欧美三区 I 激情偷乱人伦小说视频 I 人人插人人艹 I www.亚洲com I 波多野结衣av高清一区二区三区 I 精品无码国产污污污免费网站 I 美女张开腿给男人桶爽久久 I 国产精品久久久久久久免费 I 国内精品久久99 I 亚洲精品无码专区 I 亚洲免费视频一区二区 I 午夜xxx I 国产一区啪啪 I 丝袜激情网 I 日韩精品久久久久久久 I 欧美香蕉视频 I 成人片免费看 I 天天色综合2 I 寡妇被老头舔到高潮的视频 I 亚洲第一页在线 I 国产放荡av国产精品 I 在线精品视频一区二区 I 免费黄色片在线观看 I 秋霞伊人网 I www.伊人 I 久草在线91 I 女人啪啪免费av大片 I 欧美一区二区综合 I 精品久久久久久天美传媒 I 黄色工厂在线观看 I 91精品国产色综合 I 动漫美女被到爽 I 丁香午夜激情

資金運(yùn)營(yíng)管理監(jiān)控系統(tǒng)交互設(shè)計(jì)、UI設(shè)計(jì)及VUE開(kāi)發(fā) 發(fā)表于:2024-05-14

金融軟件 | UI設(shè)計(jì) | 大屏設(shè)計(jì) | VUE 開(kāi)發(fā)

01 項(xiàng)目背景

九恒星科技股份有限公司是一家企業(yè)資金管理軟件產(chǎn)品及企業(yè)金融信息增值服務(wù)的提供商,致力于通過(guò)信息技術(shù)的應(yīng)用,幫助企業(yè)改善現(xiàn)金流;在金融機(jī)構(gòu)與企業(yè)之間架起橋梁,讓企業(yè)的資金流更加順暢。大屏主要應(yīng)用場(chǎng)景:公司會(huì)議、集團(tuán)視察、行業(yè)參觀等。領(lǐng)導(dǎo)駕駛艙是系統(tǒng)重要的展示功能,主要應(yīng)用場(chǎng)景:財(cái)務(wù)公司各級(jí)領(lǐng)導(dǎo)日常運(yùn)營(yíng)決策查詢、公司會(huì)議等,可作為系統(tǒng)特色功能,使用較為頻繁。

本次合作九恒星委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)PC端界面視覺(jué)設(shè)計(jì)、大屏界面設(shè)計(jì)以及VUE前端開(kāi)發(fā)。在交互設(shè)計(jì)中做了較多優(yōu)化,重點(diǎn)展示領(lǐng)導(dǎo)關(guān)注內(nèi)容,視覺(jué)設(shè)計(jì)嘗試了多種國(guó)際國(guó)內(nèi)中公認(rèn)較好的風(fēng)格和布局,在UI設(shè)計(jì)和開(kāi)發(fā)中,考慮到后期不同客戶的定制化程度高,重點(diǎn)在于母版布局的擴(kuò)展性和組件的通用性。最終設(shè)計(jì)出既有國(guó)際流行風(fēng)格、又契合國(guó)內(nèi)用戶喜好的UI設(shè)計(jì)。

02 項(xiàng)目概述

產(chǎn)品定位

通過(guò)智能化的數(shù)據(jù)分析和報(bào)告生成,幫助用戶深入了解資金運(yùn)營(yíng)狀況,識(shí)別潛在風(fēng)險(xiǎn),并優(yōu)化資金配置和投資決策。注重安全性和數(shù)據(jù)保護(hù),確保用戶的財(cái)務(wù)信息得到保密和可靠的處理。通過(guò)定制化服務(wù)和用戶友好的界面設(shè)計(jì),資金運(yùn)營(yíng)管理監(jiān)控系統(tǒng)旨在成為企業(yè)財(cái)務(wù)團(tuán)隊(duì)和高管層的得力助手,促進(jìn)資金管理的效率和透明度。

目標(biāo)用戶

系統(tǒng)主要的目標(biāo)用戶是財(cái)務(wù)部門人員、高管層、投資者以及審計(jì)與監(jiān)管機(jī)構(gòu)等。負(fù)責(zé)企業(yè)或組織財(cái)務(wù)管理的專業(yè)人士,需要監(jiān)控系統(tǒng)提供的數(shù)據(jù)支持決策,進(jìn)行資金流動(dòng)、投資和風(fēng)險(xiǎn)管理等方面的工作。負(fù)責(zé)對(duì)企業(yè)財(cái)務(wù)運(yùn)營(yíng)情況進(jìn)行審計(jì)和監(jiān)管的相關(guān)機(jī)構(gòu),可以通過(guò)監(jiān)控系統(tǒng)獲得必要的數(shù)據(jù)和信息用于審核和監(jiān)管。

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

本次藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)兩個(gè)系統(tǒng)的UI設(shè)計(jì),大屏的設(shè)計(jì)風(fēng)格是高科技感并體現(xiàn)出金融的元素,主色調(diào)采用藍(lán)色和黃色相結(jié)合,大屏中有許多動(dòng)效的使用。
 PC 端的設(shè)計(jì)采用簡(jiǎn)潔扁平化的卡片式設(shè)計(jì),以數(shù)據(jù)本身做視覺(jué)傳達(dá)設(shè)計(jì),突出主要數(shù)據(jù),減少用戶的視覺(jué)思考,提升用戶體驗(yàn)。

03 設(shè)計(jì)亮點(diǎn)

突出主要數(shù)據(jù),增加輪播動(dòng)效,以便用戶快速識(shí)別和理解

右側(cè)是客戶給的原型,只是把要展示的數(shù)據(jù)簡(jiǎn)單羅列了一下??紤]到大屏應(yīng)用場(chǎng)景,比如公司會(huì)議,集團(tuán)視察,行業(yè)參觀等,都是宏觀數(shù)據(jù)展示為主。所以在設(shè)計(jì)時(shí)不僅要考慮美觀性,更要考慮到整體的交互布局以及交互方式,確保關(guān)鍵數(shù)據(jù)和指標(biāo)在界面上以醒目的方式呈現(xiàn),以便用戶快速識(shí)別和理解。設(shè)計(jì)清晰簡(jiǎn)潔的布局,避免信息過(guò)載,使用戶能夠輕松找到需要的信息。

設(shè)計(jì)后三大主題采用輪播的形式,當(dāng)某一個(gè)主題轉(zhuǎn)到前面時(shí),周圍的數(shù)據(jù)會(huì)隨之變化,頁(yè)面添加適當(dāng)?shù)膭?dòng)效可以增強(qiáng)用戶與界面的互動(dòng)感,提升用戶體驗(yàn)和參與度。

卡片化設(shè)計(jì)提高了信息的獲取效率,多彩的色彩使用戶感受到朝氣蓬勃

PC端駕駛艙頁(yè)面雖然和大屏的內(nèi)容大部分相似,但使用的場(chǎng)景是財(cái)務(wù)公司各業(yè)務(wù)部門領(lǐng)導(dǎo)、數(shù)據(jù)分析人員使用,也包括各級(jí)領(lǐng)導(dǎo)日常運(yùn)營(yíng)決策查詢,公司會(huì)議。重點(diǎn)展示領(lǐng)導(dǎo)關(guān)注內(nèi)容,定制化程度高,所以重點(diǎn)在于母版布局的擴(kuò)展性和組件的通用性。

界面整體采用簡(jiǎn)潔風(fēng)格設(shè)計(jì),去除多余的裝飾和復(fù)雜元素,使用戶專注于核心信息,減少干擾。采用卡片化設(shè)計(jì),卡片設(shè)計(jì)將信息分割成獨(dú)立的模塊,使內(nèi)容更易管理和組織。通過(guò)卡片設(shè)計(jì),重要的信息可以被突出顯示,吸引用戶注意力,讓用戶能夠快速瀏覽和掃視頁(yè)面內(nèi)容,找到他們感興趣的信息。同時(shí)卡片設(shè)計(jì)可以更好的適配響應(yīng)式布局,適合不同屏幕尺寸和設(shè)備,能夠靈活地調(diào)整布局和展示方式。

提升頁(yè)面的整體美感,增強(qiáng)用戶的信任感和好感度

右側(cè)是“價(jià)格數(shù)據(jù)看板”的原型,是多個(gè)看板的一個(gè),原型中內(nèi)容過(guò)于雜亂,沒(méi)有統(tǒng)一規(guī)范,重點(diǎn)數(shù)據(jù)不突出等痛點(diǎn)。

看板的設(shè)計(jì)統(tǒng)一在上面加了一個(gè)小 banner 圖,banner 圖有的右側(cè)插畫和標(biāo)題相呼應(yīng),每個(gè)看板有一個(gè)主題顏色,下面數(shù)據(jù)沿用首頁(yè)的的卡片化設(shè)計(jì)。餅、柱、折線等控件設(shè)計(jì)新穎,合理,具有高可復(fù)用性。

04 界面欣賞