東華軟件股份公司成立于2001年1月,是深圳證券交易所的上市公司。公司以應用軟件開發(fā)、計算機信息系統(tǒng)集成及信息技術服務為主要業(yè)務,具有信息產(chǎn)業(yè)部計算機信息系統(tǒng)集成一級資質(zhì),是國家規(guī)劃布局內(nèi)的重點軟件企業(yè),是國內(nèi)最早通過軟件能力成熟度集成(CMMI)5級認證的軟件企業(yè)之一。
本次征信系統(tǒng)后臺管理界面設計是與東華軟件眾多合作項目中的一個,也是”征信系統(tǒng)“系列設計中的一環(huán)。后臺管理系統(tǒng)設計過程聚焦多任務并行,多角色操作,著重解決征信工作人員多任務切換,多場景使用過程中遇到的問題,優(yōu)化操作流程,合理布局界面,創(chuàng)新色彩搭配;最終輸出滿足操作要求,符合征信系統(tǒng)行業(yè)特色的設計視覺稿。
產(chǎn)品定位
為征信工作人員定制專屬后臺管理系統(tǒng),根據(jù)不同業(yè)務種類不同,制定相應的業(yè)務辦理流程及方式,對業(yè)務實行分類管理,提高業(yè)務辦理效率;
根據(jù)服務人員角色權限定制不同功能及頁面,減少系統(tǒng)復雜程度,實現(xiàn)“專業(yè)人員辦理專業(yè)業(yè)務”的功能。
目標用戶
金融機構(gòu)決策者
商業(yè)銀行業(yè)務員
征信系統(tǒng)管理人員
反洗錢監(jiān)測人員
稅務系統(tǒng)管理人員
設計風格
內(nèi)容布局模塊化,靈活適應多種場景
模塊化設計是B端產(chǎn)品的主流設計模式,尤其是針對多種管理權限的產(chǎn)品,模塊化設計能夠根據(jù)頁面需求靈活地編排內(nèi)容。我們在構(gòu)筑視覺體驗過程中,運用”情感化設計“理念,融入了產(chǎn)品品牌文化,品牌特征等元素,深入考察行業(yè)特性,將行業(yè)的金融風格,產(chǎn)品的品牌特質(zhì)完美地提煉出來并體現(xiàn)在頁面中,使頁面呈現(xiàn)出豐富的層次變化和靈活地排版布局。
注重效率與人機交互體驗的平衡
根據(jù)用戶的使用場景及客戶提供的原型圖,我們對系統(tǒng)架構(gòu)及交互邏輯進行改造,我們力求在首頁中展現(xiàn)80%以上的入口按鈕,同時展現(xiàn)任意角色關心的全部關鍵信息,讓用戶無需頁面跳轉(zhuǎn)即可完成關鍵工作任務。針對用戶最常用的操作區(qū)域,我們進行信息整合歸類,并進行圖形化提煉,定制相應的內(nèi)容看板及快捷菜單,簡化列表信息,在完整展現(xiàn)用戶關心內(nèi)容的同時有效地規(guī)避了信息過多、過于冗長而給用戶造成的心理負擔。
原型
分步式導航,操作信息可視化管理
征信系統(tǒng)內(nèi)有大量數(shù)據(jù)需要錄入系統(tǒng)內(nèi),而這些數(shù)據(jù)的錄入很多需要在同一個頁面操作,面對如此需要錄入多的信息,我們提出了”操作分步驟,步驟可管理“的交互原則,進而演化出分布式導航的步驟管理機制,最終確定左側(cè)為分布式導航,右側(cè)為數(shù)據(jù)錄入表單的頁面布局形式。在分布式導航下,用戶可以點擊任意步驟導航直接跳轉(zhuǎn)到該步驟表單頁進行信息錄入。分布式導航可以承載最多2級的步驟導航,極大地增強了信息錄入階段分步錄入的可視化管理空間,將數(shù)據(jù)錄入效率提升到了新的高度。
清晰的頁面層級,全面提升操作體驗
成功的網(wǎng)頁設計界面要美觀是一方面,內(nèi)在頁面層級的規(guī)劃,邏輯跳轉(zhuǎn)則是網(wǎng)站設計的另一個核心點。藍藍設計在網(wǎng)站過程中不斷深挖用戶使用習慣,調(diào)整優(yōu)化頁面邏輯和頁面層級,強調(diào)”好用、易用“操作原則,新增頁面頂部tab頁簽欄,優(yōu)化下拉選擇菜單的操作方式,讓用戶操作順手,步驟可掌控,結(jié)果可預知。
主要頁面說明-個人用戶屬性管理
1全局導航欄:導航欄采用簡化的圖標設計形式設計,鼠標點擊一級菜單伸出二級,三級菜單;這樣可以節(jié)省空間,提高頁面空間利用率。
2下拉列表框:下拉列表根據(jù)本系統(tǒng)作出相應的優(yōu)化,下拉列表內(nèi)采用二級確認形式,即下拉多選后需要再次點擊確認按鈕,這樣可以防止誤操作,且支持多選操作,減少選擇點擊次數(shù),提高選擇效率。
主要頁面說明-流程查詢
3流程步驟:流程查詢界面步驟較多,采用流程導航方式能夠快速定位到相應的條目區(qū)域,方便用戶查詢及操作。頁面向下滾動時,流程導航會固定在界面頂端,方便用戶點擊跳轉(zhuǎn)。
4授權檔案列表:授權檔案采用列表樣式展現(xiàn),列表的優(yōu)勢是直觀,整齊,能夠在有限的區(qū)域內(nèi)展示盡可能多的內(nèi)容。對于頁面內(nèi)容極多的流程查詢頁面來說,這種布局方式是最有效,最節(jié)省空間的。
5授權檔案列表:分頁器在列表中是很常見的,在本項目中,我們分頁器統(tǒng)一為復合式分頁器,即用戶既可以點擊”下一頁“跳轉(zhuǎn),還可以直接選擇頁數(shù)跳轉(zhuǎn),如果頁面較多,也可自定義輸入頁數(shù)跳轉(zhuǎn),這樣的分頁跳轉(zhuǎn)方式能夠很好地兼顧單頁跳轉(zhuǎn)和大幅度的隔頁跳轉(zhuǎn),方便用戶查詢數(shù)據(jù)。
由于業(yè)務需要,表單中保留批量操作按鈕,我們在每條信息最左側(cè)添加復選框,同時增加”全選“復選框,用戶在使用過程中可以直接勾選條目,進行批量操作。
主要頁面說明-反洗錢系統(tǒng)幫助中心
6全局搜索框:反洗錢幫助中心主要是為用戶提供國家 新法規(guī)、命令,反洗錢知識等文件的查閱及普及,考慮到文件數(shù)量較多,我們增加了全局搜索功能,搜索結(jié)果直接以模擬文件的形式呈現(xiàn)在當前頁面,方便用戶檢索及查閱。
7別樣的卡片展示方式:根據(jù)公文形式的不同,反洗錢幫助中心的文件大致分為國家規(guī)定,行業(yè)規(guī)定,管理辦法,命令等不同公文類型,為了區(qū)分不同類型的文件,我們用模擬政府文件的形式展示不同類型的公文,模擬政府公文形式展示,可以體現(xiàn)出平臺的專業(yè)性,嚴謹性,突出平臺的特色。
8文件詳情:和文件目錄保持一致,文件詳情頁面也采用了模擬真實文稿的方式來展現(xiàn)正文,同時還采用了模擬便簽的形式,將”下載“和”返回“按鈕置于正文頁面左側(cè),模擬真實場景的設計既保持了頁面風格的統(tǒng)一,也為客戶帶來真實,沉浸的視覺體驗。
主要頁面說明-個人信用等級
9客戶信息展示:本區(qū)域為客戶信息展示,包括客戶個人信息,評級總結(jié),評級記錄,客戶信息雷達圖示意等信息。客戶信息雷達圖是本次設計的亮點所在,雷達示意圖能夠同時展現(xiàn)不同維度的數(shù)據(jù),也能夠直觀地展現(xiàn)出不同維度之間數(shù)據(jù)的對比結(jié)果。當用戶鼠標移至某一維度時,會彈出相應的懸浮框來展示當前維度下具體信息。
10散點分布圖:散點分布圖是展示用戶信用等級分布的主要表現(xiàn)形式,散點圖可以從兩個維度展現(xiàn)用戶信用狀態(tài),用戶可直觀地看到自己當前信用評級的排名情況。
11評級詳情:評級詳情是對客戶信用得分來源的系統(tǒng)性說明,信用評級分為多個項目,每個項目有固定的權重和本人相應的得分,將這些項目權重和分數(shù)通過內(nèi)部相應的算法即可得出個人信用綜合評分。由于項目內(nèi)容較多,算法較復雜,列表以其信息承載量大,信息展示工整的優(yōu)點,成為展示信息評級內(nèi)容的最佳展示方式。