科研管理系統(tǒng)Web前端設(shè)計(jì)中有關(guān)改善用戶體驗(yàn)的思路

葉蓯佑 韋剛 劉永強(qiáng) 謝敏蓉 李修玲

摘要

科研管理系統(tǒng)在設(shè)計(jì)時(shí)除了考慮功能的需求之外，用戶體驗(yàn)也是不容忽視的，它將直接影響使用者的感受和操作行為。本文以廣西分析測(cè)試研究中心自主設(shè)計(jì)開發(fā)的gxat科研管理系統(tǒng)為例，分析指出了設(shè)計(jì)中哪些方面能影響用戶體驗(yàn)，并提出了相應(yīng)的改善用戶體驗(yàn)的思路。

【關(guān)鍵詞】科研管理 信息系統(tǒng) 系統(tǒng)設(shè)計(jì) 用戶體驗(yàn)

1 科研管理系統(tǒng)在工作中的作用

利用科研管理系統(tǒng)對(duì)各類科研信息和科研業(yè)務(wù)流程進(jìn)行管理已成為許多高校、科研院所等單位的工作重要組成部分，是現(xiàn)代科研管理的發(fā)展趨勢(shì)。科研管理系統(tǒng)將科研信息統(tǒng)一集中化管理，網(wǎng)絡(luò)共享和維護(hù)方便，查詢實(shí)時(shí)迅速，減少了不必要的重復(fù)勞動(dòng)，為年度統(tǒng)計(jì)提供幫助，為單位決策者提供參考。受到越來越多單位的青睞。

在如今網(wǎng)絡(luò)高速發(fā)展時(shí)代，基于瀏覽器/服務(wù)器（Browser/Server）模式搭建的網(wǎng)站式科研管理系統(tǒng)有著顯著的優(yōu)勢(shì)，所有功能的開發(fā)或信息的存儲(chǔ)的工作都只需要在服務(wù)器端進(jìn)行，用戶端只需要瀏覽器連網(wǎng)進(jìn)行信息的交互。

不同的單位根據(jù)自身業(yè)務(wù)需求，設(shè)計(jì)科研管理系統(tǒng)從能用性、可用性上考慮的多，基本包含：項(xiàng)目管理（申報(bào)、立項(xiàng)、過程、驗(yàn)收）、成果管理（論文、專利、標(biāo)準(zhǔn)、獎(jiǎng)項(xiàng)）、查詢統(tǒng)計(jì)、信息發(fā)布、參數(shù)設(shè)置等功能。各種各樣的科研管理系統(tǒng)比比皆是，雖然功能差不多，但就同其他產(chǎn)品一樣會(huì)面臨三六九等的問題，有些很好用，有些用得一般，有些非常難用。

2 為何考慮用戶體驗(yàn)

用戶體驗(yàn)的應(yīng)用研究中一直是熱門話題，不同的研究領(lǐng)域、不同的思考角度，給出的見解不盡相同。有文獻(xiàn)歸納用戶體驗(yàn)指用戶在使用一種產(chǎn)品或服務(wù)的時(shí)候的行為、思想、感覺，包括理性價(jià)值和感性體驗(yàn)。建設(shè)基于網(wǎng)站的信息系統(tǒng)最終是給用戶使用的，為了學(xué)習(xí)使用科研管理系統(tǒng)，用戶體驗(yàn)開始變得越來越重要，它能直接影響用戶的情感，影響對(duì)科研管理系統(tǒng)的依賴、信任、喜愛程度以及評(píng)價(jià)。

總的來說網(wǎng)站系統(tǒng)設(shè)計(jì)上做到系統(tǒng)功能固然重要，用戶體驗(yàn)同樣不容忽視，盡量照顧用戶的操作，多從用戶的角度上考慮，基于對(duì)用戶的充分理解，著眼于如何引導(dǎo)用戶享受提供的服務(wù)，呈現(xiàn)給用戶心理上的體驗(yàn)，強(qiáng)調(diào)易用、吸引、喜愛、信任、友好性。

廣西分析測(cè)試研究中心自主設(shè)計(jì)開發(fā)的基于瀏覽器/服務(wù)器（Browser/Server）模式的網(wǎng)站式gxat科研管理信息系統(tǒng)，包含了簡(jiǎn)單易用的科研管理功能模塊，同時(shí)從用戶角度上思考，融入了一些能改善用戶體驗(yàn)的設(shè)計(jì)元素，下面從布局、視覺、交互方面給出幾點(diǎn)經(jīng)驗(yàn)做法。

3 設(shè)計(jì)分析與改善用戶體驗(yàn)做法

3.1 頁面布局建議采用響應(yīng)式布局，盡量不用靜態(tài)布局

出于需要，用戶經(jīng)常在顯示器上進(jìn)行左右分列并排顯示不同工作區(qū)域。若采用靜態(tài)布局，由于頁面各元素大小、位置尺寸都不會(huì)改變，瀏覽時(shí)勢(shì)必出現(xiàn)諸如文字過小，需要頻繁手動(dòng)放大觀看，又或者頁面內(nèi)容超出工作區(qū)域，需要來回拖動(dòng)水平滾動(dòng)條瀏覽等另人頭疼的問題。

科研管理系統(tǒng)的網(wǎng)頁頁面在設(shè)計(jì)時(shí)若采用響應(yīng)式布局，那么將具有對(duì)不同的終端設(shè)備具有自適應(yīng)屏幕窗口的特點(diǎn)，能讓同一個(gè)網(wǎng)頁在不同縮放窗口上都得到良好的展示，很好的符合用戶的瀏覽習(xí)慣，優(yōu)化了用戶體驗(yàn)。

要使用響應(yīng)式布局，網(wǎng)頁代碼從幾方面編寫：

（1）網(wǎng)頁的head標(biāo)簽內(nèi)加入：

（2）網(wǎng)頁元素的尺寸采用百分比代替px;

（3）css樣式代碼中使用@media語法來動(dòng)態(tài)自適應(yīng)窗口改變樣式。例如網(wǎng)頁在窗口大于768像素時(shí)將會(huì)改變顯示的寫法如下：

根據(jù)以上的編寫思路原理，互聯(lián)網(wǎng)中早已涌現(xiàn)出許多優(yōu)秀的響應(yīng)式布局的樣式框架，可以起到加快網(wǎng)頁開發(fā)的效果。bootstrap就是其中之一。本文開發(fā)的gxat科研管理系統(tǒng)所有網(wǎng)頁，均引入了bootstrap框架，在元素的class中添加固化好的樣式名稱，即可實(shí)現(xiàn)響應(yīng)效果，例如寬/高、顏色、可見/隱藏等。系統(tǒng)的“通知詳頁”網(wǎng)頁布局部分代碼如下：

……<！--其他代碼塊-->

發(fā)布時(shí)間：{{$info['year']}}

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

..…<卜其他代碼塊->

“通知詳頁”頁面用.container樣式類做了整體內(nèi)容自適應(yīng)之外，對(duì)通知的發(fā)布時(shí)間、分類、來源這三塊做了特別的自適應(yīng)，即當(dāng)窗口頁面寬度<768px時(shí)，col-xs-12樣式類自動(dòng)讓這三塊在網(wǎng)頁中各占一行顯示。當(dāng)窗口頁面≥992px時(shí)，col-md-樣式類自動(dòng)讓這三塊水平相連只占一行。

“通知詳頁”效果展示如圖1所示。

3.2 多條件查詢界面的顯隱

科研管理系統(tǒng)有一個(gè)常用的模塊是多條件查詢功能，用戶通過多個(gè)限定條件，能進(jìn)一步縮小查詢范圍，提高查詢結(jié)果命中率。查詢界面和結(jié)果集是相伴相生的，對(duì)于用戶來說，關(guān)注點(diǎn)更多的是結(jié)果集，而非查詢界面。因此需要對(duì)查詢界面做一些控制：

3.2.1 默認(rèn)收納

查詢界面往往占用了瀏覽窗口顯示很大比例，在用戶暫不需要查詢時(shí)，把查詢界面隱藏起來，能起到主體窗口給人簡(jiǎn)潔的視覺效果，從而讓用戶更多的是關(guān)注結(jié)果集。

本文開發(fā)的gxat科研管理系統(tǒng)中，讓多條件查詢界面（樣式名為search-content）默認(rèn)隱藏的CSS代碼：

.search-content{

displaymone;

}

3.2.2 按需觸發(fā)

當(dāng)用戶需要查詢時(shí)，需要給用戶一個(gè)能開啟查詢界面的東西，我們可以用一個(gè)按鈕來實(shí)現(xiàn)。這個(gè)按鈕既是觸發(fā)的開關(guān)，也是查詢界面的代表，它的好處是比查詢界面所占用的窗口顯示要小許多。該觸發(fā)按鈕的控制查詢界面的顯隱關(guān)鍵jQuery代碼為：

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

為了能讓用戶隨時(shí)能使用查詢功能，設(shè)計(jì)時(shí)盡量讓觸發(fā)界面的按鈕始終保持在網(wǎng)頁窗口合理的位置。本文設(shè)計(jì)讓按鈕在窗口保持置頂，不會(huì)隨著頁面滾動(dòng)而被覆蓋。

按鈕（樣式名btn）的置頂關(guān)鍵CSS代碼：

.btn{

Position：fixed;

Left：0;

Top：0;

Z-index：100

}

多條件查詢界面效果展示如圖2所示。

3.3 數(shù)據(jù)錄入的提示提醒及驗(yàn)證

對(duì)科研信息進(jìn)行增刪改工作時(shí)，要與錄入界面打交道。錄入界面是由輸入框（input）、多選框（select）、文本框（textarea）等組成的表單。

信息的錄入除了有靜態(tài)的標(biāo)題提示之外，做必要信息驗(yàn)證、糾錯(cuò)提醒，規(guī)范信息的錄入，是增強(qiáng)用戶體驗(yàn)的環(huán)節(jié)。例如，必填字段未填時(shí)做明顯突出的狀態(tài)提醒，科研經(jīng)費(fèi)框限制只能輸入數(shù)字而無法輸入其它字符，課題時(shí)限日期框提供固化的選擇器等。

在Web前端設(shè)計(jì)中，常常利用正則表達(dá)式對(duì)錄入的數(shù)據(jù)進(jìn)行規(guī)范和驗(yàn)證。因?yàn)檎齽t表達(dá)式具有強(qiáng)大的檢索、替換那些符合某個(gè)規(guī)則的文本的能力。下面是一個(gè)監(jiān)聽課題名稱的必填框input是否輸入了內(nèi)容并實(shí)時(shí)提醒的示例代碼：

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這是必填項(xiàng)"）

}else{

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

}

}）;

課題名稱必填框?qū)崟r(shí)提醒效果展示如圖3所示。

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

傳統(tǒng)的網(wǎng)頁模式下頻繁地翻頁瀏覽頁面、對(duì)頁面中錄入了內(nèi)容的表單進(jìn)行提交時(shí)，都會(huì)重新加載整個(gè)網(wǎng)頁并且全屏刷新，用戶被迫等待整個(gè)頁面加載完畢。ajax異步技術(shù)可以打破這個(gè)局面，可以只讓頁面的局部交互更新，其他局部不必更新，減少用戶實(shí)際和心理等待的時(shí)間，從而顯著提高了用戶體驗(yàn)。

利用ajax技術(shù)，也有效保持了頁面中用戶錄入或選取的內(nèi)容，而不會(huì)出現(xiàn)因?yàn)檎麄€(gè)頁面被刷新造成錄入或選取內(nèi)容被清空的情況。

在科研管理系統(tǒng)設(shè)計(jì)中，比較適用于局部ajax異步更新的地方有：后臺(tái)數(shù)據(jù)增刪改的提交，登陸/注冊(cè)的提交;科研信息的翻頁瀏覽的頁碼。例如后臺(tái)登陸頁面提交按鈕使用了ajax技術(shù)后，賬號(hào)輸對(duì)了而密碼輸錯(cuò)了，只需要改正密碼即可立即登陸，賬號(hào)不會(huì)被清空，免去了再次輸入賬號(hào)的步驟。

4 結(jié)束語

科研管理系統(tǒng)作為科研工作的重要管理工具，在許多單位中發(fā)揮著重要作用，用戶體驗(yàn)在科研管理系統(tǒng)中占據(jù)著極重的分量。在設(shè)計(jì)系統(tǒng)時(shí)要多方面考慮來引導(dǎo)用戶的情感、行為、直覺、感官，把用戶體驗(yàn)的價(jià)值都能傳遞給每一位用戶。

參考文獻(xiàn)

[1]方輝，韓剛，徐竹青，劉英杰，莊志猛，李純厚，張小亮.基于C/S和B/S的水產(chǎn)科研管理信息系統(tǒng)的設(shè)計(jì)與建立[J].科技管理研究，2011，31（01）：191-193+208.

[2]史文君.云南大學(xué)文科科研管理系統(tǒng)分析與設(shè)計(jì)[J].云南大學(xué)學(xué)報(bào)（自然科學(xué)版），2011，33（S2）：345-349.

[3]楊洋.基于用戶體驗(yàn)的信息構(gòu)建研究[J].科技情報(bào)開發(fā)與經(jīng)濟(jì)，2014，24（02）：111-113.

[4]丁一，郭伏，胡名彩，孫鳳良.用戶體驗(yàn)國內(nèi)外研究綜述[J].工業(yè)工程與管理，2014，19（04）：92-97+114.

[5]熊文，熊淑華，孫旭，張朝陽.Ajax技術(shù)在Web2.0網(wǎng)站設(shè)計(jì)中的應(yīng)用研究[J].計(jì)算機(jī)技術(shù)與發(fā)展，2012，22（03）：145-148.