翟羽佳

摘要：中國政法大學圖書館在2014、2015畢業(yè)季推出了自建系統(tǒng)“法大圖書館記憶”，為畢業(yè)生展示自己在校期間的圖書館生活，讓他們帶著母校的記憶離開校園。系統(tǒng)在頁面設(shè)計上融入了懷舊、致青春等元素，利用主流的web開發(fā)技術(shù)實現(xiàn)了美觀、整潔的頁面布局，具有唯美、浪漫的設(shè)計風格。

關(guān)鍵詞：圖書館服務；前端設(shè)計；Web； HTML；CSS

在近年來，為了創(chuàng)新讀者服務，部分高校圖書館開始自建一些系統(tǒng)來補充核心系統(tǒng)以外的業(yè)務；同時，基于web2.O的前端開發(fā)技術(shù)不斷發(fā)展，頁面設(shè)計工作越來越受到重視，尤其是自建系統(tǒng)，在前端設(shè)計上更要求具有自己的風格。中國政法大學圖書館在2014、2015畢業(yè)季推出了自建系統(tǒng)“法大圖書館記憶”，實現(xiàn)為畢業(yè)生展示自己在校期間的圖書館生活，并提供PDF紀念卡片下載。

1 技術(shù)概述

網(wǎng)絡系統(tǒng)的前端設(shè)計是根據(jù)希望向瀏覽者傳遞的信息，進行系統(tǒng)功能策劃，進行的頁面設(shè)計美化工作。設(shè)計的目標即通過合理的顏色、字體、圖片、樣式，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。精美的前端設(shè)計，對于提升形象至關(guān)重要。

一般來說，Web前端開發(fā)技術(shù)主要包括三個層面：HTML、CSS和JavaScript，分別代表網(wǎng)頁的內(nèi)容、表現(xiàn)形式和用戶行為。網(wǎng)頁的本質(zhì)是超文本標記語言（HTML），“圖書館記憶”系統(tǒng)的前端頁面都以HTML完成。CSS（層疊樣式表）是一種用來表示HTML文件樣式的語言，“記憶”系統(tǒng)利用DIV+CSS進行基本布局，背景、文字、圖像等美化網(wǎng)頁的元素也通過CSS進行調(diào)節(jié)。JavaScript使系統(tǒng)更方便地處理HTML和events，為網(wǎng)站提供交互。

在Web2.0標準下，網(wǎng)頁設(shè)計流程主要包括內(nèi)容設(shè)計、結(jié)構(gòu)設(shè)計和視覺設(shè)計。首先，根據(jù)系統(tǒng)的需求和功能，設(shè)計出網(wǎng)頁需要顯示的主要內(nèi)容。第二，畫出網(wǎng)頁的設(shè)計圖，對需要展現(xiàn)的內(nèi)容作進一步的分析，劃分合適的DIV層塊，并為每一個層塊添加文字、圖像、表單等內(nèi)容。第三，利用CSS美化網(wǎng)頁，包括在頁面中加入邊框和背景、設(shè)置字體和大小等。同時，也可利用JavaScript技術(shù)完成網(wǎng)頁中動態(tài)元素的添加。前端設(shè)計需要按照“先整體，后局部，最后回歸到整體”的思路來進行考慮，特別需要滿足以下四個要求：（1）業(yè)務邏輯清晰，能清楚的向瀏覽者傳遞信息；（2）用戶體驗良好，在視覺上、操作上都能感到很舒適；（3）頁面設(shè)計精美，用戶能得到美好的視覺體驗；（4）服務目標明晰，頁面很好的向用戶展示了自己想要表達的信息。

2 內(nèi)容設(shè)計

一個網(wǎng)絡系統(tǒng)總是以用途決定設(shè)計思路、功能決定設(shè)計方向、內(nèi)容決定設(shè)計形式。因此在進行前端設(shè)計時，應該首先把內(nèi)容充實上，再分區(qū)塊，再定色調(diào)，再處理細節(jié)?！胺ù髨D書館記憶”系統(tǒng)是中國政法大學圖書館在畢業(yè)季推出的服務，目的是展示畢業(yè)生在校期間的圖書館生活，下載紀念卡片，給畢業(yè)生一個美好的回憶。在內(nèi)容設(shè)計上應充分考慮系統(tǒng)的功能和服務群體。作為圖書館的自建系統(tǒng)，“記憶”系統(tǒng)的內(nèi)容以書的樣式進行設(shè)計，包含封面、卷首語、內(nèi)容頁和結(jié)束語。其中，內(nèi)容頁是通過連接數(shù)據(jù)庫查詢得到的動態(tài)內(nèi)容，主要是具有紀念意義的一些數(shù)據(jù)，這些內(nèi)容也是PDF紀念卡片的內(nèi)容。所有頁面內(nèi)容具體設(shè)計如下：

（1）封面，即系統(tǒng)的登陸頁面。該頁面實現(xiàn)畢業(yè)生通過校園一卡通的用戶名和密碼登陸系統(tǒng)，內(nèi)容主要為登陸表單，并利用一些藝術(shù)字點明系統(tǒng)的主題：“致青春畢業(yè)季”，追憶“那些年，我們在一起的時光”。

（2）卷首語，運用優(yōu)美的文字介紹系統(tǒng)的背景和功能：“夏日悄悄來襲，分離即將面臨，時間是個回不去的孩子，帶走了美好的校園時光”?！鞍遵x過隙，校園依然飄飛芬芳的書香。親愛的同學，這段圖書館的回憶，我們愿幫你永遠記錄、珍藏”。開篇就給畢業(yè)生留下一個美好的印象。

（3）內(nèi)容頁，連接數(shù)據(jù)庫查詢到的當前登錄讀者在校期間使用圖書館的信息。涉及進館情況、借閱情況和讀書興趣分析，以多個頁面進行展示：a）你于****年**月**日第一次進入法大圖書館；b）在就讀法大的這些年，你有一天在圖書館度過；c）你于****年**月**日在法大圖書館借了第一本書，這本書是****；d）在校期間你一共借書**本；e）就讀*學院的你，最喜歡閱讀**方面的書籍，你最喜歡閱讀的圖書的前三類是：**類：**本、**類：**本、**類：**本。

（4）結(jié)束語，總結(jié)系統(tǒng)的意義和功能。語言設(shè)計上迎合畢業(yè)生的情感需求：“時光荏苒，還沒離開就已經(jīng)開始懷念：占過的座、走過的路、品過的味、讀過的書，還有彼此熟悉的身影，都在時間的河流中沉淀、在斑駁的記憶中保存”，但同時告訴畢業(yè)生“不要為離別感傷，未來的路還有很長”，并給予畢業(yè)生美好的祝福：“帶著母校的記憶和祝福，開啟人生新的篇章?！北卷撁孢€提供紀念卡片和借閱記錄的下載鏈接。

3 結(jié)構(gòu)設(shè)計

一個好的前端設(shè)計依賴于合理有效的結(jié)構(gòu)布局，即對系統(tǒng)的整體風格和特色作出定位，規(guī)劃其組織結(jié)構(gòu)，采用最好的搭配方式將所需要展示的文字內(nèi)容與圖片顯示在網(wǎng)頁中?！皥D書館記憶”面向的服務對象和提供的功能非常明確，就是給畢業(yè)生群體留下美好的回憶。為了使主題鮮明突出，系統(tǒng)選擇合適的配色和圖片設(shè)計，使這些元素能夠圍繞主題，充分表現(xiàn)系統(tǒng)的特征。在結(jié)構(gòu)布局的設(shè)計上主要關(guān)注以下四個方面：（1）簡潔實用。系統(tǒng)面向數(shù)千名畢業(yè)生，且是在畢業(yè)季的短短數(shù)周使用，因此盡量以最高效率的方式將讀者所想看到的信息傳送給他，去掉所有的冗余的東西。（2）使用方便。在滿足讀者要求的基礎(chǔ)上將頁面設(shè)計得越適合使用，就越顯示出其功能。（3）整體性好。一個系統(tǒng)強調(diào)的就是一個整體，“記憶”系統(tǒng)需要圍繞一個統(tǒng)一的目標才能做出好設(shè)計。（4）形象突出。系統(tǒng)也需要拉近圖書館與讀者的距離，提升法大圖書館在廣大師生中的形象，因此需要一個符合美的標準的結(jié)構(gòu)設(shè)計。要做到頁面用色協(xié)調(diào)，布局有條理且富有可欣賞性。

結(jié)構(gòu)設(shè)計最需要注意編排和布局，字或行的間距太擠或太寬、段距太少或太多、每行字數(shù)太多或太少，都會使系統(tǒng)無法得到較好的用戶體驗?！皥D書館記憶”系統(tǒng)在結(jié)構(gòu)上盡量避免以上誤區(qū)，以規(guī)范、簡明的原則編排和布局。同時，對于“圖書館記憶”這種多頁面的系統(tǒng)，在結(jié)構(gòu)設(shè)計上還需要把頁面之間的有機聯(lián)系反映出來，處理好頁面之間和頁面內(nèi)的秩序與內(nèi)容的關(guān)系。因此，“記憶”系統(tǒng)的所有頁面都加入了書頁樣式的白色帶陰影邊框，形成統(tǒng)一的設(shè)計風格。

為了達到最佳的視覺表現(xiàn)效果，使瀏覽者有一個流暢的視覺體驗，“記憶”系統(tǒng)采用HTML和CSS將主要的文字內(nèi)容包括起來，居中設(shè)計，背景留白。卷首語、結(jié)束語各占一頁，進館情況、借書情況、讀者興趣分析也都分頁顯示。這樣的結(jié)構(gòu)設(shè)計使每個頁面的文字內(nèi)容不繁多，一頁頁讀來，如詩歌一般打動人心。配以相應的背景和插圖后，就像在瀏覽器中閱讀一本青春紀念冊。

4 視覺設(shè)計

前端設(shè)計是一種視覺語言，強調(diào)帶給瀏覽者美的享受?！皥D書館記憶”系統(tǒng)在內(nèi)容設(shè)計和結(jié)構(gòu)設(shè)計的基礎(chǔ)上，添加了一些唯美、浪漫的因子，特別包含了“致青春”的元素，這樣的視覺設(shè)計符合畢業(yè)季的氛圍，更容易和畢業(yè)生產(chǎn)生情感共鳴。系統(tǒng)主要采用CSS美化網(wǎng)頁的方式，配合美工設(shè)計元素，將設(shè)計方法轉(zhuǎn)化為網(wǎng)頁。

色彩是前端設(shè)計的表現(xiàn)要素之一，在設(shè)計過程中，應根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合搭配來構(gòu)成美麗的頁面，同時還應考慮不同色彩對人們心理的影響?！皥D書館記憶”系統(tǒng)以偏暗黃的顏色基調(diào)設(shè)計出懷舊風格的背景，并在其中加入了膠片、時鐘、同時還應考慮不同色彩對人們心理的影響。“圖書館記憶”系統(tǒng)以偏暗黃的顏色基調(diào)設(shè)計出懷舊風格的背景，并在其中加入了膠片、時鐘、相片等元素來體現(xiàn)青春歲月的珍貴和美好。每個頁面融入了校園景色和圖書館照片，照片經(jīng)過Photoshop等圖像處理軟件進行了一些虛化、透明、改色、加邊框等處理，以便它們能夠更好的和背景融合，既讓人聯(lián)想到美好的校園時光，又不會喧賓奪主而影響文字閱讀。

“圖書館記憶”系統(tǒng)的主要文字（卷首語、結(jié)束語和內(nèi)容頁的數(shù)據(jù)庫查詢部分）的字體全部設(shè)計為方正姚體，字形瘦長、工整，能夠配合“記憶”系統(tǒng)的懷舊風格。此外，包括封面標題在內(nèi)，系統(tǒng)還設(shè)計了一些藝術(shù)字作為點綴：（1）封面標題“致青春畢業(yè)季”、小標題“那些年，我們在一起的時光……”。字數(shù)長短適中，大小合適，字體美觀，包含了系統(tǒng)的核心主題，給瀏覽者留下了深刻的印象。（2）進館情況頁面，文字內(nèi)容展現(xiàn)畢業(yè)生的首次進館時間和在校期間在館天數(shù)，設(shè)計了多組圖書館的照片為插圖，以電影膠片的形式展現(xiàn)出來，因此配合了“再見時光”為內(nèi)容的藝術(shù)字。（3）借閱情況頁面，文字內(nèi)容展現(xiàn)畢業(yè)生首次借書時間、書名和在校期間借閱冊數(shù)，以懷舊風格的書籍相片融合圖書館內(nèi)陳設(shè)為背景，配以“每一秒的時光，也都是限量版”為內(nèi)容的藝術(shù)字。（4）按學期借閱情況展示頁面，為一個按學期顯示借書數(shù)目的柱形圖，突出寒來暑往、上下學期之間的更替，因此配以圖書館的冬季和春季外景為插圖，藝術(shù)字內(nèi)容為：“過往的片段、似水流年”、“最后一個夏天，我們就要說再見了”。（5）借閱興趣分析頁面，這個頁面簡單分析畢業(yè)生的閱讀興趣，配合圖書館的手繪圖為背景，設(shè)計了“好好學習，天天向上”、“時間一去不復返”的藝術(shù)字。這些藝術(shù)字分散添加在各個頁面的角落，在閱讀系統(tǒng)的主要文字內(nèi)容時，將畢業(yè)季特有的淡淡傷感，對校園美好時光的珍惜之情烘托出來。

一般的網(wǎng)絡系統(tǒng)都具有導航功能，即使用超文本鏈接或圖片鏈接，使瀏覽者能夠在系統(tǒng)中自由前進或后退，而不必讓他們使用瀏覽器上的前進或后退?！皥D書館記憶”系統(tǒng)以書的樣式進行展示，也具有類似導航的翻頁功能。為了與系統(tǒng)的懷舊風格相匹配，頁面中“上一頁”、“下一頁”等按鈕都設(shè)計成了手繪路牌的樣式。

然而，視覺設(shè)計不應過度裝飾，需要注意在外觀和性能上達到平衡。要知道，互聯(lián)網(wǎng)上30秒的等待時間與平常10分鐘等待時間的感覺相同。因此，在視覺設(shè)計中應盡量避免使用過多的圖片或體積過大的圖片，主要頁面的容量需要確保瀏覽者頁面等待的時間不超過10秒。

5 結(jié)語

“圖書館記憶”系統(tǒng)在前端設(shè)計的過程中牢牢把握“致青春畢業(yè)季”這個主題，重點關(guān)注系統(tǒng)的整體風格和色彩搭配，完美展現(xiàn)了系統(tǒng)的功能。前端設(shè)計在整個系統(tǒng)中起著重要的門戶作用，系統(tǒng)所有功能均需要依賴于設(shè)計風格的烘托。然而，任何一個網(wǎng)站系統(tǒng)都不可能一成不變，前端設(shè)計是一個不斷更新?lián)Q代、推陳出新的過程，在以后的更新中，既要學習當前的設(shè)計新技術(shù)，也要把握最新的設(shè)計趨勢。