科研管理系統Web前端設計中有關改善用戶體驗的思路

葉蓯佑 韋剛 劉永強 謝敏蓉 李修玲

摘要

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

【關鍵詞】科研管理 信息系統 系統設計 用戶體驗

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

利用科研管理系統對各類科研信息和科研業務流程進行管理已成為許多高校、科研院所等單位的工作重要組成部分，是現代科研管理的發展趨勢?？蒲泄芾硐到y將科研信息統一集中化管理，網絡共享和維護方便，查詢實時迅速，減少了不必要的重復勞動，為年度統計提供幫助，為單位決策者提供參考。受到越來越多單位的青睞。

在如今網絡高速發展時代，基于瀏覽器/服務器（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.