《網(wǎng)頁設(shè)計(jì)與制作》PPT課件

安慶職業(yè)技術(shù)學(xué)院 ,網(wǎng) 頁 設(shè) 計(jì) 與 制 作,安慶職業(yè)技術(shù)學(xué)院 ,本章內(nèi)容,安慶職業(yè)技術(shù)學(xué)院 ,4.1 概 述,網(wǎng)頁不只是傳遞信息的媒介，同時(shí)也是網(wǎng)絡(luò)上的藝術(shù)品。如何讓瀏覽者以輕松愜意的心態(tài)吸收網(wǎng)頁傳遞的信息，是一個(gè)值得研究的課題。,一. 創(chuàng)意的類型： 1. 改良型創(chuàng)意 2. 創(chuàng)新型創(chuàng)意 二. 創(chuàng)意的功能: 1.提高作品的審美價(jià)值，使作品充滿張力。 2.滿足受眾的情感需求，更好的推銷作品。,安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,在網(wǎng)頁設(shè)計(jì)中為了創(chuàng)造出高質(zhì)量的作品，我們往往需要多種思維方式來開發(fā)對事物的理解，不斷發(fā)現(xiàn)事物全新的含義，并賦予其新的表現(xiàn)形式和生命力。 一發(fā)展思維 以思維的中心點(diǎn)向外輻射、擴(kuò)散，積極的思考和聯(lián)想，產(chǎn)生多方向，多角度的捕捉創(chuàng)作靈感的觸角。 發(fā)展思維的結(jié)構(gòu)形式： 樹型結(jié)構(gòu)、傘型結(jié)構(gòu)、網(wǎng)狀結(jié)構(gòu),安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,二. 逆向思維 打破原有思維定式，將思維的方向和邏輯順序完全顛倒過來。反其道而行。以達(dá)到異、新、奇的視覺效果。 例如：網(wǎng)頁設(shè)計(jì)中非均衡的視覺效果及色彩的反向運(yùn)用等。 三. 獨(dú)特思維 勇于挑戰(zhàn)，超越常規(guī)、習(xí)慣 的認(rèn)識模式，綜合復(fù)雜環(huán)境中的 多種元素，產(chǎn)生一種新穎的不同 凡響的視覺效果。如圖(4-1)獨(dú) 特的視角,給人以新奇的感覺。 法則：人無我有，人有我變。,圖4-1 非常態(tài)界面,安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,四. 思維的靈活性 思維的靈活性指改變思維的能力。 1. 舉一反三，觸類旁通。 2. 思維擴(kuò)散、聚合。 五. 思維進(jìn)程的跨越性 創(chuàng)意超越了思維的步驟，因某一 事物激發(fā)起突然的頓悟。 如：2008奧運(yùn)會徽“中 國印.舞動的北京”及中國 申奧標(biāo)志。,圖4-2,圖4-3,安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,六. 思維效果的整體性 整體性是創(chuàng)新性思維的基本要求，脫離整體性作品就會顯得凌亂。如圖4-3世界著名搜索引擎Google的徽標(biāo)設(shè)計(jì)(圖4-34-4)，丹尼斯黃將簡約雅潔的設(shè)計(jì)風(fēng)格與“Google”巧妙結(jié)合，自然天成，使徽標(biāo)充滿靈氣。,圖4-3,圖4-4,安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,七. 思維認(rèn)識的深刻性 明察秋毫、入木三分、見微知著。抓住事物的本質(zhì)和發(fā)展趨向。如圖4-5是推銷女用香水。畫面中的尺和剪刀，表面上與香水風(fēng)馬牛不相及，而實(shí)質(zhì)上則表示量體、裁衣，香 水香味如為女士量 身定制一般。,圖4-5,安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,八思維表達(dá)的流暢性 任何一件作品要想完整、準(zhǔn)確、高效的表現(xiàn)出來，思維的連貫性是非常必要的。流暢性是對思維速度和效率的綜合評價(jià)。如圖4-6畫面中色彩的呼應(yīng)，排版的承接都為思維的連續(xù)表達(dá)創(chuàng) 造了條件。 影響思維流暢性的因素： 1.知識儲備 2.思維的敏銳度,圖4-6,安慶職業(yè)技術(shù)學(xué)院 ,4.3 網(wǎng)頁設(shè)計(jì)的創(chuàng)意方法,創(chuàng)意思維為構(gòu)筑優(yōu)美網(wǎng)頁繪 制了設(shè)計(jì)藍(lán)圖,而創(chuàng)意方法則在藍(lán)圖的基礎(chǔ)上對“大廈”進(jìn)行裝飾. 只有經(jīng)過裝飾的網(wǎng)頁能使主題表 現(xiàn)的更生動有趣，更具有審美享 受。因而德國設(shè)計(jì)師霍戈?duì)?馬 蒂斯把創(chuàng)意手段稱為“視覺修飾”。 一. 聯(lián)想與想象 聯(lián)想即由A事物想到B事物的心 理過程。如圖4-7由喜慶的煙花,圖4-7,安慶職業(yè)技術(shù)學(xué)院 ,4.2 網(wǎng)頁設(shè)計(jì)中的創(chuàng)意思維,構(gòu)成威嚴(yán)的雄師，雄師是中國古代千年文化的象征。人們一看到雄師也自然會聯(lián)想到中華民族。 聯(lián)想的種類：虛實(shí)聯(lián)想、接近聯(lián)想、類似聯(lián)想、對比聯(lián)想、因果聯(lián)想 創(chuàng)意的聯(lián)想方式：形體聯(lián)想（圖4-8 4-9）、材料聯(lián)想（圖4-10）、功能聯(lián)想（圖4-11）,圖4-8,圖4-11,圖4-10,圖4-9,安慶職業(yè)技術(shù)學(xué)院 ,4.3 網(wǎng)頁設(shè)計(jì)的創(chuàng)意方法,二. 比喻與擬人 比喻是把要表達(dá)的內(nèi)容作為本體，通過相關(guān)聯(lián)的喻體去表現(xiàn)內(nèi)容的本質(zhì)特征。 要求：比體與本體之間要求相類似的特征。,比喻的種類：明喻、暗喻、借喻 比擬。分為兩種，擬人或擬物。,比擬離不開聯(lián)想和想象，其效果使網(wǎng)頁中內(nèi)容更形象、生動，從而增強(qiáng)感染力，比擬可以讓靜態(tài)變得生動起來，讓呆板的變得有生機(jī)活力，讓抽象的形象變得具體，從而增加作品的藝術(shù)魅力。,安慶職業(yè)技術(shù)學(xué)院 ,4.3 網(wǎng)頁設(shè)計(jì)的創(chuàng)意方法,三. 夸張與變形 夸張就是把作品中所宣傳對象的特征、性質(zhì)特意放大或渲染，突出自然形態(tài)中最本質(zhì)、最典型的部分，使主體特征更加鮮明突出。 變形手法在實(shí)際運(yùn)用中的表現(xiàn)方式： 拉伸、壓縮、扭曲、畸變或?qū)⒛骋徊糠滞怀鲣秩尽?四. 借代 不直接說出要說的人或事物，而是借與說的人或事物有密切、象征關(guān)系的其它某些事物來代替說明的一種修辭方法。,安慶職業(yè)技術(shù)學(xué)院 ,4.3 網(wǎng)頁設(shè)計(jì)的創(chuàng)意方法,圖4-12,圖4-13,安慶職業(yè)技術(shù)學(xué)院 ,4.3 網(wǎng)頁設(shè)計(jì)的創(chuàng)意方法,五. 幽默 幽默的手法優(yōu)點(diǎn)是抓住人或事物的某些特征，運(yùn)用喜劇性的手法造就一種耐人尋味引人發(fā)笑的幽默意境，撞擊瀏覽者的心靈。,六. 象征 用具體的事物表現(xiàn)某種特殊意境，是對事物原型的延伸,是超越性的存在。,七. 對比 把兩種不同事物或同一種事物的不同方面放在一起，相互比較，運(yùn)用對比使對立事物的矛盾突出揭示本質(zhì)，給人以深刻的啟示，留下深刻的印象。,安慶職業(yè)技術(shù)學(xué)院 ,4.4 網(wǎng)頁創(chuàng)意設(shè)計(jì)中的基本要素,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,在網(wǎng)頁中,字體往往占據(jù)了很大的空間和頁面,單一形態(tài)大小、顏色的字體，雖能傳遞信息，但不免讓人們感到疲勞乏味。,一. 字體的設(shè)計(jì)方法： 根據(jù)文字內(nèi)容的屬性及網(wǎng)站的主題可以適當(dāng)?shù)淖魅缦禄?1. 改變文字大小、比例 人們已經(jīng)習(xí)慣正常的視覺大小,突然間的變化會產(chǎn)生新的視覺感受,產(chǎn)生重新審視的興趣。 2. 改變字體形態(tài) 局部改變 整體改變,安慶職業(yè)技術(shù)學(xué)院 ,3.4.1 網(wǎng)頁中的文字,措施:拉伸、擠壓、扭曲、撕裂、切除、省略、替換、粗 細(xì)變化。,3. 文字的三維效果 真實(shí)的空間：眼睛看得見，手能摸得到的。 虛擬的空間：眼睛看得見，而不能觸摸得到的。 措施：添加投影、浮雕、透視效果，產(chǎn)生矛盾空間。,4. 色彩的改變 色相、純度、明度 5. 機(jī)理及質(zhì)地,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,紋理的改變及不同質(zhì)感效果 6. 置換及同構(gòu) 將文字中部分筆畫用實(shí)物、圖形、符號、色塊等替換，或利用文字外形與某一事物的相似點(diǎn)進(jìn)行變化。 二. 文字的組合方法與形式 1.字體的大小組合 將大小不等的文字放到一個(gè)平面上進(jìn)行組合，這樣大的文字相當(dāng)于一個(gè)圖形，而小的文字就成為可供閱讀的文字，或?qū)⑿〉奈淖志幣懦蓤D形而大的圖形成為主要的文字,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,2. 漢字與拉丁字母的組合 如：“HONG KONG”與“喜”字的組合。 3. 漢字與具象形體的組合 如：“永久”牌自行車標(biāo)志圖4-14,“ 胖子”服飾。 4.文字組合的處理手段 (1). 添加法 根據(jù)文字內(nèi)容、筆畫的多少進(jìn)行添加文字的組合因素。 A. 添加與內(nèi)容相關(guān)的文字 B. 添加與寓意相關(guān)的圖形,圖4-14,安慶職業(yè)技術(shù)學(xué)院 ,(2). 重疊法 將文字組合因素重疊為一體，產(chǎn)生富有層次的效果。 (3). 刪除法 在不影響識別的前提下將某些筆畫刪除。 (4). 連筆法 將文字組合 因素產(chǎn)生連貫的 整體感，可將兩 個(gè)以上的文字筆 畫連起來。如圖 4-15,圖4-15,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,（5）. 適形法 將文字組合因素適合在一個(gè)圖形內(nèi)，產(chǎn)生適合圖形的效果。 （6）. 共用法 將所設(shè)計(jì)內(nèi)容的兩個(gè)以上的文字筆畫偏旁部首共用，產(chǎn)生你中有我我中有你的視覺趣味。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,(7). 虛實(shí)形共用 實(shí)為筆畫，虛為背景。利用實(shí)形周圍空底顯示字的形產(chǎn)生虛實(shí)相間的視覺效果。 (8). 幾何形 利用不同的幾何形狀構(gòu)成文字,給人以自由和輕松感，現(xiàn)代感強(qiáng) 5. 文字編排的形式: A. 豎排式 B. 橫排式 C. 斜排式 D. 曲線式,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,E. 漸變式 運(yùn)用文字字體大小產(chǎn)生漸變的效果。 F. 重疊式 由句子重疊體現(xiàn)構(gòu)成圖形。 G. 分離式 拉大字與字之間距離，形成點(diǎn)壯效果。,(2). 文字的頭尾編排形式 A.齊頭散尾式 B.散頭齊尾式 C.齊頭齊尾式 D.中軸分離式,安慶職業(yè)技術(shù)學(xué)院 ,4.4.1 網(wǎng)頁中的文字,文字排列時(shí)從中間向兩邊分開,突出中間的垂直空間。 E.分插式 行與行之間的關(guān)系上、下、左、右曲直交叉，長短參差、錯(cuò)落地排列。 F.自由式 行與行不規(guī)則地排列，形成繁雜的視覺效果，其閱讀功能減弱，作為背景圖形用。,(3).圖形化的文字編排效果 運(yùn)用大量的文字組成平面的或立體的圖形，文字與圖形的結(jié)合形成了有趣的、有視覺內(nèi)涵的編排形式。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.2 網(wǎng)頁中的圖像,圖形是一種視覺信息傳遞媒介，較符號文字在傳遞信息上的優(yōu)勢：易識別、不受地域、國度、知識體系等眾多因素的影響。 圖形圖象往往來源于現(xiàn)實(shí)世界的影像照片，在造型規(guī)律上有很強(qiáng)的客觀制約性。所以設(shè)計(jì)師在對網(wǎng)頁優(yōu)化時(shí)應(yīng)對圖片作二次處理、加工，而處理時(shí)應(yīng)從以下方面入手。 圖形圖像的基本表現(xiàn)技巧： 一. 面積與視角 圖像在網(wǎng)頁中所占比例的大小直接影響整個(gè)頁面的視覺效果和情感表達(dá)。面積大的圖像在畫面中占的份量重，表達(dá)情感直接。容易吸引瀏覽者的注意。面積小的圖像通常在頁面中作點(diǎn)綴和呼應(yīng)，表達(dá)情感含蓄，給人,安慶職業(yè)技術(shù)學(xué)院 ,4.4.2 網(wǎng)頁中的圖像,精巧細(xì)致的感覺。 1.平直的視角 給人一種平穩(wěn)、安定、規(guī)矩的感覺。 2.非常規(guī)的視角 如：倒置、旋轉(zhuǎn)、仰視、俯視 增強(qiáng)畫面動感，更具強(qiáng)烈的視覺沖擊。,二.局部與特寫 對于整體的圖像局部與特寫能讓視線更加集中，這種手法有點(diǎn)到為止，意猶未盡的感覺。局部放大，重點(diǎn)表現(xiàn)這一部分，稱為特寫。特寫能對圖像產(chǎn)生瞬間的凝視，引發(fā)瀏覽者的興趣點(diǎn)。圖4-16為突出本款車的最新性能，而將車創(chuàng)新的部位放大，以特寫的形式展現(xiàn)。起到更有力的宣傳,安慶職業(yè)技術(shù)學(xué)院 ,4.4.2 網(wǎng)頁中的圖像,三.合成與組合,效果。,圖4-16,安慶職業(yè)技術(shù)學(xué)院 ,4.4.2 網(wǎng)頁中的圖像,圖像的合成是指用計(jì)算機(jī)將多幅圖片的不同內(nèi)容有選擇的合成一個(gè)圖像，合成后的圖像傳達(dá)更豐富的信息，能更集中的體現(xiàn)創(chuàng)意。 圖像的重要程度可以因面積、擺放位置、組合方式的不同而有所不同。 四.虛實(shí)和影調(diào) 圖像的虛實(shí)對比能夠產(chǎn)生空間感，實(shí)的物體感覺近，虛的物體感覺遠(yuǎn)。 五.退底與輪廓 圖像的退底是僅保留所選圖像，而將沿圖像邊緣的背景去掉，退底后的形象的外輪廓成自由形狀，具體清晰分明的視覺形態(tài)，顯得靈活自如。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,設(shè)計(jì)精良的網(wǎng)站總有其色調(diào)構(gòu)成的總體傾向,以一種顏色或幾種臨近顏色為主導(dǎo),使全呈現(xiàn)在某種和諧、統(tǒng)一的色彩傾向，如同人穿衣服。要想恰如其分的表現(xiàn)網(wǎng)頁中的內(nèi)容，在競爭對手脫穎而出的，信息空間的構(gòu)造也需要恰如其分的包裝和表達(dá)。 一. 與網(wǎng)站風(fēng)格 色彩是網(wǎng)頁設(shè)計(jì)中很難把握的重要方面，是確立網(wǎng)站風(fēng)格的前提，網(wǎng)站色彩的傾向，決定著網(wǎng)站給瀏覽者的第一印象。如：活潑、莊重、雅致（如圖4-17）或熱烈。 二. 色彩原理 “色彩是破碎了的光，太陽的光與地球相撞，破碎分散，因而使整個(gè)地球形成美麗的色彩?！?安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,圖4-17,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,1. 色彩的三要素 明度、色相和飽和度構(gòu)成色彩的三要素。自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，任何一種色彩都具有明度、純度、飽和度三大屬性。 (1). 明度 明度指色彩的明暗程度。 (2). 色相 色相指色彩的相貌。如：紅、黃、藍(lán)、綠等。 (3). 純度 純度指色彩的純凈程度，純度越高，色相感越強(qiáng)。,安慶職業(yè)技術(shù)學(xué)院 ,色 環(huán),圖4-18,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,2. 色彩的分類：原色、間色、鄰近色、對比色、互補(bǔ)色 3. 色彩與心理 色彩對人們頭腦和精神心理的影響是客觀存在的，如：色彩的知覺力，色彩的辨別力，色彩的象征力及情感。 (1).色彩的冷暖感覺 A. 暖色 色彩的冷暖與人們對世界的經(jīng)驗(yàn)分不開。如：陽光呈現(xiàn)紅、橙、黃、等顏色，所以人們一看到紅、橙、黃等色就聯(lián)想到火熱和烈日給人們的感受，故稱“暖色” B. 冷色 當(dāng)人們看到綠、青藍(lán)色時(shí)會與寒冷相聯(lián)系.如冰川、海洋、夜空、樹蔭等 (2). 色彩的進(jìn)退和脹縮感覺,安慶職業(yè)技術(shù)學(xué)院 ,色彩對比,圖4-19,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,a. 長波長的暖色有前進(jìn)的睡眠的感覺，短波的冷色有退縮的感覺 b. 明度高的色彩光量多、色刺激犬，有前進(jìn)膨脹的感覺，反之有退縮的感覺 c. 不同北京的襯托也能產(chǎn)生前進(jìn)、漲縮的感覺 (3). 色彩的輕重和軟硬感覺 明度高的色彩給人輕的感覺，明度低的色彩給人重的感覺。在色相方面，暖色給人輕的感覺，冷色給人重的感覺給人輕的感覺的顏色均有軟的感覺，給人重的感覺的顏色均有硬的感覺,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,(4). 色彩的艷麗與素雅 色彩飽和度高，亮度高的色彩艷麗，反之素雅 (5). 色彩的記憶性 人們對色彩的記憶，由于年齡、性別、個(gè)性、職業(yè)、經(jīng)歷、所受教育、自然環(huán)境、社會背景的不同，差異很大。一般說來記憶性色彩強(qiáng)的色彩為： 暖色、名度高、純度高 記憶性弱的色彩： 冷色、明度低、純度低 (6). 色彩的聯(lián)想與象征 色彩的聯(lián)想是通過以往的經(jīng)驗(yàn)、記憶或知識將當(dāng)前的色彩與其他具象或抽象及相聯(lián)系起來的過程,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,常見顏色的聯(lián)想： A.具象聯(lián)想 紅色：血、火、太陽 橙色：燈光 、柑橘 、秋葉、 都市 黃色：光、 檸檬、 迎春花 、食品 綠色：草地、 樹葉 、禾苗 藍(lán)色：天空 、宇宙、 水 、冰 紫色：丁香花 、葡萄 、茄子 黑色：夜晚 、墨、 石炭 白色：雪 、牛奶 、白云 、面粉 灰色：烏云 、鐵 、木 B.抽象聯(lián)想,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,紅色：熱烈 熱情 危險(xiǎn) 活力 吉祥 喜慶 夏季 傳統(tǒng) 橙色：溫暖 歡喜 嫉妒 華麗 甜蜜 興奮 黃色：光明 希望快活 平凡 權(quán)利 清爽 安靜 藍(lán)色：平靜 神秘 悠久 理智 深遠(yuǎn) 科學(xué) 快捷 紫色：優(yōu)雅 高貴 注重 浪漫 神秘 女性 溫柔 虛幻 魅力 黑色：嚴(yán)肅 剛健 恐怖 死亡 罪惡 堅(jiān)硬 沉默 絕望 悲 哀 男性 機(jī)械 灰色：平凡 天意 謙遜 灰心 無聊 消極 謙虛 隨便 （7）人對色彩的情感 最基本的情感表現(xiàn)：好 惡 情感的差異的原因：,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,a. 年齡差異 年齡高：冷色 明度純度低 年齡低：明度純度高 b性別差異 男性：冷色或純度高的色彩（如黑.灰）色調(diào)集中 女性：暖色.純度較低的粉色及白色色調(diào)分散 c.種族差異 原因：生活環(huán)境.社會文化.歷史.宗教信仰等不同 中國：紅 黃 藍(lán) 天藍(lán) 淺藍(lán) 美國：淡黃 紅 明灰 明藍(lán) 法國：黑 灰 紅 藍(lán) 綠 白 德國：黑 白 天藍(lán) 咖啡最基本的情感表現(xiàn)：好 惡,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,菲律賓：淡黃 藍(lán) 綠 印度：紅 黃 藍(lán) 綠 埃及：綠 紅 黑 藍(lán) 綠 三. web設(shè)計(jì)中的色彩應(yīng)用原理 確立網(wǎng)站色調(diào) 確立網(wǎng)站色調(diào)的過程 決定主體色 選擇輔助色 選擇背景色,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,圖4-20,圖4-21,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,色彩調(diào)整 確定主頁的題材后，要了解哪些顏色適合哪些網(wǎng)站，如影視題材的站點(diǎn)，基本任何顏色都適合，但用黑色或深色則更符合夜間觀眾的視覺感受 頁面色彩搭配 色相相比 明度對比 飽和度對比 補(bǔ)色對比 面積對比 調(diào)和色調(diào) 3. 調(diào)和色彩的基本法則,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,建立主調(diào)統(tǒng)率頁面色彩關(guān)系 善用金銀黑白灰等中性色緩解中和，以烘托主題 拉開距離（從純度和明度.面積上著手） 四.色彩意象的設(shè)計(jì)應(yīng)用 當(dāng)我們看到色彩時(shí)，除了感覺其對生理和物理方面的影響,心理也會立即產(chǎn)生感覺，這就是色彩的意象 1.紅色的色彩意象 由于紅色容易引起注意，所以在各種媒體中被廣的運(yùn)用；除了具有較佳的明視效果之外，更被用來傳達(dá)有力 .熱誠.溫暖.前進(jìn)等涵義的企業(yè)精神與形象。另外紅也常用來作為警告.危險(xiǎn).禁止.防火等標(biāo)志用色.(例:中國人一看見紅色就充滿了喜悅和激情),安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,2.橙色的色彩意象 橙色明視度高，在工業(yè)安全用色中。橙色是警戒色。如火車頭、登山服飾、救生衣的設(shè)計(jì)大都含有橙色。 由于橙色明亮刺眼，有時(shí)會產(chǎn)生負(fù)面低俗的意象。所以運(yùn)用時(shí)，要注意色彩的搭配及表現(xiàn)形式。 由于符合大自然創(chuàng)造的色彩搭配模式，橙色與具有一定灰度的綠色搭配效果較好。 3.黃色的色彩意象 黃色明視度高，同樣在生活中屬警戒色（如交通標(biāo)志上黃燈） 高亮度的黃色在頁面設(shè)計(jì)中很少大塊面的出現(xiàn)，多半由于顏色本身過于刺眼，造成瀏,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,覽者視覺的不愉快。但與黑色搭配較好，會強(qiáng)烈突出主體。在細(xì)節(jié)部分使用效果更加。 4.綠色的色彩意象 在頁面設(shè)計(jì)中，綠色所傳達(dá)的清爽、理想、希望、生長的意象。符合人們接近自然的生理需求。 綠色在設(shè)計(jì)中應(yīng)用很廣，在工業(yè)上許多機(jī)械采用綠色，醫(yī)療機(jī)構(gòu)場所，也常用綠色作空間色彩規(guī)劃。 5藍(lán)色的色彩意象 由于藍(lán)色沉穩(wěn)的特性，具有理智、準(zhǔn)確的意象。在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象。大多選用藍(lán)色作標(biāo)準(zhǔn)色。如：電腦、汽車、攝影器材等。另外受西方文化的 影響。藍(lán)色作為頁面基調(diào)能營造出深邃、憂郁的意境。用其展示博大的胸懷或感性訴求方面比較合適。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,6紫色的色彩意境 紫色由于其強(qiáng)烈的女性化的性格，在商業(yè)設(shè)計(jì)用色中，受到相等大的限制，除了女性有關(guān)的商品或企業(yè)形象外，其它類設(shè)計(jì)不常作為主色調(diào)使用。 紫色被稱為“魔鬼” 顏色。深紫色會造成恐怖的氣氛，對比氣體顏色較難控制 紫色也有其優(yōu)點(diǎn)：是高貴的象征。明度低的紫色有清澈爽朗的感覺，而且有一定灰度的淺紫色會有纖巧雅致的感覺，適合表現(xiàn)女性有關(guān)的題材。 7.褐色的色彩意象 在商業(yè)上褐色用來表示原始材料的質(zhì)感。如麻、木材等?；蛴脕韨鬟_(dá)莫些產(chǎn)品的色澤及味感，如咖啡、茶、麥類等，或強(qiáng)調(diào)古典優(yōu)雅的企業(yè)或商品形象。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,8. 白色的色彩意象 白色具有高級，科技的意象。痛需和其他色彩搭配使用。純白色繪入寒冷，嚴(yán)峻的感覺。所以在使用白色時(shí)，都會搭配一些其他顏色。如象牙白、米白、乳白等。 白色是永遠(yuǎn)流行的主色調(diào)，是能和任何顏色搭配的萬能色。較容易控制如圖（4-22）。 9. 黑色的色彩意象 黑色具有高貴、穩(wěn)重、科技莊嚴(yán)的意象。黑色也是一種流行的主色調(diào)。適合與許多色彩搭配。 以黑色為主色調(diào)可以創(chuàng)造出神秘的氣氛，另外穩(wěn)重的黑色可以烘托主體超凡氣質(zhì)和美感。 10. 灰色的色彩意象,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,圖4-22,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,灰色具有柔和，高雅的意象。屬中間色，男女皆能接受，所以，灰色也是永遠(yuǎn)的主要顏色。許多科技產(chǎn)品，尤其是和金屬材料有關(guān)的，凡平卻來用灰色來傳達(dá)高級，科技的形象。以灰色作為設(shè)計(jì)的基調(diào)是當(dāng)前設(shè)計(jì)流行的做法，在緩和過對比造成的強(qiáng)烈的反差，灰色顯示了其杰出的能力。 五. 網(wǎng)頁設(shè)計(jì)的配色技巧 色彩的意象可以延伸設(shè)計(jì)潛制的效果。網(wǎng)頁設(shè)計(jì)新手可能喜歡選用一些漂亮的圖片作為色彩背景。但瀏覽一下大型網(wǎng)站，會發(fā)現(xiàn)它們更多的運(yùn)用的是黑、灰、藍(lán)、綠、黃等。其他的色彩作為背景。使得網(wǎng)頁顯得典雅，溫馨而又不失活潑，同時(shí)大大加快了網(wǎng)頁加載的速度。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,1. 運(yùn)用色素 這里指在主色調(diào)選定的基礎(chǔ)上，調(diào)整色彩的透明度或飽和度。將色彩變淡或加深調(diào)出新色彩或選用鄰近色，使用頁色彩統(tǒng)一、有層次感。 2. 使用對比色 可以充分的利用補(bǔ)色原理進(jìn)行搭配，同時(shí)注意使用灰色調(diào)進(jìn)行調(diào)和，這樣的作為色彩豐富，意境深遠(yuǎn)。 3. 用黑色與明度、純度、飽和度高的色彩搭配 對比強(qiáng)烈，不光雅致的同時(shí)更容易吸引眼球。 4. 文字與背景色的搭配 深色字體配素淡，柔和的色彩，讀起來自然流暢，深色字體搭配鮮明的字體。如字體作為裝飾性來表現(xiàn)出觀而選擇中間色調(diào)明時(shí)，純度可適當(dāng)降低如圖（4-23）。,安慶職業(yè)技術(shù)學(xué)院 ,4.4.3網(wǎng)頁設(shè)計(jì)中色彩的屬性及其應(yīng)用,總結(jié):要想將色彩自然和諧的運(yùn)用于網(wǎng)頁設(shè)計(jì)中，使網(wǎng)頁獲得生命力。大自然是最好的老師。春夏秋冬都恩能夠使設(shè)計(jì)和諧優(yōu)美。色彩運(yùn)用中應(yīng)注意的問題；國家、種族、宗教信仰、風(fēng)俗 地理位置、文化修養(yǎng)、性別、年齡 。 例:兒童喜歡對比強(qiáng)烈，生活在草原上的人喜歡紅色，生活在鬧市中的人喜歡淡雅的顏色，生活在大沙漠中的人喜歡綠色。,圖4-23,安慶職業(yè)技術(shù)學(xué)院 ,4.5 網(wǎng)頁創(chuàng)意設(shè)計(jì)的程序,安慶職業(yè)技術(shù)學(xué)院 ,4.5.1 前期策劃,一.明確設(shè)計(jì)任務(wù) 一個(gè)設(shè)計(jì)師:在接受任務(wù)之前,必須搞清楚服務(wù)對象的基本情況和意圖,弄清楚所要設(shè)計(jì)的是一個(gè)什么樣的任務(wù).企業(yè)設(shè)計(jì)網(wǎng)站的原因很多: (1)宣傳新公司或服務(wù)的需要 (2)舊網(wǎng)站的改版、更新 二.調(diào)查研究與分析 任何主頁都要根據(jù)主題的內(nèi)容形成風(fēng)格,只有熟悉題材和內(nèi)容設(shè)計(jì)工作才能有的放矢,取得理想效果. 分析的內(nèi)容包括: 1.目標(biāo)市場分析 分析受眾群體的文化水平,價(jià)值觀念, 所在的國家,安慶職業(yè)技術(shù)學(xué)院 ,4.5.2后期更新及維護(hù),族及其喜好等. 2.同類行業(yè)網(wǎng)站分析 同類行業(yè)網(wǎng)站的總體色彩風(fēng)格,排版布局,頁面內(nèi)容的選擇及表現(xiàn)形式等。 三 .創(chuàng)意開發(fā) 由單圖表現(xiàn)開始,確定設(shè)計(jì)方向,題材,構(gòu)思多個(gè)方案,嘗試從不同角度,方向,不同方式對網(wǎng)頁主題進(jìn)行挖掘和表現(xiàn),然后將材料進(jìn)行整理,選擇其中較好的進(jìn)行發(fā)散. 四. 修改及定案 應(yīng)收時(shí)的聽取多方面的意見及時(shí)對收集材料匯集整理,修改,并最終定稿.,安慶職業(yè)技術(shù)學(xué)院 ,4.5.2后期更新及維護(hù),網(wǎng)站中隨著新信息的加入,老信息的刪除,要不斷的對網(wǎng)頁進(jìn)行更新并維護(hù),使其能始終正常運(yùn)行。 更新前的準(zhǔn)備： 1.了解市場需求 大多網(wǎng)頁數(shù)網(wǎng)頁都或多或少的與經(jīng)濟(jì)利益相掛鉤,應(yīng)以市場的導(dǎo)向，為其服務(wù). 2.了解詢問者的心理 設(shè)計(jì)網(wǎng)頁需要了解你的觀眾,了解什么東西在吸引他們,需要了解他們的感受,則有助于你建立站點(diǎn)的色調(diào)和個(gè)性.,安慶職業(yè)技術(shù)學(xué)院 ,1.如何才能在作品中充分體現(xiàn)創(chuàng)意 2.簡述圖形圖象的創(chuàng)意技巧 3.簡述色彩的性格對突出網(wǎng)頁設(shè)計(jì)主題的作用 4.什么是創(chuàng)新性思維,習(xí) 題,安慶職業(yè)技術(shù)學(xué)院 ,