國家開發(fā)銀行 高飛

1 背景目的

制定企業(yè)統(tǒng)一的功能交互設(shè)計(jì)標(biāo)準(zhǔn)，由上至下規(guī)范各層級功能設(shè)計(jì)方式、展現(xiàn)方式，可達(dá)到提升易用性，提高工作效率的目標(biāo)，同時(shí)保證企業(yè)信息化規(guī)范、有序發(fā)展。

2 設(shè)計(jì)規(guī)范層級

功能交互設(shè)計(jì)規(guī)范根據(jù)標(biāo)準(zhǔn)化精細(xì)程度，可分為四個(gè)層級。由粗放到精細(xì)，可分為企業(yè)級、機(jī)構(gòu)級、應(yīng)用級和展現(xiàn)級，如圖1所示。

圖1

企業(yè)級指在企業(yè)層面制定信息化規(guī)范，如主色調(diào)，機(jī)構(gòu)標(biāo)識等，但對系統(tǒng)的具體類別進(jìn)行區(qū)分，不關(guān)注各系統(tǒng)功能操作方式、布局，不對各組件、文字制定詳細(xì)規(guī)定。

機(jī)構(gòu)級可將系統(tǒng)分為四類，分別是外部業(yè)務(wù)系統(tǒng)、內(nèi)部業(yè)務(wù)系統(tǒng)、內(nèi)部辦公系統(tǒng)、移動(dòng)端系統(tǒng)，每個(gè)種類的系統(tǒng)形成自己的系統(tǒng)群，根據(jù)面向用戶不同擁有自己類別的設(shè)計(jì)規(guī)范，各類系統(tǒng)間規(guī)范可不相同。

應(yīng)用級主要指對單個(gè)信息系統(tǒng)的設(shè)計(jì)規(guī)范，各信息系統(tǒng)內(nèi)部的不同模塊間，應(yīng)在功能交互方式、布局、樣式色調(diào)、風(fēng)格上保持一致。

展現(xiàn)級是在信息系統(tǒng)的具體頁面上，對組件校驗(yàn)方式、組件樣式、文字字體、文字表述、組件和文字的尺寸等方面進(jìn)行規(guī)范。

3 交互設(shè)計(jì)實(shí)例

具體到單個(gè)系統(tǒng)，交互設(shè)計(jì)第一步，應(yīng)保證功能完整性，需梳理系統(tǒng)的完整功能列表。為支撐某項(xiàng)業(yè)務(wù)，系統(tǒng)基本功能至少包括業(yè)務(wù)查詢、業(yè)務(wù)處理、業(yè)務(wù)統(tǒng)計(jì)三大類，如圖2所示。

在業(yè)務(wù)處理中，又可細(xì)化為業(yè)務(wù)開展、業(yè)務(wù)變更/維護(hù)等細(xì)類。以業(yè)務(wù)開展為例，繼續(xù)細(xì)化又可分為業(yè)務(wù)入口，業(yè)務(wù)操作等功能，如圖3所示。

圖2

圖3

第二步，根據(jù)業(yè)務(wù)特點(diǎn)的不同，落實(shí)不同業(yè)務(wù)的具體實(shí)現(xiàn)方式。以銀行中長期信貸業(yè)務(wù)為例，主要需考慮的業(yè)務(wù)特性是業(yè)務(wù)觸發(fā)方式、業(yè)務(wù)操作頻率以及業(yè)務(wù)操作范圍。下面分別以貸中、貸后較為典型的兩種業(yè)務(wù)入口為例進(jìn)行說明。

3.1 貸中貸款發(fā)放

貸中業(yè)務(wù)如貸款發(fā)放，觸發(fā)方式是客戶根據(jù)客戶申請，提交發(fā)放流程，操作頻率是不定期，操作范圍是客戶一個(gè)合同的一筆發(fā)放。

該業(yè)務(wù)的入口是典型的單次、不定期業(yè)務(wù)待辦列表，交互設(shè)計(jì)與布局示例如下，如圖4所示。

圖4

頁面布局可分為三部分，分別是輸入?yún)^(qū)、操作區(qū)和輸出區(qū)。

輸入?yún)^(qū)用于輸入查詢條件。除了針對具體業(yè)務(wù)的查詢條件(如項(xiàng)目編號等)外，還應(yīng)考慮對于流程查詢的設(shè)計(jì)。此處的例子中，有“待辦理”“未提交”“流程中”三個(gè)流程查詢條件。如默認(rèn)選項(xiàng)“待辦理”會(huì)展現(xiàn)所有可發(fā)放的合同?！拔刺峤弧笨蛇x項(xiàng)，用于展現(xiàn)已創(chuàng)建審批流程、但未提交的業(yè)務(wù)?！傲鞒讨小边x項(xiàng)，用于跟蹤流程進(jìn)度。此外，對于流程結(jié)束后的業(yè)務(wù)，還應(yīng)設(shè)置查詢歷史信息的功能(未在圖中展示)。

操作區(qū)用于對輸入數(shù)據(jù)進(jìn)行操作。如“導(dǎo)出”“重置”“查詢”等按鈕。按鈕的種類和順序應(yīng)進(jìn)行統(tǒng)一，不能出現(xiàn)“查詢”按鈕在不同頁面排序位置不同的情況。若進(jìn)一步細(xì)化，還可對“查詢”按鈕設(shè)置專門底色，用于突出顯示，有助于提升用戶體驗(yàn)。

輸出區(qū)用于展現(xiàn)查詢結(jié)果。結(jié)果數(shù)據(jù)分頁展示，條數(shù)固定。若某條合同不可再繼續(xù)發(fā)放，則不進(jìn)行展現(xiàn)。本業(yè)務(wù)是一次發(fā)起一條數(shù)據(jù)，因此不用設(shè)置多選鈕，而是在最右側(cè)列在每條數(shù)據(jù)上設(shè)置“操作”按鈕。

各按鈕若使用其他布局方式亦可，但需要在一定范圍內(nèi)統(tǒng)一。

3.2 貸后資產(chǎn)質(zhì)量分類

貸后業(yè)務(wù)，如資產(chǎn)質(zhì)量分類，觸發(fā)方式可能月末固定時(shí)點(diǎn)，操作頻率是每個(gè)月月末，操作范圍是某客戶經(jīng)理管轄的所有項(xiàng)目。

該業(yè)務(wù)的入口，是典型的一次性批量業(yè)務(wù)待辦列表，輸入?yún)^(qū)、操作區(qū)與單次操作業(yè)務(wù)基本一致，輸出區(qū)有所變化，如圖5所示。

圖5

輸出區(qū)展現(xiàn)所有可操作的數(shù)據(jù)，若是批量操作，則完成操作的數(shù)據(jù)不再展現(xiàn)在列表中。數(shù)據(jù)列表底部，可設(shè)置有“全選”“反選”“清空”“批量操作”“全量操作”按鈕(可根據(jù)實(shí)際情況增減)?！芭坎僮鳌敝会槍x中的數(shù)據(jù)進(jìn)行操作，“全量操作”是無論是否對數(shù)據(jù)進(jìn)行勾選、無論數(shù)據(jù)是否展現(xiàn)在本頁中，都對全量數(shù)據(jù)進(jìn)行操作。此處的“操作”只是文字示意，指的是具體的“提交”動(dòng)作。

另外，若批量操作業(yè)務(wù)不是頻率內(nèi)一次性操作，而是區(qū)間段內(nèi)多次操作，則輸出區(qū)應(yīng)有所變化，可在待辦列表中增加最近一次操作時(shí)間，并能查詢到歷次操作結(jié)果。

4 原則總結(jié)

不同的觸發(fā)方式、操作頻率、操作范圍對功能的具體實(shí)現(xiàn)有直接影響，從而程序設(shè)計(jì)、代碼開發(fā)的方式，因此需求分析、交互設(shè)計(jì)至關(guān)重要，標(biāo)準(zhǔn)化的交互設(shè)計(jì)可很大程度增加代碼、數(shù)據(jù)庫設(shè)計(jì)的復(fù)用，強(qiáng)化系統(tǒng)規(guī)范性的同時(shí)提升開發(fā)效率。

4.1 業(yè)務(wù)入口基本原則

4.1.1 輸入、輸出區(qū)

(1)輸入?yún)^(qū)查詢條件。每行查詢條件個(gè)數(shù)固定(非強(qiáng)制)，查詢條件順序固定(非強(qiáng)制。如查詢條件有項(xiàng)目編號、項(xiàng)目名稱，則建議都按照先編號、后名稱的順序出現(xiàn))。

(2)輸入?yún)^(qū)查詢條件與輸出區(qū)表頭。列表中表頭與查詢條件相同時(shí)，文字描述應(yīng)保持一致(如避免出現(xiàn)一處描述為借款人，一處為客戶的情況)。

(3)輸出區(qū)布局。盡量安排在一個(gè)頁面內(nèi)顯示出所有內(nèi)容，無需向右滑動(dòng)滾動(dòng)條即可查看全部信息。

4.1.2 操作區(qū)

(1)按鈕。按鈕應(yīng)在錄入信息區(qū)的下側(cè)居中排列，順序固定(例如“查詢”按鈕都在最左側(cè))。

(2)盡可能減少鼠標(biāo)點(diǎn)擊次數(shù)和移動(dòng)距離。

4.2 推廣實(shí)施

推廣設(shè)計(jì)規(guī)范時(shí)，應(yīng)遵循由小到大，從下向上的原則。首先每個(gè)系統(tǒng)內(nèi)部完成規(guī)范統(tǒng)一，可從具體的錄入控件開始，再到交互、布局，之后同類型系統(tǒng)可進(jìn)行統(tǒng)一。

[1] Jesse James Garrett.用戶體驗(yàn)要素:以用戶為中心的產(chǎn)品設(shè)計(jì)[M].范曉燕,譯.北京:機(jī)械工業(yè)出版社,2011.

[2] 任婕.騰訊網(wǎng)UED體驗(yàn)設(shè)計(jì)之旅[M].北京:電子工業(yè)出版社,2015.