東華軟件-征信系統(tǒng)后臺(tái)管理界面設(shè)計(jì)

東華軟件-征信系統(tǒng)后臺(tái)管理界面設(shè)計(jì)

圖標(biāo)設(shè)計(jì) | 交互設(shè)計(jì) | 界面設(shè)計(jì) | Lay ui框架及組件開發(fā)

圖標(biāo)設(shè)計(jì) | 交互設(shè)計(jì) | 界面設(shè)計(jì) | Lay ui框架及組件開發(fā)

東華軟件股份公司成立于2001年1月,是深圳證券交易所的上市公司。公司以應(yīng)用軟件開發(fā)、計(jì)算機(jī)信息系統(tǒng)集成及信息技術(shù)服務(wù)為主要業(yè)務(wù),具有信息產(chǎn)業(yè)部計(jì)算機(jī)信息系統(tǒng)集成一級(jí)資質(zhì),是國(guó)家規(guī)劃布局內(nèi)的重點(diǎn)軟件企業(yè),是國(guó)內(nèi)最早通過(guò)軟件能力成熟度集成(CMMI)5級(jí)認(rèn)證的軟件企業(yè)之一。

本次征信系統(tǒng)后臺(tái)管理界面設(shè)計(jì)是與東華軟件眾多合作項(xiàng)目中的一個(gè),也是”征信系統(tǒng)“系列設(shè)計(jì)中的一環(huán)。后臺(tái)管理系統(tǒng)設(shè)計(jì)過(guò)程聚焦多任務(wù)并行,多角色操作,著重解決征信工作人員多任務(wù)切換,多場(chǎng)景使用過(guò)程中遇到的問題,優(yōu)化操作流程,合理布局界面,創(chuàng)新色彩搭配;最終輸出滿足操作要求,符合征信系統(tǒng)行業(yè)特色的設(shè)計(jì)視覺稿。

產(chǎn)品定位

為征信工作人員定制專屬后臺(tái)管理系統(tǒng),根據(jù)不同業(yè)務(wù)種類不同,制定相應(yīng)的業(yè)務(wù)辦理流程及方式,對(duì)業(yè)務(wù)實(shí)行分類管理,提高業(yè)務(wù)辦理效率;
根據(jù)服務(wù)人員角色權(quán)限定制不同功能及頁(yè)面,減少系統(tǒng)復(fù)雜程度,實(shí)現(xiàn)“專業(yè)人員辦理專業(yè)業(yè)務(wù)”的功能。

目標(biāo)用戶

金融機(jī)構(gòu)決策者

金融機(jī)構(gòu)決策者

商業(yè)銀行業(yè)務(wù)員

商業(yè)銀行業(yè)務(wù)員

征信系統(tǒng)管理人員

征信系統(tǒng)管理人員

反洗錢監(jiān)測(cè)人員

反洗錢監(jiān)測(cè)人員

稅務(wù)系統(tǒng)管理人員

稅務(wù)系統(tǒng)管理人員

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

金融
專業(yè)
舒適
沉穩(wěn)
大氣

內(nèi)容布局模塊化,靈活適應(yīng)多種場(chǎng)景

模塊化設(shè)計(jì)是B端產(chǎn)品的主流設(shè)計(jì)模式,尤其是針對(duì)多種管理權(quán)限的產(chǎn)品,模塊化設(shè)計(jì)能夠根據(jù)頁(yè)面需求靈活地編排內(nèi)容。我們?cè)跇?gòu)筑視覺體驗(yàn)過(guò)程中,運(yùn)用”情感化設(shè)計(jì)“理念,融入了產(chǎn)品品牌文化,品牌特征等元素,深入考察行業(yè)特性,將行業(yè)的金融風(fēng)格,產(chǎn)品的品牌特質(zhì)完美地提煉出來(lái)并體現(xiàn)在頁(yè)面中,使頁(yè)面呈現(xiàn)出豐富的層次變化和靈活地排版布局。

注重效率與人機(jī)交互體驗(yàn)的平衡

根據(jù)用戶的使用場(chǎng)景及客戶提供的原型圖,我們對(duì)系統(tǒng)架構(gòu)及交互邏輯進(jìn)行改造,我們力求在首頁(yè)中展現(xiàn)80%以上的入口按鈕,同時(shí)展現(xiàn)任意角色關(guān)心的全部關(guān)鍵信息,讓用戶無(wú)需頁(yè)面跳轉(zhuǎn)即可完成關(guān)鍵工作任務(wù)。針對(duì)用戶最常用的操作區(qū)域,我們進(jìn)行信息整合歸類,并進(jìn)行圖形化提煉,定制相應(yīng)的內(nèi)容看板及快捷菜單,簡(jiǎn)化列表信息,在完整展現(xiàn)用戶關(guān)心內(nèi)容的同時(shí)有效地規(guī)避了信息過(guò)多、過(guò)于冗長(zhǎng)而給用戶造成的心理負(fù)擔(dān)。

首頁(yè)界面設(shè)計(jì)-原型

原型

首頁(yè)界面設(shè)計(jì)

分步式導(dǎo)航,操作信息可視化管理

征信系統(tǒng)內(nèi)有大量數(shù)據(jù)需要錄入系統(tǒng)內(nèi),而這些數(shù)據(jù)的錄入很多需要在同一個(gè)頁(yè)面操作,面對(duì)如此需要錄入多的信息,我們提出了”操作分步驟,步驟可管理“的交互原則,進(jìn)而演化出分布式導(dǎo)航的步驟管理機(jī)制,最終確定左側(cè)為分布式導(dǎo)航,右側(cè)為數(shù)據(jù)錄入表單的頁(yè)面布局形式。在分布式導(dǎo)航下,用戶可以點(diǎn)擊任意步驟導(dǎo)航直接跳轉(zhuǎn)到該步驟表單頁(yè)進(jìn)行信息錄入。分布式導(dǎo)航可以承載最多2級(jí)的步驟導(dǎo)航,極大地增強(qiáng)了信息錄入階段分步錄入的可視化管理空間,將數(shù)據(jù)錄入效率提升到了新的高度。

清晰的頁(yè)面層級(jí),全面提升操作體驗(yàn)

成功的網(wǎng)頁(yè)設(shè)計(jì)界面要美觀是一方面,內(nèi)在頁(yè)面層級(jí)的規(guī)劃,邏輯跳轉(zhuǎn)則是網(wǎng)站設(shè)計(jì)的另一個(gè)核心點(diǎn)。藍(lán)藍(lán)設(shè)計(jì)在網(wǎng)站過(guò)程中不斷深挖用戶使用習(xí)慣,調(diào)整優(yōu)化頁(yè)面邏輯和頁(yè)面層級(jí),強(qiáng)調(diào)”好用、易用“操作原則,新增頁(yè)面頂部tab頁(yè)簽欄,優(yōu)化下拉選擇菜單的操作方式,讓用戶操作順手,步驟可掌控,結(jié)果可預(yù)知。

分步式導(dǎo)航,操作信息可視化管理

主要頁(yè)面說(shuō)明-個(gè)人用戶屬性管理

1全局導(dǎo)航欄:導(dǎo)航欄采用簡(jiǎn)化的圖標(biāo)設(shè)計(jì)形式設(shè)計(jì),鼠標(biāo)點(diǎn)擊一級(jí)菜單伸出二級(jí),三級(jí)菜單;這樣可以節(jié)省空間,提高頁(yè)面空間利用率。

2下拉列表框:下拉列表根據(jù)本系統(tǒng)作出相應(yīng)的優(yōu)化,下拉列表內(nèi)采用二級(jí)確認(rèn)形式,即下拉多選后需要再次點(diǎn)擊確認(rèn)按鈕,這樣可以防止誤操作,且支持多選操作,減少選擇點(diǎn)擊次數(shù),提高選擇效率。

主要頁(yè)面說(shuō)明-個(gè)人用戶屬性管理
主要頁(yè)面說(shuō)明-流程查詢

主要頁(yè)面說(shuō)明-流程查詢

3流程步驟:流程查詢界面步驟較多,采用流程導(dǎo)航方式能夠快速定位到相應(yīng)的條目區(qū)域,方便用戶查詢及操作。頁(yè)面向下滾動(dòng)時(shí),流程導(dǎo)航會(huì)固定在界面頂端,方便用戶點(diǎn)擊跳轉(zhuǎn)。

4授權(quán)檔案列表:授權(quán)檔案采用列表樣式展現(xiàn),列表的優(yōu)勢(shì)是直觀,整齊,能夠在有限的區(qū)域內(nèi)展示盡可能多的內(nèi)容。對(duì)于頁(yè)面內(nèi)容極多的流程查詢頁(yè)面來(lái)說(shuō),這種布局方式是最有效,最節(jié)省空間的。

5授權(quán)檔案列表:分頁(yè)器在列表中是很常見的,在本項(xiàng)目中,我們分頁(yè)器統(tǒng)一為復(fù)合式分頁(yè)器,即用戶既可以點(diǎn)擊”下一頁(yè)“跳轉(zhuǎn),還可以直接選擇頁(yè)數(shù)跳轉(zhuǎn),如果頁(yè)面較多,也可自定義輸入頁(yè)數(shù)跳轉(zhuǎn),這樣的分頁(yè)跳轉(zhuǎn)方式能夠很好地兼顧單頁(yè)跳轉(zhuǎn)和大幅度的隔頁(yè)跳轉(zhuǎn),方便用戶查詢數(shù)據(jù)。
由于業(yè)務(wù)需要,表單中保留批量操作按鈕,我們?cè)诿織l信息最左側(cè)添加復(fù)選框,同時(shí)增加”全選“復(fù)選框,用戶在使用過(guò)程中可以直接勾選條目,進(jìn)行批量操作。

主要頁(yè)面說(shuō)明-反洗錢系統(tǒng)幫助中心

6全局搜索框:反洗錢幫助中心主要是為用戶提供國(guó)家 新法規(guī)、命令,反洗錢知識(shí)等文件的查閱及普及,考慮到文件數(shù)量較多,我們?cè)黾恿巳炙阉鞴δ?,搜索結(jié)果直接以模擬文件的形式呈現(xiàn)在當(dāng)前頁(yè)面,方便用戶檢索及查閱。

7別樣的卡片展示方式:根據(jù)公文形式的不同,反洗錢幫助中心的文件大致分為國(guó)家規(guī)定,行業(yè)規(guī)定,管理辦法,命令等不同公文類型,為了區(qū)分不同類型的文件,我們用模擬政府文件的形式展示不同類型的公文,模擬政府公文形式展示,可以體現(xiàn)出平臺(tái)的專業(yè)性,嚴(yán)謹(jǐn)性,突出平臺(tái)的特色。

主要頁(yè)面說(shuō)明-反洗錢系統(tǒng)幫助中心
文件詳情

8文件詳情:和文件目錄保持一致,文件詳情頁(yè)面也采用了模擬真實(shí)文稿的方式來(lái)展現(xiàn)正文,同時(shí)還采用了模擬便簽的形式,將”下載“和”返回“按鈕置于正文頁(yè)面左側(cè),模擬真實(shí)場(chǎng)景的設(shè)計(jì)既保持了頁(yè)面風(fēng)格的統(tǒng)一,也為客戶帶來(lái)真實(shí),沉浸的視覺體驗(yàn)。

主要頁(yè)面說(shuō)明-個(gè)人信用等級(jí)

9客戶信息展示:本區(qū)域?yàn)榭蛻粜畔⒄故荆蛻魝€(gè)人信息,評(píng)級(jí)總結(jié),評(píng)級(jí)記錄,客戶信息雷達(dá)圖示意等信息??蛻粜畔⒗走_(dá)圖是本次設(shè)計(jì)的亮點(diǎn)所在,雷達(dá)示意圖能夠同時(shí)展現(xiàn)不同維度的數(shù)據(jù),也能夠直觀地展現(xiàn)出不同維度之間數(shù)據(jù)的對(duì)比結(jié)果。當(dāng)用戶鼠標(biāo)移至某一維度時(shí),會(huì)彈出相應(yīng)的懸浮框來(lái)展示當(dāng)前維度下具體信息。

10散點(diǎn)分布圖:散點(diǎn)分布圖是展示用戶信用等級(jí)分布的主要表現(xiàn)形式,散點(diǎn)圖可以從兩個(gè)維度展現(xiàn)用戶信用狀態(tài),用戶可直觀地看到自己當(dāng)前信用評(píng)級(jí)的排名情況。

11評(píng)級(jí)詳情:評(píng)級(jí)詳情是對(duì)客戶信用得分來(lái)源的系統(tǒng)性說(shuō)明,信用評(píng)級(jí)分為多個(gè)項(xiàng)目,每個(gè)項(xiàng)目有固定的權(quán)重和本人相應(yīng)的得分,將這些項(xiàng)目權(quán)重和分?jǐn)?shù)通過(guò)內(nèi)部相應(yīng)的算法即可得出個(gè)人信用綜合評(píng)分。由于項(xiàng)目?jī)?nèi)容較多,算法較復(fù)雜,列表以其信息承載量大,信息展示工整的優(yōu)點(diǎn),成為展示信息評(píng)級(jí)內(nèi)容的最佳展示方式。

主要頁(yè)面說(shuō)明-個(gè)人信用等級(jí)

控件展示

控件展示
控件展示

  返回