高校圖書(shū)館網(wǎng)站頁(yè)面的前端設(shè)計(jì)探討

韓 晶

（福州大學(xué)圖書(shū)館 福建福州 350108）

高校圖書(shū)館網(wǎng)站頁(yè)面的前端設(shè)計(jì)探討

韓 晶

（福州大學(xué)圖書(shū)館 福建福州 350108）

高校圖書(shū)館網(wǎng)站的設(shè)計(jì)應(yīng)從讀者的角度出發(fā)，以服務(wù)于廣大高校師生教學(xué)科研為目的。本文指出了對(duì)于高校圖書(shū)館網(wǎng)站進(jìn)行前端設(shè)計(jì)的必要性，并且介紹了高校圖書(shū)館網(wǎng)站設(shè)計(jì)特點(diǎn).進(jìn)而提出了針對(duì)圖書(shū)館網(wǎng)站設(shè)計(jì)特點(diǎn)所采用的設(shè)計(jì)方法，并進(jìn)行了簡(jiǎn)單的舉例說(shuō)明。

高校圖書(shū)館；網(wǎng)站設(shè)計(jì)；設(shè)計(jì)特點(diǎn)；設(shè)計(jì)方法

在當(dāng)今網(wǎng)絡(luò)廣泛應(yīng)用的大環(huán)境下，圖書(shū)館網(wǎng)站已經(jīng)成為用戶們了解圖書(shū)館最便捷的途徑。高校圖書(shū)館也不例外，其為師生們提供了相較于傳統(tǒng)訪問(wèn)圖書(shū)館更為方便、快捷以及詳盡的服務(wù)。高校圖書(shū)館網(wǎng)站對(duì)外有著宣傳和提供檢索信息的功能，因此，制作精良的高校圖書(shū)館網(wǎng)站是一個(gè)擁有良好服務(wù)的高校圖書(shū)館所不可或缺的部分。

一、高校圖書(shū)館網(wǎng)站前端設(shè)計(jì)的必要性

針對(duì)高校圖書(shū)館用戶這一特殊群體，圖書(shū)館網(wǎng)站要為廣大師生提供更為便捷而詳盡的信息檢索服務(wù)，其網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中需要與其他網(wǎng)站加以區(qū)別。例如設(shè)置獨(dú)立的檢索功能欄目，以及簡(jiǎn)潔明晰的版式布局，都能使用戶訪問(wèn)圖書(shū)館網(wǎng)站得到更加便捷的服務(wù)。因此，在設(shè)計(jì)高校圖書(shū)館網(wǎng)站過(guò)程中，應(yīng)以主題鮮明、形式與內(nèi)容保持一致、把握整體風(fēng)格為設(shè)計(jì)原則。

二、高校圖書(shū)館網(wǎng)站設(shè)計(jì)特點(diǎn)

實(shí)際應(yīng)用于高校圖書(shū)館網(wǎng)站設(shè)計(jì)，具體可以分為以下幾個(gè)方面：

1.整體風(fēng)格統(tǒng)一

高校圖書(shū)館網(wǎng)站設(shè)計(jì)要把握整體風(fēng)格。在網(wǎng)站設(shè)計(jì)初期就應(yīng)該對(duì)網(wǎng)站風(fēng)格有個(gè)整體規(guī)劃，其中包括整個(gè)網(wǎng)頁(yè)的色彩基調(diào)和布局構(gòu)成等要一致，主頁(yè)和次級(jí)頁(yè)面的顏色使用要始終具有同一性。

2.色彩搭配簡(jiǎn)潔明晰

對(duì)于比較好的網(wǎng)站來(lái)說(shuō)，頁(yè)面并不一定要求非常的絢麗多彩，但是一定要有層次感，簡(jiǎn)潔、大方，而且要與網(wǎng)站的主題契合。高校圖書(shū)館網(wǎng)站主要針對(duì)的用戶即高校師生，網(wǎng)站色彩可以采用較為明快的色調(diào)，配色時(shí)不要使用過(guò)多種的顏色，在網(wǎng)頁(yè)配色中，盡量控制在三種色系以內(nèi)，以避免網(wǎng)頁(yè)花、亂、沒(méi)有主色的顯現(xiàn)。背景和前文的對(duì)比盡量要大，盡量不要用花紋繁復(fù)的圖案作背景，便于突出主要文字內(nèi)容。

3.欄目布局突出重點(diǎn)

高校圖書(shū)館網(wǎng)站功能性版塊必須分區(qū)明晰，使得用戶能一目了然找到自己所需要的服務(wù)，避免用戶在瀏覽網(wǎng)站時(shí)產(chǎn)生理解困難。傳統(tǒng)網(wǎng)頁(yè)頁(yè)面從上至下依次一般分為三個(gè)部分：頁(yè)面頂部包括banner條部分、導(dǎo)航、logo等；頁(yè)面中部就是欄目及網(wǎng)頁(yè)主要內(nèi)容等；以及頁(yè)面底部的就是副導(dǎo)航版權(quán)信息等。而高校圖書(shū)館網(wǎng)站頁(yè)面還需要添加一個(gè)主要部分即功能強(qiáng)大的檢索欄目。這也是用戶在圖書(shū)館網(wǎng)站上使用率最高的一個(gè)版塊。

三、針對(duì)圖書(shū)館網(wǎng)站設(shè)計(jì)特點(diǎn)所采用的設(shè)計(jì)方法

1.頁(yè)面設(shè)計(jì)規(guī)格：

圖書(shū)館網(wǎng)站頁(yè)面布局(首頁(yè))針對(duì)適合主流瀏覽器與用戶顯示器大小所設(shè)定的網(wǎng)頁(yè)大小為800px×600px；目前瀏覽器市場(chǎng)比重(2013年7月)為：IE核心：47.21%，奇虎360：25.1%。在IE瀏覽器下，頁(yè)面寬度減21px，例：1280px-21px=1259px。所以如果是在1280px分辨率下，網(wǎng)頁(yè)頁(yè)面寬度設(shè)置成為1258px較為安全，正文寬度則設(shè)置為980px。在涉及到有背景圖案的專題頁(yè)面時(shí)，寬度可設(shè)置成1440px，正文寬度設(shè)置成980px。同時(shí)，主頁(yè)頁(yè)面高度設(shè)計(jì)控制在一屏半以內(nèi)顯示最為合適。

2.頁(yè)面布局排版：

合理的布局在傳達(dá)信息的同時(shí)，也會(huì)讓人產(chǎn)生感官上的美感和精神上的享受[1]。網(wǎng)頁(yè)版式設(shè)計(jì)的基本類型大致為骨骼型、滿版型、中軸型、曲線型、焦點(diǎn)型、對(duì)稱型和自由型。其中骨骼型排版是一種規(guī)范的理性分割方法，高校圖書(shū)館網(wǎng)站也多以此類型進(jìn)行排版。高校圖書(shū)館網(wǎng)站版塊排版在視覺(jué)上要符合縱向分割，橫向模塊間距統(tǒng)一，縱向可根據(jù)頁(yè)面需求適當(dāng)區(qū)分。網(wǎng)頁(yè)布局的大致區(qū)分在于頁(yè)面中部也就是欄目和網(wǎng)頁(yè)主要內(nèi)容的版塊劃分，一般分為兩欄或三欄。

3.文字設(shè)計(jì)規(guī)格：

圖書(shū)館網(wǎng)頁(yè)用戶界面的主要信息傳達(dá)靠文字，任何元素都無(wú)法替代的重要構(gòu)成[2]。網(wǎng)頁(yè)正文(中文)一律采用宋體12號(hào)(12px)字體，黑體字體主要用做標(biāo)題。建議使用12號(hào)+14號(hào)字號(hào)的混合搭配，避免大面積使用加粗字體。

4.LOGO、按鈕、FLASH等圖形和動(dòng)畫(huà)元素

設(shè)計(jì)網(wǎng)站所需要的LOGO、FLASH、圖片、圖標(biāo)等圖形動(dòng)畫(huà)元素部分不僅能豐富網(wǎng)頁(yè)的內(nèi)容，更能為網(wǎng)頁(yè)增添亮色。

(1)LOGO是Web識(shí)別的重要符號(hào)，LOGO使網(wǎng)絡(luò)瀏覽者易于識(shí)別和便于選擇[3]。網(wǎng)站LOGO的設(shè)計(jì)來(lái)源于平面LOGO的設(shè)計(jì)方式，好的網(wǎng)站LOGO能夠增強(qiáng)網(wǎng)站的識(shí)別度、記憶度、好感度。同時(shí)LOGO標(biāo)識(shí)的配色也是網(wǎng)站確定主題色的一個(gè)比較重要的參考標(biāo)準(zhǔn)。

(2)FLASH的使用在網(wǎng)頁(yè)制作中也是不可或缺的，F(xiàn)LASH多使用矢量圖形和流媒體播放技術(shù)。矢量圖形可以任意縮放尺寸而不影響圖形的質(zhì)量，流媒體播放技術(shù)使得動(dòng)畫(huà)可以邊播放邊下載，從而減短了網(wǎng)頁(yè)瀏覽者的等待動(dòng)畫(huà)加載時(shí)間。

(3)在使用圖標(biāo)時(shí)也需要用統(tǒng)一的視角、材質(zhì)、尺寸，設(shè)計(jì)圖標(biāo)所使用的顏色盡量不要超過(guò)三種，圖標(biāo)設(shè)計(jì)必須直觀達(dá)意，讓用戶一目了然。

(4)設(shè)計(jì)師在制作圖書(shū)館網(wǎng)頁(yè)上的圖片輸出時(shí)，要貼合圖形區(qū)域，存儲(chǔ)時(shí)使用web格式輸出圖片；色彩較單一的圖片保存為GIF格式；色彩漸變豐富的圖片則使用jpeg格式保存，盡量減少圖片占用文件的大小。這樣能提高頁(yè)面讀取速度，減少用戶在讀取網(wǎng)頁(yè)時(shí)的加載等待時(shí)間。

四、結(jié)語(yǔ)

正如19世紀(jì)德國(guó)包豪斯學(xué)校在設(shè)計(jì)理論上提出的“設(shè)計(jì)的目的是人而不是產(chǎn)品”。圖書(shū)館網(wǎng)站的最終設(shè)計(jì)目的也是為了更好地為讀者服務(wù)。因此，設(shè)計(jì)師在設(shè)計(jì)圖書(shū)館網(wǎng)站前端時(shí)，必須先了解讀者的需求，以讀者的角度來(lái)設(shè)計(jì)制作網(wǎng)站。在圖書(shū)館網(wǎng)站頁(yè)面的欄目設(shè)計(jì)上人性化，使得用戶訪問(wèn)高校圖書(shū)館網(wǎng)站服務(wù)得以更加便捷的體現(xiàn)。

[1]甄艷杰.淺談高校網(wǎng)站設(shè)計(jì).[J].福建電腦,2012(3):75-81.

[2]胡欽文,秦雯婷.淺談高校圖書(shū)館網(wǎng)頁(yè)用戶界面設(shè)計(jì).[J].中國(guó)科技信息,2008(7):138-140.

[3]曹金明,程超,王駿.網(wǎng)頁(yè)設(shè)計(jì)與配色.[M].北京:紅旗出版社,2005:69

Discussion on the university library website front-end design

Han Jing

(Fuzhou University Library, Fuzhou Fujian, 350108, China)

With the consideration of the readers, the University Library website is designed to serve the purposes for teaching and researching. This article points out the necessity of the University Library website front-end design and introduces the main features of the University Library website design. Furthermore, based on the characteristics of the library website design, the design method are provided and illustrated with simple examples.

university library；web design；design features；design method

G250

A

1000-9795（2014）01-0463-01

［責(zé)任編輯：陳懷民］

2013-12-03

韓 晶（1984-），女，江蘇鹽城人，助理館員，從事圖書(shū)館參考咨詢和網(wǎng)站建設(shè)方向的研究。