來源：
中國(guó)論文下載中心 [ 09-11-18 14:57:00 ] 作者：
劉力溯 張?zhí)K 編輯：studa20
【摘 要】本文試圖以制作思沃特公司網(wǎng)站的經(jīng)驗(yàn),
總結(jié)出此類公司形象網(wǎng)站的一般制作流程,并闡釋其中的一些重要問題,為設(shè)計(jì)實(shí)踐活動(dòng)提供一定
參考。
【關(guān)鍵詞】形象 網(wǎng)站 設(shè)計(jì)
一、緒論
20世紀(jì)90年代以來,互聯(lián)網(wǎng)開始在國(guó)內(nèi)迅速普及,互聯(lián)網(wǎng)主要通過大量的、每天至少有幾千人乃至幾十萬人訪問的網(wǎng)站,以前所未有的效率廣泛傳播著信息。
筆者曾為武漢思沃特房地產(chǎn)顧問有限公司制作過一個(gè)網(wǎng)站。該公司希望擁有一個(gè)簡(jiǎn)單的網(wǎng)站,將其作為公司宣傳策略的一部分,其中與業(yè)務(wù)相關(guān)的實(shí)際內(nèi)容并不多。因而此網(wǎng)站顯然屬于形象展示型的公司網(wǎng)站,應(yīng)按相應(yīng)的模式來設(shè)計(jì)。
二、網(wǎng)站策劃
1.網(wǎng)站策劃的職責(zé)
很多人都知道網(wǎng)頁設(shè)計(jì)需要“美術(shù)”與“技術(shù)”兩方面的相互配合,一個(gè)較為普遍的原則是“美工先行”,即由美工先作設(shè)計(jì),再由技術(shù)人員制作,但這只是就單個(gè)頁面制作層面而言,若從更廣義的網(wǎng)站整體規(guī)劃角度來說,本文認(rèn)為在以上工作開始之前還應(yīng)該有一個(gè)“網(wǎng)站策劃”的環(huán)節(jié)。
有別于純粹從“形象思維”出發(fā)的美工設(shè)計(jì),策劃具有一種“理念先行”的思維方式,他的職責(zé)在于準(zhǔn)確地了解和把握客戶的意圖,并綜合美學(xué)、人文、心
理學(xué)等多方面因素進(jìn)行理性思考,進(jìn)而對(duì)網(wǎng)站的主題、規(guī)模、結(jié)構(gòu)、風(fēng)格提出要求,作出整體規(guī)劃。
如果缺少策劃的全盤考慮和指導(dǎo),美工設(shè)計(jì)很可能陷于為形式而形式,為美觀而美觀,無法取得最合理的傳達(dá)效果。
2.主題色的選擇
思沃特公司的宗旨是“體驗(yàn)優(yōu)質(zhì)地產(chǎn)服務(wù)”。核心價(jià)值觀是“誠(chéng)信,團(tuán)隊(duì),創(chuàng)意,靈活,分享”。通過比對(duì)和聯(lián)系,我發(fā)現(xiàn)藍(lán)色的含義與其
企業(yè)文化正好吻合,很好地詮釋了他們對(duì)于專業(yè)服務(wù)和團(tuán)隊(duì)合作的追求,于是在網(wǎng)站主題色和同期制作的VI標(biāo)志上都選擇了藍(lán)色。不過,網(wǎng)站的主題色采用了一種與標(biāo)志中最深的陰影部分相同的深藍(lán)色,這是因?yàn)樯钜稽c(diǎn)的藍(lán)色更加沉穩(wěn)、睿智,排除了淺藍(lán)色所帶有的憂郁等其它感覺。
3.素材的搜集
網(wǎng)站制作的前期工作還包括搜集素材,素材包括圖文兩方面的內(nèi)容。網(wǎng)站的文字內(nèi)容一般是從委托方得到,如公司介紹等。
圖片素材包括裝飾性圖片和插圖,它們的搜集工作通常是由美工在制作過程中“順手完成”的,本文卻認(rèn)為,素材搜集的隨意性和分散性,和美工單純考慮畫面的傾向,容易導(dǎo)致圖片與網(wǎng)站主題聯(lián)系不強(qiáng)。不如在設(shè)計(jì)之初,由對(duì)網(wǎng)站主題有著深入了解的策劃,預(yù)先對(duì)圖片進(jìn)行統(tǒng)一的準(zhǔn)備和采集,包括實(shí)地拍攝等。
4.網(wǎng)站結(jié)構(gòu)的劃分
網(wǎng)站結(jié)構(gòu),是指組成網(wǎng)站的各個(gè)頁面及相互之間的鏈接關(guān)系,從簡(jiǎn)單意義上可以理解為網(wǎng)站欄目的劃分。在策劃階段,要以網(wǎng)站的實(shí)際內(nèi)容和訪問者的瀏覽習(xí)慣為基礎(chǔ)劃分欄目,從而決定分頁面的數(shù)量和鏈接方式。還要從信息的易獲取度方面考慮,采取盡量簡(jiǎn)化的原則。
三、美工設(shè)計(jì)
1.頁面美術(shù)風(fēng)格
從策劃角度講,為了體現(xiàn)該公司
現(xiàn)代、高效、新銳的精神氣質(zhì),需要一種簡(jiǎn)潔、明快、清新的美術(shù)風(fēng)格,我在美工階段按此基調(diào)進(jìn)行了頁面設(shè)計(jì),調(diào)動(dòng)各種視覺元素使其與此風(fēng)格相符,如:(1)壓縮頁面大小,邊緣留空。(2)減少頁面信息量。(3)字體、圖片尺寸小巧,以剛好能為觀者識(shí)別為準(zhǔn),使頁面就顯得緊湊與精巧。
2.網(wǎng)站色彩方案
在美工階段我繼續(xù)完善了網(wǎng)站色彩方案,將主題色深藍(lán)色用在了導(dǎo)航條上,選擇了淺灰色、白色作為輔助色,用作頁面中大面積的底色?；疑桶咨陲柡投扰c明度上與主題色有著較大差異,能夠?qū)ζ淦鸷芎玫呐阋r作用,同時(shí)這兩種顏色都具有中性,冷靜的特質(zhì),與主題色的語境相通。
3.頁面的“圖窗”
由于頁面信息量相對(duì)不足,如果再靜止不動(dòng),那么網(wǎng)頁將會(huì)有些單調(diào)乏味。因此我便參照了很多網(wǎng)站的做法,在首頁導(dǎo)航條下方放置了一塊很大面積的FLASH動(dòng)畫去活躍和豐富頁面。FLASH約占據(jù)了頁面有效部分的3/5大小,這是美學(xué)中的黃金分割比例,也是我常常處理圖塊之間大小關(guān)系的比例,可以使得頁面有一種大小、主次的對(duì)比。
4.分頁面版式設(shè)計(jì)
其它幾個(gè)分頁面的版式設(shè)計(jì),是以靜態(tài)圖片充當(dāng)頁面“圖窗”,并采用了兩種基本版式:(1)圖文左右混排。(2)圖文上下混排,使得各頁版式有一定的變化,避免了千篇一律。“聯(lián)系方式”一頁內(nèi)容較少,就沒有用圖,直接以名片般的版式列出了信息,一目了然。
也有一個(gè)設(shè)計(jì)缺陷:部分頁面的頂部圖窗過于臃腫,造成頁面文字欄目被向下積壓,訪問者如果不滾動(dòng)瀏覽器窗口,就難以看到多少有用的內(nèi)容。這其實(shí)是犯了網(wǎng)頁設(shè)計(jì)中“第一屏”信息不足的錯(cuò)誤。第一屏即指打開瀏覽器,不翻頁的情況下看到的內(nèi)容,這個(gè)區(qū)域一般高為700像素,在設(shè)計(jì)中要集中頁面有用信息于此,才能讓訪問者不至于感到內(nèi)容空洞、查看費(fèi)勁。
四、技術(shù)制作
1.網(wǎng)站制作技術(shù)的選擇
網(wǎng)頁制作技術(shù)的選擇,在制作中期決定了美工用什么軟件去完成設(shè)計(jì),及代碼編寫人員用何種方式去實(shí)現(xiàn)網(wǎng)頁的最終效果。
目前采用較多的網(wǎng)頁制作技術(shù)主要有三種:(1)用Flash制作網(wǎng)站。Flash軟件創(chuàng)建圖形和動(dòng)畫的功能強(qiáng)大,并可憑借Actionscript代碼實(shí)現(xiàn)用戶交互,所創(chuàng)作的網(wǎng)頁有著最為豐富動(dòng)畫效果,因此被一些追求新穎,張揚(yáng)個(gè)性的站點(diǎn)用來進(jìn)行整站制作,不過缺點(diǎn)是技術(shù)上相對(duì)復(fù)雜。(2)用HTML語言制作網(wǎng)站。網(wǎng)頁文檔依靠HTML語言組織圖文信息,設(shè)計(jì)師可以通過編寫這種語言實(shí)現(xiàn)制作,也是國(guó)內(nèi)外大多數(shù)網(wǎng)站采用的技術(shù)。它的優(yōu)點(diǎn)是簡(jiǎn)單易掌握,缺點(diǎn)是代碼冗余和非“語義化”,有被互聯(lián)網(wǎng)逐漸淘汰的趨勢(shì)。(3)用XHTML+CSS語言制作網(wǎng)站。制定
網(wǎng)絡(luò)標(biāo)準(zhǔn)的W3C組織在HTML語言之后,針對(duì)其弱點(diǎn),又推出了改良語言XHTML,并與CSS樣式語言混合使用,語法規(guī)范,成為當(dāng)今網(wǎng)頁制作新的技術(shù)標(biāo)準(zhǔn)。缺點(diǎn)是需要手寫更多的代碼,對(duì)美工的形象思維方式提出了挑戰(zhàn)。
2.留言板的制作
“在線客服”頁面中,公司需要搜集訪客的留言信息。這一功能可以通過表單、
論壇等形式實(shí)現(xiàn),而一種能夠即時(shí)發(fā)言和顯示的ASP留言板,對(duì)該網(wǎng)站則最為合適。ASP留言板除對(duì)網(wǎng)站服務(wù)器空間稍有要求外,但制作、發(fā)布和維護(hù)都很簡(jiǎn)單。我從網(wǎng)上選擇了一套ASP留言板模板,對(duì)其頁面外觀加以修改以配合網(wǎng)站整體風(fēng)格,之后上傳到服務(wù)器,即可正常運(yùn)行。
參考文獻(xiàn):
[1]佚名.網(wǎng)頁設(shè)計(jì)中的色彩設(shè)計(jì)
藝術(shù).
[2]朱印宏.CSS商業(yè)網(wǎng)站布局之道.清華大學(xué)出版社,2007.10.
[3]百度.知道關(guān)于軟件Flash 的解釋.
