叶苁佑 韦刚 刘永强 谢敏蓉 李修玲

摘要

科研管理系统在设计时除了考虑功能的需求之外，用户体验也是不容忽视的，它将直接影响使用者的感受和操作行为。本文以广西分析测试研究中心自主设计开发的gxat科研管理系统为例，分析指出了设计中哪些方面能影响用户体验，并提出了相应的改善用户体验的思路。

【关键词】科研管理 信息系统 系统设计 用户体验

1 科研管理系统在工作中的作用

利用科研管理系统对各类科研信息和科研业务流程进行管理已成为许多高校、科研院所等单位的工作重要组成部分，是现代科研管理的发展趋势。科研管理系统将科研信息统一集中化管理，网络共享和维护方便，查询实时迅速，减少了不必要的重复劳动，为年度统计提供帮助，为单位决策者提供参考。受到越来越多单位的青睐。

在如今网络高速发展时代，基于浏览器/服务器（Browser/Server）模式搭建的网站式科研管理系统有着显著的优势，所有功能的开发或信息的存储的工作都只需要在服务器端进行，用户端只需要浏览器连网进行信息的交互。

不同的单位根据自身业务需求，设计科研管理系统从能用性、可用性上考虑的多，基本包含：项目管理（申报、立项、过程、验收）、成果管理（论文、专利、标准、奖项）、查询统计、信息发布、参数设置等功能。各种各样的科研管理系统比比皆是，虽然功能差不多，但就同其他产品一样会面临三六九等的问题，有些很好用，有些用得一般，有些非常难用。

2 为何考虑用户体验

用户体验的应用研究中一直是热门话题，不同的研究领域、不同的思考角度，给出的见解不尽相同。有文献归纳用户体验指用户在使用一种产品或服务的时候的行为、思想、感觉，包括理性价值和感性体验。建设基于网站的信息系统最终是给用户使用的，为了学习使用科研管理系统，用户体验开始变得越来越重要，它能直接影响用户的情感，影响对科研管理系统的依赖、信任、喜爱程度以及评价。

总的来说网站系统设计上做到系统功能固然重要，用户体验同样不容忽视，尽量照顾用户的操作，多从用户的角度上考虑，基于对用户的充分理解，着眼于如何引导用户享受提供的服务，呈现给用户心理上的体验，强调易用、吸引、喜爱、信任、友好性。

广西分析测试研究中心自主设计开发的基于浏览器/服务器（Browser/Server）模式的网站式gxat科研管理信息系统，包含了简单易用的科研管理功能模块，同时从用户角度上思考，融入了一些能改善用户体验的设计元素，下面从布局、视觉、交互方面给出几点经验做法。

3 设计分析与改善用户体验做法

3.1 页面布局建议采用响应式布局，尽量不用静态布局

出于需要，用户经常在显示器上进行左右分列并排显示不同工作区域。若采用静态布局，由于页面各元素大小、位置尺寸都不会改变，浏览时势必出现诸如文字过小，需要频繁手动放大观看，又或者页面内容超出工作区域，需要来回拖动水平滚动条浏览等另人头疼的问题。

科研管理系统的网页页面在设计时若采用响应式布局，那么将具有对不同的终端设备具有自适应屏幕窗口的特点，能让同一个网页在不同缩放窗口上都得到良好的展示，很好的符合用户的浏览习惯，优化了用户体验。

要使用响应式布局，网页代码从几方面编写：

（1）网页的head标签内加入：

（2）网页元素的尺寸采用百分比代替px;

（3）css样式代码中使用@media语法来动态自适应窗口改变样式。例如网页在窗口大于768像素时将会改变显示的写法如下：

根据以上的编写思路原理，互联网中早已涌现出许多优秀的响应式布局的样式框架，可以起到加快网页开发的效果。bootstrap就是其中之一。本文开发的gxat科研管理系统所有网页，均引入了bootstrap框架，在元素的class中添加固化好的样式名称，即可实现响应效果，例如宽/高、颜色、可见/隐藏等。系统的“通知详页”网页布局部分代码如下：

……<！--其他代码块-->

发布时间：{{$info['year']}}

来源：I {$info['Iaiyu-']）I

..…<卜其他代码块->

“通知详页”页面用.container样式类做了整体内容自适应之外，对通知的发布时间、分类、来源这三块做了特别的自适应，即当窗口页面宽度<768px时，col-xs-12样式类自动让这三块在网页中各占一行显示。当窗口页面≥992px时，col-md-样式类自动让这三块水平相连只占一行。

“通知详页”效果展示如图1所示。

3.2 多条件查询界面的显隐

科研管理系统有一个常用的模块是多条件查询功能，用户通过多个限定条件，能进一步缩小查询范围，提高查询结果命中率。查询界面和结果集是相伴相生的，对于用户来说，关注点更多的是结果集，而非查询界面。因此需要对查询界面做一些控制：

3.2.1 默认收纳

查询界面往往占用了浏览窗口显示很大比例，在用户暂不需要查询时，把查询界面隐藏起来，能起到主体窗口给人简洁的视觉效果，从而让用户更多的是关注结果集。

本文开发的gxat科研管理系统中，让多条件查询界面（样式名为search-content）默认隐藏的CSS代码：

.search-content{

displaymone;

}

3.2.2 按需觸发

当用户需要查询时，需要给用户一个能开启查询界面的东西，我们可以用一个按钮来实现。这个按钮既是触发的开关，也是查询界面的代表，它的好处是比查询界面所占用的窗口显示要小许多。该触发按钮的控制查询界面的显隐关键jQuery代码为：

$（“.search-content”）.show（）和$（“.search-content”）.hide（）

为了能让用户随时能使用查询功能，设计时尽量让触发界面的按钮始终保持在网页窗口合理的位置。本文设计让按钮在窗口保持置顶，不会随着页面滚动而被覆盖。

按钮（样式名btn）的置顶关键CSS代码：

.btn{

Position：fixed;

Left：0;

Top：0;

Z-index：100

}

多条件查询界面效果展示如图2所示。

3.3 数据录入的提示提醒及验证

对科研信息进行增删改工作时，要与录入界面打交道。录入界面是由输入框（input）、多选框（select）、文本框（textarea）等组成的表单。

信息的录入除了有静态的标题提示之外，做必要信息验证、纠错提醒，规范信息的录入，是增强用户体验的环节。例如，必填字段未填时做明显突出的状态提醒，科研经费框限制只能输入数字而无法输入其它字符，课题时限日期框提供固化的选择器等。

在Web前端设计中，常常利用正则表达式对录入的数据进行规范和验证。因为正则表达式具有强大的检索、替换那些符合某个规则的文本的能力。下面是一个监听课题名称的必填框input是否输入了内容并实时提醒的示例代码：

htnil表单：

课题名称

jQuery代码：

function isNull（input）{

var rule=/^＼s*$/;//检索input的值是否为空的正则写法

return rule.test（input）;//返回true或false

}

$（".input"）.on（'input propertychangeblur'，function（）{

if（isNull（$（this）.val（）））{

$（'.warning'）.text（"x这是必填项"）

}else{

$（'.warning'）.text（"√正确"）;

}

}）;

课题名称必填框实时提醒效果展示如图3所示。

3.4 特定页面多利用局部更新，避免整页刷新

传统的网页模式下频繁地翻页浏览页面、对页面中录入了内容的表单进行提交时，都会重新加载整个网页并且全屏刷新，用户被迫等待整个页面加载完毕。ajax异步技术可以打破这个局面，可以只让页面的局部交互更新，其他局部不必更新，减少用户实际和心理等待的时间，从而显著提高了用户体验。

利用ajax技术，也有效保持了页面中用户录入或选取的内容，而不会出现因为整个页面被刷新造成录入或选取内容被清空的情况。

在科研管理系统设计中，比较适用于局部ajax异步更新的地方有：后台数据增删改的提交，登陆/注册的提交;科研信息的翻页浏览的页码。例如后台登陆页面提交按钮使用了ajax技术后，账号输对了而密码输错了，只需要改正密码即可立即登陆，账号不会被清空，免去了再次输入账号的步骤。

4 结束语

科研管理系统作为科研工作的重要管理工具，在许多单位中发挥着重要作用，用户体验在科研管理系统中占据着极重的分量。在设计系统时要多方面考虑来引导用户的情感、行为、直觉、感官，把用户体验的价值都能传递给每一位用户。

参考文献

[1]方辉，韩刚，徐竹青，刘英杰，庄志猛，李纯厚，张小亮.基于C/S和B/S的水产科研管理信息系统的设计与建立[J].科技管理研究，2011，31（01）：191-193+208.

[2]史文君.云南大学文科科研管理系统分析与设计[J].云南大学学报（自然科学版），2011，33（S2）：345-349.

[3]杨洋.基于用户体验的信息构建研究[J].科技情报开发与经济，2014，24（02）：111-113.

[4]丁一，郭伏，胡名彩，孫凤良.用户体验国内外研究综述[J].工业工程与管理，2014，19（04）：92-97+114.

[5]熊文，熊淑华，孙旭，张朝阳.Ajax技术在Web2.0网站设计中的应用研究[J].计算机技术与发展，2012，22（03）：145-148.