基于控件的国家电网公司信息系统界面方案的设计与实现

邢晓乔+门浩+刘迪

摘要：为促进国家电网公司信息系统桌面端界面样式的規范化、人性化和简洁化，提出了建设一套以用户体验设计为核心，覆盖国家电网公司信息系统桌面端特点，具有国家电网公司大家庭特色的设计方案。文章重点介绍了用户体验设计过程，基于控件的界面元素和布局结构的界面设计，以及在大型企业各类项目的实际应用案例，以及下一步产品优化的设计思路。该设计方案实现了国家电网公司信息系统桌面端的全套控件样式，为桌面端信息系统的人性化改进提供了有力支持，推动桌面端信息系统界面样式和风格具有国家电网特色的逐步发展。

关键词：用户体验；控件；界面样式；国网信息系统

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）33-0192-04

在当今商业社会时代，用户体验已成为一个产品或服务品质的标志。苹果凭借“用户体验至上”的理念重塑了众多行业，谷歌秉承“以用户为中心，其他一切水到渠成”的理念改变了人们的生活方式，互联网的极速发展使得用户体验设计有着日新月异的变化。

国家电网作为国家基础建设的支柱产业，信息化水平已达到国内领先，国际先进，初步建成数字化电网。在此基础上，国家电网公司对信息系统建设提出了更高的要求，旨在优化、简化系统功能，提升易用性，给基层员工减负，并将用户体验的好坏作为下一步提升服务和产品的重要考量指标，将“你用电，我用心”这一理念体现在国家电网公司业务的各个方面。

国家电网信息系统业务覆盖面广、复杂程度高、内容形式繁杂多样。在传统桌面端信息系统建设过程中，重点多放在功能的实现和多功能集成上，而鲜少考虑用户体验设计，由于不同成员单位分别设计，各级业务部门根据自身业务情况建设各自的桌面端信息系统，集团整体管控力度不够，导致现有的桌面端信息系统众多，设计繁杂，交互逻辑不统一等问题。目前，国内大型传统企业的信息系统设计处于发展阶段，已经投入使用的信息系统主要以信息表达为主，而界面设计和用户体验尚未成熟。国家电网大家族中的桌面端信息系统，如何既可以紧跟体验设计趋势，又具有国家电网公司家族特色，成为了当下重要的问题。因此，一套基于国网信息系统特点的，紧跟体验设计趋势的设计方案是必行之势。

设计方案通过调研分析国家电网公司现有系统，在有序整合资源，统一规划设计，完善界面元素和提升用户体验四个方面，全面构建一套界面设计体系，促进界面整体设计感的提升。

1 用户体验设计

1.1 用户体验设计过程

通过分析国网公司现有的桌面端信息系统情况，以及信息系统建设过程，用户体验设计过程选取了《交互设计精髓3》一书中的目标导向的设计方法，并将设计方法结合自身设计需求进行了精化细化。

目标导向的设计方法综合了以下这些方面的技术：人种学研究、利益相关者访谈，市场调研、详细用户模型、基于场景的设计，以及一组基本的交互设计原则和模式。采用这种方法能够得到既满足用户的需要和目标，同时又能满足业务和技术需求的解决方案。此设计过程大致可以分为6个阶段，即研究、建模、定义需求、定义框架、细化、以及支持。

本次设计产品的过程分为五大部分：研究、建模、定义需求、定义框架、细化。从调研使用国网公司桌面端信息系统的用户及应用领域出发，基于用户的使用场景进行分类，挖掘并梳理业务需求，将需求进行整理和结构化分类，最后基于不同的行为进行界面设计以实现基于控件的国家电网公司信息系统界面方案的设计。

1.2 调研

调研分为两个阶段：预调研和用户调研。

1.2.1 预调研

预调研（Pilot Testing）是在正式研究之前做的初步实验，预调研的目的是用于发现线索，为正式的实验研究提供方向和引导，从而访谈提纲可以根据预调研发现的线索来拟定。预调研的范围抽样选取了国家电网公司13个业务中心的覆盖核心业务的39个桌面端信息系统，并对其使用的业务部门，系统类型及用户数量进行了统计。

从预调研的数据统计分析，桌面端信息系统中用户使用数量上100万的有4个系统，分别为某信息化管理系统、某网站网页版（对外）、某招聘平台和某学习平台，为接下来的调研提供了更有针对性的用户调研重点。

1.2.2用户调研

根据上一轮的预调研，制定了针对性的调研方案，依据上一阶段的预调研，用户调研的提纲包括系统的使用目的、使用过程、使用感受、预期目标等内容。此阶段的用户调研需要从用户那里收集数据，记录他们使用系统过程中用户体验的各种现象和感受，并了解他们的使用目标和预期目标，进而进行整理、去重、筛选重新分析用户口中的实际体验，以挖掘出他们真实需求和影响桌面端信息系统建设的用户体验因素。

用户调研抽取了预调研的39个桌面端信息系统中的31个典型系统，调研时间为2016年1月至2016年3月，以系统为单位，基于不同的使用角色进行了87名用户的用户调研。

1.3 建模

通过用户调研及深入分析，我们研究出基本所有的桌面端信息系统业务都是由特定形式的数据录入、展示、维护这三种基础场景进行包含业务逻辑的适当组合而完成。

数据录入场景以表单为典型代表，需要用户输入数据，数据是从使用用户进入系统；数据展示场景以表格、列表、网格等格式显示，往往伴随查询，数据是由系统展示给用户；数据维护场景是例如用户对数据的增删改等，用是户对系统原有数据进行修改。

1.4 定义需求

基于基础场景，再针对具体的业务类型，继续归纳出知识库、考试、任务派发、打分评比四个典型业务场景。

四种典型业务场景的高频用户角色包含三类，分别为普通用户、专责和领导。

三类用户的需求出于不同的目的，各不相同，普通用户希望自己需要的信息清楚明白的展示，并且系统易学易用，简单上手；专责希望操作简便，不易出错，提高工作效率；领导希望关注重点突出，数据分析一目了然。

1.5定义框架

基于调研的分析，梳理出信息系统桌面端的高频控件；基于高复用性页面，梳理出页面模式；基于业务类型及角色，组合出页面；基于整体系统功能，定义业务场景。

此设计结构经初步统计，可以满足国家电网公司桌面端信息系统的70%以上的页面设计需求。

1.6细化

通过上述定义的设计结构，我们的设计重点为控件样式和最佳实践模式。

模式设计可以清晰的阐述不同的用户需求下的页面语意，统一的控件样式设计可以使信息系统具有良好的规范性和一致性，视觉风格采用了符合当前互联网产品的扁平化设计风格，结合国家电网公司特色，选取国网绿作为颜色风格。

2 界面设计

2.1控件设计

首先，从39个预调研的桌面端信息系统中，截图6131张。

接着，将截图进行切分，碎片化处理。

最后，再对碎片进行去重处理，整理高频碎片。梳理出基础控件16个，控件49类。

下表以基础输入文本框控件为例，分别给出基于不同输入情境的分析。

下图以基础输入文本框控件为例，分别给出基于不同交互模式下的控件样式设计。

此设计方案，按照上述两个维度的考量，将所有梳理出的控件进行样式设计，在本文中不一一赘述。

2.2模式设计

从调研分析出的模式出发，将三类用户角色的业务流程梳理清晰，对所有典型页面进行设计，举例为最高频界面模式——数据展示。

数据展示模式采用三分页框架结构，通过搜索，查询数据，并展示给用户的搜索控件与表格控件的组合模式，将数据信息展现给用户。

3 案例应用与分析

随着互联网企业用户体验设计的快速发展，传统行业的转型和基于用户的设计成为发展趋势。目前此套基于控件的国家电网公司信息系统界面设计已经被大型集团公司的信息系统广泛应用。典型的代表项目包括国网信通集团信息系统建设，电子商务招投标平台，国家电力需求侧平台，全球能源互联网系统等。实践证明，此套桌面端信息系统设计方案有效缩减了的信息系统项目的需求分析成本和设计成本，提升了用户体验，宣传了国家电网公司的品牌形象。

4 结语

本文基于国家电网公司信息系统桌面端界面设计方案的应用，阐述了当下用户体验设计趋势，结合用户体验设计方法的整体设计流程，梳理出高频控件和设计模式，设计具有一致性风格的整体页面样式及交互样式。该界面设计方案的目标是满足用户需求、提升产品竞争力、树立品牌形象、统一设计风格、降低系统成本。国家电网公司信息系统桌面端界面设计方案符合国家电网公司用户体验管控机构的设计要求，旨在建设以用户体验设计为核心的信息系统体系，促进了从着重传统业务设计到现代体验驱动设计的有效便捷对接。下一步工作为将此设计方案的控件及设计模式植入开发平台，基于用户操作采集实现大数据的分析处理，辅助决策，并结合工作台设计通过图表统计和有效提示，提升桌面端信息系统业务和流程的用户体验优化，实现用户体验设计和传统桌面端信息系统的完美融合。

参 考 文 献：

[1] Alan Cooper，Robert Reimann，David Cronin.About Face3：The Essentials of Interaction Design[M].电子工业出版社，2014.4.

[2] Elizabeth Goodman，Mike Kuniavsky，Andrea Moed.Observing the User Experience[M].清华大学出版社，2015.5.

[3] 赵婉茹.基于互联网产品的用户体验要素研究[D].江南大学，2015.

[4] 江蕊.产品设计中的用户体验与应用研究[D].湖南大学，2006.

[5] 吴江，黄晟青，蔡骏.互联网购物网站用户体验设计研究[J]. PACKAGING ENGINEERING Vol. 33 No.8 2012-04.

[6] 杜海.SNS網站的用户体验研究[D].江南大学，2013.

[7] 王凤霞， 张超.上海市地理信息系统标准化问题研究[N]. 华东师范大学学报，No.1，Mar 2004.

[8] 赵婧婧.以用户体验为导向的手机应用设计方法研究[D].山东大学，2014.

[9] 张祺.基于生活形态分群的用户体验研究[D].浙江大学，2010.

[10] 邓胜利.国外用户体验研究进展[J]. 图书情报工作，第52卷第3期，2008年3月.