《寶貝回家計(jì)劃——丟失兒童在線(xiàn)尋找系統(tǒng)》的色彩搭配與性能實(shí)現(xiàn)

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

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

1 背景分析

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

2 色彩搭配

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

2.1 色彩的選擇

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

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

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

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

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

2.2 色彩的搭配

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

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

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

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

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

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

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

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

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

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

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

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

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

StringBuilder StringBuilder=new StringBuilder（“hellow”）；

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

StringBuilder.Append（NewString）；

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

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

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

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

4 總結(jié)

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

[參考文獻(xiàn)]

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

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

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

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

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