網(wǎng)站設(shè)計視覺優(yōu)化

謝蓬飛

（中國石化共享服務(wù)公司（東營分公司），山東 東營 257000）

一、引言

隨著互聯(lián)網(wǎng)的迅速發(fā)展，網(wǎng)站作為其信息的主要承載者也迅速的發(fā)展起來，并且其種類繁多，包括大型門戶網(wǎng)站，行業(yè)網(wǎng)站，娛樂網(wǎng)站,企業(yè)網(wǎng)站,政府網(wǎng)站,營利性網(wǎng)站以及個人網(wǎng)站等,每類網(wǎng)站的內(nèi)容都各不相同且功能十分強(qiáng)大。企業(yè)網(wǎng)站是企業(yè)通過互聯(lián)網(wǎng)進(jìn)行網(wǎng)絡(luò)營銷和形象宣傳的，它就像是企業(yè)的一張名片，既可以為企業(yè)形象做宣傳，樹立良好公眾形象，同時又可以幫助企業(yè)營銷，推動企業(yè)銷售額的增加。企業(yè)內(nèi)網(wǎng)做為內(nèi)部信息快速傳遞的媒介，缺少了廣域網(wǎng)下網(wǎng)站盈利性的標(biāo)志，更加增強(qiáng)了內(nèi)部服務(wù)：通知新聞的傳遞性，而做為廣大員工的平臺也發(fā)揮著展現(xiàn)個人與公司風(fēng)采的作用。設(shè)計完成一個多模塊劃分，能實(shí)現(xiàn)交流互通信息互傳的網(wǎng)站。

二、系統(tǒng)實(shí)現(xiàn)的技術(shù)支持

（一）HTML語言簡介

HTML即超文本語言或超文本鏈接標(biāo)示語言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語言，也是構(gòu)成網(wǎng)頁文檔的主要語言。HTML語言是由HTML命令組成的描述性文本，HTML命令可以用來說明文字、圖形、動畫、聲音、表格以及鏈接等。HTML由頭部（Head）、主體（Body）兩大部分組成，其中頭部描述瀏覽器所需的信息，起到標(biāo)識作用，而主體則包含所要說明的具體內(nèi)容，是網(wǎng)頁的內(nèi)容核心。

（二） Dreamveaver簡介

AdobeDreamweaver，簡稱“DW”，是集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得的網(wǎng)頁編輯器，它是第一套專業(yè)的針對網(wǎng)頁設(shè)計師的視覺化網(wǎng)頁開發(fā)及設(shè)計工具，利用它可以簡易便捷地制作出跨越平臺限制和瀏覽器限制的動感而生動的網(wǎng)頁。[1]

（三） Photoshop圖像處理軟件簡介

Photoshop是一款由Adobe公司旗下最為出名的圖像處理軟件之一，它被廣泛的應(yīng)用于圖形、圖像、視頻、文字以及雜志書籍的排版等個領(lǐng)域。PS可以處理圖片中能遇到的各種問題，可以完成圖像創(chuàng)作，也可以實(shí)現(xiàn)對已有圖片的編輯和二次創(chuàng)作。

三、企業(yè)網(wǎng)站實(shí)現(xiàn)

（一）網(wǎng)站主題的確立

網(wǎng)站主題，即網(wǎng)站內(nèi)容，是網(wǎng)站搭建的靈魂體現(xiàn)，是網(wǎng)站的真正肉身。根據(jù)網(wǎng)站受用群的需要，基于其主要實(shí)現(xiàn)目的，確立網(wǎng)站核心思想，圍繞核心思想，從不同方向擴(kuò)展豐富網(wǎng)站內(nèi)容，從而建立一個核心明確內(nèi)容豐富的主題網(wǎng)站。

（二）確定網(wǎng)站風(fēng)格

“風(fēng)格”是抽象的，是指站點(diǎn)以整體形象給瀏覽者的綜合感受。站點(diǎn)的標(biāo)志、色彩、字體、標(biāo)語、版面布局、瀏覽方式、交互性等都是網(wǎng)站風(fēng)格的一部分。網(wǎng)站的立意可以是平易近人貼近生活的、也可以是生動活潑服務(wù)大眾的，還可以是專業(yè)嚴(yán)肅學(xué)術(shù)研究的。網(wǎng)站風(fēng)格就是要用你獨(dú)特的色彩、技術(shù)、文字或者布局、交互方式，瀏覽者明確的分辨出這就是你的網(wǎng)站，從而增強(qiáng)第一辨識度。在明確需求對象對網(wǎng)站具體展示要求后，要找出網(wǎng)站中最有特色的東西，以此來體現(xiàn)需求對象對網(wǎng)站的要求。例如，幸福工作站，網(wǎng)站是女工類，服務(wù)廣大職工身心類的，所以整體風(fēng)格應(yīng)該是溫馨和諧的，所以多以家庭氛圍感染瀏覽者。

（三）確定網(wǎng)站界面

界面是網(wǎng)站給瀏覽者的第一眼印象，它決定著網(wǎng)站的觀賞性，在確定網(wǎng)站的界面時要注意以下三點(diǎn)：欄目編排與素材整合：網(wǎng)站的題材確定后，根據(jù)主題搜集素材并對其進(jìn)行合理的編輯編排，將一些最吸引人的且最能體現(xiàn)網(wǎng)站核心內(nèi)容的放在最突出位置或者在版面分布上占優(yōu)勢地位。欄目的實(shí)質(zhì)是一個網(wǎng)站的大綱索引，將網(wǎng)站從整到零的詳盡劃分，清晰明了的將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要做到合理安排，優(yōu)化排版。在欄目編排時需要注意的是：盡可能刪除或邊緣化與網(wǎng)站內(nèi)容無關(guān)的欄目；盡可能將最有價值最能體現(xiàn)核心的內(nèi)容列在欄目上；盡可能從訪問者角度，為方便訪問者的瀏覽和查詢來編排欄目；輔助內(nèi)容可以放在主欄目里，以免沖淡主題。

目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)：網(wǎng)站的目錄是指網(wǎng)站搭建時創(chuàng)建的目錄。在用Dreamveaver建立網(wǎng)站時，創(chuàng)建站點(diǎn)后都默認(rèn)建立了根目錄和圖片子目錄。形象設(shè)計：網(wǎng)站的形象是瀏覽者的第一眼感受，是吸引使用者的重要部分，網(wǎng)站形象主要從以下幾點(diǎn)：設(shè)計網(wǎng)站標(biāo)志。標(biāo)志可以是中文、英文字母，也可以是符號、圖案等。標(biāo)志的設(shè)計創(chuàng)意應(yīng)當(dāng)來自網(wǎng)站的名稱和內(nèi)容。比如：“兩學(xué)一做”專欄，如下圖所示：

以黨徽和國旗，強(qiáng)有力的表現(xiàn)專題網(wǎng)站的黨的教育特性。設(shè)計網(wǎng)站色彩。色彩給人來自視覺沖擊的第一印象，不同色系的不同色彩搭配產(chǎn)生的色彩效果各異，從而對瀏覽者造成不同的情緒影響?；诖宋覀兂Ｊ褂谩皹?biāo)準(zhǔn)色彩”來對網(wǎng)站進(jìn)行色彩編輯。（“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩，要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。）色彩統(tǒng)一也是網(wǎng)站統(tǒng)一的一部分，是提升優(yōu)化網(wǎng)站的重要點(diǎn)。標(biāo)準(zhǔn)色確定后，可以配以其他色彩輔助，但應(yīng)當(dāng)只是作為點(diǎn)綴和襯托，不能喧賓奪主。一般來說，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，避免眼花繚亂，感受不到網(wǎng)站主題。適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)/綠色，黃/橙色，黑/灰/白色三大系列色。如：幸福工作站的色彩就是綠色為主色。設(shè)計網(wǎng)站字體。標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、導(dǎo)航和欄目的特有字體。一般網(wǎng)頁內(nèi)容的默認(rèn)字體是宋體。制作者可以根據(jù)自己網(wǎng)站所想表達(dá)的內(nèi)容，選擇更貼切的字體只能以圖片的形式出現(xiàn)。設(shè)計網(wǎng)站宣傳語。網(wǎng)站宣傳語可以是網(wǎng)站的精神、主題與中心，或者是網(wǎng)站的目標(biāo)，用一句話或者一個詞來高度概括。它是對網(wǎng)站內(nèi)容的高度概括，用于對外宣傳。網(wǎng)站頁面設(shè)計在完成了動靜結(jié)合，色彩結(jié)構(gòu)優(yōu)化，已經(jīng)生動活潑的形象展現(xiàn)出來，再以技術(shù)手段完成其發(fā)布使用。

四、結(jié)語

隨著網(wǎng)絡(luò)的發(fā)展，網(wǎng)站做為一種主要展現(xiàn)方式，其發(fā)展將會越來越廣闊，應(yīng)用也將越來越深入，只有結(jié)構(gòu)清晰，色彩分明，主題明確的網(wǎng)站才能在各色站點(diǎn)中脫穎而出，以其不凡的視覺感受和使用感受吸引使用者。視覺效果在網(wǎng)站創(chuàng)建中將會以其獨(dú)特吸引力發(fā)揮越來越重要的作用。