設(shè)計(jì)首頁(yè)的第一步是設(shè)計(jì)版面布局

　　就象傳統(tǒng)的報(bào)刊雜志編輯一樣，我們將網(wǎng)頁(yè)看作一張報(bào)紙，一本雜志來(lái)進(jìn)行排版布局。 雖然動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的發(fā)展使得我們開(kāi)始趨向于學(xué)習(xí)場(chǎng)景編劇，但是固定的網(wǎng)頁(yè)版面設(shè)計(jì)基礎(chǔ) 依然是必須學(xué)習(xí)和掌握的。它們的基本原理是共通的，你可以領(lǐng)會(huì)要點(diǎn)，舉一反三。 版面指的是瀏覽器看到的完整的一個(gè)頁(yè)面(可以包含框架和層)。因?yàn)槊總€(gè)人的顯示器 分辨率不同，所以同一個(gè)頁(yè)面的大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不 同尺寸。

　　布局，就是以最適合瀏覽的方式將圖片和文字排放在頁(yè)面的不同位置。 你可能注意到:“最適合”是一個(gè)不確定的形容詞，什么才是最適合的呢?抱歉的是 阿捷不能也不可能給您一個(gè)完整的正確的答案。就好比有人希望知道成功的秘訣是什么， 成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步成功的 "秘訣"告訴您。 我們?cè)谠O(shè)計(jì)思考系列文章第四篇講過(guò)站點(diǎn)整體的創(chuàng)意，版面布局也是一個(gè)創(chuàng)意的問(wèn)題， 但要比站點(diǎn)整體的創(chuàng)意容易，有規(guī)律的多。

　　讓我們先來(lái)了解一下版面布局的步驟:

　　一.草案 新建頁(yè)面就象一張白紙，沒(méi)有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的"景象"畫(huà)上去(我們建議您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也可以)。這屬于創(chuàng)造階段，不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫(huà)出創(chuàng)意的輪廓即可。盡你的可能多畫(huà)幾張，最后選定一個(gè)滿意的作為繼續(xù)創(chuàng)作的腳本。

　　二.粗略布局 在草案的基礎(chǔ)上，將你確定需要放置的功能模塊安排到頁(yè)面上。(注:功能模塊我們?cè)?"首頁(yè)設(shè)計(jì)-引子"中提過(guò)，主要包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表, 計(jì)數(shù)器,版權(quán)信息等)。注意，這里我們必須遵循突出重點(diǎn)、平衡諧調(diào)的原則，將網(wǎng)站標(biāo) 志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。

　　三.定案 將粗略布局精細(xì)化，具體化。(靠你的智慧和經(jīng)驗(yàn)，旁敲側(cè)擊多方聯(lián)想，才能作出具 有創(chuàng)意的布局。)在布局過(guò)程中，我們可以遵循的原則有:

　　1、正常平衡---亦稱"勻稱"。多指左右、上下對(duì)照形式，主要強(qiáng)調(diào)秩序，能達(dá)到安定 誠(chéng)實(shí)、信賴的效果。

　　2、異常平衡---即非對(duì)照形式，但也要平衡和韻律，當(dāng)然都是不均整的，此種布局能 達(dá)到強(qiáng)調(diào)性、不安性、高注目性的效果。

　　3、對(duì)比---所謂對(duì)比，不僅利用色彩、色調(diào)等技巧來(lái)作表現(xiàn)，在內(nèi)容上也可涉及古與 今、新與舊、貧與富等對(duì)比。

　　4、凝視---所謂凝視是利用頁(yè)面中人物視線，使瀏覽者仿照跟隨的心理，以達(dá)到注視 頁(yè)面的效果，一般多用明星凝視狀。

　　5、空白---空白有兩種作用，一方面對(duì)其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁(yè)品 位的優(yōu)越感，這種表現(xiàn)方法對(duì)體顯網(wǎng)頁(yè)的格調(diào)十分有效。

　　6、盡量用圖片解說(shuō)---此法對(duì)不能用語(yǔ)言說(shuō)服、或用語(yǔ)言無(wú)法表達(dá)的情感，特別有效。 圖片解說(shuō)的內(nèi)容，可以傳達(dá)給瀏覽者的更多的心理因素。 ------------(轉(zhuǎn)載自廣告大師樊志育《廣告制作》) 以上的設(shè)計(jì)原則，雖然枯燥，但是我們?nèi)绻茴I(lǐng)會(huì)并活用到頁(yè)面布局里，效果就大不 一樣了。比如：

       ○網(wǎng)頁(yè)的白色背景太虛，則可以加些色快;

　　○版面零散，可以用線條和符號(hào)串聯(lián);

　　○左面文字過(guò)多，右面則可以插一張圖片保持平衡;

　　○表格太規(guī)矩，可以改用導(dǎo)角試試。

　　經(jīng)過(guò)不斷的嘗試和推敲，你的網(wǎng)頁(yè)一定會(huì)亮麗起來(lái)的哦。

　　看看我們經(jīng)常用到的版面布局形式:

　　1."T"結(jié)構(gòu)布局。所謂"T"結(jié)構(gòu)。就是指頁(yè)面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因?yàn)椴藛螚l背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網(wǎng)頁(yè)設(shè)計(jì)中用的最廣返的一種布局方式。(圖略) 這種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不注意，很容易讓人"看之無(wú)味"。

　　2."口"型布局。這是一個(gè)象形的說(shuō)法，就是頁(yè)面一般上下各有一個(gè)廣告條，左面是主菜單，

　　右面放友情連接等，中間是主要內(nèi)容。(圖略) 這種布局的優(yōu)點(diǎn)是充分利用版面，信息量大(我的主頁(yè)首頁(yè)即屬于這種布局)。缺點(diǎn)是頁(yè)面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計(jì)，例如網(wǎng)易壁紙站。

　　3."三"型布局。這種布局多用于國(guó)外站點(diǎn)，國(guó)內(nèi)用的不多。特點(diǎn)是頁(yè)面上橫向兩條色塊，將頁(yè)面整體分割為四部分，色塊中大多放廣告條。

　　4.對(duì)稱對(duì)比布局。顧名思義，采取左右或者上下對(duì)稱的布局，一半深色，一半淺色，一般用于設(shè)計(jì)型站點(diǎn)。優(yōu)點(diǎn)是視覺(jué)沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難。

　　5.POP布局。POP引自廣告術(shù)語(yǔ)，就是指頁(yè)面布局象一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面設(shè)計(jì)中心。常用于時(shí)尚類站點(diǎn)，比如ELLE.com。優(yōu)點(diǎn)顯而易見(jiàn):漂亮吸引人。缺點(diǎn)就是速度慢。作為版面布局還是值得借鑒的。

　　以上總結(jié)了目前網(wǎng)絡(luò)上常見(jiàn)的布局，其實(shí)還有許許多多別具一格的布局，關(guān)鍵在于你的創(chuàng)意和設(shè)計(jì)了。對(duì)于版面布局的技巧，這里提供四個(gè)建議，您可以自己推敲:

　　1.加強(qiáng)視覺(jué)效果

　　2.加強(qiáng)文案的可視度和可讀性

　　3.統(tǒng)一感的視覺(jué)

　　4.新鮮和個(gè)性是布局的最高境界

　　主頁(yè)的藝術(shù)處理

　　主頁(yè)的設(shè)計(jì)主要是網(wǎng)頁(yè)設(shè)計(jì)軟件的操作與技術(shù)應(yīng)用的問(wèn)題。但是，要使主頁(yè)設(shè)計(jì)、制作得漂亮，必然離不開(kāi)對(duì)主頁(yè)進(jìn)行藝術(shù)的加工和處理，這就要涉及到美術(shù)的一些基本常識(shí)。本文將介紹一些主頁(yè)設(shè)計(jì)中經(jīng)常涉及到的藝術(shù)處理原則，供各位在進(jìn)行主頁(yè)制作的時(shí)候參考。

　　一、風(fēng)格定位

　　主頁(yè)的美化首先要考慮風(fēng)格的定位。任何主頁(yè)都要根據(jù)主題的內(nèi)容決定其風(fēng)格與形式，因?yàn)橹挥行问脚c內(nèi)容的完美統(tǒng)一，才能達(dá)到理想的宣傳效果。目前主頁(yè)的應(yīng)用范圍日益擴(kuò)大，幾乎包括了所有的行業(yè)，林林總總，包羅萬(wàn)象，但歸納起來(lái)大體有這么幾個(gè)大類:新聞機(jī)構(gòu)、政府機(jī)關(guān)、科教文化、娛樂(lè)藝術(shù)、電子商務(wù)、網(wǎng)絡(luò)中心等。對(duì)于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的主頁(yè)風(fēng)格，就像穿著打扮，應(yīng)依不同的性別以及年齡層次而異一樣。例如:政府部門的主頁(yè)風(fēng)格一般應(yīng)比較莊重，而娛樂(lè)行業(yè)則可以活潑生動(dòng)一些;文化教育部門的主頁(yè)風(fēng)格應(yīng)該高雅大方，而商務(wù)主頁(yè)則可以貼近民俗，使大眾喜聞樂(lè)見(jiàn)。

　　主頁(yè)風(fēng)格的形成主要依賴于主頁(yè)的版式設(shè)計(jì)，依賴于頁(yè)面的色調(diào)處理，還有圖片與文字的組合形式等。這些問(wèn)題看似簡(jiǎn)單，但往往需要主頁(yè)的設(shè)計(jì)和制作者具有一定的美術(shù)素質(zhì)和修養(yǎng)。

　　還有，動(dòng)畫(huà)效果也不宜在主頁(yè)設(shè)計(jì)中濫用，特別是一些內(nèi)容比較嚴(yán)肅的主頁(yè)。主頁(yè)畢竟主要依靠文字和圖片來(lái)傳播信息，它不是動(dòng)畫(huà)片，更不是電視或電影。至于在主頁(yè)中適當(dāng)鏈接一些影視作品，那是另外一回事.

　　二、版面編排

　　主頁(yè)的設(shè)計(jì)首先涉及到的是頁(yè)面的版面編排問(wèn)題?！鞍婷婢幣拧睂?shí)際上就是中國(guó)古代畫(huà)論中的“經(jīng)營(yíng)位置”。主頁(yè)作為一種版面，既有文字，又有圖片。文字有大有小，還有標(biāo)題和正文之分;圖片也有大小，而且有橫有豎之別。圖片和文字都需要同時(shí)展示給觀眾，總不能簡(jiǎn)單地羅列在一個(gè)頁(yè)面上，這樣往往會(huì)搞得雜亂無(wú)章。因此必須根據(jù)內(nèi)容的需要，將這些圖片和文字按照一定的次序進(jìn)行合理的編排和布局，使它們組成一個(gè)有機(jī)的整體，展現(xiàn)給廣大的觀眾?？梢砸罁?jù)如下幾條來(lái)做:

　　1.主次分明，中心突出。在一個(gè)頁(yè)面上，必然考慮視覺(jué)的中心，這個(gè)中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個(gè)部位，在視覺(jué)中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁(yè)面上就突出了重點(diǎn)，做到了主次有別。

　　2.大小搭配，相互呼應(yīng)。較長(zhǎng)的文章或標(biāo)題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對(duì)待圖片的安排也是這樣，要互相錯(cuò)開(kāi)，造成大小之間有一定的間隔，這樣可以使頁(yè)面錯(cuò)落有致，避免重心的偏離。

　　3.圖文并茂，相得益彰。文字和圖片具有一種相互補(bǔ)充的視覺(jué)關(guān)系，頁(yè)面上文字太多，就顯得沉悶，缺乏生氣。頁(yè)面上圖片太多，缺少文字，必然就會(huì)減少頁(yè)面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁(yè)面，又使主頁(yè)有豐富的內(nèi)容。

　　定位你的網(wǎng)站CI知識(shí)

　　大家好，我是阿捷。今天我們繼續(xù)《網(wǎng)站設(shè)計(jì)的思考》專題系列文章之二:定位你的網(wǎng)站CI形象。

　　所謂CI，是借用的廣告術(shù)語(yǔ)。(CI是英文corporate identity的縮寫(xiě))，意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象?，F(xiàn)實(shí)生活中的CI策劃比比皆是，杰出的例子如:可口可樂(lè)公司，全球統(tǒng)一的標(biāo)志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當(dāng)勞等等。

　　一個(gè)杰出的網(wǎng)站，和實(shí)體公司一樣，也需要整體的形象包裝和設(shè)計(jì)。準(zhǔn)確的，有創(chuàng)意的CI設(shè)計(jì)，對(duì)網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來(lái)之后，需要思考的就是網(wǎng)站的CI形象。

　　有網(wǎng)友要問(wèn)了:我不是學(xué)廣告專業(yè)的，CI對(duì)我來(lái)說(shuō)可能太難了吧:(不用擔(dān)心，阿捷自己也沒(méi)有學(xué)過(guò)設(shè)計(jì)專業(yè)哦。大家只要參考我的一些具體做法和經(jīng)驗(yàn)，很容易將自己網(wǎng)站的CI搞定:)

　　1.設(shè)計(jì)網(wǎng)站的標(biāo)志(logo).首先你需要設(shè)計(jì)制作一個(gè)網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是你站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)，看見(jiàn)logo就讓大家聯(lián)想起你的站點(diǎn)。注意:這里的logo不是指88X31的小圖標(biāo)banner,而是網(wǎng)站的標(biāo)志。

　　標(biāo)志可以是中文，英文字母，可以是符號(hào)，圖案，可以是動(dòng)物或者人物等等。比如:soim是用soim的英文作為標(biāo)志，新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計(jì)創(chuàng)意來(lái)自你網(wǎng)站的名稱和內(nèi)容。

　　(1).網(wǎng)站有代表性的人物，動(dòng)物，花草，可以用它們作為設(shè)計(jì)的藍(lán)本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚(yú)。

　　(2).網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標(biāo)志。比如中國(guó)銀行的銅板標(biāo)志，奔馳汽車的方向盤(pán)標(biāo)志。

　　(3).最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體，字母的變形，字母的組合可以很容易制作好自己的標(biāo)志。

　　2.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來(lái)自視覺(jué)沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問(wèn)者的情緒。

　　“標(biāo)準(zhǔn)色彩”是指能體現(xiàn)網(wǎng)站型象和延伸內(nèi)涵的色彩。舉個(gè)實(shí)際的例子就明白了:IBM的深藍(lán)色，肯得基的紅色條型，windows視窗標(biāo)志上的紅藍(lán)黃綠色塊，都使我們覺(jué)得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會(huì)有什么感覺(jué)?

　　一般來(lái)說(shuō)，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過(guò)3種，太多則讓人眼花繚亂。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志，標(biāo)題，主菜單和主色塊。給人以整體統(tǒng)一的感覺(jué)。至于其它色彩也可以使用，只是作為點(diǎn)綴和襯托，絕不能喧賓奪主。

　　一般來(lái)說(shuō)，適合于網(wǎng)頁(yè)標(biāo)準(zhǔn)色的顏色有:藍(lán)色，黃/橙色，黑/灰/白色三大系列色。(注:關(guān)于色彩搭配的具體方法，我們會(huì)在本系列文章的第八篇介紹)。

　　3.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志，標(biāo)題，主菜單的特有字體。一般我們網(wǎng)頁(yè)默認(rèn)的字體是宋體。為了體現(xiàn)站點(diǎn)的“與眾不同”和特有風(fēng)格，我門可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專業(yè)可以使用粗仿宋體，體現(xiàn)設(shè)計(jì)精美可以用廣告體，體現(xiàn)親切隨意可以用手寫(xiě)體等等。當(dāng)然這些都是阿捷的個(gè)人看法，你可以根據(jù)自己網(wǎng)站所表達(dá)的內(nèi)涵，選擇更貼切的字體。目前常見(jiàn)的中文字體有二三十種，常見(jiàn)的英文字體有近百種，網(wǎng)絡(luò)上還有許多專用英文藝術(shù)字體下載，要尋找一款滿意的字體并不算困難。

　　需要說(shuō)明的是:使用非默認(rèn)字體只能用圖片的形式，因?yàn)楹芸赡転g覽者的PC里沒(méi)有安裝你的特別字體，那么您的辛苦設(shè)計(jì)制作便付之東流啦!

　　4.設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)。也可以說(shuō)是網(wǎng)站的精神，網(wǎng)站的目標(biāo)。用一句話甚至一個(gè)詞來(lái)高度概括。類似實(shí)際生活中的廣告金句。例如:鵲巢的“味道好極了”;麥斯威爾的“好東西和好朋友一起分享”;Intel的“給你一個(gè)奔騰的心”。

　　以上四方面:標(biāo)志，色彩，字體，標(biāo)語(yǔ)，是一個(gè)網(wǎng)站樹(shù)立CI形象的關(guān)鍵，確切的說(shuō)是網(wǎng)站的表面文章，設(shè)計(jì)并完成這幾步，你的網(wǎng)站將脫胎換骨，整體形象有一個(gè)提高。形象地說(shuō):你從一個(gè)土氣的農(nóng)民轉(zhuǎn)變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意:我們只是以平面靜態(tài)來(lái)設(shè)計(jì)CI,還沒(méi)有引入聲音，三維立體等因素。)

　　好了，看了以上的介紹，你應(yīng)該對(duì)網(wǎng)站CI有了一個(gè)初步的概念。也許不是很明白，因?yàn)槟切┑览硖橄罅?，你可能需要一些?shí)際的，更生動(dòng)的例子。阿捷會(huì)在自己的主頁(yè)上同時(shí)修改補(bǔ)充一些實(shí)例。

　　此三篇為轉(zhuǎn)貼(怎么設(shè)置你的首頁(yè)/主頁(yè)的藝術(shù)處理/定位你的網(wǎng)站CI標(biāo)識(shí))