淺談公司形象網站的設計流程

劉力溯　張　蘇

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

【關鍵詞】形象 網站 設計

一、緒論

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

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

二、網站策劃

1.網站策劃的職責

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

有別于純粹從“形象思維”出發的美工設計,策劃具有一種“理念先行”的思維方式,他的職責在于準確地了解和把握客戶的意圖,并綜合美學、人文、心理學等多方面因素進行理性思考,進而對網站的主題、規模、結構、風格提出要求,作出整體規劃。

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

2.主題色的選擇

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

3.素材的搜集

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

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

4.網站結構的劃分

網站結構,是指組成網站的各個頁面及相互之間的鏈接關系,從簡單意義上可以理解為網站欄目的劃分。在策劃階段,要以網站的實際內容和訪問者的瀏覽習慣為基礎劃分欄目,從而決定分頁面的數量和鏈接方式。還要從信息的易獲取度方面考慮,采取盡量簡化的原則。

三、美工設計

1.頁面美術風格

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

2.網站色彩方案

在美工階段我繼續完善了網站色彩方案,將主題色深藍色用在了導航條上,選擇了淺灰色、白色作為輔助色,用作頁面中大面積的底色。灰色和白色在飽和度與明度上與主題色有著較大差異,能夠對其起很好的陪襯作用,同時這兩種顏色都具有中性,冷靜的特質,與主題色的語境相通。

3.頁面的“圖窗”

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

4.分頁面版式設計

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

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

四、技術制作

1.網站制作技術的選擇

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

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

2.留言板的制作

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

參考文獻:

[1]佚名.網頁設計中的色彩設計藝術.

[2]朱印宏.CSS商業網站布局之道.清華大學出版社,2007.10.

[3]百度.知道關于軟件Flash 的解釋.