為金融安全防線的構(gòu)建、金融秩序的穩(wěn)定,貢獻(xiàn)力量

為金融安全防線的構(gòu)建、金融秩序的穩(wěn)定,貢獻(xiàn)力量

圖標(biāo)設(shè)計(jì) | 交互設(shè)計(jì) | 界面設(shè)計(jì) | html開發(fā)

圖標(biāo)設(shè)計(jì) | 交互設(shè)計(jì) | 界面設(shè)計(jì) | html開發(fā)

“銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng)”是銀豐新融第二次和藍(lán)藍(lán)設(shè)計(jì)合作,這次合作更加特殊,在疫情期間大家遠(yuǎn)程辦公。該項(xiàng)目主要是全面滿足各類監(jiān)管報(bào)送要求,各類監(jiān)管報(bào)表的靈活定制,滿足最新監(jiān)管規(guī)則要求,自動(dòng)靈活的數(shù)據(jù)采集加工等等。藍(lán)藍(lán)設(shè)計(jì)與銀豐新融合作,負(fù)責(zé)交互設(shè)計(jì),界面設(shè)計(jì)及開發(fā)。

這個(gè)項(xiàng)目的時(shí)間要求特別緊迫, 工作量非常大,特別是開發(fā)工作比較艱巨。對(duì)接負(fù)責(zé)人非常敬業(yè),每次反饋的文檔都特別的詳細(xì),并且每天都會(huì)開會(huì)討論當(dāng)天工作進(jìn)度及成果,及時(shí)溝通解決項(xiàng)目中遇到的各種問題和困難。盡管項(xiàng)目進(jìn)行的EXT開發(fā)過(guò)程中遇到一些困難,但經(jīng)過(guò)大家一起努力最終克服困難。

銀豐新融銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng) 產(chǎn)品定位

銀行業(yè)面臨人民銀行、銀監(jiān)會(huì)及外管局三大監(jiān)管當(dāng)局,其建設(shè)的監(jiān)管報(bào)送平臺(tái)應(yīng)充分滿足各報(bào)送模塊的報(bào)送

業(yè)務(wù)流程與監(jiān)管要求,主要包括:人行大集中統(tǒng)計(jì)報(bào)表、人行標(biāo)準(zhǔn)化、人行利率報(bào)備統(tǒng)計(jì)報(bào)表、人行支付指標(biāo)統(tǒng)計(jì)報(bào)表、人行理財(cái)產(chǎn)品報(bào)表、銀監(jiān)會(huì)EAST系統(tǒng)、1104報(bào)表等等二十余種監(jiān)管類報(bào)表。

財(cái)政銀行界面設(shè)計(jì) 目標(biāo)用戶

銀豐新融業(yè)務(wù)范圍覆蓋了銀行、保險(xiǎn)、第三方支付、信托、證券、擔(dān)保公司等金融企業(yè),客戶總數(shù)將近200家。其中,銀行業(yè)客戶占絕大部分比重,銀行客戶遍布國(guó)有銀行、政策性銀行、股份制商業(yè)銀行、城市商業(yè)銀行、農(nóng)村商業(yè)銀行、農(nóng)村合作銀行、農(nóng)村信用社以及村鎮(zhèn)銀行等各類銀行機(jī)構(gòu)。

財(cái)政銀行界面設(shè)計(jì) 設(shè)計(jì)風(fēng)格

第一版設(shè)計(jì)采用商務(wù)風(fēng)的藍(lán)色,整體采用比較流行的扁平風(fēng),簡(jiǎn)潔大方,布局方面,以大間距和卡片式布局等主流布局為主,主要突出信息本身。由于整個(gè)系統(tǒng)比較龐大,首頁(yè)是重新畫的原型然后設(shè)計(jì),其他頁(yè)在原有的原形基礎(chǔ)上進(jìn)行美化,設(shè)計(jì)整體完成后,還適配了紅色、橘黃色和綠色幾個(gè)版本。

首頁(yè)原型

銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng)軟件界面設(shè)計(jì)

首頁(yè)風(fēng)格采用深藍(lán)色和白色為主,淺藍(lán)為輔,整體較為穩(wěn)重且簡(jiǎn)潔大方。

整體布局采用左側(cè)為統(tǒng)計(jì)圖、代辦統(tǒng)計(jì)、常用菜單和公告。右側(cè)為用戶的登錄信息,以及用戶相關(guān)辦理數(shù)據(jù)和消息。

統(tǒng)計(jì)圖可根據(jù)后期需求進(jìn)行左右切換;代辦事項(xiàng)統(tǒng)計(jì)分成兩排羅列,后續(xù)可根據(jù)用戶的不同角色來(lái)定制最關(guān)心的前八個(gè)數(shù)據(jù);常用菜單可自定義;公告以時(shí)間時(shí)間軸的方式展示,左右切換顯示更多,點(diǎn)擊某條可查看詳情。

左側(cè)點(diǎn)擊全部、已審批、待辦事項(xiàng)或消息時(shí)下面內(nèi)容會(huì)隨之切換成相對(duì)應(yīng)的數(shù)據(jù)。

首頁(yè)定稿設(shè)計(jì)圖

財(cái)政銀行界面設(shè)計(jì)
銀豐新融銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng)軟件界面設(shè)計(jì)
銀豐新融銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng)軟件界面設(shè)計(jì)
財(cái)政銀行界面設(shè)計(jì)

EXT開發(fā)說(shuō)明

項(xiàng)目屬于后臺(tái)管理系統(tǒng),框架采用的是ext4.5版本,是在原系統(tǒng)的上進(jìn)行二次開發(fā)升級(jí),保留原先接口大大縮減了客戶的開發(fā)時(shí)間,整體共有二十多頁(yè),其中還有四套不同主題的換膚功能。整個(gè)系統(tǒng)兼容的主流瀏覽器為ie、火狐、google和safari。頁(yè)面適配于1920~1366。

開發(fā)過(guò)程中為了兼顧原有系統(tǒng)和設(shè)計(jì)圖遇到很多困難,ext原有控件比較單一很難達(dá)到設(shè)計(jì)圖上的樣式,比如首頁(yè)的一些快捷入口每個(gè)模塊要隨著內(nèi)容的多少進(jìn)行自適應(yīng)并且需要左右切換,還有聊天窗口的樣式等等。盡管困難重重藍(lán)藍(lán)設(shè)計(jì)在整體項(xiàng)目進(jìn)行中并沒有顧此失彼,而是把需要克服的問題都一一羅列出來(lái),每天會(huì)進(jìn)行會(huì)議討論總結(jié)把困難逐個(gè)克服。最后通過(guò)大家的共同努力給整個(gè)想項(xiàng)目畫上了完美的句號(hào)。更多的細(xì)節(jié)展示請(qǐng)看視頻。

財(cái)政銀行界面設(shè)計(jì)
銀豐新融銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng)軟件界面設(shè)計(jì)

數(shù)據(jù)明細(xì)頁(yè)原型

財(cái)政銀行界面設(shè)計(jì)

數(shù)據(jù)明細(xì)頁(yè)是在原有原型基礎(chǔ)上進(jìn)行優(yōu)化設(shè)計(jì),所以布局上沒有太大的改變。設(shè)計(jì)的時(shí)候在信息組織上做了小的調(diào)整,比如單選框換了一種表現(xiàn)方式,更加直觀減少用戶的視覺思考。下面“數(shù)據(jù)源物理表字段”中下面的按鈕調(diào)到了和標(biāo)題一行的右側(cè),這樣既節(jié)省了一行位置,又和上面模塊的按鈕相對(duì)應(yīng)。再列表的設(shè)計(jì)上,也不同于傳統(tǒng)表格,進(jìn)行了創(chuàng)新使視覺效果更加清新。

數(shù)據(jù)明細(xì)頁(yè)設(shè)計(jì)圖

監(jiān)管報(bào)送軟件UI設(shè)計(jì)及EXT開發(fā)

數(shù)據(jù)報(bào)錯(cuò)頁(yè)原型

監(jiān)管報(bào)送軟件UI設(shè)計(jì)及EXT開發(fā)

數(shù)據(jù)報(bào)錯(cuò)頁(yè)是在原有原型基礎(chǔ)上進(jìn)行優(yōu)化設(shè)計(jì),所以布局上沒有太大的改變。在風(fēng)格上進(jìn)行調(diào)整按鈕中的圖標(biāo)藍(lán)藍(lán)設(shè)計(jì)進(jìn)行了統(tǒng)一的改版設(shè)計(jì),由于后續(xù)該系統(tǒng)會(huì)有換膚功能,所以在按鈕這塊為了使按鈕在其他色調(diào)的界面上也較為和諧,藍(lán)藍(lán)設(shè)計(jì)根據(jù)每個(gè)圖標(biāo)的含義進(jìn)行了雙色設(shè)計(jì)。該頁(yè)面的每個(gè)模塊都有展開收起的功能,下面是每個(gè)模塊收起時(shí)的效果。

數(shù)據(jù)報(bào)錯(cuò)頁(yè)設(shè)計(jì)圖

監(jiān)管報(bào)送軟件UI設(shè)計(jì)及EXT開發(fā)
監(jiān)管報(bào)送軟件UI設(shè)計(jì)及EXT開發(fā)

銀豐新融銀行統(tǒng)一監(jiān)管報(bào)送系統(tǒng)軟件界面設(shè)計(jì)
監(jiān)管報(bào)送軟件UI設(shè)計(jì)及EXT開發(fā)

監(jiān)管報(bào)送軟件UI設(shè)計(jì)及EXT開發(fā)

  返回