基于用戶體驗的高校檔案網(wǎng)站設(shè)計

張菲菲

摘要：為了改善現(xiàn)有高校檔案網(wǎng)站的普遍問題：檔案特色欠鮮明、重點亮點欠突出、細(xì)節(jié)考慮欠周全、網(wǎng)頁設(shè)計欠美感等問題，以現(xiàn)有用戶體驗統(tǒng)計數(shù)據(jù)及網(wǎng)站提升提議為依據(jù)，借助色彩心理學(xué)、眼動儀網(wǎng)頁瀏覽相關(guān)研究結(jié)論、格式塔理論等相關(guān)研究經(jīng)驗，提出以用戶體驗為核心的高校檔案網(wǎng)站設(shè)計原則和具體設(shè)計思路。在以人為本，資源為主，提升特色，網(wǎng)上辦展的設(shè)計原則下，從總體布局、主要模塊、修飾細(xì)節(jié)等展開細(xì)致論述。

關(guān)鍵詞：用戶體驗 檔案網(wǎng)站 高校

中國分類號：TB47

文獻標(biāo)識碼：A

文章編號：1003-0069（2019）02-0140-03

一、高校檔案館網(wǎng)站建設(shè)現(xiàn)狀及問題

高校檔案網(wǎng)站作為高校面向社會服務(wù)的一個窗口，需要充分發(fā)揮其宣傳教育、信息服務(wù)和網(wǎng)上辦事、交流等功能。目前，通過查看網(wǎng)站，交流訪談等形式調(diào)研了幾所高校檔案館的網(wǎng)站，發(fā)現(xiàn)存在一定的不足，總體說來可以概括成以下幾點：（1）檔案特色欠鮮明。俗話說，人如其名，對于網(wǎng)站也是一樣，應(yīng)該以專業(yè)的態(tài)度突顯檔案工作的特點，讓初次瀏覽網(wǎng)站的人能從視覺或文字上對檔案工作或者檔案部門有一個清晰了解。但眾多高校檔案館網(wǎng)站無法分辨出這是一個檔案館網(wǎng)站還是其他部門網(wǎng)站（如圖1）。（2）重點亮點欠突出。對于用戶重點需要的板塊內(nèi)容在首頁中無專門模塊設(shè)置，需要用戶通過菜單欄一級級展開才能找到;對于能起到宣傳作用且展示學(xué)校文化底蘊或特色的，本應(yīng)作為亮點，有的高校只以簡單的文字描述展示。（3）細(xì)節(jié)考慮欠周全。如信息服務(wù)和交流等功能沒有具體的操作說明，對于特殊情況說明更是無從談起。（4）網(wǎng)頁設(shè)計欠美感。有些高校檔案網(wǎng)頁內(nèi)容信息也比較全面，但是對于信息內(nèi)容以EXCLE表格的形式呈現(xiàn)，背景為純色，因為信息量較大，容易引起視覺疲勞，且用戶不能快速準(zhǔn)確找到想要的信息。

二、用戶體驗的概念

用戶體驗（User Experience，簡稱UE或ux）的概念最早由唐納德·諾曼提出和推廣，是指用戶在使用產(chǎn)品、服務(wù)或系統(tǒng)過程中的建立起來的主觀心理感受，這種心理感受發(fā)生在與產(chǎn)品或服務(wù)接觸或使用的全過程中，解決的是產(chǎn)品或服務(wù)應(yīng)用環(huán)境的綜合問題[1]。在“以人為本”的社會中，“用戶體驗”則在實踐中真實地詮釋了該理念。高校檔案網(wǎng)站的用戶主體是高校師生，包含在校和畢業(yè)的。通過對高校檔案網(wǎng)站的統(tǒng)計數(shù)據(jù)和對用戶的訪談可以看出：（1）用戶點擊率最高的是對檔案的查詢利用，以及對檔案館館藏資源的了解;（2）用戶目前對檔案網(wǎng)頁的較多提議是查詢板塊的易用可用性，以及對網(wǎng)站整體特色提升的提議。

三、基于用戶體驗的高校檔案網(wǎng)站設(shè)計原則

在設(shè)計基于用戶體驗的高校檔案網(wǎng)站中，需要遵循的是以用戶為核心，從用戶的需求、環(huán)境視覺、心理感受等各個方面考量網(wǎng)站的設(shè)計，主要是做好以下幾個方面。

（1）凸顯服務(wù)，以人為本。檔案資源只有為用戶所用時才能發(fā)揮它的第二價值作用，所以在檔案網(wǎng)站設(shè)計時應(yīng)突出用戶重點關(guān)注的服務(wù)，如檔案的信息服務(wù)查詢、利用、交流。

（2）總體布局，提升特色。檔案對于人們應(yīng)該是具有歷史性、權(quán)威性。那么高校檔案網(wǎng)站應(yīng)體現(xiàn)這么一種環(huán)境：穩(wěn)重、權(quán)威，但又不顯沉重、古板。在總體布局上，要兼顧個性和整體，求同又存異，簡約不簡單，在這些原則下讓整個網(wǎng)頁和諧，特色和層級鮮明，突出藝術(shù)領(lǐng)域的節(jié)省率即“效法自然”[2]。

（3）深度利用，資源為主。檔案資源是檔案的生命線，具有其他部門無法企及的權(quán)威性和全面性[3]，突出資源的價值，深度挖掘和開發(fā)現(xiàn)有的資源是檔案網(wǎng)站區(qū)別與其他網(wǎng)站的最大優(yōu)勢，也是用戶能夠體驗高校文化底蘊、了解學(xué)校歷史變革的直接途徑。

（4）信息時代，網(wǎng)上辦展。在“互聯(lián)網(wǎng)+”時代，檔案網(wǎng)站也需要積極利用信息化環(huán)境宣傳學(xué)校檔案資源，檔案文化，最大限度地做好愛國主義教育基地的工作，所以，將檔案館中館藏通過信息化手段如拍照、攝像、VR等技術(shù)在網(wǎng)上辦展，讓用戶能更加直觀形象地了解高校檔案和檔案文化。

四、基于用戶體驗的高校檔案網(wǎng)站具體設(shè)計方案

在基于用戶體驗的高校檔案網(wǎng)站設(shè)計中，以上述設(shè)計原則為導(dǎo)向，具體采用從總體到局部再到細(xì)節(jié)的設(shè)計方案。

（一）總體布局

（1）結(jié)構(gòu)層次。高校檔案網(wǎng)站結(jié)構(gòu)層次應(yīng)條理清晰，讓用戶感受直接易用，通常一級類目不應(yīng)超過8個，每個一級類目下結(jié)構(gòu)層次不宜過深，通常不超過5層，一般所需要的操作步驟控制在3-5步之內(nèi)。主要界面盡量不超過瀏覽器高度的200%，大量信息內(nèi)容盡量不超過瀏覽器高度的500%[4]。

（2）色彩色調(diào)。色彩色調(diào)應(yīng)結(jié)合高校本身特色和檔案特色，為用戶產(chǎn)生一種良好的色彩氛圍。一般說來，建議采用暖色色調(diào)為主，因為暖色色調(diào)較冷色色調(diào)給人一種穩(wěn)重感，且對于服務(wù)性部門，暖色色調(diào)容易讓人產(chǎn)生一種溫暖親近感。當(dāng)然，對于深藍(lán)色、灰色等顏色也可以搭配使用，這些顏色在心理學(xué)中易產(chǎn)生權(quán)威性、可靠性的感覺。在色彩明度上選擇適中，明度太低易產(chǎn)生強硬質(zhì)感，而明度太高則易產(chǎn)生輕質(zhì)質(zhì)感[5]。

（3）字體字號。字體應(yīng)與網(wǎng)站風(fēng)格一致，目前一般高校檔案網(wǎng)頁都是偏向穩(wěn)重型的，字體上盡量也選用如宋體、仿宋、黑體、楷體等顯莊重或有中國風(fēng)的字體，且同一級目錄或模塊需采用同樣的字體。對于字號，一級目錄字號一般在四號及以上，網(wǎng)頁上顯示的最小字號不小于10，行間距應(yīng)大于單倍行距。

（4）板塊區(qū)域設(shè)置。已有通過眼動儀研究網(wǎng)頁瀏覽的相關(guān)研究表明：用戶在瀏覽兩欄網(wǎng)頁時，用戶首先瀏覽網(wǎng)頁的頂部，然后從左側(cè)開始閱讀，并用一種F型的模式一行接一行閱讀剩下的網(wǎng)頁;在瀏覽三欄網(wǎng)頁時，用戶同樣先注視頂部，然后閱讀中間欄，最后再用和兩欄閱讀相同的模式瀏覽網(wǎng)頁。位于網(wǎng)頁中部和上部內(nèi)容的注視時間更長，注視次數(shù)更多。對于尺寸大小，尺寸幅度較大的更容易引起注視[6]。同時根據(jù)格式塔心理學(xué)理論，在網(wǎng)頁設(shè)計中還需要注意網(wǎng)頁設(shè)計的慣例網(wǎng)站的標(biāo)志會放在頁面的左右上角、網(wǎng)站的版權(quán)所有會放在頁面的最下面等[7]。所以根據(jù)這些研究結(jié)果，從用戶體驗角度出發(fā)，在高校檔案網(wǎng)頁設(shè)計中，檔案館的標(biāo)記可以放在頁面的左右上角，在網(wǎng)頁較上面部分或左側(cè)部分，應(yīng)該設(shè)計最受用戶關(guān)注的內(nèi)容，如檔案查詢利用，由于查詢利用需要做一些業(yè)務(wù)上的指導(dǎo)說明，建議可以用鏈接展開二級界面，但是不論直接展開還是在二級界面中展開，在首頁上的區(qū)域不能過小;在網(wǎng)頁上部右側(cè)，可以放置一些用戶比較關(guān)注的，或者時效性較強的板塊，如信息動態(tài)或通知等;在網(wǎng)頁的中部則可以做館藏信息或者網(wǎng)上展廳，因為網(wǎng)上展廳的內(nèi)容會比較多且分級，在此可以分模塊，切割成多個專題點。對于平常檔案管理的一些規(guī)范操作因為涉及面較窄，利用率不高，則可以放在網(wǎng)頁的下部。

針對以上思路，設(shè)計了某高校的檔案網(wǎng)站，具體（如圖2）。

（二）主要模塊的具體設(shè)計

（1）查詢利用模塊。根據(jù)實踐中的檔案利用，可以將檔案利用模塊劃分成檔案利用前的說明（包含查詢流程和手續(xù)等需要事先了解或準(zhǔn)備的資料）;利用預(yù)約（預(yù)約后用戶可以在相應(yīng)時間去實地取回所需檔案）;利用查詢（參見圖2中查詢利用模塊）。以上三個模塊因為信息量較大，建議做鏈接以二級頁面的形式展開。查詢界面應(yīng)簡潔，操作簡單，并在選項或者輸入框邊上加以輔助說明。對于查詢反饋結(jié)果，應(yīng)條目清晰，且橫向上不易采用滑動條，不然尾端信息容易被用戶忽略，造成信息遺漏。

（2）網(wǎng)上展廳模塊。對于網(wǎng)上展廳，可以分成多個主題，如果主題模塊太多，可以采用橫向滾動式展開，速度不易過快，一般呈現(xiàn)不能少于5秒。對于用戶而言，網(wǎng)上展廳最重要的是體驗學(xué)校的辦學(xué)特色和校園文化，所以應(yīng)結(jié)合學(xué)校實際合理分類主題，如在寧波大學(xué)寧波幫主題是一個典型，挖掘檔案中寧波幫事跡和文化，以及其背后的真實故事，讓展廳主題更加豐富，內(nèi)容更加貼近用戶。在主題模塊的鏈接圖片選擇上，可以借鑒學(xué)校典型的建筑或者地標(biāo)作為鏈接國標(biāo)，增加用戶校園懷舊情懷（參見圖2中網(wǎng)上展廳模塊）。做好整體網(wǎng)頁與主題網(wǎng)頁之間的統(tǒng)一性，又要兼顧主題網(wǎng)頁的個性化，不同的主題可以用不同的主色調(diào)，如學(xué)校歷史沿革，可以采用高校教學(xué)樓的主色調(diào)，有利于增強用戶的熟悉感，并產(chǎn)生回憶;如海洋相關(guān)主題，采用藍(lán)色色調(diào)，使用戶自然聯(lián)想到海洋相關(guān)方面的內(nèi)容。當(dāng)然，雖然不同主題的色調(diào)不一致，但是各主題之間必須存在一定的相似性，如在頁面布局上一脈相承，網(wǎng)頁菜單欄引導(dǎo)界面及標(biāo)志性引導(dǎo)修飾上保持一致。同時，網(wǎng)上展廳應(yīng)該拓展不同的信息技術(shù)手段，照片、錄像已經(jīng)成為遍及的檔案記錄方式，虛擬現(xiàn)實技術(shù)也開始被青睞，可以嘗試將高校中不太對外開放的場館及館藏通過虛擬技術(shù)表現(xiàn)出來，讓用戶有一種身臨其境的感覺。

（3）工作動態(tài)模塊。工作動態(tài)是反映高校檔案館目前主要工作的窗口，通知、公告、公示等，由于內(nèi)容較多但區(qū)域有限，一般采用滾動播出，滾動的速度可以根據(jù)區(qū)域的大小來設(shè)置，一般人每分鐘閱讀400字左右，對于有時效性或者特別重要的，對文字顏色加以區(qū)分，但也要注意該文字顏色與總體顏色的協(xié)調(diào)性，不顯突兀（參見圖2中工作動態(tài)模塊）。

（4）臨時性主題模塊。對于臨時性主題模塊，建議采用懸浮式窗口，并且根據(jù)心理學(xué)視覺原理，應(yīng)掛在上端左側(cè)，并且在保持網(wǎng)頁整體一致性的基礎(chǔ)上用較醒目的顏色或?qū)Ρ壬右酝怀觥Ｈ缭诨疑{(diào)的頁面上，可以采用深藍(lán)色，整體協(xié)調(diào)感較好，又較能突出主體。參見圖2中懸浮窗口。

（三）細(xì)節(jié)之處的設(shè)計

為了增加用戶體驗的歷史感，在網(wǎng)頁設(shè)計模塊邊界等細(xì)節(jié)之處需要加以修飾。國內(nèi)高校檔案館一般以古典或中式的元素加以修飾，如區(qū)域間的分割線，可以采用（如圖3）[8]。在圖片邊緣處理上，可以根據(jù)網(wǎng)頁整體需要采用羽化邊緣、浮雕效果等，一般說來羽化能產(chǎn)生柔和的感覺，浮雕、陰影產(chǎn)生的質(zhì)感比較強烈（如圖4、5）。

結(jié)語

基于用戶體驗的高校檔案網(wǎng)站設(shè)計是根據(jù)現(xiàn)有的用戶體驗及需求而提出的設(shè)計，在實踐中，隨著用戶體驗的轉(zhuǎn)變，網(wǎng)站設(shè)計也應(yīng)隨之轉(zhuǎn)變提升，它是一個動態(tài)的過程，所以需要定時地對用戶進行分析，根據(jù)用戶體驗適時地改變設(shè)計方案和細(xì)節(jié)，實現(xiàn)動態(tài)式的基于用戶體驗的高校檔案網(wǎng)站設(shè)計。

參考文獻

[1]喬紅月，蔣曉.用戶體驗視角下MOOC移動學(xué)習(xí)平臺設(shè)計趨勢[J].設(shè)計，2018 （9）：32-33

[2]阿恩海姆·魯?shù)婪?藝術(shù)與視知覺[M].滕守堯，朱疆源，譯.成都：四川人民出版社，2006

[3]張江珊.基于“互聯(lián)網(wǎng)+”的檔案網(wǎng)站建設(shè)[J].山西檔案，2018（1）：47-50

[4]浙江省檔案局.檔案工作實務(wù)[M].杭州：浙江大學(xué)出版社，2014： 226-227

[5]阿恩海姆·魯?shù)婪?藝術(shù)與視知覺[M].滕守堯，朱疆源，譯.成都：四川人民出版社，2006

[6]陳晨.眼動技術(shù)簡介及其在廣告心理學(xué)中的應(yīng)用[J].中山大學(xué)研究生學(xué)刊（自然科學(xué)、醫(yī)學(xué)版），2014 （4）：1-5

[7]胡爽基于格式塔的網(wǎng)頁信邑設(shè)計的美化研究[叨包裝工程，2010 （11）：111-115

[8]QQAAB78280.中式古典邊框海報設(shè)計元素[EB/OL]. http： //weili.ooopic.com/weili_16307867.html

[9]錢程，唐德紅.微交互在B2C網(wǎng)站設(shè)計中的應(yīng)用與研究[J].設(shè)計.2016，29（9）：150-151