产品线人机界面规范化开发实践

（中兴通讯云计算及IT研究院用户体验设计中心，重庆，401122）

摘 要：本文针对ABC产品中可规范化的WEB界面元素的提炼和应用的实践进行分析和总结，提出了在现有研发流程的基础上，实现 “提高开发效率”与 “改进产品易用性”两个矛盾点的和谐统一的方法，旨在提高用户对产品的整体满意度。本次实践适用于产品线界面元素的规范化研发和设计，通过人机界面代码的模块化达到快速重用的开发目的。本次实践的具体过程、步骤和方法可供其他产品借鉴。

关键词：人机界面；规范化；模块化；产品易用性

中图分类号：TP37 文献识别码：A

1 问题的提出

业务软件产品的特征给产品开发提出了两个基本要求：一是快速开发，及时响应市场的需求；二是关注易用性，满足终端消费者的个性化需求。由于业务软件产品的用户界面大部分是WEB界面，下面汇总了产品开发中遇到的共性问题：

（1）业务软件产品虽然很多，但是有很多相同点，相似的界面居多，这些原本可重用的WEB界面由于没有统一的样式，使得不同人开发出来的界面差异很大，严重影响产品界面的一致性。

（2）一些现有产品在视觉和交互方面都设计得比较好的界面，由于没有有效的机制去提炼，无法继承和推广到其他相似的产品中去，从而造成设计浪费或重复设计。

（3）项目的时间压力普遍都很大，模块化是一个提高开发效率的有效办法。目前WEB界面的产品一般是推行 “表现和代码分开”的分层开发模式，大家关注 “代码”层面的模块化，却忽视了 “表现”层面的常用界面的模块化。只有两者并重，才能更有效地发挥模块化的优势。

（4）WEB界面一般直接面向用户，必然对易用性和可操作性要求比较高。目前开发人员重点关注功能代码的实现，无力去设计界面的交互，所以开发人员非常希望有一些规范化的界面，在保证界面易用性的同时，使开发简单化。

（5）WEB界面需要考虑各种浏览器的兼容性、国际化和无障碍性等问题。目前通过强行要求遵循规范来开发界面的效果不是很理想，若能将这些规范融入一些可重用的规范化界面中，当开发人员使用这些规范化的界面时，就可自然遵循那些规范，那么将有效地解决这些问题。

ABC产品是公司非常关注的一个新项目，局方对该产品的期望值也特别高，但是在现有的开发模式下，我们同样面临着上述的相似问题，开发压力很大。如果仍按照以前的方法进行开发，最终的产品可能会无法满足局方和用户的要求。

2 解决思路

（1）WEB界面规范化设计的思路，如图1所示，可以从小组件到大页面，分层进行模块化，每一层都是其相邻的圆圈由内向外的延伸。同心圆的中心是组件部分，所谓组件，是指可规范化的基本页面元素，比如可通用的按钮、图标和时间控件等，这些页面元素是组成页面模板的基础零件。同心圆第2层的页面模板是指能实现一定功能的规范化的页面，比如登录页面、数据表格、提示消息的窗口页面等。同心圆第3层的页面流程关注如何将静态的页面模板按一定的交互规则组合以完成一个操作动作，很多操作场景几乎每个产品都有，设计时可以将这些常见且重复的操作流程进行规范。同心圆最外层是定义界面规范化相关的总体特征和原则，保证界面用户体验的整体一致性，目的是更好地对界面进行规范。

图1

（2）必须紧密结合开发实践，界面规范化工作才能有效开展。如图2所示，界面规范化工作和开发实践实现一个闭环。将实践中总结和提炼出的常用页面元素和功能模板进行模块化，开发人员通过组装这些规范化的元素和页面就可以快速完成页面的开发。这种WEB开发方式将大量减少重复劳动，使得开发人员可以将更多精力关注在业务逻辑交互的易用性上。

图2

（3）可以由用户体验设计中心承担界面规范化的任务，建立一套机制进行推行。一方面，用户体验设计中心熟悉产品易用性的专业知识，可以在界面规范化的过程中及时结合易用性规则进行优化设计；另一方面，用户体验设计中心本身作为公共资源，提供界面设计服务，可以有效利用这个有利条件推行界面规范化。

3 实践情况

3．1 对业务产品进行完整的视觉和交互设计

用户体验设计中心仔细分析了该产品的特征，发现该产品很有代表性，能体现大部分WEB产品的共同特征，所以决定以ABC产品为切入点，认真完成界面的视觉设计和交互设计，并对可以规范化的页面元素进行提炼，启动界面规范化的实践积累过程。

用户体验设计中心对ABC产品的需求分析、代码开发、系统测试和现场开局等阶段进行了全程的关注，旨在最大限度地提高产品的易用性。其过程分别如下：

（1）需求阶段：用户体验设计中心先后设计了三个方案，协调系统工程师到现场与局方和用户直接沟通确认，并根据反馈意见进行修正，设计出用户认可的最佳方案。

（2）开发阶段：用户体验设计中心在每个开发里程碑点对相关的界面进行产品易用性评估，及时调整界面设计中的一些偏差，并且由用户体验设计中心完整负责 “表现”层的代码开发，代码结构按照“XHTML负责骨架，CSS负责表现，Java Script负责行为”的W3C国际标准进行编码，而且所有的界面都在IE7、IE8、火狐、Chrome等主流浏览器上测试验证。

（3）测试阶段：用户体验设计中心对ABC产品进行系统级别的产品易用性评估，并根据测试人员的反馈意见对界面进行微调。

（4）现场开局阶段：及时收集局方和用户的反馈意见，作为界面下一步改进方案的参考。

3．2 提炼ABC产品中可以规范化的页面元素

在顺利完成ABC产品的原型设计之后，用户体验设计中心立刻组织人力，在总结分析以往其他项目的界面共同特征的基础上，根据同心圆的界面规范化设计思路，以ABC产品界面为样板，提炼出可规范化的页面元素。如图3所示，可规范化的页面元素按 “界面布局”“常用场景”“控件类”和 “列表类”等进行了分类。

图3

“常用场景”和 “控件类”属于可以规范化的基本页面元素。考虑到不同产品的特征差异，提炼基本页面元素时，必须兼顾 “规范”和 “灵活”，为此，用户体验设计中心在提炼的基础上还进行了后期加工和补充。举个例子，对于功能相同的图标，若产品界面是面向后台管理员，那么需要图标整洁；若产品界面是面向普通大众，那么就需要对图标进行处理，体现出个性化的效果。

“界面布局”和 “列表类”属于可以规范化的页面模板，定义这些页面模板的时候，最关注的是如何在遵循易用性规则的前提下合理布局那些基本的页面元素。比如，几乎每个产品都需要用表格来维护数据，而且表格数据一般都需要新增、修改、删除等操作。为了更灵活地适应不同产品特征的需要，对数据表格进行规范化的时候，需要列出哪些属于一定要遵循的规则，哪些属于作为可灵活裁减的建议，这样可以保证它们稍有不同，但是都符合一致性的总体目标，如图4所示。

图4

为保证用户体验的整体一致性，结合产品易用性的规则，用户体验设计中心对那些常用的交互操作进行了规范约定。比如，点击数据表格的新增按钮后，新增窗口直接覆盖现有的表格页面，统一不使用弹出窗口的方式，让用户的注意力永远只关注在一件事情上。当然，由于交互过程跟产品具体需求有很大关系，所以不能定义得太死，否则就缺乏灵活性。规范约定适合将一些相对固定的操作场景进行规定和约束。另外，用户体验设计中心还总结了界面的总体特征和原则，这些原则包括色调搭配的建议、视觉设计指南、整体风格一致性的规则、界面国际化的标准等。比如，输入框后面的注释统一设置为灰色，统一在必填的选项后面加上红色的星号等。

3．3 对可重用代码进行模块化

要实现代码的可重用和模块化，代码必须首先标准化。用户体验设计中心严格按照 “XHTML负责骨架，CSS负责表现，Java Script负责行为”的W3C国际标准完成ABC产品 “表现”层的代码开发。为了更好地推广标准化编码，我们对实践中的经验进行提炼，并整理成WEB编码的标准化规范。主要按下面两个方面对可重用代码进行模块化：

（1）对可重用的页面文件进行模块化。比如CSS样式的模块化，如图5所示，同一种风格下会有多个．css文件，不同的文件分别控制不同单元或者不同组件的样式，因为common．css、login．css和left．css等都是通用的．css样式定义，具有很强的重用性，所以．html页面文件只需要链入一个main．css文件。若其他产品需要用到某个单元的样式，那么只要直接重用对应的．css文件就可以实现快速开发。

图5

（2）对可重用的组件代码进行模块化。比如日期控件的模块化，该日期控件要求兼容IE7、IE8、火狐、Chrome等主流浏览器，并满足易用性的要求。若其他产品需要用日期控件，那么直接重用这些代码即可，这样在最大限度上简化开发，而且还提高了界面的一致性。

3．4 在新项目中的应用和效果分析

从ABC产品提炼出的页面元素相继在XYZ等其他产品的开发中及时应用，实践效果出乎意料。XYZ产品开发效果的数据对比如表1所示。实践数据表明，采用规范化的界面开发，缩短了开发的时间，提高了开发质量。由于期间多次和局方就产品易用性问题进行沟通确认，所以开发出的最终产品和局方想要的产品基本一致，一次性满足了局方的界面易用性要求，提高了用户对产品的整体满意度。XYZ产品界面的截图如图6所示。

表1

图6

3．5 建立界面规范化的良性循环

界面规范化的工作是一个长期的过程，需要在实践中不断积累和总结。在XYZ产品的开发实践中，我们再次提炼出了一些可规范化的页面元素，并对现有的规范化页面元素进行补充和修正。为了有效推广这些规范化页面元素的使用，先在用户体验设计中心内部完成评审，然后提交到WEB开发科室评审，最后形成规范，并全面推行。

4 效果评价

本次实践成功地设计和提炼出ABC产品中可规范化的页面元素，并将这些规范化界面成功地应用到XYZ等其他产品中，实现了界面规范化过程的良性循环，达到了快速开发的目的。该实践实现了提高开发效率与改进产品易用性和谐统一的目的，有效地将 “以用户为中心”的设计思路应用到实践中。采用规范化界面设计和开发的产品，大大提高了产品易用性，得到了局方和现场维护人员的支持和认可。

本次实践在部门领导的大力支持下进行。ABC产品界面的迭代设计大约投入20天的工作时间，为界面规范化工作做了扎实的基础铺垫；总结和提炼ABC产品界面中可规范化的组件和页面大约投入2天的工作时间；后续的XYZ等其他产品的开发，则都分别给项目线节省了一半以上的开发时间，如表1所示。

5 推广建议

本次实践验证了通过界面的规范化工作可以有效地提高WEB界面产品的开发效率，同时有效地改进公司产品的易用性。该方法可以简化开发，经过长期的持续的积累，效果将更加明显，而且投入的成本相对较低，特别适合研发周期紧张的产品的易用性改进。

本次实践采用的过程和方法，成本低，效率高，而且效果明显，是值得推广的改进产品易用性的方法。其风险在于，必须投入一些人员去做研究和总结，这些人员必须具备一定的产品易用性基础知识。在公司部门内部成立用户体验设计中心是个有效的方法。用户体验设计中心作为一个公共资源为所有项目线的界面设计服务，可以有针对性地结合实际分析产品界面的特点，不断从实践中总结和提炼出可规范化的界面模块，然后又应用到实践中。推广工作是先以一两个典型产品作为试点，再由点到面持续推广界面规范化开发工作的。

参考文献：

［1］Betsy B，Misha W V．同心圆：Web应用软件界面设计指南的构架 ［EB／OL］．［2006－11－20］．http：／／www． visionunion．com／articlej．sp？code＝200611170303．

［2］Jennifer P，Yvonne R，Helen S．交互设计——超越人机交互 ［M］．刘晓晖，张景，译．北京：电子工业出版社，2003．

［3］中国标准研究中心．GB／T 18976—2003以人为中心的交互系统设计过程 ［S］．北京：中国标准出版社，2003．

作者联系方式：

E－mail：manhail．i＠uxpachina．org．

[1] 作者简介：李满海 （1979—），男，福建莆田人。中兴通讯产品易用性专家，用户体验部门负责人之一，拥有8年以上的通讯产品体验设计经验，长期致力于软件易用性改进方法和过程的研究和实践，拥有十余篇国内外技术发明专利；同时担任UXPA中国理事兼西南分会会长和重庆市工业设计专家委员会委员。