原源 殷子由

（北京師范大學(xué)-香港浸會大學(xué)聯(lián)合國際學(xué)院 文化與創(chuàng)意學(xué)部，廣東 珠海 519000）

一、引言

互聯(lián)網(wǎng)及其相關(guān)技術(shù)的迅速發(fā)展，推動著信息存儲和傳輸向自動化及數(shù)字化方向發(fā)展，出現(xiàn)了大量的電子書和其他數(shù)字化閱讀材料，這也引起了人們對社會圖書館網(wǎng)站或數(shù)字圖書館以及高校圖書館網(wǎng)站的建設(shè)和現(xiàn)存問題的關(guān)注[1]。雖然它們的服務(wù)對象及涵蓋內(nèi)容可能不盡相同，但一般都以網(wǎng)站形式存在，且其目的都是提供信息和服務(wù)用戶。同時，通過使用線上圖書館網(wǎng)站，人們可以訪問他們想要的大部分資源，而不必親自踏入圖書館，因此人們關(guān)心的不僅僅是這些數(shù)字圖書館或圖書館網(wǎng)站的功能性，還有它們的易用性（或“可用性”），這意味著人們傾向于使用那些能以令人滿意的方式高效地實現(xiàn)他們的目標的圖書館網(wǎng)站[2]。

盡管近年來移動設(shè)備的使用率有了很大地提高，但根據(jù)艾瑞網(wǎng)站在2017年通過社區(qū)調(diào)查獲得的數(shù)據(jù)報告顯示，人們在電腦端上瀏覽、搜索、收集和整理信息的行為卻越來越多且明顯高于移動終端，分別占81.8%、78.6%、52.3%和49.8%[3]。因此，大多數(shù)人，包括學(xué)校的學(xué)生和教師，大部分時間會通過電腦端登錄圖書館網(wǎng)站，以便搜索、瀏覽和下載各種資源。然而，許多學(xué)校圖書館的電腦端網(wǎng)站在易用性方面并不十分令人滿意。學(xué)校圖書館網(wǎng)站的用戶界面優(yōu)化有助于提高網(wǎng)站的易用性，使用戶（學(xué)生和教師）更快地獲取信息，使網(wǎng)站的運行更加順暢。本研究選取北京師范大學(xué)-香港浸會大學(xué)聯(lián)合國際學(xué)院（以下簡稱“北師港浸大”）學(xué)習資源中心的網(wǎng)頁界面作為主要研究對象，研究目標定為總結(jié)出一套適用于圖書館網(wǎng)頁界面優(yōu)化的設(shè)計原則，并針對北師港浸大學(xué)習資源中心網(wǎng)頁界面設(shè)計一套易于使用的網(wǎng)頁設(shè)計模型。

二、網(wǎng)頁界面設(shè)計

網(wǎng)頁的易用性涉及人機交互（HCI）、網(wǎng)頁設(shè)計、用戶界面（UI）設(shè)計或用戶體驗（UX）等領(lǐng)域，從網(wǎng)頁界面設(shè)計與易用性、網(wǎng)頁界面設(shè)計原則兩個方面做文獻綜述。關(guān)于網(wǎng)頁界面設(shè)計的一些闡述和解釋，以及對易用性有重大影響的網(wǎng)頁界面設(shè)計的設(shè)計指南或規(guī)范，都在所回顧的研究中被提出并證明是可靠的。這些內(nèi)容對于提出一套合理的設(shè)計原則并設(shè)計一個實用的圖書館網(wǎng)頁界面原型都有一定的參考價值。

1.網(wǎng)頁界面設(shè)計與易用性

Lee和Koubek曾提到：“網(wǎng)站是一組相互連接的界面和功能的屬性 ”[4]。而用戶界面（UI）則是一個交互系統(tǒng)中為用戶完成特定任務(wù)提供信息和控制的所有組件，包括所有的軟件和硬件。網(wǎng)頁界面設(shè)計實際上是一個網(wǎng)站的UI設(shè)計，是針對網(wǎng)站中所有頁面組件（或“頁面元素”）進行的設(shè)計。這就意味著，用戶是網(wǎng)頁界面設(shè)計中首要考慮的對象，也就是說，設(shè)計網(wǎng)頁界面的目的是使網(wǎng)站對用戶而言更易用。

易用性是評估網(wǎng)站質(zhì)量的重要因素。Nielsen將網(wǎng)站的易用性定義為“用戶能夠?qū)W會操作使用系統(tǒng)和記憶基本功能的容易程度、網(wǎng)站的操作效率、避免錯誤的能力和用戶的總體滿意度”[5]。網(wǎng)站的易用性是一個決定用戶與網(wǎng)頁界面交互的容易程度的關(guān)鍵因素[6]。此外，中國學(xué)者 Liu等人根據(jù)對國內(nèi)網(wǎng)站的研究，提出網(wǎng)站主頁的美學(xué)設(shè)計已成為影響用戶滿意度、激發(fā)積極情感、增強網(wǎng)站易用性的關(guān)鍵因素[7]。因此，將易用性的概念運用到網(wǎng)頁界面的美學(xué)設(shè)計中，從而為用戶提供更好的使用體驗，對該領(lǐng)域的研究者和設(shè)計師而言都非常重要。

為了提高網(wǎng)頁界面的易用性，在網(wǎng)頁界面的早期設(shè)計階段就要注意界面元素的設(shè)計。在設(shè)計人們認為是好的或有用的網(wǎng)頁界面時，應(yīng)考慮多種交互元素，包括布局、菜單、搜索框、圖標、按鈕、選項卡、文本等[8][9]。Kuo和Chen的研究指出，在用戶界面設(shè)計方面，廣告的展示、字體大小、字體顏色、簡易功能鍵、界面布局，以及頁面顏色組合與網(wǎng)站的易用性有關(guān)，最重要的一個因素是簡單的功能鍵，而網(wǎng)頁界面布局和菜單欄的工具圖標化是影響功能鍵質(zhì)量的因素[8]。在這些元素中，圖標和按鈕及選項卡的交互方式類似[9]，它們都可以作為功能鍵跳轉(zhuǎn)到其他頁面或彈出窗口。

網(wǎng)頁界面的布局，即所謂的網(wǎng)頁元素的放置，如果能夠最大限度地展示主要信息，便有助于用戶定位目標[10][11]。Thorngate和Hoden的研究提出欄數(shù)、導(dǎo)航菜單的位置和視覺集成三個關(guān)鍵的界面布局對網(wǎng)站的易用性有影響[12]。Manzoor等人在2019年提出的“六個屬性度量標準”中，頁面布局是評估大學(xué)網(wǎng)站易用性的六個因素之一，因為它可以在一定程度上決定用戶的使用表現(xiàn)[9]。Salman、Cheng和Patterson研究指出，當圖標設(shè)計得當時，它們有助于降低界面的復(fù)雜性，從而減少用戶在最終操作時的精神負荷[13]，Arledge2014年的研究證實了這一觀點，“圖標的形式對其易用性的影響大于圖標樣式或顏色的影響作用”[13]。Islam和Bonwman研究認為，圖標也可以被定義為“界面標識”，設(shè)計直觀的界面標識對于提高界面易用性至關(guān)重要[14]。視覺上令人愉悅的界面布局可以提高系統(tǒng)的整體易用性和滿意度[9][10]。

2.網(wǎng)頁界面設(shè)計原則

許多學(xué)者、設(shè)計師甚至企業(yè)在其研究報告或官方網(wǎng)站中，提出了滿足特定網(wǎng)頁界面設(shè)計易用性要求的布局排版和圖標的設(shè)計原則或準則。

為使網(wǎng)頁視覺清晰，在設(shè)計網(wǎng)頁布局時，設(shè)計師應(yīng)考慮欄目數(shù)、導(dǎo)航和核心內(nèi)容的位置以及空白區(qū)域（負空間）的比例。一是欄數(shù)，網(wǎng)頁的兩欄布局比單欄或三欄布局在易用性上稍有優(yōu)勢，因為兩欄的設(shè)計使得主次內(nèi)容的區(qū)分更加清晰[12]。二是導(dǎo)航菜單的位置，Kalbach和Bosenick的研究表明，用戶會希望網(wǎng)站的導(dǎo)航主菜單放置在屏幕的頂部或左側(cè)[15]。Thorngate和Hoden的實驗發(fā)現(xiàn)，用戶認為將導(dǎo)航菜單放置在頁面左側(cè)比將其放置在頂部更為顯眼[12]，將核心且常用的內(nèi)容放在網(wǎng)頁視覺的中心，可以提高用戶的操作速度，使用戶更快地完成任務(wù)，這一點在Liu等人的研究中也得到了證明[7]。三是背景的相對面積，人們常說的“空白區(qū)域”“負空間”在布局排版設(shè)計中也起到了很重要的影響作用，因為文本和空白區(qū)域的比例會影響用戶的瀏覽，一般來說，當白色部分占據(jù)頁面總面積的40%-60%時，觀眾會認為頁面整潔。他們的研究還表明，15—60歲的人群更喜歡50%以上的空白區(qū)域[16][17]。

為使網(wǎng)頁易用，設(shè)計網(wǎng)頁界面的圖標，最重要的是要使圖標能正確地傳達出它們所要表達的意思，并確保圖標的可讀性和清晰度。正如Arledge在其研究中得出的結(jié)論，圖標的形式會對易用性產(chǎn)生重要影響，即圖標的外觀是圖標設(shè)計的關(guān)鍵[13]。圖標應(yīng)該設(shè)計為簡單、直觀且現(xiàn)代的樣式[14]。這就意味著，每個圖標都應(yīng)該被設(shè)計為極簡的樣子，從而表達其基本特征，因為太多的細節(jié)會使圖標顯得粗糙或辨識度不強[18][19]。根據(jù)蘋果、谷歌及騰訊等公司公布的圖標設(shè)計規(guī)則，所有圖標在大小、細節(jié)層次、視角和筆畫粗細等方面都應(yīng)該相同，這意味著它們應(yīng)該保持一致的風格[18][20]。圖標中最好不包含所有直觀的文字設(shè)計，如果需要解釋圖標，可以在圖標下方顯示標簽并相應(yīng)調(diào)整其位置[14][18][21]。

以往的研究表明了網(wǎng)頁元素在提高網(wǎng)頁易用性方面的重要性，并證明了布局和圖標的設(shè)計有利于提高用戶使用網(wǎng)站的性能，提升網(wǎng)頁易用性，優(yōu)化網(wǎng)頁界面，關(guān)鍵是優(yōu)化網(wǎng)頁界面中的交互元素。

三、研究設(shè)計

為設(shè)計一個易于使用的圖書館網(wǎng)頁界面模型，根據(jù)所總結(jié)的設(shè)計原則，針對網(wǎng)頁界面布局和功能圖標進行優(yōu)化，增強學(xué)校圖書館的電腦端網(wǎng)站的易用性，讓用戶在這類網(wǎng)站的電腦端有更好的檢索體驗，對高校來說至關(guān)重要。本研究選取北師港浸大學(xué)習資源中心的網(wǎng)頁界面作為研究主體，針對其存在的問題，通過實驗法，在參考以往學(xué)者的研究總結(jié)出相關(guān)的設(shè)計原則后，對其進行優(yōu)化，并設(shè)計一個新的網(wǎng)頁界面模型，為北師港浸大學(xué)習資源中心網(wǎng)站的首頁及大部分常用的二級界面建設(shè)一套易用性強的界面模型。

為查明北師港浸大學(xué)習資源中心網(wǎng)頁界面現(xiàn)存的問題，并評估研究的可行性，在正式研究開始之前進行了一項試驗性研究。根據(jù)網(wǎng)絡(luò)易用性大師Jakob Nielsen的分析[22]，一個系統(tǒng)中大約80%的問題可以通過5-6個測試用戶的操作來發(fā)現(xiàn)。因此，本試驗性研究前期，研究員對6位北師港浸大的師生進行了采訪，以了解學(xué)習資源中心網(wǎng)站的常用功能。結(jié)果表明，用戶經(jīng)常使用學(xué)習資源中心網(wǎng)站依次是尋找可連接到學(xué)校VPN的鏈接、查單詞、使用多組關(guān)鍵字搜索所有可獲得的文獻、訪問數(shù)據(jù)庫、查詢他們的借閱記錄。

在五個常用功能的基礎(chǔ)上，研究員設(shè)計了如下五個實驗任務(wù)：1）找到可訪問學(xué)校VPN的鏈接；2）使用專業(yè)詞典進行詞匯定義查詢；3）用幾組關(guān)鍵詞進行文獻檢索；4）訪問數(shù)據(jù)庫；5）查詢個人借閱記錄并找到具體書籍。隨后，受訪的六名師生被邀請完成這五項任務(wù)，并被要求說出他們對實時遇到的界面的看法。根據(jù)實驗對象的陳述，從簡單的任務(wù)和觀察中發(fā)現(xiàn)了網(wǎng)站界面現(xiàn)存的兩組突出問題。

第一組問題與界面布局相關(guān)。在本研究中，界面布局可以理解為網(wǎng)頁元素在界面中的放置。首先，在首頁中沒有用于定位首頁中每個區(qū)塊的標題，首頁中不同的兩個區(qū)塊內(nèi)容沒有對齊（圖1），首頁中每個區(qū)塊的功能圖標的劃分與頂部導(dǎo)航欄中的不一致。其次，在二級界面中，部分頁面由于側(cè)方導(dǎo)航菜單太寬，主要內(nèi)容占據(jù)了相對較小的比例，而有些頁面甚至沒有側(cè)方導(dǎo)航（圖2）。

第二組問題與功能圖標相關(guān)。在本研究中，功能圖示可以定義為帶有符號的互動功能鍵或功能按鈕。發(fā)現(xiàn)的問題包括：首頁和二級頁面，都沒有一個懸浮的固定圖標可以讓用戶快速鏈接到頁面頂部，首頁中出現(xiàn)了一些沒有實際交互功能的、帶有一定誤導(dǎo)性的圖標（圖3），如果沒有圖標下方的文字說明，一些功能圖標的識別是困難的。

圖1 北師港浸大學(xué)習資源中心首頁 圖標區(qū)域

圖2 北師港浸大學(xué)習資源中心E-resources頁面

圖3 北師港浸大學(xué)習資源中心首頁 誤導(dǎo)性的圖標

四、實驗：模型設(shè)計

通過試驗性研究的結(jié)果可知，頁面布局和功能圖標的設(shè)計對師生使用學(xué)習資源中心的影響很大。因此本研究的方向確定為學(xué)習資源中心網(wǎng)頁界面布局和功能圖標設(shè)計的易用性優(yōu)化，網(wǎng)頁界面原型的開發(fā)需要將其核心用戶放在開發(fā)過程的中心?；谘芯烤C述中的設(shè)計原則，研究設(shè)計了與五種最常用功能相關(guān)的一、二級界面。

圖4 北師港浸大學(xué)習資源中心常用功能網(wǎng)站導(dǎo)覽圖

圖5 北師港浸大學(xué)習資源中心界面模型 首頁 頂部

圖6 北師港浸大學(xué)習資源中心界面模型 首頁 中部

1.構(gòu)建網(wǎng)站導(dǎo)覽流程圖

在進行具體的頁面設(shè)計之前，首先要明確頁面間的關(guān)系，以及每個功能對應(yīng)的用戶操作流程，從而更好地進行后續(xù)的設(shè)計。研究首先對北師港浸大學(xué)習資源中心網(wǎng)站導(dǎo)覽流程進行了梳理，構(gòu)建了網(wǎng)站導(dǎo)覽流程圖（圖4）。

2.設(shè)計闡述

在明確了流程框架后，根據(jù)前期試驗性研究結(jié)果，對首頁和各二級界面的UI進行了模型優(yōu)化設(shè)計，主要針對的是頁面布局和功能圖標設(shè)計這兩部分。

首先，調(diào)整主頁布局。主頁保留了原來的單欄瀑布式布局，導(dǎo)航欄仍然設(shè)計在頁面頂部的標題下方，但圖標及其他內(nèi)容的對齊進行了調(diào)整，使其在視覺上更整齊。頁面中空白區(qū)域的面積也進行了調(diào)整，在調(diào)整頁面兩側(cè)邊距為各112px的同時，增加了每個分區(qū)之間的縱向間隔，使每個區(qū)域的劃分更明確。按菜單欄的分類整理了首頁中部功能圖標之余，刪除了不常用的功能圖標，使界面看起來更加統(tǒng)一、整潔和清晰。將搜索欄和一些常用功能的標簽等核心內(nèi)容適當調(diào)整后放在首頁中間最顯眼的位置，使其更便于使用。為了更好地導(dǎo)航用戶，在首頁中還為每個分區(qū)添加了標題。

其次，調(diào)整二級頁面的布局。每個二級界面的布局都設(shè)計為兩欄的模式，每頁中都設(shè)計了二級導(dǎo)航菜單，并且都放在了頁面的左側(cè)，將左側(cè)菜單的位置做了移動，占用的寬度也調(diào)整為稍窄一些。此外，頁眉、頂部主菜單和頁腳被保留以便與首頁保持一致。頁面的邊距也被設(shè)計為便與首頁相同，這樣每個二級界面中的核心內(nèi)容便更集中在頁面的中心。

圖7 北師港浸大學(xué)習資源中心界面模型 首頁 尾部

圖10 北師港浸大學(xué)習資源中心界面模型 Summon頁面 中部

圖8 北師港浸大學(xué)習資源中心界面模型 Remote Access to E-resources頁面 頂部

圖11 北師港浸大學(xué)習資源中心界面模型 Advanced Search頁面 頂部

圖9 北師港浸大學(xué)習資源中心界面模型E-resources頁面 中部

圖12 北師港浸大學(xué)習資源中心界面模型 OPACLoan History頁面 中部

最后，對圖標設(shè)計進行優(yōu)化。學(xué)習資源中心網(wǎng)站中的圖標有兩大類，一類是系統(tǒng)圖標，另一類是專為學(xué)習資源中心提供的功能設(shè)計的圖標，即谷歌官方定義的 “定制圖標”。系統(tǒng)圖標和定制圖標首要的是重新設(shè)計或修改不易理解和識別的圖標形式，如“圖書借還、續(xù)借及預(yù)約”“課程參考書”“我的圖書館賬戶”等。同時，通過對每個圖標進行一致的規(guī)范化處理，實現(xiàn)圖標統(tǒng)一的視覺效果，例如將圖標中的圓角調(diào)整為相同的弧度，統(tǒng)一每個圖標在水平和垂直方向的比例以及位置，等等。除此之外，用于解釋圖標的文本與菜單欄中的描述統(tǒng)一后放置在圖標下面，在首頁和各二級頁面中還添加了可定位回到頁面頂部的固定懸浮圖標。

3.效果展示

通過設(shè)計成果可以看出，網(wǎng)頁界面設(shè)計的一些闡述和解釋，對易用性有重大影響的網(wǎng)頁界面設(shè)計的設(shè)計指南或規(guī)范，以及基于先前學(xué)者研究的結(jié)果和各公司提供的設(shè)計規(guī)則總結(jié)得到的設(shè)計規(guī)則，這些內(nèi)容對于提出一套合理的設(shè)計原則，并設(shè)計一個實用的圖書館網(wǎng)頁界面原型都有一定的參考價值，可以適用于優(yōu)化北師港浸大學(xué)習資源中心的網(wǎng)站，并為其進行易于使用的界面模型設(shè)計。

五、總結(jié)

高校圖書館網(wǎng)站的出現(xiàn)，使得人們學(xué)習及查閱資料變得更為便利，更是方便了高校師生進行學(xué)術(shù)研究工作。但是，不易于使用的圖書館網(wǎng)頁界面會影響到師生的使用體驗，給研究工作帶來不便。本文通過對人機交互、網(wǎng)頁設(shè)計、用戶界面設(shè)計或用戶體驗等領(lǐng)域的研究進行回顧，通過實驗性調(diào)研，針對北師港浸大學(xué)習資源中心現(xiàn)存的頁面布局和功能圖標識別兩大主要問題，總結(jié)出了一系列優(yōu)化設(shè)計原則，并最終設(shè)計出一套界面交互模型。設(shè)計結(jié)果在一定程度上體現(xiàn)了從以往研究結(jié)果中總結(jié)出來的設(shè)計原則的可靠性。在后續(xù)研究中，可以更充分地了解用戶的使用習慣，進一步優(yōu)化模型，并對設(shè)計好的界面模型進行易用性檢測，從而得到更完善的模型用于實際發(fā)布。