第6章網(wǎng)頁設(shè)計基礎(chǔ)Web美工設(shè)計

1、Web美工設(shè)計,主講：楊錦偉 理論課時：6,Web美工設(shè)計, 網(wǎng)頁色彩設(shè)計 版面布局遵循的原則 網(wǎng)站的風(fēng)格 美的原則,網(wǎng)頁色彩設(shè)計,網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一。網(wǎng)頁的背景，文字，圖標(biāo)，邊框，超鏈接等，應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好的表達出預(yù)想的內(nèi)涵？,網(wǎng)頁色彩設(shè)計,（一）色彩的基本知識 顏色是因為光的折射而產(chǎn)生的，紅，黃，藍是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。 現(xiàn)實生活中的色彩可以分為彩色和非彩色。其中黑白灰屬于非彩色系列。其它的色彩都屬于彩色。任何一種彩色具備三個特征：色相，明度和純度。其中非彩色只有明度屬性。,網(wǎng)頁色彩設(shè)計,色相，指的是色彩的名稱。這是色

2、彩最基本的特征，是一種色彩區(qū)別于另一種色彩的最主要的因素。比如說紫色，綠色，黃色等等都代表了不同的色相。同一色相的色彩，調(diào)整一下亮度，或者純度很容易搭配，比如，深綠，暗綠，草綠，亮綠。,網(wǎng)頁色彩設(shè)計,明度，也叫亮度，指的是色彩的明暗程度，明度越大，色彩越亮。比如一些購物，兒童類網(wǎng)站。用的是一些鮮亮的顏色，讓人感覺絢麗多姿，生氣勃勃。明度越低，顏色越暗。主要用于一些游戲類網(wǎng)站，充滿神秘感；一些個人站長為了體現(xiàn)自身的個性，也可以運用一些暗色調(diào)來表達個人的一些孤僻，或者憂郁等性格。有明度差的色彩更容易調(diào)和。如紫色（#993399）跟黃色（#ffff00），暗紅（#cc3300）跟草綠（#99cc00

3、），暗藍（#0066cc）跟橙色（#ff9933）等。,紫色（#993399）跟黃色（#ffff00）,暗紅（#cc3300）跟草綠（#99cc00）,暗藍（#0066cc）跟橙色（#ff9933）,網(wǎng)頁色彩設(shè)計,純度，指色彩的鮮艷程度，純度高的色彩純，鮮亮。純度底的色彩暗淡，含灰色。,網(wǎng)頁色彩設(shè)計,色環(huán)。將色彩按“紅-黃-綠-藍-紅”依次過渡漸變，就可以得到一個色彩環(huán)。 色環(huán)的兩端是暖色和寒色，當(dāng)中是中型色。 紅.橙.橙黃.黃.黃綠.綠.青綠.藍綠.藍.藍紫.紫.紫紅.紅,網(wǎng)頁色彩設(shè)計,相近色：色環(huán)中相鄰的三種顏色。如黃綠色，黃色和桔黃色。相近色的搭配給人的視覺效果很舒適，很自然。所以相近色

4、在網(wǎng)站設(shè)計中極為常用。,網(wǎng)頁色彩設(shè)計,互補色，色環(huán)中相對的兩種色彩。如亮綠色跟紫色，另外如紅色跟綠色，藍色和橙色等。對互補色，調(diào)整一下補色的亮度，有時候是一種很好的搭配。就拿藍色跟橙色來打個比方吧，調(diào)整了藍色的亮度以后其搭配效果是不是更好呢？補色在網(wǎng)站設(shè)計中用得也極為普遍。,網(wǎng)頁色彩設(shè)計,暖色，如黃色，橙色，紅色，紫色等都屬于暖色系列。暖色跟黑色調(diào)和可以達到很好的效果。暖色一般應(yīng)用于購物類網(wǎng)站，電子商務(wù)網(wǎng)站，兒童類網(wǎng)站等等，用以體現(xiàn)商品的琳瑯滿目，兒童類網(wǎng)站的活潑，溫馨等等效果。,冷色，如綠色，藍色，藍紫色等等都屬于冷色系列。冷色一般跟白色調(diào)和可以達到一種很好的效果。冷色一般應(yīng)用于一些高科技，

5、游戲類網(wǎng)站，主要表達嚴(yán)肅，穩(wěn)重等效果。,網(wǎng)頁色彩設(shè)計,色彩的心理感覺。不同的顏色會給瀏覽者不同的心理感受。 紅色是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。 綠色介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。 它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。,綠色和淡白,網(wǎng)頁色彩設(shè)計,橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。 黃色具有快樂，希望，智慧和輕快的個性，它的明度最高。 藍色是最具涼爽，清新，專業(yè)的色彩。 它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛。 白色具有潔白，明快，純真，清潔的感受。,網(wǎng)頁色彩設(shè)計,黑色具有深沉，神秘，寂靜

6、，悲哀，壓抑的感受。 灰色具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。 每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。,網(wǎng)頁色彩設(shè)計,色彩均衡，網(wǎng)站讓人看上去舒適，協(xié)調(diào)，除了文字，圖片等內(nèi)容的合理排版，色彩的均衡也是相當(dāng)重要的一個部分。比如一個網(wǎng)站不可能單一的運用一種顏色，所以色彩的均衡問題是設(shè)計者必須要考慮的問題。色彩的均衡，包括色彩的位置，每種色彩所占的比例，面積等等。比如鮮艷明亮的色彩面積應(yīng)小一點，讓人感覺舒適，不刺眼。這就是一種均衡的色彩搭配。,色彩均衡,網(wǎng)頁色彩設(shè)計,網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的

7、研究機構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。 通常的做法是：主要內(nèi)容文字用非彩色（黑色），邊框，背景，圖片用彩色。這樣頁面整體不單調(diào)，看主要內(nèi)容也不會眼花。,網(wǎng)頁色彩設(shè)計,（二）色彩搭配的基本知識 1、非彩色的搭配 黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是萬能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果實在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。,網(wǎng)頁色彩設(shè)計,2、網(wǎng)頁色彩搭配的原理 （1）色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。 （2）色彩的獨特性。要有與眾不同的

8、色彩，使得大家對你的印象強烈。 （3）色彩的合適性。就是說色彩和你表達的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點的柔性。 （4）色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。,網(wǎng)頁色彩設(shè)計,3、網(wǎng)頁色彩掌握的過程 隨著網(wǎng)頁制作經(jīng)驗的積累，用色有這樣的一個趨勢：單色-五彩繽紛-標(biāo)準(zhǔn)色-單色。一開始因為技術(shù)和知識缺乏，只能制作出簡單的網(wǎng)頁，色彩單一；在有一定基礎(chǔ)和材料后，希望制作一個漂亮的網(wǎng)頁，將自己收集的最好的圖片，最滿意色彩堆砌在頁面上；但是時間一長，卻發(fā)現(xiàn)色彩雜亂，沒有個性和風(fēng)格；第三次重新定位自己的網(wǎng)站，選擇好切合自己的色彩

9、，推出的站點往往比較成功；當(dāng)最后設(shè)計理念和技術(shù)達到頂峰時，則又返樸歸真，用單一色彩甚至非彩色就可以設(shè)計出簡潔精美的站點。,網(wǎng)頁色彩設(shè)計,網(wǎng)頁色彩搭配的技巧 （1）用一種色彩 這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，（說得通俗些就是將色彩變淡或則加深），產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。,（2）用兩種色彩 先選定一種色彩，然后選擇它的對比色如用藍色和黃色，整個頁面色彩豐富但不花稍。,用兩種色彩,網(wǎng)頁色彩設(shè)計,（3）用一個色系 用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。,（4）用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很“跳”。,在網(wǎng)頁

10、配色中，忌諱的是： （1）不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。 （2）背景和前文的對比盡量要大，不要用花紋繁雜的圖案作背景，以便突出主要文字內(nèi)容。,網(wǎng)頁色彩設(shè)計,（三）頁面各要素顏色搭配 1、 背景與文字 如果一個網(wǎng)站用了背景顏色，必須要考慮到背景顏色的用色，與前景文字的搭配等問題。一般的網(wǎng)站側(cè)重的是文字，所以背景可以選擇純度或者明度較低的色彩，文字用較為突出的亮色。讓人一目了然。 當(dāng)然，有些網(wǎng)站為了讓瀏覽者對網(wǎng)站留有深刻的印象，他在背景上作文章。比如一個空白頁的某一個部分用了很亮的一個大色塊，是不是讓你豁然開朗呢！此時他為了吸引瀏覽者的視線，突出的是背景，所以文字就要顯得暗一些，這

11、樣文字才能跟背景分離開來，便于瀏覽者閱讀文字。,網(wǎng)頁色彩設(shè)計,2、 LOGO和BANNER LOGO和BANNER是宣傳網(wǎng)站最重要的部分之一，所以這兩個部分一定要在頁面上突迎而出。怎樣做到這一點呢？將LOGO和BANNER做的鮮亮一些，也就是色彩方面跟網(wǎng)頁的主題色分離開來。有時候為了更突出，也可以使用與主題色相反的顏色。,網(wǎng)頁色彩設(shè)計,3、 導(dǎo)航，小標(biāo)題 導(dǎo)航，小標(biāo)題是網(wǎng)站的指路燈。瀏覽者要在網(wǎng)頁間跳轉(zhuǎn)，要了解網(wǎng)站的結(jié)構(gòu)，網(wǎng)站的內(nèi)容，都必須通過導(dǎo)航或者頁面中的一些小標(biāo)題。所以我們可以使用稍微具有跳躍性的色彩，吸引瀏覽者的視線，讓他們感覺網(wǎng)站清晰，明了，層次分明。想往哪里走都不會迷失方向。,網(wǎng)頁

12、色彩設(shè)計,4、 鏈接顏色設(shè)置 一個網(wǎng)站不可能只是單一的一頁，所以文字與圖片的鏈接是網(wǎng)站中不可缺少的一部分。這里特別指出文字的鏈接，因為鏈接區(qū)別于文字，所以鏈接的顏色不能跟文字的顏色一樣。現(xiàn)代人的生活節(jié)奏相當(dāng)快，不可能浪費太多的時間在尋找你網(wǎng)站的鏈接上。設(shè)置了獨特的鏈接顏色，讓人感覺他的獨特性，自然而然好奇心必然趨使他移動鼠標(biāo)，點擊鼠標(biāo)。,返回本章首頁,版面布局遵循的原則,（1）正常平衡，亦稱“勻稱”。多指左右、上下對照形式，主要強調(diào)秩序，能達到安定誠實、信賴的效果。 （2）異常平衡，即非對照形式，但也要平衡和韻律，當(dāng)然都是不均衡的，此種布局能達到強調(diào)性、不安性、高注目性的效果。 （3）對比，所

13、謂對比是不僅利用色彩、色調(diào)等技巧來做表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊等對比。,異常平衡,版面布局遵循的原則,（4）凝視所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果。 （5）空白，空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品位的優(yōu)越感，這種表現(xiàn)方法對體現(xiàn)網(wǎng)頁的格調(diào)十分有效。 （6）盡量用圖片解說，對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內(nèi)容可以傳達給瀏覽者的更多的心理因素。,凝視,空白,返回本章首頁,空白,網(wǎng)站的風(fēng)格,風(fēng)格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。 這個“整體形象”包括站點的CI，C

14、orporate Identity（標(biāo)志，色彩，字體，標(biāo)語），版面布局，瀏覽方式，交互性，文字，語氣，內(nèi)容價值，存在意義，站點榮譽等等諸多因素。如：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動活潑的，IBM是專業(yè)嚴(yán)肅的，這些都是網(wǎng)站給人們留下的不同感受。,網(wǎng)站的風(fēng)格,風(fēng)格是獨特的，是站點不同于其他網(wǎng)站的地方。可能是色彩、技術(shù)、交互方式等能讓瀏覽者明確分辨出這是你的網(wǎng)站獨有的。 風(fēng)格是有人性的。通過網(wǎng)站的外表如內(nèi)容、文字、交流可以概括出一個站點的個性可能是溫文儒雅、執(zhí)著熱情、是活潑易變、是放任不羈等。,網(wǎng)站的風(fēng)格,有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于普通網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受

15、來描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過有風(fēng)格的網(wǎng)站后你能有更深一層的感性認識，比如站點有品位，和藹可親，是老師，是朋友。其實風(fēng)格就是一句話：與眾不同！,網(wǎng)站的風(fēng)格,體現(xiàn)風(fēng)格的一些參考： （1）將你的標(biāo)志LOGO，盡可能的出現(xiàn)在每個頁面上?；蛘唔撁迹蛘唔撃_，或則背景。 （2）突出你的標(biāo)準(zhǔn)色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標(biāo)準(zhǔn)色彩一致的色彩。 （3）突出你的標(biāo)準(zhǔn)字體。在關(guān)鍵的標(biāo)題，菜單，圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體。,網(wǎng)站的風(fēng)格,（4）想一條朗朗上口宣傳標(biāo)語。把它做在你的banner里，或者放在醒目的位置，告訴大家你的網(wǎng)站的特色是 （5）使用統(tǒng)一的語氣和人稱。

16、即使是多個人合作維護，也要讓讀者覺得是同一個人寫的。 （6）使用統(tǒng)一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。 （7）創(chuàng)造一個你的站點特有的符號或圖標(biāo)。雖然很簡單的一個變化，卻給人與眾不同的感覺。 （8）用自己設(shè)計的花邊，線條，點。,返回本章首頁,美的原則,什么是美呢? 美的事物應(yīng)該具備什么條件呢? 根據(jù)人類美感的共通性可以定出十個美的原則：連續(xù)、漸變、對稱、對比、比例、平衡、調(diào)和、律動、統(tǒng)一、完整。,美的原則,一連續(xù) 連續(xù)是一種沒有開始、沒有終結(jié)、沒有邊緣的嚴(yán)謹(jǐn)性秩序排列，它只是反復(fù)的一種特殊情形，因此有規(guī)律的反復(fù)并不一定能產(chǎn)生連續(xù)。連續(xù)是無限地擴張，它可超越任何架框限制

17、。,美的原則,二漸變 漸變就是逐漸的改變，其有一定的秩序與規(guī)律。 漸變除形狀漸變外，尚有大小漸變、色彩漸變、位置漸變和方向漸變等等，均可單獨或混合運用。 任何構(gòu)成元素之漸變，都有其開始與終結(jié)，或由一方開始，經(jīng)漸變又回復(fù)原來的循環(huán)現(xiàn)象。例如形狀漸變，可從某一形狀開始，逐漸變化成為另一形狀，或由另一形狀又逐步回復(fù)到某一形狀。無論是開始或終結(jié)，在漸變的設(shè)計中均可成為設(shè)計上的焦點，且在開始與終結(jié)的整個重復(fù)過程中，均會造成節(jié)奏感。,美的原則,漸變形成的方式可由上而下、由左而右、或由中央發(fā)射、或作多元化的發(fā)展。 漸變的表現(xiàn)形式包括： 1自然形象之漸變、2形狀之漸變、3大小之漸變、4位置之漸變、5方向之漸變

18、、6色彩之漸變。,美的原則,三對稱 視覺上，以一個點或一條線為基準(zhǔn)，上下或左右看起來相等的形體，稱為對稱。對稱具有相稱、均齊、均整的意思。左右對稱的形體向來都被認為是安定且具有機能的。 對稱的表現(xiàn)形式包括： 1線對稱、2點對稱、3感覺對稱。 通常對稱的圖形具有單純簡潔的美感，以及靜態(tài)的安定感，但易流于單調(diào)、呆板。一般來說，單純的對稱圖形具有大方、強力的性格；細密的對稱圖形則能增加作品的充實感。許多商品設(shè)計即運用此特性而設(shè)計。,美的原則,四對比 將相對的要素配置一起，相互比較，以形成二種抗拒的緊張狀態(tài)，稱為對比。這種造成相對排斥性質(zhì)的要素，即一般所謂的對比要素。 對比要素包含的范圍非常廣泛，舉凡

19、造形、色彩、質(zhì)感、方向、面積等均屬之。圓形、三角形、方形是屬于造形的對比，例如紅磚、金磚兩者具有相同的造形，而其質(zhì)感因明顯的不同，具有對比的性質(zhì)。,美的原則,對比現(xiàn)象的強弱與否，依賴對比要素的配置關(guān)系而定。一般而言，不同的要素結(jié)合在一起，彼此刺激，會產(chǎn)生對比的現(xiàn)象，使強者更強、弱者更弱、大者更大、小者愈小。亦即經(jīng)由對比的關(guān)系可以增強個別要素所具有的特性。 對比的表現(xiàn)形式包括： 1線形的對比、2形狀的對比、3份量的對比、4明度的對比、5彩度的對比、6色相的對比、7質(zhì)地的對比、8動態(tài)的對比、9位置的對比、10其它的對比。,美的原則,五比例 在造型上所謂的比例乃是指長度或面積等屬于量度之間的一種比率

20、，它描述的是部份與部份；或部份與全體之間的關(guān)系。 在人類的歷史中，比例一直是被運用在建筑、家俱、工藝以及繪畫上。尤其是希臘、羅馬的建筑中比例被當(dāng)是一種美的表征。除了建筑之外，有幾個理想的比例，古代的學(xué)者就把它公式化，而作為設(shè)計的基本原理，以便求得統(tǒng)一與變化。其中最基本并且最重要的比例就是黃金比例。古希臘人把黃金比例認為是最完美的比例而活用時造型中。它的基本方法是把一條線分割成大小兩段，小線段與大線段之長度比等于大線段與全部線段之長度比。這種比例分割方法就是黃金比例。,比例,美的原則,六平衡 平衡是指兩個力量相互保持的意思，也就是說把兩種以上的構(gòu)成要素，互相均勻地配置在一個基礎(chǔ)的支點上，以保持力

21、學(xué)上的平衡而達到安定的狀態(tài)。 在造形的秩序中，平衡是極重要的一項。由于造形的作品，并不是真正講究實際的重量關(guān)系，所以平衡一詞，在平面造形的世界中，應(yīng)當(dāng)是屬于視覺的平衡。這和力學(xué)的平衡、數(shù)學(xué)的平衡以及其它學(xué)科中所講的平均是不一樣的。對平衡來說，有對稱和非對稱平衡之分。在平衡的練習(xí)中，著眼點在于如何求得視覺上的安定與心理上的平衡。例如形態(tài)、色彩、材質(zhì)在畫面中所具有的重量、大小、明暗、色彩、強弱、質(zhì)感等，都必須保持平衡狀態(tài)，才會令人產(chǎn)生安定的感覺。,美的原則,七調(diào)合 當(dāng)兩種構(gòu)成要素共同存在時，若差距過大，即造成對比。若兩種構(gòu)成要素相近，則對比刺激變小，能產(chǎn)生共同秩序使兩者達到調(diào)和的狀態(tài)。如黑與白是一種強烈對比的顏色，而存于其間的灰色便是兩者的調(diào)和。,美的原則,調(diào)和在視覺上可使我們產(chǎn)生美感。因此，調(diào)和的原則一直是人們關(guān)心的課題，尤其是色彩或造形皆是須不斷探討的問題。然而為了達到調(diào)和，各要素間的統(tǒng)一仍是必要的；如色相的配合、明度的配合，皆能產(chǎn)生調(diào)和。在造形上如線的粗細與形的大小均會影響，但只要在造形上能一致的話，也可產(chǎn)生調(diào)和感。 調(diào)和要素除了色彩與造形外，質(zhì)感也是相當(dāng)重要的因素。如以同材質(zhì)作為建筑物或庭園設(shè)計的材料，也是獲得調(diào)和的方