劉力溯　張　蘇

【摘 要】本文試圖以制作思沃特公司網(wǎng)站的經(jīng)驗,總結(jié)出此類公司形象網(wǎng)站的一般制作流程,并闡釋其中的一些重要問題,為設(shè)計實踐活動提供一定參考。

【關(guān)鍵詞】形象 網(wǎng)站 設(shè)計

一、緒論

20世紀(jì)90年代以來,互聯(lián)網(wǎng)開始在國內(nèi)迅速普及,互聯(lián)網(wǎng)主要通過大量的、每天至少有幾千人乃至幾十萬人訪問的網(wǎng)站,以前所未有的效率廣泛傳播著信息。

筆者曾為武漢思沃特房地產(chǎn)顧問有限公司制作過一個網(wǎng)站。該公司希望擁有一個簡單的網(wǎng)站,將其作為公司宣傳策略的一部分,其中與業(yè)務(wù)相關(guān)的實際內(nèi)容并不多。因而此網(wǎng)站顯然屬于形象展示型的公司網(wǎng)站,應(yīng)按相應(yīng)的模式來設(shè)計。

二、網(wǎng)站策劃

1.網(wǎng)站策劃的職責(zé)

很多人都知道網(wǎng)頁設(shè)計需要“美術(shù)”與“技術(shù)”兩方面的相互配合,一個較為普遍的原則是“美工先行”,即由美工先作設(shè)計,再由技術(shù)人員制作,但這只是就單個頁面制作層面而言,若從更廣義的網(wǎng)站整體規(guī)劃角度來說,本文認(rèn)為在以上工作開始之前還應(yīng)該有一個“網(wǎng)站策劃”的環(huán)節(jié)。

有別于純粹從“形象思維”出發(fā)的美工設(shè)計,策劃具有一種“理念先行”的思維方式,他的職責(zé)在于準(zhǔn)確地了解和把握客戶的意圖,并綜合美學(xué)、人文、心理學(xué)等多方面因素進(jìn)行理性思考,進(jìn)而對網(wǎng)站的主題、規(guī)模、結(jié)構(gòu)、風(fēng)格提出要求,作出整體規(guī)劃。

如果缺少策劃的全盤考慮和指導(dǎo),美工設(shè)計很可能陷于為形式而形式,為美觀而美觀,無法取得最合理的傳達(dá)效果。

2.主題色的選擇

思沃特公司的宗旨是“體驗優(yōu)質(zhì)地產(chǎn)服務(wù)”。核心價值觀是“誠信,團(tuán)隊,創(chuàng)意,靈活,分享”。通過比對和聯(lián)系,我發(fā)現(xiàn)藍(lán)色的含義與其企業(yè)文化正好吻合,很好地詮釋了他們對于專業(yè)服務(wù)和團(tuán)隊合作的追求,于是在網(wǎng)站主題色和同期制作的VI標(biāo)志上都選擇了藍(lán)色。不過,網(wǎng)站的主題色采用了一種與標(biāo)志中最深的陰影部分相同的深藍(lán)色,這是因為深一點的藍(lán)色更加沉穩(wěn)、睿智,排除了淺藍(lán)色所帶有的憂郁等其它感覺。

3.素材的搜集

網(wǎng)站制作的前期工作還包括搜集素材,素材包括圖文兩方面的內(nèi)容。網(wǎng)站的文字內(nèi)容一般是從委托方得到,如公司介紹等。

圖片素材包括裝飾性圖片和插圖,它們的搜集工作通常是由美工在制作過程中“順手完成”的,本文卻認(rèn)為,素材搜集的隨意性和分散性,和美工單純考慮畫面的傾向,容易導(dǎo)致圖片與網(wǎng)站主題聯(lián)系不強。不如在設(shè)計之初,由對網(wǎng)站主題有著深入了解的策劃,預(yù)先對圖片進(jìn)行統(tǒng)一的準(zhǔn)備和采集,包括實地拍攝等。

4.網(wǎng)站結(jié)構(gòu)的劃分

網(wǎng)站結(jié)構(gòu),是指組成網(wǎng)站的各個頁面及相互之間的鏈接關(guān)系,從簡單意義上可以理解為網(wǎng)站欄目的劃分。在策劃階段,要以網(wǎng)站的實際內(nèi)容和訪問者的瀏覽習(xí)慣為基礎(chǔ)劃分欄目,從而決定分頁面的數(shù)量和鏈接方式。還要從信息的易獲取度方面考慮,采取盡量簡化的原則。

三、美工設(shè)計

1.頁面美術(shù)風(fēng)格

從策劃角度講,為了體現(xiàn)該公司現(xiàn)代、高效、新銳的精神氣質(zhì),需要一種簡潔、明快、清新的美術(shù)風(fēng)格,我在美工階段按此基調(diào)進(jìn)行了頁面設(shè)計,調(diào)動各種視覺元素使其與此風(fēng)格相符,如:(1)壓縮頁面大小,邊緣留空。(2)減少頁面信息量。(3)字體、圖片尺寸小巧,以剛好能為觀者識別為準(zhǔn),使頁面就顯得緊湊與精巧。

2.網(wǎng)站色彩方案

在美工階段我繼續(xù)完善了網(wǎng)站色彩方案,將主題色深藍(lán)色用在了導(dǎo)航條上,選擇了淺灰色、白色作為輔助色,用作頁面中大面積的底色。灰色和白色在飽和度與明度上與主題色有著較大差異,能夠?qū)ζ淦鸷芎玫呐阋r作用,同時這兩種顏色都具有中性,冷靜的特質(zhì),與主題色的語境相通。

3.頁面的“圖窗”

由于頁面信息量相對不足,如果再靜止不動,那么網(wǎng)頁將會有些單調(diào)乏味。因此我便參照了很多網(wǎng)站的做法,在首頁導(dǎo)航條下方放置了一塊很大面積的FLASH動畫去活躍和豐富頁面。FLASH約占據(jù)了頁面有效部分的3/5大小,這是美學(xué)中的黃金分割比例,也是我常常處理圖塊之間大小關(guān)系的比例,可以使得頁面有一種大小、主次的對比。

4.分頁面版式設(shè)計

其它幾個分頁面的版式設(shè)計,是以靜態(tài)圖片充當(dāng)頁面“圖窗”,并采用了兩種基本版式:(1)圖文左右混排。(2)圖文上下混排,使得各頁版式有一定的變化,避免了千篇一律?！奥?lián)系方式”一頁內(nèi)容較少,就沒有用圖,直接以名片般的版式列出了信息,一目了然。

也有一個設(shè)計缺陷:部分頁面的頂部圖窗過于臃腫,造成頁面文字欄目被向下積壓,訪問者如果不滾動瀏覽器窗口,就難以看到多少有用的內(nèi)容。這其實是犯了網(wǎng)頁設(shè)計中“第一屏”信息不足的錯誤。第一屏即指打開瀏覽器,不翻頁的情況下看到的內(nèi)容,這個區(qū)域一般高為700像素,在設(shè)計中要集中頁面有用信息于此,才能讓訪問者不至于感到內(nèi)容空洞、查看費勁。

四、技術(shù)制作

1.網(wǎng)站制作技術(shù)的選擇

網(wǎng)頁制作技術(shù)的選擇,在制作中期決定了美工用什么軟件去完成設(shè)計,及代碼編寫人員用何種方式去實現(xiàn)網(wǎng)頁的最終效果。

目前采用較多的網(wǎng)頁制作技術(shù)主要有三種:(1)用Flash制作網(wǎng)站。Flash軟件創(chuàng)建圖形和動畫的功能強大,并可憑借Actionscript代碼實現(xiàn)用戶交互,所創(chuàng)作的網(wǎng)頁有著最為豐富動畫效果,因此被一些追求新穎,張揚個性的站點用來進(jìn)行整站制作,不過缺點是技術(shù)上相對復(fù)雜。(2)用HTML語言制作網(wǎng)站。網(wǎng)頁文檔依靠HTML語言組織圖文信息,設(shè)計師可以通過編寫這種語言實現(xiàn)制作,也是國內(nèi)外大多數(shù)網(wǎng)站采用的技術(shù)。它的優(yōu)點是簡單易掌握,缺點是代碼冗余和非“語義化”,有被互聯(lián)網(wǎng)逐漸淘汰的趨勢。(3)用XHTML+CSS語言制作網(wǎng)站。制定網(wǎng)絡(luò)標(biāo)準(zhǔn)的W3C組織在HTML語言之后,針對其弱點,又推出了改良語言XHTML,并與CSS樣式語言混合使用,語法規(guī)范,成為當(dāng)今網(wǎng)頁制作新的技術(shù)標(biāo)準(zhǔn)。缺點是需要手寫更多的代碼,對美工的形象思維方式提出了挑戰(zhàn)。

2.留言板的制作

“在線客服”頁面中,公司需要搜集訪客的留言信息。這一功能可以通過表單、論壇等形式實現(xiàn),而一種能夠即時發(fā)言和顯示的ASP留言板,對該網(wǎng)站則最為合適。ASP留言板除對網(wǎng)站服務(wù)器空間稍有要求外,但制作、發(fā)布和維護(hù)都很簡單。我從網(wǎng)上選擇了一套ASP留言板模板,對其頁面外觀加以修改以配合網(wǎng)站整體風(fēng)格,之后上傳到服務(wù)器,即可正常運行。

參考文獻(xiàn):

[1]佚名.網(wǎng)頁設(shè)計中的色彩設(shè)計藝術(shù).

[2]朱印宏.CSS商業(yè)網(wǎng)站布局之道.清華大學(xué)出版社,2007.10.

[3]百度.知道關(guān)于軟件Flash 的解釋.