摘 要：針對《寶貝回家計(jì)劃——丟失兒童在線尋找系統(tǒng)》的初步設(shè)計(jì)與制作中在視覺和性能方面出現(xiàn)的缺陷，本文從色彩搭配與性能實(shí)現(xiàn)來完善該網(wǎng)站的設(shè)計(jì)。在色彩搭配方面，本系統(tǒng)以“網(wǎng)頁色彩能給人最直接的的視覺沖擊”為線索，展開色彩的選擇與色彩的搭配工作；在性能方面，作為一個服務(wù)大眾，傳播愛心，信息量很大的網(wǎng)站，系統(tǒng)開發(fā)要從用戶角度建設(shè)網(wǎng)站性能，同時高性能也是本系統(tǒng)在網(wǎng)絡(luò)平臺的立足之本，因此開發(fā)人員要從自身角度來實(shí)現(xiàn)網(wǎng)站的高性能建設(shè)。

關(guān)鍵詞：在線；視覺；色彩；信息；性能

1 背景分析

由于當(dāng)今社會法制并不是十分完善，拐賣、遺棄兒童的現(xiàn)象依然存在，通過警方或個人的力量并不能夠完善尋找丟失兒童的工作；而今隨著科學(xué)技術(shù)的發(fā)展，社會已進(jìn)入信息時代。傳統(tǒng)的尋人方法有口頭宣傳、張貼啟示、人力搜索等，這些方法不僅慢，而且被諸多無可避免的因素（例如個人能力、公關(guān)機(jī)構(gòu)管轄范圍等）所制約。信息時代產(chǎn)生的在線尋找網(wǎng)站，克服了這些缺點(diǎn)、限制，滿足了人們的需求，使人們可以隨時了解各地發(fā)布的丟失兒童消息，幫助人們在保證自己正常生活的前提下，尋找自己的親人。寶貝回家計(jì)劃就是這樣一個專業(yè)的尋人網(wǎng)站。該系統(tǒng)的初步設(shè)計(jì)與制作已經(jīng)完成，在自我測試、審核過程中，項(xiàng)目負(fù)責(zé)人員意識網(wǎng)站存在兩點(diǎn)缺陷，一，網(wǎng)頁是一種視覺語言，而給人最直接的視覺沖擊的是網(wǎng)頁色彩，這正是初步設(shè)計(jì)與制作過程中欠缺深入思考的一部分。二，作為一個服務(wù)大眾，傳播愛心，信息量很大的網(wǎng)站，在初步設(shè)計(jì)與構(gòu)建中并沒有對其性能進(jìn)行全面實(shí)現(xiàn)。因此本文從色彩搭配與性能兩方面對網(wǎng)站進(jìn)行改善。

2 色彩搭配

網(wǎng)頁的視覺語言表達(dá)方式有多種，如圖形語言、文字語言、文案語言和色彩語言。[1]用戶瀏覽頁面時，首先映入眼簾的是頁面的整體色彩，色彩是最直接，也是最持久的視覺語言，因此選擇什么顏色、如何將不同的色彩搭配起來是網(wǎng)頁設(shè)計(jì)者必須重視的問題。

2.1 色彩的選擇

幾乎每一種色彩都具有強(qiáng)大的內(nèi)涵，這份內(nèi)涵里有屬于它自己的象征意義。而色彩的選擇是為整體設(shè)計(jì)服務(wù)的，在完善系統(tǒng)的過程中，根據(jù)每級頁面索要展現(xiàn)的內(nèi)容的不同，結(jié)合色彩的象征特質(zhì)，制定了色彩的選擇方案：

首頁以藍(lán)色為主，因?yàn)楸鞠到y(tǒng)是尋人系統(tǒng)，它面向的主要是失去親人的用戶，藍(lán)色給人一種平靜、安全、可以信任的感覺，因此這最保守的顏色，不僅幫助網(wǎng)站樹立了“尋親莫急，我們幫你”的形象，還十分人性化的達(dá)到安慰這些用戶的目的。此外，對于本系統(tǒng)的第二大用戶，社會愛心人士、志愿者來說，藍(lán)色具有穩(wěn)定、強(qiáng)大、堅(jiān)定、力量與智慧的內(nèi)涵，這也正是他們奉獻(xiàn)精神的體現(xiàn)。

家尋寶貝頁面則采用綠色作為背景色，綠色是一種靈活的色彩，它能與大自然、環(huán)境、家庭、幸福、生活、再循環(huán)相聯(lián)系。在此版塊，頁面展現(xiàn)的是由各種原因?qū)е虏荒芑丶业暮⒆拥恼掌?，是一張張迷途的天使的面孔，綠色是他們的最佳的搭配色彩。在此頁面，綠色漸變的使用，使得頁面整體視覺效果簡潔，同時，對于瀏覽者來說，綠色及孩子的照片給予他們的心理效應(yīng)是：一切都有希望。

寶貝尋家頁面采用了淡藍(lán)色作為背景色，因?yàn)闉g覽該頁面的多是找爸媽的孩子，對于他們來說，家永遠(yuǎn)都是一個愛的港灣，淡藍(lán)色的沉穩(wěn)、友好內(nèi)涵表述的正是這種親情。

考慮到本系統(tǒng)的建立目的是幫助尋找丟失兒童，傳播愛心，而且本系統(tǒng)針對的主流訪問者希望在此可以尋到幫助信息，因此本系統(tǒng)的界面應(yīng)該給人以安心穩(wěn)重的感覺，根據(jù)這樣的設(shè)計(jì)原則，系統(tǒng)的其他頁面的主色調(diào)也選擇了藍(lán)色。

2.2 色彩的搭配

色彩搭配是多種多樣的，但在網(wǎng)頁設(shè)計(jì)中要根據(jù)和諧、均衡和重點(diǎn)獨(dú)處的原則[2]，進(jìn)行搭配。合理的色彩搭配要結(jié)合網(wǎng)站主題，以及網(wǎng)站自身屬性，并考慮到該網(wǎng)站面向的對象的心情的。

本系統(tǒng)設(shè)計(jì)的總原則是：主要內(nèi)容用非彩色（黑色），背景、圖片、邊框、超鏈接用彩色。而搭配技巧在于使用一個色系：冷色調(diào)中的藍(lán)色、綠色，這可使頁面呈現(xiàn)寧靜、清涼、高雅的氣氛。另外傳統(tǒng)網(wǎng)頁設(shè)計(jì)只注重信息傳播，本系統(tǒng)頁面設(shè)計(jì)中超越了傳統(tǒng)網(wǎng)頁設(shè)計(jì)理念，注重用戶需求。根據(jù)以上原則在色彩搭配上選擇了冷色調(diào)色系，以達(dá)到安慰瀏覽該網(wǎng)頁尋求幫助的人的目的。作為傳播愛心、服務(wù)大眾的公益系統(tǒng)，本系統(tǒng)界面很自然的選擇了藍(lán)天為背景。

綜合網(wǎng)頁布局，色彩選擇方案和瀏覽者的心理效應(yīng)三方面，對每一級頁面都選擇了單色搭配[3]。所謂單色搭配是只選擇一種色相，由這一種色相的暗、中、明三種色調(diào)進(jìn)行組合，形成明暗層次。本系統(tǒng)的各級頁面都采用了這種色彩搭配方案，不僅給人以明快、簡潔的視覺效果，還體現(xiàn)了網(wǎng)站不只是在傳播信息，也不只是在做尋人的工作，而是在人性化的界面里傳播愛心，推崇和諧社會。

3 性能實(shí)現(xiàn)

網(wǎng)站性能即是一種客觀的指標(biāo)，體現(xiàn)于響應(yīng)時間、吞吐量等技術(shù)指標(biāo)，又是一種主觀感受，不同視角下有不同的性能指標(biāo)。因而在本系統(tǒng)的建設(shè)過程中，為了實(shí)現(xiàn)高性能，設(shè)計(jì)者主要從以下幾個方面著手。

3.1 從用戶視角實(shí)現(xiàn)網(wǎng)站高性能

從用戶角度，網(wǎng)站性能體現(xiàn)在網(wǎng)頁響應(yīng)速度的快慢，其中有80%用于下載各項(xiàng)內(nèi)容[4]，包括下載樣式表、圖像、腳本和Flash等。如此分析來看，減少HTTP請求次數(shù)，是提高網(wǎng)頁速度的關(guān)鍵步驟。

為了加快響應(yīng)時間同時保持頁面內(nèi)容，首先，網(wǎng)頁設(shè)計(jì)人員檢查圖片是否還有壓縮空間，以保證圖片以最小像素值保存，本系統(tǒng)使用的圖片大多以PNG格式保存。然后系統(tǒng)開發(fā)人員采用了CSS Sprites，即把所有背景圖像放進(jìn)一個文件夾內(nèi)，通過CSS的background_image屬性來顯示圖片。

其次，避免跳轉(zhuǎn)也是加快響應(yīng)速度的方法之一。跳轉(zhuǎn)會降低用戶體驗(yàn)，這是因?yàn)槿魏挝募疾粫贖TML文件加載前被下載。本系統(tǒng)建設(shè)過程中，為了避免跳轉(zhuǎn)，采用了一級頁面滑動的頁面設(shè)計(jì)模式，導(dǎo)航設(shè)在每個頁面上部，點(diǎn)擊頁面會下滑到該部位，這樣的頁面設(shè)計(jì)就可以避免跳轉(zhuǎn)，從而加快網(wǎng)頁響應(yīng)速度，實(shí)現(xiàn)網(wǎng)站高性能的建設(shè)。

3.2 從程序員角度實(shí)現(xiàn)高性能網(wǎng)站

這里的程序員是指網(wǎng)站開發(fā)人員及運(yùn)維人員，他們說的網(wǎng)站性能與通常用戶所說的不同。開發(fā)人員注重的是程序本身的性能，包括系統(tǒng)吞吐量、系統(tǒng)穩(wěn)定性、并發(fā)處理能力等技術(shù)性的指標(biāo)。而運(yùn)維人員注重的是基礎(chǔ)設(shè)施性和資源利用率，例如服務(wù)器硬件配置、服務(wù)器與網(wǎng)絡(luò)帶寬的利用率等[5]。

在本網(wǎng)站建設(shè)過程中從程序員角度，使用代碼優(yōu)化手段提高程序性能，并使用緩存加速數(shù)據(jù)讀取來建設(shè)高性能網(wǎng)頁。

測試表明如果把樣式表放于文檔的內(nèi)部，頁面內(nèi)容可以有步驟地加載顯示，因此本網(wǎng)站的程序代碼采用的是將樣式表置頂方法。針對運(yùn)行時不可變的字符串，我們采用StringBuilder類，來解決因?yàn)閯?chuàng)建新的對象實(shí)例導(dǎo)致的分配空間的浪費(fèi)問題。代碼如下：

StringBuilder StringBuilder=new StringBuilder（“hellow”）；

String NewString=”寶貝計(jì)劃”；

StringBuilder.Append（NewString）；

這樣就可以避免創(chuàng)建第三個字符串來接收“hellow 寶貝計(jì)劃”。

程序員在實(shí)現(xiàn)本系統(tǒng)時，大多使用的是值類型。公共語言環(huán)境支持值類型和引用類型，具體采用哪種類型視情況而定的，但值類型在性能上更具有優(yōu)勢：值類型可以被分配到棧中，它們沒有與類相關(guān)的開銷，不需要調(diào)用構(gòu)造函數(shù)，因此具有更快的運(yùn)行速度。

讀取數(shù)據(jù)分為從數(shù)據(jù)庫中讀取數(shù)據(jù)和從緩存中讀取數(shù)據(jù)兩種方法，然而前者需要花費(fèi)大量的時間，考慮到本網(wǎng)站是一個尋人網(wǎng)站，面向的數(shù)據(jù)是龐大的，因此程序員在數(shù)據(jù)讀取方面采用了從緩存讀取數(shù)據(jù)的方案，實(shí)現(xiàn)語句為：

其中add name為用戶數(shù)據(jù)庫名，Password為用戶數(shù)據(jù)庫密碼，管理員只需將這兩處改為自己的用戶名及密碼即可進(jìn)行管理。

4 總結(jié)

色彩的選擇與搭配在網(wǎng)頁視覺形態(tài)上體現(xiàn)了網(wǎng)站的特色，例如選擇藍(lán)色作為主打色，不僅能表達(dá)網(wǎng)站“幫助失散親人團(tuán)圓”的溫馨主旨，還可以穩(wěn)定瀏覽者尋找親人的失落心情。本網(wǎng)站本質(zhì)上是一個信息量很大的，面向諸多用戶的尋人網(wǎng)站，因此本文敘述了從用戶到程序員不同角度下，需要重點(diǎn)把握的網(wǎng)站高性能建設(shè)的幾個方面：避免跳轉(zhuǎn)法給用戶以網(wǎng)站快速運(yùn)行的視覺感受、代碼優(yōu)化法使網(wǎng)站代碼簡潔，便于日后維修、采用緩存則提高網(wǎng)站后臺數(shù)據(jù)運(yùn)行速度。從初步設(shè)計(jì)與制作到本文的色彩搭配與性能實(shí)現(xiàn)，逐步對寶貝回家計(jì)劃進(jìn)行完善，全面構(gòu)建了一個傳播愛心，整合信息的在線尋找丟失兒童的網(wǎng)站。

[參考文獻(xiàn)]

[1]解勇.《網(wǎng)頁設(shè)計(jì)視覺形態(tài)》[M].沈陽：遼寧美術(shù)出版社，2004：120.

[2]楊選輝.《網(wǎng)頁設(shè)計(jì)與制作教程》[M].北京：清華大學(xué)出版社，2008：38.

[3]王斐.《網(wǎng)頁配色黃金羅盤》[M].北京：清華大學(xué)出版社，2008：21.

[4]Steve Souders.《高性能網(wǎng)站建設(shè)進(jìn)階指南》[M].北京：電子工業(yè)出版社，2010.

[5]李智慧.《大型網(wǎng)站技術(shù)架構(gòu)：核心原理與案例分析》[M].北京：電子工業(yè)出版社，2013.