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

張菲菲

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

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

中國分類號(hào)：TB47

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1003-0069（2019）02-0140-03

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

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

二、用戶體驗(yàn)的概念

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

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

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

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

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

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

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

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

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

（一）總體布局

（1）結(jié)構(gòu)層次。高校檔案網(wǎng)站結(jié)構(gòu)層次應(yīng)條理清晰，讓用戶感受直接易用，通常一級(jí)類目不應(yīng)超過8個(gè)，每個(gè)一級(jí)類目下結(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)為主，因?yàn)榕{(diào)較冷色色調(diào)給人一種穩(wěn)重感，且對(duì)于服務(wù)性部門，暖色色調(diào)容易讓人產(chǎn)生一種溫暖親近感。當(dāng)然，對(duì)于深藍(lán)色、灰色等顏色也可以搭配使用，這些顏色在心理學(xué)中易產(chǎn)生權(quán)威性、可靠性的感覺。在色彩明度上選擇適中，明度太低易產(chǎn)生強(qiáng)硬質(zhì)感，而明度太高則易產(chǎn)生輕質(zhì)質(zhì)感[5]。

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

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

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

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

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

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

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

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

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

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

結(jié)語

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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