邢曉喬+門浩+劉迪

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

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

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

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

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

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

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

1 用戶體驗設(shè)計

1.1 用戶體驗設(shè)計過程

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

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

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

1.2 調(diào)研

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

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

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

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

1.2.2用戶調(diào)研

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

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

1.3 建模

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

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

1.4 定義需求

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

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

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

1.5定義框架

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

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

1.6細(xì)化

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

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

2 界面設(shè)計

2.1控件設(shè)計

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

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

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

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

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

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

2.2模式設(shè)計

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

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

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

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

4 結(jié)語

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

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

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

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

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

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

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

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