情境1網(wǎng)站設(shè)計(jì)規(guī)劃.ppt

1、2009-7-15,網(wǎng)頁(yè)設(shè)計(jì)與制作,學(xué)習(xí)情境1：網(wǎng)站的設(shè)計(jì)規(guī)劃,2009-7-15,教學(xué)目標(biāo),知識(shí)目標(biāo)： 1了解網(wǎng)站的分類 2了解網(wǎng)站建設(shè)的流程 3了解網(wǎng)站風(fēng)格設(shè)計(jì)的原理 4了解網(wǎng)站布局及欄目 能力目標(biāo)： 1能明確網(wǎng)站類型及主題 2能根據(jù)用戶需求設(shè)計(jì)網(wǎng)站的總體結(jié)構(gòu)圖 3能確定網(wǎng)站的總體色彩搭配及風(fēng)格 4完成網(wǎng)站建設(shè)的設(shè)計(jì)報(bào)告,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7

2、-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,2009-7-15,網(wǎng)站定位,一個(gè)好的網(wǎng)站定位所包含的內(nèi)容 1. 確定網(wǎng)站目標(biāo) 2. 考慮用戶群 3一個(gè)好的網(wǎng)站名 4明確的網(wǎng)站標(biāo)志 5確定網(wǎng)站的欄目 6確定網(wǎng)站的目錄結(jié)構(gòu) 7確定網(wǎng)站的鏈接結(jié)構(gòu),2009-7-15,第一步：明確建設(shè)網(wǎng)站目的及功能定位,2009-7-15,第一步：明確建設(shè)網(wǎng)站目的及功能定位,網(wǎng)站定位:就是網(wǎng)站在Internet上扮演什么角色，要向目標(biāo)群(瀏覽者)傳達(dá)什么樣的核心概念，透過網(wǎng)站發(fā)揮什么樣的作用。 網(wǎng)站定位是網(wǎng)站建設(shè)的策略，而網(wǎng)站架構(gòu)、內(nèi)容

3、、表現(xiàn)等都圍繞這些網(wǎng)站定位展開,網(wǎng)站定位的好壞直接決定著網(wǎng)站的前景和規(guī)模。,2009-7-15,第一步：明確建設(shè)網(wǎng)站目的及功能定位,1.確定網(wǎng)站目標(biāo) 網(wǎng)站的目標(biāo)就是網(wǎng)站設(shè)計(jì)者根據(jù)自身的實(shí)力制定的目標(biāo)，這應(yīng)該是網(wǎng)站遠(yuǎn)景規(guī)劃，你的網(wǎng)站向哪個(gè)方向發(fā)展，發(fā)展空間有多大，預(yù)計(jì)受眾有哪些，受眾量有多少。,2009-7-15,明確建設(shè)網(wǎng)站目的及功能定位,福建省國(guó)際電子商務(wù)中心，以“依托高科技，推廣電子商務(wù)，促進(jìn)信息化”為目標(biāo)，以服務(wù)為唯一的宗旨，為我省外經(jīng)貿(mào)企業(yè)提供全面的國(guó)際貿(mào)易電子商務(wù)解決方案，全程電子商務(wù)應(yīng)用，承擔(dān)技術(shù)支持、技術(shù)培訓(xùn)及相關(guān)政策指導(dǎo)。 該網(wǎng)站其功能應(yīng)定位：提供服務(wù)的電子商務(wù)網(wǎng)站。,2009

4、-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,一個(gè)成功的網(wǎng)站，和實(shí)體公司一樣需要總體的形象包裝和設(shè)計(jì)準(zhǔn)確的，有創(chuàng)意的CI設(shè)計(jì)的網(wǎng)站的宣傳推廣有著不可忽略的效果。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,1設(shè)計(jì)網(wǎng)站的標(biāo)志LOGO 網(wǎng)站的標(biāo)志（LOGO）是一個(gè)站點(diǎn)特色和內(nèi)涵集中體現(xiàn)，標(biāo)志圖形的設(shè)計(jì)創(chuàng)意來自網(wǎng)站的名稱和內(nèi)容。它可以是中文、英文字母、可以是符號(hào)、圖案、可以是動(dòng)畫或者人物等。最常見的和最簡(jiǎn)單的方式是用自己網(wǎng)站名稱的英文字母作標(biāo)志，采用不同的字體。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,如 IBM公司是以英文字母稍加處理作的標(biāo)志 ， 新浪網(wǎng)是用字母SINA和一只眼睛作標(biāo)志

5、 ， 奔馳汽車的方向盤標(biāo)志,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,網(wǎng)站的標(biāo)志，就如同商標(biāo)一樣，是站點(diǎn)特色和內(nèi)涵的集中體現(xiàn)，因此在進(jìn)行網(wǎng)頁(yè)標(biāo)志設(shè)計(jì)的時(shí)候，要總體考慮整個(gè)網(wǎng)站的定位，兼顧各個(gè)層次和鏈接的需要，突出自已的網(wǎng)站的經(jīng)營(yíng)理念，再深入地設(shè)計(jì)自已的網(wǎng)站標(biāo)志，讓大家看見標(biāo)志就能聯(lián)想起你的站點(diǎn)。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象, 它表示阿里巴巴不是什么了不起的大公司，我們是跑得比較快一點(diǎn)，但直到今天它仍然還很小，很多事情需要踏踏實(shí)實(shí)地從小A做起，相信一定會(huì)有一天成為行業(yè)的大A。 它還代表了阿里巴巴微笑文化：阿里人不一定要有統(tǒng)一制服但一定要有統(tǒng)一表情。這是對(duì)工作上的職業(yè)

6、理解,以苦為樂, 更多也是人生的理解, 人生不如意十之八九, 要有充滿樂趣的探險(xiǎn)精神.這樣度過一生會(huì)覺得沒有那么辛苦?；厥椎臅r(shí)候不記得有多苦,更多的是快樂的橋段.微笑文化蘊(yùn)含了很多東西，包括對(duì)人生的理解。 它表示要讓三種人微笑和滿意，第一客戶賺到錢，企業(yè)有更大的發(fā)展，客戶才會(huì)滿意；能夠幫助客戶成功，員工會(huì)覺得自己的付出得到肯定，是有價(jià)值的，也會(huì)滿意有成就感，一家客戶能賺錢員工有歸屬感的公司，業(yè)績(jī)一定不會(huì)差，最終股東的投資也有高額回報(bào)，也會(huì)很滿意。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,福建省國(guó)際電子商務(wù)中心 的logo 該logo整體看去像一個(gè)字母e字，代表著公司是一個(gè)從事電子商務(wù)

7、的， 小e中心像一條騰飛的龍，寓意著公司的前程將像龍一樣飛黃騰達(dá)，將有大的發(fā)展。 字母FIECC是公司名字（Fujian International Electronic Commerce Center）的縮寫。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2選擇網(wǎng)站的標(biāo)準(zhǔn)色彩 網(wǎng)站給人的第一印象來自視覺的色彩感受，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是網(wǎng)站建設(shè)重要的一步，它不但關(guān)系到網(wǎng)站內(nèi)容傳達(dá)，而且會(huì)影響到瀏覽者的情緒。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,認(rèn)識(shí)色彩,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,紅色-紅色的色感溫暖，性格剛烈而外向，是一種對(duì)人刺激性很強(qiáng)的顏色。紅色也

8、是最鮮明生動(dòng)的、最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光，也容易使人興奮、激動(dòng)、緊張、沖動(dòng)、還是一種容易造成人視覺疲勞的顏色。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,網(wǎng)頁(yè)顏色的應(yīng)用機(jī)率中，根據(jù)網(wǎng)頁(yè)主題內(nèi)容的需求，純粹使用紅色為主色調(diào)的網(wǎng)站相對(duì)較少，多用于輔助色、點(diǎn)睛色，達(dá)到陪襯、醒目的效果。通常都配以其他顏色調(diào)和。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,綠色-介于冷暖兩中色彩的中間，顯得和睦，寧?kù)o，健康，安全的感覺。它和金黃，淡白搭配，可

9、以產(chǎn)生優(yōu)雅，舒適的氣氛。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,橙色-橙色具有輕快、歡欣、收獲、溫馨、時(shí)尚的效果，是快樂、喜悅、能量的色彩。具有健康、富有活力、勇敢自由等象征意義，能給人有莊嚴(yán)、尊貴、神秘等感覺。橙色在空氣中的穿透力僅次于紅色，也是容易造成視覺疲勞的顏色。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,黃色-黃色是陽光的色彩，具有活潑與輕快的特點(diǎn)，給人十分年輕的感覺。象征光明、希望、高貴、愉快。淺黃色表示柔弱，灰黃色表示病態(tài)。它的亮度最高，和其他顏色配合很活潑，有

10、溫曖感，具有快樂、希望、智慧和輕快的個(gè)性，有希望與功名等象征意義。黃色也代表著土地、象征著權(quán)力，并且還具有神秘的宗教色彩。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,藍(lán)色-藍(lán)色是色彩中比較沉靜的顏色，它是冷色調(diào)最典型的代表色。象征著永恒與深邃、高遠(yuǎn)與博大、壯闊與浩渺，是令人心境暢快的顏色。 藍(lán)色的樸實(shí)、穩(wěn)重、內(nèi)向性格，襯托那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩，運(yùn)用對(duì)比手法，同時(shí)也活躍頁(yè)面。另一方面又有消極、冷淡、保守等意味。藍(lán)色與紅、黃等色運(yùn)用得當(dāng)，能構(gòu)成和諧的對(duì)比調(diào)和關(guān)系。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7

11、-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,白色-具有潔白，明快，純真，清潔的感受。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,黑色-具有嚴(yán)肅、夜晚、穩(wěn)重、深沉，神秘的色彩。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,灰色-具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,企業(yè)的標(biāo)準(zhǔn)色，也就是企業(yè)在自己標(biāo)志、產(chǎn)品及宣傳品等方面統(tǒng)一使用的一個(gè)固定的顏色。 如：長(zhǎng)虹公司的紅色，IBM的蔚藍(lán)色、可口可樂的紅色、聯(lián)想集團(tuán)的藍(lán)色、希望集團(tuán)的藍(lán)色。這些顏色與企業(yè)的形象又經(jīng)融為一體，成為企業(yè)的象征，使人們對(duì)它由熟悉了解而產(chǎn)生信任感和認(rèn)同感。,2009

12、-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,國(guó)際電子商務(wù)中心是一個(gè)以提供電子商務(wù)技術(shù)服務(wù)為主的企業(yè)，而藍(lán)色是當(dāng)前該行業(yè)的流行色，考慮到其的行業(yè)特性，以及色彩的不同心理作用，公司的設(shè)計(jì)者最后確定藍(lán)色為公司網(wǎng)站的標(biāo)準(zhǔn)色彩，網(wǎng)站的背景色為白色， LOGO使用淺藍(lán)色，專業(yè)廣告句使用淺藍(lán)色，文字大部份使用黑色，鏈接使用淺藍(lán)色，輔助色是白色，點(diǎn)睛色是橙色。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,3設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體 在字體的設(shè)計(jì)應(yīng)注意以下準(zhǔn)則： 文字必須清晰可讀，大小合適，文字的顏色和背景色有較為強(qiáng)烈的對(duì)比度，文字周圍的設(shè)計(jì)元素不能對(duì)文字造成干擾。 字體與網(wǎng)站的風(fēng)格的統(tǒng)一性、諧調(diào)性 盡可能少用游

13、動(dòng)文字、圖形文字。,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,2009-7-15,第二步：設(shè)計(jì)網(wǎng)站的CI 形象,因此該中心網(wǎng)站的設(shè)計(jì)師也選擇了網(wǎng)頁(yè)默認(rèn)的宋體為網(wǎng)站的主要字體。在導(dǎo)航和目錄的部份字體加粗，達(dá)到突出的效果。字體的主要色彩是黑色，輔助色是白色和藍(lán)色，顯得莊重、大方，個(gè)別地方用了較亮的紅起突出和點(diǎn)睛的作用。,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,網(wǎng)站欄目規(guī)劃對(duì)于網(wǎng)站的成敗有著非常直接的關(guān)系，網(wǎng)站欄目兼具以下兩個(gè)功能，二者不可或缺。 1提綱挈領(lǐng)，點(diǎn)題明義。 現(xiàn)在網(wǎng)絡(luò)的速度越來越快，網(wǎng)絡(luò)上的信息也越來越豐富，而瀏覽者卻越

14、來越缺乏瀏覽耐心。在打開網(wǎng)站的數(shù)秒鐘內(nèi)，一旦找不到自己所需的信息，網(wǎng)站就會(huì)被瀏覽者毫不客氣地關(guān)掉。因此，網(wǎng)站的欄目規(guī)劃首先要做到“提綱挈領(lǐng)、點(diǎn)題明義”，用最簡(jiǎn)練的語言提煉出網(wǎng)站中每一個(gè)部分的內(nèi)容，清晰地告訴瀏覽者網(wǎng)站在說什么，有哪些信息和功能。,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,2指引迷途，清晰導(dǎo)航 網(wǎng)站的內(nèi)容越多，瀏覽者也越容易迷失。除了“提綱”的作用之外，網(wǎng)站的導(dǎo)航機(jī)制是網(wǎng)站內(nèi)容架構(gòu)的體現(xiàn)，網(wǎng)站導(dǎo)航是否合理是網(wǎng)站易用性評(píng)價(jià)的重要指標(biāo)之一。網(wǎng)站的導(dǎo)航機(jī)制一般包括全局導(dǎo)航、輔助導(dǎo)航、站點(diǎn)地圖等體現(xiàn)網(wǎng)站結(jié)構(gòu)的、對(duì)用戶進(jìn)行引導(dǎo)的因素。,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈

15、接,（1）全局導(dǎo)航 全局導(dǎo)航（又稱主導(dǎo)航，它是出現(xiàn)在網(wǎng)站的每一個(gè)頁(yè)面上一組通用的導(dǎo)航元素，以一致的外觀出現(xiàn)在網(wǎng)站的每一頁(yè)，扮演著對(duì)用戶最基本的訪問方向性指引。,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,注明：1即站點(diǎn)的logo，同時(shí)點(diǎn)擊logo也可以返回到首頁(yè)，2是網(wǎng)站的欄目設(shè)置，3是站內(nèi)搜索，4是與顧客轉(zhuǎn)化有關(guān)的常用工具,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,2）輔助導(dǎo)航 輔助導(dǎo)航又被稱作面包屑路徑或?qū)蛹?jí)菜單，體現(xiàn)為內(nèi)頁(yè)的“當(dāng)前位置”提示。輔助導(dǎo)航的作用是無論用戶身處站內(nèi)何處，均不會(huì)迷路，尤其當(dāng)網(wǎng)站的欄目層次較多的時(shí)候，正確的輔助導(dǎo)航的設(shè)置尤為重要。它從另一個(gè)層面反映了網(wǎng)

16、站的結(jié)構(gòu)層次，是對(duì)全局導(dǎo)航的有效補(bǔ)充,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,注明：輔助導(dǎo)航出現(xiàn)在聯(lián)想網(wǎng)站的每一個(gè)內(nèi)頁(yè)緊靠主導(dǎo)航條下的位置，以“”來對(duì)層級(jí)進(jìn)行分隔，簡(jiǎn)單而形象從視覺上暗示了瀏覽層次的前進(jìn)方向；末尾的“臺(tái)式機(jī)”和當(dāng)前所在頁(yè)面的名稱一致，并用不同的顏色加以突出，讓瀏覽者對(duì)當(dāng)前的所在位置一目了然,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,（3）網(wǎng)站地圖 網(wǎng)站地圖（SiteMap）將網(wǎng)站內(nèi)深層次的鏈接關(guān)系以一個(gè)扁平的頁(yè)面呈現(xiàn)出來，同它的命名一樣，讓用戶對(duì)網(wǎng)站的內(nèi)容與結(jié)構(gòu)全局快速了解。就如大賣場(chǎng)指示圖一樣讓我們對(duì)各個(gè)賣場(chǎng)的區(qū)域劃分具體位置有個(gè)初步的了解。,2009-7-

17、15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,注明：該網(wǎng)站地圖放棄所有虛飾性圖片，富有層次感的設(shè)計(jì)將欄目結(jié)構(gòu)層次清晰地呈現(xiàn)出來；并對(duì)重要欄目有簡(jiǎn)述說明，對(duì)用戶起到很好的指引作用。,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,在欄目的設(shè)置上，該公司的設(shè)計(jì)者也充分的考慮了用戶的需求，在網(wǎng)站的頁(yè)面上規(guī)化了四個(gè)的全局導(dǎo)航欄。 網(wǎng)頁(yè)上方導(dǎo)航條：首頁(yè)、服務(wù)、解決方案、經(jīng)驗(yàn)分享和關(guān)于我們 網(wǎng)頁(yè)下方導(dǎo)航條：關(guān)于我們、本網(wǎng)簡(jiǎn)介、廣告服務(wù)、聯(lián)系我們、友情鏈接、法律申明 站內(nèi)搜索 站外快速鏈接 該網(wǎng)站內(nèi)的鏈接采用的是星狀鏈接結(jié)構(gòu)，站內(nèi)還使用了輔助導(dǎo)航和網(wǎng)站地圖，使用戶可以方便的找到自已想要的東西，可以隨時(shí)回到想去的頁(yè)面

18、。,2009-7-15,第三步：規(guī)化網(wǎng)站的欄目及鏈接,在項(xiàng)目上主要分為以下幾塊： 關(guān)于我們欄目：分為中心介紹、新聞動(dòng)態(tài)、社會(huì)責(zé)任、中心刊物、合作伙伴和聯(lián)系我們。 產(chǎn)品欄目：分為財(cái)務(wù)軟件、外貿(mào)管理軟件、外貿(mào)操盤手軟件。 服務(wù)欄目：分為戰(zhàn)略咨詢、營(yíng)銷策劃、培訓(xùn)認(rèn)證、信息服務(wù)、技術(shù)支持、網(wǎng)站建設(shè)。 解決方案欄目：分為全方們國(guó)際貿(mào)易解決方案和開發(fā)區(qū)公共信息服務(wù)平臺(tái)解決方案；,2009-7-15,第四步：設(shè)計(jì)網(wǎng)站的布局,網(wǎng)站界面的布局方式、展示形式直接影響用戶使用網(wǎng)站的方便性。合理的頁(yè)面布局令用戶快速發(fā)現(xiàn)網(wǎng)站的核心內(nèi)容和服務(wù)；如果頁(yè)面布局不合理，用戶不知道如何開始獲取所需的信息、或者怎么執(zhí)行操作來獲得相

19、應(yīng)的服務(wù)，那么他們就會(huì)離開這個(gè)網(wǎng)站，甚至以后都不會(huì)再訪問這個(gè)網(wǎng)站。,2009-7-15,網(wǎng)頁(yè)排版布局的步驟,構(gòu)思 根據(jù)網(wǎng)站的內(nèi)容整體風(fēng)格，設(shè)計(jì)版面布局。你可以參考其他的優(yōu)秀的網(wǎng)站，調(diào)用自己的各種知識(shí)儲(chǔ)備，特別是藝術(shù)方面的，在大腦中不斷地醞釀、碰撞，往往不經(jīng)意就有閃光的思想出現(xiàn)。這時(shí)你就要抓緊時(shí)間把它變成文字的東西，用筆在紙上粗略的勾畫出布局的輪廓，不要講究細(xì)節(jié)，只要有一個(gè)輪廓就行。當(dāng)然你也可以有多種想法，盡量都把它們畫出來，然后再比較，采用一種比較滿意的方案。,2009-7-15,網(wǎng)頁(yè)排版布局的步驟,初步填充內(nèi)容 這一步就要把一些主要的內(nèi)容放到網(wǎng)頁(yè)中，例如網(wǎng)站的標(biāo)志、廣告條、菜單、導(dǎo)航條、計(jì)數(shù)

20、器等，要注意重點(diǎn)突出，把網(wǎng)站標(biāo)志、廣告條、菜單放在最突出、最醒目的位置，然后再考慮其它的元素的放置。,2009-7-15,網(wǎng)頁(yè)排版布局的步驟,細(xì)化 在將各主要元素確定之后，下面就可以考慮文字、圖像、表格等頁(yè)面元素的排版布局了。在這一步，你可以用網(wǎng)頁(yè)編輯工具把草案做成一個(gè)簡(jiǎn)略的網(wǎng)頁(yè)，當(dāng)然對(duì)每一個(gè)元所占的比例也要有一個(gè)詳細(xì)的數(shù)字，以便以后修改。 經(jīng)過以上幾步之后，相信你的網(wǎng)頁(yè)布局已經(jīng)初具規(guī)模了，讓別人看一下，給你提些建議，再不斷修改，一個(gè)很有特色的網(wǎng)頁(yè)就要浮出水面了。,2009-7-15,第四步：設(shè)計(jì)網(wǎng)站的布局,網(wǎng)頁(yè)排版布局的原則 上面我們簡(jiǎn)要的介紹了設(shè)計(jì)網(wǎng)頁(yè)布局的步驟，事實(shí)上，在構(gòu)思和設(shè)計(jì)的過程

21、中，你還必須要掌握以下的幾項(xiàng)原則： 平衡性 一個(gè)好的網(wǎng)頁(yè)布局應(yīng)該給人一種安定、平穩(wěn)的感覺，它不僅表現(xiàn)在文字、圖像等要素的空間占用上分布均勻，而且還有色彩的平衡，要給人一種協(xié)調(diào)的感覺。,2009-7-15,網(wǎng)頁(yè)排版布局的原則,對(duì)稱性 對(duì)稱是一種美，我們生活中有許多事物都是對(duì)稱的，但過度的對(duì)稱就會(huì)給人一種呆板、死氣沉沉的感覺，因此要適當(dāng)?shù)拇蚱茖?duì)稱，制造一點(diǎn)變化。 對(duì)比性 讓不同的形態(tài)、色彩等元素相互對(duì)比，來形成鮮明的視覺效果。例如黑白對(duì)比，圓形和方形對(duì)比等，它們往往能夠創(chuàng)造出富有變化的效果。,2009-7-15,網(wǎng)頁(yè)排版布局的原則,疏密度 網(wǎng)頁(yè)要做到疏密有度，即平常所說的“密不透風(fēng)，疏可跑馬”。不

22、要整個(gè)網(wǎng)頁(yè)一種樣式，要適當(dāng)進(jìn)行留白，過用空格，改變行間距、字間距等制造一些變化的效果。 比例 比例適錄，這在布局中非常重要，雖然不一定都要做到黃金分割，但比例一定要協(xié)調(diào)。,2009-7-15,常見網(wǎng)站布局的版式,骨骼型 網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報(bào)刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。,2009-7-15,骨骼型,2009-7-15,常見網(wǎng)站布局的版式,2.滿版型 頁(yè)面以圖像充滿整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置

23、于圖像之上。視覺傳達(dá)效果直觀而強(qiáng)烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用越來越多。,2009-7-15,滿版型,2009-7-15,常見網(wǎng)站布局的版式,3.分割型 把整個(gè)頁(yè)面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)節(jié)對(duì)比的強(qiáng)弱。,2009-7-15,分割型,2009-7-15,分割型,2009-7-15,分割型,2009-7-15,水平不均勻分割,如果上半部安置標(biāo)題或?qū)Ш剑瑒t面積較??；上半部安置主體內(nèi)容，則面積適當(dāng)加大。,2009-7-15,垂直分割,垂直不均勻分割:多數(shù)用在二級(jí)頁(yè)面,左邊放置導(dǎo)航條,右邊顯示相關(guān)信息.,2009-7-15,垂直分割,也有應(yīng)用在首頁(yè)上的,產(chǎn)生強(qiáng)烈的藝術(shù)效果.,2009-7-15,垂直變化分割,可以多次垂直向分割,也可進(jìn)行多級(jí)分割.不過一般很少有人單獨(dú)使用這種版式,而是與其它的分割方式混合運(yùn)用的.,2009-7-15,中軸型,沿