原源 殷子由

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

一、引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、研究設(shè)計(jì)

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

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

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

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

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

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

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

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

四、實(shí)驗(yàn)：模型設(shè)計(jì)

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

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

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

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

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

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

2.設(shè)計(jì)闡述

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

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

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

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

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

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

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

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

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

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

3.效果展示

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

五、總結(jié)

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