基于控件的國(guó)家電網(wǎng)公司信息系統(tǒng)界面方案的設(shè)計(jì)與實(shí)現(xiàn)

邢曉喬+門浩+劉迪

摘要：為促進(jìn)國(guó)家電網(wǎng)公司信息系統(tǒng)桌面端界面樣式的規(guī)范化、人性化和簡(jiǎn)潔化，提出了建設(shè)一套以用戶體驗(yàn)設(shè)計(jì)為核心，覆蓋國(guó)家電網(wǎng)公司信息系統(tǒng)桌面端特點(diǎn)，具有國(guó)家電網(wǎng)公司大家庭特色的設(shè)計(jì)方案。文章重點(diǎn)介紹了用戶體驗(yàn)設(shè)計(jì)過(guò)程，基于控件的界面元素和布局結(jié)構(gòu)的界面設(shè)計(jì)，以及在大型企業(yè)各類項(xiàng)目的實(shí)際應(yīng)用案例，以及下一步產(chǎn)品優(yōu)化的設(shè)計(jì)思路。該設(shè)計(jì)方案實(shí)現(xiàn)了國(guó)家電網(wǎng)公司信息系統(tǒng)桌面端的全套控件樣式，為桌面端信息系統(tǒng)的人性化改進(jìn)提供了有力支持，推動(dòng)桌面端信息系統(tǒng)界面樣式和風(fēng)格具有國(guó)家電網(wǎng)特色的逐步發(fā)展。

關(guān)鍵詞：用戶體驗(yàn)；控件；界面樣式；國(guó)網(wǎng)信息系統(tǒng)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）33-0192-04

在當(dāng)今商業(yè)社會(huì)時(shí)代，用戶體驗(yàn)已成為一個(gè)產(chǎn)品或服務(wù)品質(zhì)的標(biāo)志。蘋果憑借“用戶體驗(yàn)至上”的理念重塑了眾多行業(yè)，谷歌秉承“以用戶為中心，其他一切水到渠成”的理念改變了人們的生活方式，互聯(lián)網(wǎng)的極速發(fā)展使得用戶體驗(yàn)設(shè)計(jì)有著日新月異的變化。

國(guó)家電網(wǎng)作為國(guó)家基礎(chǔ)建設(shè)的支柱產(chǎn)業(yè)，信息化水平已達(dá)到國(guó)內(nèi)領(lǐng)先，國(guó)際先進(jìn)，初步建成數(shù)字化電網(wǎng)。在此基礎(chǔ)上，國(guó)家電網(wǎng)公司對(duì)信息系統(tǒng)建設(shè)提出了更高的要求，旨在優(yōu)化、簡(jiǎn)化系統(tǒng)功能，提升易用性，給基層員工減負(fù)，并將用戶體驗(yàn)的好壞作為下一步提升服務(wù)和產(chǎn)品的重要考量指標(biāo)，將“你用電，我用心”這一理念體現(xiàn)在國(guó)家電網(wǎng)公司業(yè)務(wù)的各個(gè)方面。

國(guó)家電網(wǎng)信息系統(tǒng)業(yè)務(wù)覆蓋面廣、復(fù)雜程度高、內(nèi)容形式繁雜多樣。在傳統(tǒng)桌面端信息系統(tǒng)建設(shè)過(guò)程中，重點(diǎn)多放在功能的實(shí)現(xiàn)和多功能集成上，而鮮少考慮用戶體驗(yàn)設(shè)計(jì)，由于不同成員單位分別設(shè)計(jì)，各級(jí)業(yè)務(wù)部門根據(jù)自身業(yè)務(wù)情況建設(shè)各自的桌面端信息系統(tǒng)，集團(tuán)整體管控力度不夠，導(dǎo)致現(xiàn)有的桌面端信息系統(tǒng)眾多，設(shè)計(jì)繁雜，交互邏輯不統(tǒng)一等問(wèn)題。目前，國(guó)內(nèi)大型傳統(tǒng)企業(yè)的信息系統(tǒng)設(shè)計(jì)處于發(fā)展階段，已經(jīng)投入使用的信息系統(tǒng)主要以信息表達(dá)為主，而界面設(shè)計(jì)和用戶體驗(yàn)尚未成熟。國(guó)家電網(wǎng)大家族中的桌面端信息系統(tǒng)，如何既可以緊跟體驗(yàn)設(shè)計(jì)趨勢(shì)，又具有國(guó)家電網(wǎng)公司家族特色，成為了當(dāng)下重要的問(wèn)題。因此，一套基于國(guó)網(wǎng)信息系統(tǒng)特點(diǎn)的，緊跟體驗(yàn)設(shè)計(jì)趨勢(shì)的設(shè)計(jì)方案是必行之勢(shì)。

設(shè)計(jì)方案通過(guò)調(diào)研分析國(guó)家電網(wǎng)公司現(xiàn)有系統(tǒng)，在有序整合資源，統(tǒng)一規(guī)劃設(shè)計(jì)，完善界面元素和提升用戶體驗(yàn)四個(gè)方面，全面構(gòu)建一套界面設(shè)計(jì)體系，促進(jìn)界面整體設(shè)計(jì)感的提升。

1 用戶體驗(yàn)設(shè)計(jì)

1.1 用戶體驗(yàn)設(shè)計(jì)過(guò)程

通過(guò)分析國(guó)網(wǎng)公司現(xiàn)有的桌面端信息系統(tǒng)情況，以及信息系統(tǒng)建設(shè)過(guò)程，用戶體驗(yàn)設(shè)計(jì)過(guò)程選取了《交互設(shè)計(jì)精髓3》一書中的目標(biāo)導(dǎo)向的設(shè)計(jì)方法，并將設(shè)計(jì)方法結(jié)合自身設(shè)計(jì)需求進(jìn)行了精化細(xì)化。

目標(biāo)導(dǎo)向的設(shè)計(jì)方法綜合了以下這些方面的技術(shù)：人種學(xué)研究、利益相關(guān)者訪談，市場(chǎng)調(diào)研、詳細(xì)用戶模型、基于場(chǎng)景的設(shè)計(jì)，以及一組基本的交互設(shè)計(jì)原則和模式。采用這種方法能夠得到既滿足用戶的需要和目標(biāo)，同時(shí)又能滿足業(yè)務(wù)和技術(shù)需求的解決方案。此設(shè)計(jì)過(guò)程大致可以分為6個(gè)階段，即研究、建模、定義需求、定義框架、細(xì)化、以及支持。

本次設(shè)計(jì)產(chǎn)品的過(guò)程分為五大部分：研究、建模、定義需求、定義框架、細(xì)化。從調(diào)研使用國(guó)網(wǎng)公司桌面端信息系統(tǒng)的用戶及應(yīng)用領(lǐng)域出發(fā)，基于用戶的使用場(chǎng)景進(jìn)行分類，挖掘并梳理業(yè)務(wù)需求，將需求進(jìn)行整理和結(jié)構(gòu)化分類，最后基于不同的行為進(jìn)行界面設(shè)計(jì)以實(shí)現(xiàn)基于控件的國(guó)家電網(wǎng)公司信息系統(tǒng)界面方案的設(shè)計(jì)。

1.2 調(diào)研

調(diào)研分為兩個(gè)階段：預(yù)調(diào)研和用戶調(diào)研。

1.2.1 預(yù)調(diào)研

預(yù)調(diào)研（Pilot Testing）是在正式研究之前做的初步實(shí)驗(yàn)，預(yù)調(diào)研的目的是用于發(fā)現(xiàn)線索，為正式的實(shí)驗(yàn)研究提供方向和引導(dǎo)，從而訪談提綱可以根據(jù)預(yù)調(diào)研發(fā)現(xiàn)的線索來(lái)擬定。預(yù)調(diào)研的范圍抽樣選取了國(guó)家電網(wǎng)公司13個(gè)業(yè)務(wù)中心的覆蓋核心業(yè)務(wù)的39個(gè)桌面端信息系統(tǒng)，并對(duì)其使用的業(yè)務(wù)部門，系統(tǒng)類型及用戶數(shù)量進(jìn)行了統(tǒng)計(jì)。

從預(yù)調(diào)研的數(shù)據(jù)統(tǒng)計(jì)分析，桌面端信息系統(tǒng)中用戶使用數(shù)量上100萬(wàn)的有4個(gè)系統(tǒng)，分別為某信息化管理系統(tǒng)、某網(wǎng)站網(wǎng)頁(yè)版（對(duì)外）、某招聘平臺(tái)和某學(xué)習(xí)平臺(tái)，為接下來(lái)的調(diào)研提供了更有針對(duì)性的用戶調(diào)研重點(diǎn)。

1.2.2用戶調(diào)研

根據(jù)上一輪的預(yù)調(diào)研，制定了針對(duì)性的調(diào)研方案，依據(jù)上一階段的預(yù)調(diào)研，用戶調(diào)研的提綱包括系統(tǒng)的使用目的、使用過(guò)程、使用感受、預(yù)期目標(biāo)等內(nèi)容。此階段的用戶調(diào)研需要從用戶那里收集數(shù)據(jù)，記錄他們使用系統(tǒng)過(guò)程中用戶體驗(yàn)的各種現(xiàn)象和感受，并了解他們的使用目標(biāo)和預(yù)期目標(biāo)，進(jìn)而進(jìn)行整理、去重、篩選重新分析用戶口中的實(shí)際體驗(yàn)，以挖掘出他們真實(shí)需求和影響桌面端信息系統(tǒng)建設(shè)的用戶體驗(yàn)因素。

用戶調(diào)研抽取了預(yù)調(diào)研的39個(gè)桌面端信息系統(tǒng)中的31個(gè)典型系統(tǒng)，調(diào)研時(shí)間為2016年1月至2016年3月，以系統(tǒng)為單位，基于不同的使用角色進(jìn)行了87名用戶的用戶調(diào)研。

1.3 建模

通過(guò)用戶調(diào)研及深入分析，我們研究出基本所有的桌面端信息系統(tǒng)業(yè)務(wù)都是由特定形式的數(shù)據(jù)錄入、展示、維護(hù)這三種基礎(chǔ)場(chǎng)景進(jìn)行包含業(yè)務(wù)邏輯的適當(dāng)組合而完成。

數(shù)據(jù)錄入場(chǎng)景以表單為典型代表，需要用戶輸入數(shù)據(jù)，數(shù)據(jù)是從使用用戶進(jìn)入系統(tǒng)；數(shù)據(jù)展示場(chǎng)景以表格、列表、網(wǎng)格等格式顯示，往往伴隨查詢，數(shù)據(jù)是由系統(tǒng)展示給用戶；數(shù)據(jù)維護(hù)場(chǎng)景是例如用戶對(duì)數(shù)據(jù)的增刪改等，用是戶對(duì)系統(tǒng)原有數(shù)據(jù)進(jìn)行修改。

1.4 定義需求

基于基礎(chǔ)場(chǎng)景，再針對(duì)具體的業(yè)務(wù)類型，繼續(xù)歸納出知識(shí)庫(kù)、考試、任務(wù)派發(fā)、打分評(píng)比四個(gè)典型業(yè)務(wù)場(chǎng)景。

四種典型業(yè)務(wù)場(chǎng)景的高頻用戶角色包含三類，分別為普通用戶、專責(zé)和領(lǐng)導(dǎo)。

三類用戶的需求出于不同的目的，各不相同，普通用戶希望自己需要的信息清楚明白的展示，并且系統(tǒng)易學(xué)易用，簡(jiǎn)單上手；專責(zé)希望操作簡(jiǎn)便，不易出錯(cuò)，提高工作效率；領(lǐng)導(dǎo)希望關(guān)注重點(diǎn)突出，數(shù)據(jù)分析一目了然。

1.5定義框架

基于調(diào)研的分析，梳理出信息系統(tǒng)桌面端的高頻控件；基于高復(fù)用性頁(yè)面，梳理出頁(yè)面模式；基于業(yè)務(wù)類型及角色，組合出頁(yè)面；基于整體系統(tǒng)功能，定義業(yè)務(wù)場(chǎng)景。

此設(shè)計(jì)結(jié)構(gòu)經(jīng)初步統(tǒng)計(jì)，可以滿足國(guó)家電網(wǎng)公司桌面端信息系統(tǒng)的70%以上的頁(yè)面設(shè)計(jì)需求。

1.6細(xì)化

通過(guò)上述定義的設(shè)計(jì)結(jié)構(gòu)，我們的設(shè)計(jì)重點(diǎn)為控件樣式和最佳實(shí)踐模式。

模式設(shè)計(jì)可以清晰的闡述不同的用戶需求下的頁(yè)面語(yǔ)意，統(tǒng)一的控件樣式設(shè)計(jì)可以使信息系統(tǒng)具有良好的規(guī)范性和一致性，視覺(jué)風(fēng)格采用了符合當(dāng)前互聯(lián)網(wǎng)產(chǎn)品的扁平化設(shè)計(jì)風(fēng)格，結(jié)合國(guó)家電網(wǎng)公司特色，選取國(guó)網(wǎng)綠作為顏色風(fēng)格。

2 界面設(shè)計(jì)

2.1控件設(shè)計(jì)

首先，從39個(gè)預(yù)調(diào)研的桌面端信息系統(tǒng)中，截圖6131張。

接著，將截圖進(jìn)行切分，碎片化處理。

最后，再對(duì)碎片進(jìn)行去重處理，整理高頻碎片。梳理出基礎(chǔ)控件16個(gè)，控件49類。

下表以基礎(chǔ)輸入文本框控件為例，分別給出基于不同輸入情境的分析。

下圖以基礎(chǔ)輸入文本框控件為例，分別給出基于不同交互模式下的控件樣式設(shè)計(jì)。

此設(shè)計(jì)方案，按照上述兩個(gè)維度的考量，將所有梳理出的控件進(jìn)行樣式設(shè)計(jì)，在本文中不一一贅述。

2.2模式設(shè)計(jì)

從調(diào)研分析出的模式出發(fā)，將三類用戶角色的業(yè)務(wù)流程梳理清晰，對(duì)所有典型頁(yè)面進(jìn)行設(shè)計(jì)，舉例為最高頻界面模式——數(shù)據(jù)展示。

數(shù)據(jù)展示模式采用三分頁(yè)框架結(jié)構(gòu)，通過(guò)搜索，查詢數(shù)據(jù)，并展示給用戶的搜索控件與表格控件的組合模式，將數(shù)據(jù)信息展現(xiàn)給用戶。

3 案例應(yīng)用與分析

隨著互聯(lián)網(wǎng)企業(yè)用戶體驗(yàn)設(shè)計(jì)的快速發(fā)展，傳統(tǒng)行業(yè)的轉(zhuǎn)型和基于用戶的設(shè)計(jì)成為發(fā)展趨勢(shì)。目前此套基于控件的國(guó)家電網(wǎng)公司信息系統(tǒng)界面設(shè)計(jì)已經(jīng)被大型集團(tuán)公司的信息系統(tǒng)廣泛應(yīng)用。典型的代表項(xiàng)目包括國(guó)網(wǎng)信通集團(tuán)信息系統(tǒng)建設(shè)，電子商務(wù)招投標(biāo)平臺(tái)，國(guó)家電力需求側(cè)平臺(tái)，全球能源互聯(lián)網(wǎng)系統(tǒng)等。實(shí)踐證明，此套桌面端信息系統(tǒng)設(shè)計(jì)方案有效縮減了的信息系統(tǒng)項(xiàng)目的需求分析成本和設(shè)計(jì)成本，提升了用戶體驗(yàn)，宣傳了國(guó)家電網(wǎng)公司的品牌形象。

4 結(jié)語(yǔ)

本文基于國(guó)家電網(wǎng)公司信息系統(tǒng)桌面端界面設(shè)計(jì)方案的應(yīng)用，闡述了當(dāng)下用戶體驗(yàn)設(shè)計(jì)趨勢(shì)，結(jié)合用戶體驗(yàn)設(shè)計(jì)方法的整體設(shè)計(jì)流程，梳理出高頻控件和設(shè)計(jì)模式，設(shè)計(jì)具有一致性風(fēng)格的整體頁(yè)面樣式及交互樣式。該界面設(shè)計(jì)方案的目標(biāo)是滿足用戶需求、提升產(chǎn)品競(jìng)爭(zhēng)力、樹(shù)立品牌形象、統(tǒng)一設(shè)計(jì)風(fēng)格、降低系統(tǒng)成本。國(guó)家電網(wǎng)公司信息系統(tǒng)桌面端界面設(shè)計(jì)方案符合國(guó)家電網(wǎng)公司用戶體驗(yàn)管控機(jī)構(gòu)的設(shè)計(jì)要求，旨在建設(shè)以用戶體驗(yàn)設(shè)計(jì)為核心的信息系統(tǒng)體系，促進(jìn)了從著重傳統(tǒng)業(yè)務(wù)設(shè)計(jì)到現(xiàn)代體驗(yàn)驅(qū)動(dòng)設(shè)計(jì)的有效便捷對(duì)接。下一步工作為將此設(shè)計(jì)方案的控件及設(shè)計(jì)模式植入開(kāi)發(fā)平臺(tái)，基于用戶操作采集實(shí)現(xiàn)大數(shù)據(jù)的分析處理，輔助決策，并結(jié)合工作臺(tái)設(shè)計(jì)通過(guò)圖表統(tǒng)計(jì)和有效提示，提升桌面端信息系統(tǒng)業(yè)務(wù)和流程的用戶體驗(yàn)優(yōu)化，實(shí)現(xiàn)用戶體驗(yàn)設(shè)計(jì)和傳統(tǒng)桌面端信息系統(tǒng)的完美融合。

參 考 文 獻(xiàn)：

[1] Alan Cooper，Robert Reimann，David Cronin.About Face3：The Essentials of Interaction Design[M].電子工業(yè)出版社，2014.4.

[2] Elizabeth Goodman，Mike Kuniavsky，Andrea Moed.Observing the User Experience[M].清華大學(xué)出版社，2015.5.

[3] 趙婉茹.基于互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)要素研究[D].江南大學(xué)，2015.

[4] 江蕊.產(chǎn)品設(shè)計(jì)中的用戶體驗(yàn)與應(yīng)用研究[D].湖南大學(xué)，2006.

[5] 吳江，黃晟青，蔡駿.互聯(lián)網(wǎng)購(gòu)物網(wǎng)站用戶體驗(yàn)設(shè)計(jì)研究[J]. PACKAGING ENGINEERING Vol. 33 No.8 2012-04.

[6] 杜海.SNS網(wǎng)站的用戶體驗(yàn)研究[D].江南大學(xué)，2013.

[7] 王鳳霞， 張超.上海市地理信息系統(tǒng)標(biāo)準(zhǔn)化問(wèn)題研究[N]. 華東師范大學(xué)學(xué)報(bào)，No.1，Mar 2004.

[8] 趙婧婧.以用戶體驗(yàn)為導(dǎo)向的手機(jī)應(yīng)用設(shè)計(jì)方法研究[D].山東大學(xué)，2014.

[9] 張祺.基于生活形態(tài)分群的用戶體驗(yàn)研究[D].浙江大學(xué)，2010.

[10] 鄧勝利.國(guó)外用戶體驗(yàn)研究進(jìn)展[J]. 圖書情報(bào)工作，第52卷第3期，2008年3月.