網(wǎng)站的版面設(shè)計(jì)
　　設(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è)?#34;首頁(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、正常平衡---亦稱(chēng)"勻稱(chēng)"。多指左右、上下對(duì)照形式，主要強(qiáng)調(diào)秩序，能達(dá)到安定誠(chéng)實(shí)、信賴(lài)的效果。
　　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背景教深，整體效果類(lèi)似英文字母"T",所以我們稱(chēng)之為"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ì)稱(chēng)對(duì)比布局。顧名思義，采取左右或者上下對(duì)稱(chēng)的布局，一半深色，一半淺色，一般用于設(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í)尚類(lèi)站點(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è)Web站點(diǎn)設(shè)計(jì)策略······

相信很大一部分人知道，我們國(guó)內(nèi)的很多web站點(diǎn)設(shè)計(jì)項(xiàng)目都存在著一個(gè)特點(diǎn)，那就是將設(shè)計(jì)和制作混為一談。所謂的設(shè)計(jì)站點(diǎn)，就是簡(jiǎn)單的把客戶給的資料圖形化，不考慮任何其他的因素，比如能否讓站點(diǎn)實(shí)現(xiàn)預(yù)期的商業(yè)收益，讓站點(diǎn)真正給用戶提供他們想要的信息和服務(wù)。于是，大量的站點(diǎn)形同虛設(shè)，成了白白浪費(fèi)時(shí)間、金錢(qián)、人力，最后卻成立占用網(wǎng)絡(luò)空間的一堆乏人問(wèn)津的文件組合。因?yàn)橐话阈缘膚eb站點(diǎn)制作技術(shù)很易于掌握，所以，有能力制作網(wǎng)站的人是比比皆是，在能作和能設(shè)計(jì)之間，人們的界限慢慢模糊。很多人認(rèn)識(shí)到的網(wǎng)站設(shè)計(jì)，可能就是把界面做的漂亮點(diǎn)。而實(shí)際上，設(shè)計(jì)站點(diǎn)遠(yuǎn)非如此簡(jiǎn)單。Web作為一個(gè)新興的媒體，它的目的性很明確，對(duì)于一個(gè)企業(yè)來(lái)說(shuō)，站點(diǎn)的存在就是為了商業(yè)目的。而實(shí)現(xiàn)站點(diǎn)的商業(yè)目的，不經(jīng)過(guò)好的規(guī)劃和出色的創(chuàng)意，是不可能實(shí)現(xiàn)。

下面，就我所接觸和學(xué)習(xí)到的web設(shè)計(jì)理論，簡(jiǎn)要敘述一下web設(shè)計(jì)的基本步驟。

1、 確立目的

目的是web站點(diǎn)建設(shè)的中心，也是指導(dǎo)設(shè)計(jì)的最重要因素。目的可以簡(jiǎn)單，但不要模糊不清，否則web設(shè)計(jì)和實(shí)現(xiàn)都將非常困難。用戶對(duì)web的期望，和web真正能很好實(shí)現(xiàn)的東西一般都有差距，如何和用戶溝通，來(lái)達(dá)成共識(shí)是web項(xiàng)目一開(kāi)始就要解決的。目的先要細(xì)化成可清晰描述的明確目標(biāo)，越清晰的目標(biāo)，越容易控制和實(shí)現(xiàn)。因?yàn)閣eb的目標(biāo)也可能需要漫長(zhǎng)的時(shí)間才能實(shí)現(xiàn)，所以在保持總的發(fā)展策略的前提下，可以對(duì)不同時(shí)間段的目的有明確的界定，這樣不但可以讓發(fā)展的中心不被偏離，還可以比較容易的評(píng)析效果，以期制定對(duì)策。Web是種特殊的媒體，所以設(shè)計(jì)師必須懂得和了解這種媒體的特性，盡管設(shè)計(jì)是共通的，但對(duì)web，必須要有針對(duì)其特性的設(shè)計(jì)考慮。

web和傳統(tǒng)媒體的比較，相對(duì)于印刷品，web因?yàn)槠湫畔⑾到y(tǒng)的結(jié)構(gòu)和超文本鏈接指向的優(yōu)勢(shì)，使用戶尋找到自己感興趣的信息速度上快于印刷品。在信息的表現(xiàn)方式上，web可表現(xiàn)多媒體信息，也優(yōu)于印刷品。最大的優(yōu)勢(shì)就是交互性，這是任何傳統(tǒng)媒體都無(wú)法比擬的。但web也有其不足，由于我們常接觸到的web主要在熒光屏上實(shí)現(xiàn)，因此用戶在屏幕上閱讀大量文本時(shí)，眼睛很容易疲勞，且就便攜這一點(diǎn)，當(dāng)前的計(jì)算機(jī)是無(wú)法和印刷品相比的。而相對(duì)于電視這一媒體，電視作為一個(gè)已存在幾十年的媒體，無(wú)論是從用戶的數(shù)量和用戶對(duì)其的熟悉方面，還有電視在動(dòng)態(tài)影像的表現(xiàn)，都要優(yōu)于web。盡管web在帶寬提高的基礎(chǔ)上能流暢播放視頻，但就一般而言，從web上觀看動(dòng)態(tài)影像并不現(xiàn)實(shí)，以上所說(shuō)的動(dòng)態(tài)影像是指象素化的視頻。不過(guò)web相比于電視，其交互性能給用戶更多自由選擇的機(jī)會(huì)，能更好的和用戶溝通，并給其帶來(lái)特殊的體驗(yàn)。

在充分了解站點(diǎn)的目標(biāo)用戶的特點(diǎn)，和web的特性之后，針對(duì)用戶的種種特點(diǎn)來(lái)進(jìn)行設(shè)計(jì)的工作就可以開(kāi)始了。

2、 構(gòu)建信息系統(tǒng)架構(gòu)

在分析了站點(diǎn)的目的和目標(biāo)用戶的特點(diǎn)和需求之后，讓信息能真正滿足用戶的需求，就必須設(shè)計(jì)一個(gè)易于傳遞信息的站點(diǎn)架構(gòu)。導(dǎo)航系統(tǒng)和頁(yè)面中的超鏈接是用戶最直接的交互工具，也是站點(diǎn)信息流動(dòng)的外在體現(xiàn)。信息架構(gòu)是一個(gè)站點(diǎn)的骨骼，也是站點(diǎn)是否能達(dá)到順利表達(dá)信息的一個(gè)重要因素。

確定采用何種技術(shù)，技術(shù)是實(shí)現(xiàn)站點(diǎn)的最基本的東西。但是最新最先進(jìn)的技術(shù)在不同計(jì)算機(jī)平臺(tái)上的表現(xiàn)大相徑庭，有些甚至不被支持。所以為了保證盡可能多的目標(biāo)用戶能正常的瀏覽站點(diǎn)。在使用技術(shù)上要慎重，不能盲目采用過(guò)新的技術(shù)。而同樣和瀏覽相關(guān)的就是站點(diǎn)文件的大小，文件尺寸較大，下載速度就會(huì)變慢，如果頁(yè)面的下載速度超出了用戶心里能承受的極限，那么用戶很可能就會(huì)放棄對(duì)站點(diǎn)的瀏覽而轉(zhuǎn)向其他的站點(diǎn)。

3、 站點(diǎn)中的圖形用戶界面設(shè)計(jì)

用戶界面是幫助用戶瀏覽站點(diǎn)和控制與站點(diǎn)交互的重要工具。好的界面應(yīng)該是幫助用戶很順暢找到他們所需要信息。在設(shè)計(jì)思想上，盡量采用熟知的，已經(jīng)約成俗定的慣例來(lái)設(shè)計(jì)用戶界面，因?yàn)橛脩艨赡芫哂幸恍┱军c(diǎn)訪問(wèn)的經(jīng)驗(yàn)。

在這一環(huán)節(jié)，設(shè)計(jì)師還要做以下工作：將企業(yè)文化很好的融合進(jìn)界面，合理分配版面來(lái)確保信息的傳達(dá)，美化界面以使其更吸引人，確保它能給用戶帶來(lái)舒適的站點(diǎn)體驗(yàn)。

以上是web設(shè)計(jì)師在站點(diǎn)設(shè)計(jì)上要經(jīng)歷的步驟，這些步驟之后，就是用技術(shù)實(shí)現(xiàn)站點(diǎn)和測(cè)試站點(diǎn)。這不在本文的敘述之內(nèi)。



·····網(wǎng)站CI形象設(shè)計(jì)······



定位你的網(wǎng)站CI形象。
　　所謂CI，是借用的廣告術(shù)語(yǔ)。(CI是英文corporate identity的縮寫(xiě))，意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象。現(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)站主題和名稱(chēng)定下來(lái)之后，需要思考的就是網(wǎng)站的CI形象。有網(wǎng)友要問(wèn)了：我不是學(xué)廣告專(zhuān)業(yè)的，CI對(duì)我來(lái)說(shuō)可能太難了吧:(不用擔(dān)心，阿捷自己也沒(méi)有學(xué)過(guò)設(shè)計(jì)專(zhuān)業(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)站的名稱(chēng)和內(nèi)容。
　　(1).網(wǎng)站有代表性的人物，動(dòng)物，花草，可以用它們作為設(shè)計(jì)的藍(lán)本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚(yú)。
　　(2).網(wǎng)站有專(zhuān)業(yè)性的，可以以本專(zhuān)業(yè)有代表的物品作為標(biāo)志。比如中國(guó)銀行的銅板標(biāo)志，奔馳汽車(chē)的方向盤(pán)標(biāo)志。
　　(3).最常用和最簡(jiǎn)單的方式是用自己網(wǎng)站的英文名稱(chē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)格，我門(mén)可以根據(jù)需要選擇一些特別字體。例如，為了體現(xiàn)專(zhuā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ò)上還有許多專(zhuān)用英文藝術(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)高度概括。類(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)有引入聲音，三維立體等因素。)




·····網(wǎng)頁(yè)色彩的搭配······


　　首先我們先來(lái)了解一些色彩的基本知識(shí)：
　　1.顏色是因?yàn)楣獾恼凵涠a(chǎn)生的。
　　2.紅，黃，藍(lán)是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。網(wǎng)頁(yè)html語(yǔ)言中的色彩表達(dá)即是用這三種顏色的數(shù)值表示例如：紅色是color (255,0,0)十六進(jìn)制的表示方法為(FF0000)白色為(FFFFFF), 我們經(jīng)常看到的"bgColor=#FFFFFF"就是指背景色為白色。
　　3.顏色分非彩色和彩色兩類(lèi)。非彩色是指黑，白，灰系統(tǒng)色。彩色是指除了非彩色以外的所有色彩。
　　4.任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬(wàn)種色彩。
　　網(wǎng)頁(yè)制作用彩色還是非彩色好呢？根據(jù)專(zhuān)業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說(shuō)，在一般情況下，彩色頁(yè)面較完全黑白頁(yè)面更加吸引人。
　　我們通常的做法是：主要內(nèi)容文字用非彩色(黑色)，邊框，背景，圖片用彩色。這樣頁(yè)面整體不單調(diào)，看主要內(nèi)容也不會(huì)眼花。
●非彩色的搭配
　　黑白是最基本和最簡(jiǎn)單的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是萬(wàn)能色，可以和任何彩色搭配，也可以幫助兩種對(duì)立的色彩和諧過(guò)渡。如果你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對(duì)不會(huì)太差。
●彩色的搭配
　　色彩千變?nèi)f化，彩色的搭配是我們研究的重點(diǎn)。我們依然需要進(jìn)一步學(xué)習(xí)一些色彩的知識(shí)。
　　一.色環(huán)。我們將色彩按"紅->黃->綠->藍(lán)->紅"依次過(guò)度漸變，就可以得到一個(gè)色彩環(huán)。色環(huán)的兩端是暖色和寒色，當(dāng)中是中型色。（如下圖）
紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅.紅
|___________| |____| |_________| |_________|
| | | |
暖色系 中性系 寒色系 中性系

　　二.色彩的心理感覺(jué)。不同的顏色會(huì)給瀏覽者不同的心理感受。
　　紅色---是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)，憤怒，熱情，活力的感覺(jué)。
　　綠色---介于冷暖兩中色彩的中間，顯得和睦，寧?kù)o，健康，安全的感覺(jué)。 它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。
　　橙色---也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時(shí)尚的效果。
　　黃色---具有快樂(lè)，希望，智慧和輕快的個(gè)性，它的明度最高。
　　藍(lán)色---是最具涼爽，清新，專(zhuān)業(yè)的色彩。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛（象天空的色彩：）
　　白色---具有潔白，明快，純真，清潔的感受。
　　黑色---具有深沉，神秘，寂靜，悲哀，壓抑的感受。
　　灰色---具有中庸，平凡，溫和，謙讓，中立和高雅的感覺(jué)。
　　每種色彩在飽和度，透明度上略微變化就會(huì)產(chǎn)生不同的感覺(jué)。以綠色為例，黃綠色有青春，旺盛的視覺(jué)意境，而藍(lán)綠色則顯得幽寧，陰深。
○網(wǎng)頁(yè)色彩搭配的原理
　　1.色彩的鮮明性。網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。
　　2.色彩的獨(dú)特性。要有與眾不同的色彩，使得大家對(duì)你的印象強(qiáng)烈。（參考設(shè)計(jì)思考第二篇網(wǎng)站CI的標(biāo)準(zhǔn)色彩一節(jié)）
　　3.色彩的合適性。就是說(shuō)色彩和你表達(dá)的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點(diǎn)的柔性。
　　4.色彩的聯(lián)想性。不同色彩會(huì)產(chǎn)生不同的聯(lián)想，藍(lán)色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。
○網(wǎng)頁(yè)色彩掌握的過(guò)程
　　隨著網(wǎng)頁(yè)制作經(jīng)驗(yàn)的積累，我們用色有這樣的一個(gè)趨勢(shì):單色->五彩繽紛->標(biāo)準(zhǔn)色->單色。一開(kāi)始因?yàn)榧夹g(shù)和知識(shí)缺乏，只能制作出簡(jiǎn)單的網(wǎng)頁(yè)，色彩單一；在有一定基礎(chǔ)和材料后，希望制作一個(gè)漂亮的網(wǎng)頁(yè)，將自己收集的最好的圖片，最滿意色彩堆砌在頁(yè)面上；但是時(shí)間一長(zhǎng)，卻發(fā)現(xiàn)色彩雜亂，沒(méi)有個(gè)性和風(fēng)格；第三次重新定位自己的網(wǎng)站，選擇好切合自己的色彩，推出的站點(diǎn)往往比較成功；當(dāng)最后設(shè)計(jì)理念和技術(shù)達(dá)到頂峰時(shí)，則又返樸歸真，用單一色彩甚至非彩色就可以設(shè)計(jì)出簡(jiǎn)潔精美的站點(diǎn)。
○網(wǎng)頁(yè)色彩搭配的技巧
　　文章寫(xiě)到這里，有心急的網(wǎng)友要問(wèn)了：“到底用什么色彩搭配好看呢？你能不能推薦幾種配色方案？”別急，這里有一點(diǎn)技巧，可以幫助你迅速成為調(diào)色大師：）
　　1.用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說(shuō)得通俗些就是將 色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。
　　2.用兩種色彩。先選定一種色彩，然后選擇它的對(duì)比色(在photoshop里按ctrl+shift+I)。我的主頁(yè)用藍(lán)色和黃色就是這樣確定的。整個(gè)頁(yè)面色彩豐富但不花稍。
　　3.用一個(gè)色系。簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。確定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中選擇"自定義"，然后在"色庫(kù)"中選就可以了：）
　　4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺(jué)很"跳"。
在網(wǎng)頁(yè)配色中，忌諱的是：
　　1.不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。
　　2.背景和前文的對(duì)比盡量要大，(絕對(duì)不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。

總結(jié)

以上是生活随笔為你收集整理的网站的版面设计,商业Web站点设计策略,网站CI形象设计,网页色彩的搭配的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。