三網(wǎng)頁(yè)界面設(shè)計(jì)字體PPT課件

1、第第4 4章章 網(wǎng)頁(yè)中的字體設(shè)計(jì)網(wǎng)頁(yè)中的字體設(shè)計(jì) 文字，是人類(lèi)思想感情交流的必然產(chǎn)物。隨著人類(lèi)文明的進(jìn)步，它由簡(jiǎn)單而復(fù)雜，逐步形成了科學(xué)的完美而規(guī)范化的程式。它既具有人類(lèi)思想感情的抽象意義與韻調(diào)和音響節(jié)律，又具有結(jié)構(gòu)完整，章法規(guī)范，而又變化無(wú)窮的鮮明形象。尤其是象形文字，更是抽象與具象的緊密結(jié)合，其文字的本身，也可說(shuō)是一種完整的美術(shù)設(shè)計(jì)。1正確 不同漢字或拉丁字母的構(gòu)成，筆畫(huà)都是法定的，只要有一點(diǎn)筆劃不符，就成別字，輕則字義不同，重則不成其字，無(wú)人認(rèn)得，這就完全失去了文字本身的作用。因此字形要做到確切無(wú)誤，既不能任意增加筆畫(huà)，也不能任意減少或改變，以便保證期信息傳達(dá)功能的準(zhǔn)確性。 4.1字體設(shè)

2、計(jì)原理第1頁(yè)/共47頁(yè)2風(fēng)格要統(tǒng)一 字母漢字，字體筆畫(huà)都必須統(tǒng)一。如寫(xiě)漢字，不宜三筆隸體，二筆仿宋，寫(xiě)拉丁字母也不宜把楷、小楷、花楷雜組一字，印刷體與手寫(xiě)體也不能在一字中混合運(yùn)用。3表情要適應(yīng)文字內(nèi)容的精神 每一種字體，都有它自身的表情。選擇某種字體為設(shè)計(jì)美術(shù)字之基調(diào)時(shí)，應(yīng)該按文字內(nèi)容的精神而定。做到表里一致，充分發(fā)揮出文字感染力的最大功能。 第2頁(yè)/共47頁(yè)4字型勻稱 字與字之間看起來(lái)要大小相稱，字的筆畫(huà)有繁有簡(jiǎn)，要合理安排。5結(jié)構(gòu)嚴(yán)謹(jǐn) 字的結(jié)構(gòu)要做到多樣統(tǒng)一，均勻穩(wěn)定，疏密有致，變化有序。6對(duì)文字的形象進(jìn)行藝術(shù)處理，以增強(qiáng)文字的傳播效果。 第3頁(yè)/共47頁(yè)4.2字體與版式設(shè)計(jì) 文字在排版設(shè)

3、計(jì)中，不僅僅局限于信息傳達(dá)意義上的概念，而更是一種高尚的藝術(shù)表現(xiàn)形式。文字已提升到啟迪性和宣傳性、引領(lǐng)人們的審美時(shí)尚的新視角。文字是任何版面的核心，也是視覺(jué)傳達(dá)最直接的方式，運(yùn)用經(jīng)過(guò)精心處理的文字材料，完全可以制作出效果很好的版面，而不需要任何圖形。1. 字體、字號(hào) 字體的設(shè)計(jì)、選用是排版設(shè)計(jì)的基礎(chǔ)。2.字距與行距 字距與行距的把握是設(shè)計(jì)師對(duì)版面的心理感受，也是設(shè)計(jì)師設(shè)計(jì)品味的直接體現(xiàn)。第4頁(yè)/共47頁(yè)3. 編排形式 文字的編排形式多種多樣4. 文字編排的特殊表現(xiàn) 文字在版式中扮演著重要的角色，同時(shí)它的形式也是靈活多變的。 第5頁(yè)/共47頁(yè)4.3網(wǎng)頁(yè)中文字顏色的運(yùn)用 一般來(lái)說(shuō)，網(wǎng)頁(yè)的背景色應(yīng)該

4、柔和一些、素一些、淡一些，再配上深色的文字，使人看起來(lái)自然、舒暢。而為了追求醒目的視覺(jué)效果，可以為標(biāo)題使用較深的顏色。下面是大家設(shè)計(jì)網(wǎng)頁(yè)和瀏覽的網(wǎng)頁(yè)時(shí)，對(duì)網(wǎng)頁(yè)背景色和文字色彩搭配經(jīng)常采用的色彩，這些顏色可以做正文的底色，也可以做標(biāo)題的底色，再搭配不同的字體 第6頁(yè)/共47頁(yè) 網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長(zhǎng)們最希望掌握，也是最難以學(xué)習(xí)的。難就難在沒(méi)有一個(gè)固定的程式可以參照和模仿。當(dāng)給出一個(gè)主題，任何兩人都不可能設(shè)計(jì)出完全一樣的網(wǎng)站。當(dāng)人們說(shuō)：“這個(gè)站點(diǎn)很cool，很有個(gè)性！”那么，是什么讓讀者覺(jué)得很cool呢？它到底和一般的網(wǎng)站有什么區(qū)別呢？可以從以下幾個(gè)方面討論： 第第5 5章章 網(wǎng)頁(yè)設(shè)計(jì)中

5、的排版與布局網(wǎng)頁(yè)設(shè)計(jì)中的排版與布局5.1 網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格與創(chuàng)意5.1.1網(wǎng)站風(fēng)格概述 風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。 風(fēng)格是獨(dú)特的，是彼此之間的區(qū)別之一。或者色彩，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出網(wǎng)站的獨(dú)有性。 風(fēng)格是有人性的。通過(guò)網(wǎng)站的外表、內(nèi)容、文字、交流可以概括出一個(gè)站點(diǎn)的個(gè)性，情緒。 第7頁(yè)/共47頁(yè)5.1.25.1.2樹(shù)立網(wǎng)站風(fēng)格樹(shù)立網(wǎng)站風(fēng)格 風(fēng)格(style)是抽象的。是指站點(diǎn)的整體形象給瀏覽者的綜合感受。1.如何樹(shù)立網(wǎng)站風(fēng)格 確信風(fēng)格是建立在有價(jià)值內(nèi)容之上的。一個(gè)網(wǎng)站有風(fēng)格而沒(méi)有內(nèi)容，就好比繡花枕頭一包草，好比一個(gè)性格傲慢但卻目不識(shí)

6、丁的人。首先必須保證內(nèi)容的質(zhì)量和價(jià)值性。 需要徹底搞清楚希望站點(diǎn)給人的印象是什么。 在明確網(wǎng)站印象后，開(kāi)始努力建立和加強(qiáng)這種印象 。2.運(yùn)用創(chuàng)意 創(chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這一點(diǎn)相信大家都已經(jīng)認(rèn)同。然而作為網(wǎng)頁(yè)設(shè)計(jì)師，最苦惱的就是沒(méi)有好的創(chuàng)意來(lái)源。 第8頁(yè)/共47頁(yè) logo是徽標(biāo)或者商標(biāo)的英文說(shuō)法，起到對(duì)徽標(biāo)擁有公司的識(shí)別和推廣的作用。網(wǎng)絡(luò)中的徽標(biāo)主要是各個(gè)網(wǎng)站用來(lái)與其它網(wǎng)站鏈接的圖形標(biāo)志，代表一個(gè)網(wǎng)站或網(wǎng)站的一個(gè)板塊。5.2.1作用 1.LOGO是與其它網(wǎng)站鏈接以及讓其它網(wǎng)站鏈接的標(biāo)志和門(mén)戶。 2. LOGO是網(wǎng)站形象的重要體現(xiàn)。 3. LOGO能使大眾便于選擇。5.2網(wǎng)頁(yè)Logo

7、設(shè)計(jì)第9頁(yè)/共47頁(yè)5.2.2國(guó)際規(guī)范為了便于INTERNET上信息的傳播，一個(gè)統(tǒng)一的LOGO國(guó)際標(biāo)準(zhǔn)是需要的。實(shí)際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)。其中關(guān)于網(wǎng)站的LOGO，目前有三種規(guī)格： 1. 88*31這是互聯(lián)網(wǎng)上最普遍的LOGO規(guī)格.2. 120*60 這種規(guī)格用于一般大小的LOGO。 3. 120*90 這種規(guī)格用于大型LOGO。 第10頁(yè)/共47頁(yè)5.2.35.2.3設(shè)計(jì)流程設(shè)計(jì)流程1.調(diào)研分析 標(biāo)志不僅僅是一個(gè)圖形或文字的組合，它是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類(lèi)別、經(jīng)營(yíng)理念，并充分考慮標(biāo)志接觸的對(duì)象和應(yīng)用環(huán)境，為企業(yè)制定的標(biāo)準(zhǔn)視覺(jué)符號(hào)。 2.要素挖掘 要素挖掘是為設(shè)計(jì)開(kāi)發(fā)工作做進(jìn)一步的準(zhǔn)備

8、。3.設(shè)計(jì)開(kāi)發(fā) 有了對(duì)企業(yè)的全面了解和對(duì)設(shè)計(jì)要素的充分掌握，可以從不同的角度和方向進(jìn)行設(shè)計(jì)開(kāi)發(fā)工作。4.標(biāo)志修正 提案階段確定的標(biāo)志，可能在細(xì)節(jié)上還不太完善，人們經(jīng)過(guò)對(duì)標(biāo)志的標(biāo)準(zhǔn)制圖、大小修正、黑白應(yīng)用、線條應(yīng)用等不同表現(xiàn)形式的修正，使標(biāo)志使用使更加規(guī)范，同時(shí)標(biāo)志的特點(diǎn)、結(jié)構(gòu)在不同環(huán)境下使用時(shí)，也不會(huì)喪失，達(dá)到統(tǒng)一、有序、規(guī)范的傳播。 第11頁(yè)/共47頁(yè)5.2.45.2.4制作工具和方法制作工具和方法 目前并沒(méi)有專(zhuān)門(mén)制作LOGO的軟件，其實(shí)也并不需要這樣的一種軟件。平時(shí)所使用的圖像處理軟件或者加上動(dòng)畫(huà)制作軟件（如果要做一個(gè)動(dòng)畫(huà)的LOGO的話）都可以很好地勝任這份工作，如FIREWORKS、PH

9、OTOSHOP、Easy GIF Animator等。5.2.5良好的條件 一個(gè)好的LOGO應(yīng)具備以下的幾個(gè)條件，或者具備其中的幾個(gè)條件： 1. 符合國(guó)際標(biāo)準(zhǔn) 2. 精美、獨(dú)特 3. 與網(wǎng)站的整體風(fēng)格相融 4. 能夠體現(xiàn)網(wǎng)站的類(lèi)型、內(nèi)容和風(fēng)格 5. 在最小的空間盡可能的表達(dá)出整個(gè)網(wǎng)站、公司的創(chuàng)意，精神等第12頁(yè)/共47頁(yè) LOGO的應(yīng)用一直是CIS導(dǎo)入的基礎(chǔ)和最直接的表現(xiàn)形式，其重要性是不言而喻的， 通過(guò)對(duì)標(biāo)識(shí)的識(shí)別、區(qū)別、引發(fā)聯(lián)想、增強(qiáng)記憶，促進(jìn)被標(biāo)識(shí)體與其對(duì)象的溝通與交流，從而樹(shù)立并保持對(duì)被標(biāo)識(shí)體的認(rèn)知、認(rèn)同，達(dá)到高效、提高認(rèn)知度、美譽(yù)度的效果。作為時(shí)代的前衛(wèi)，網(wǎng)絡(luò)LOGO的設(shè)計(jì)，更應(yīng)遵循

10、CIS的整體規(guī)律并有所突破。因此網(wǎng)絡(luò)標(biāo)識(shí)的設(shè)計(jì)應(yīng)具備以下要素：1.識(shí)別性 關(guān)于識(shí)別性要求必須容易識(shí)別，易記憶。這就要做到無(wú)論是從色彩還是構(gòu)圖上一定要講究簡(jiǎn)單。2.特異性 所謂特異性就是要與其他的LOGO有區(qū)別，要有自己的特性，以區(qū)別于其它LOGO。 5.2.65.2.6制作要素制作要素第13頁(yè)/共47頁(yè)3.內(nèi)涵性 設(shè)計(jì)LOGO一定要有它自身的含義，否則就算做的再漂亮，再完美也只是形式上的漂亮，卻沒(méi)有一點(diǎn)意義。 4.法律意識(shí) 關(guān)于LOGO的法律意識(shí)一定要注意敏感的字樣、形狀和語(yǔ)言。 5.整體形象規(guī)劃（結(jié)構(gòu)性） LOGO不同的結(jié)構(gòu)會(huì)給人不同的心理意識(shí)，就像水平線給人的感覺(jué)是平緩、穩(wěn)重、延續(xù)和平靜，

11、豎線給人的感覺(jué)是高、直率、輕和浮躁感，點(diǎn)給人的感覺(jué)是擴(kuò)張或收縮，容易引起人的注意等。 第14頁(yè)/共47頁(yè)5.2.7LOGO設(shè)計(jì)決定品牌命運(yùn)5.2.8logo5.2.8logo設(shè)計(jì)分類(lèi)設(shè)計(jì)分類(lèi)1.具象表現(xiàn)形式：具象表現(xiàn)是忠實(shí)于客觀物象的自然形態(tài)，對(duì)客觀物象采用經(jīng)過(guò)高度概括與提煉的具象圖形進(jìn)行設(shè)計(jì)的一種表現(xiàn)形式。 人體造型的圖形 動(dòng)物造型的圖形第15頁(yè)/共47頁(yè) 植物造型的圖形 器物造型的圖形 自然造型的圖形第16頁(yè)/共47頁(yè)2.抽象表現(xiàn)形式 抽象表現(xiàn)形式是以抽象的圖形符號(hào)來(lái)表達(dá)標(biāo)志的含義，以理性規(guī)劃的幾何圖形或符號(hào)為表現(xiàn)形式。 圓形標(biāo)志圖形 四方形標(biāo)志圖形 第17頁(yè)/共47頁(yè) 三角形的標(biāo)志圖形

12、多邊形標(biāo)志圖形 方向形標(biāo)志圖形第18頁(yè)/共47頁(yè)3.文字表現(xiàn)形式： 文字表現(xiàn)是以標(biāo)志形象與字體組合而成一個(gè)整體。標(biāo)志是一種視覺(jué)圖形，但文字標(biāo)志同時(shí)具有語(yǔ)言特征和語(yǔ)音形式。 漢字標(biāo)志圖形 拉丁字母標(biāo)志圖形 數(shù)字標(biāo)志圖形第19頁(yè)/共47頁(yè)5.3 導(dǎo)航欄的統(tǒng)一與變化5.3.15.3.1導(dǎo)航欄導(dǎo)航欄 導(dǎo)航系統(tǒng)的作用：告訴在哪里，可以去哪里，這里有什么，附近有什么，指引瀏覽著下一步的行為。1.導(dǎo)航系統(tǒng)的分類(lèi) 全站、區(qū)域、情境式、輔助性導(dǎo)航。2.網(wǎng)站索引： 就是將網(wǎng)站的內(nèi)容以關(guān)鍵詞、詞匯、標(biāo)簽按一定順序(字母、筆畫(huà))排列而成。內(nèi)容之間可以沒(méi)有等級(jí)關(guān)系。3.指南: 設(shè)計(jì)指南主要依據(jù)以下原則： 指南要短。 無(wú)

13、論何時(shí)，用戶都能離開(kāi)指南。 允許用戶在指南中前進(jìn)、后退的自由移動(dòng)。 指南的設(shè)計(jì)目的是回答問(wèn)題的。 截圖應(yīng)該明確，具有把重點(diǎn)功能放大的效果。 如果指南有好幾頁(yè)，要有目錄。 第20頁(yè)/共47頁(yè)4.高級(jí)設(shè)計(jì)導(dǎo)航方法： 個(gè)性化就是針對(duì)個(gè)人的行為、需求、喜好提供剪裁后的網(wǎng)頁(yè)給用戶。 定制化(指用戶告訴人們想要什么，但有時(shí)候用戶自己都不知道他們要需要什么)是給用戶直接控制權(quán)，可以針對(duì)展現(xiàn)格式、導(dǎo)航和內(nèi)容選項(xiàng)的組合做調(diào)整。 可視化：讓用戶可能采用可視化的方式瀏覽。(在網(wǎng)上瀏覽博物館網(wǎng)站時(shí)就像逛現(xiàn)實(shí)生活中的博物館一樣身臨其境的感覺(jué)，) 。 社會(huì)化：用戶上網(wǎng)的需求點(diǎn)、興趣點(diǎn)可以從觀察其它用戶行為中推論出來(lái)的基礎(chǔ)

14、上。 第21頁(yè)/共47頁(yè)打開(kāi)網(wǎng)頁(yè)后，促使瀏覽者繼續(xù)瀏覽，除了主頁(yè)上的內(nèi)容外，按鈕設(shè)計(jì)起著至關(guān)的作用。好的按鈕設(shè)計(jì)一定會(huì)是醒目且能“勾引”用戶眼球的。以下是好的按鈕設(shè)計(jì)必不可少的5個(gè)特征:1.顏色顏色一定要能與平靜的頁(yè)面相比更加與眾不同，因此它要更亮而且有高對(duì)比度的顏色。2.位置它們應(yīng)當(dāng)“座落于”用戶期望更容易找到它們的地方。產(chǎn)品旁邊、頁(yè)頭、導(dǎo)航的頂部右側(cè)這些都是醒目且不難找到的地方。 5.3.25.3.2按鈕設(shè)計(jì)按鈕設(shè)計(jì)第22頁(yè)/共47頁(yè)3.文字表達(dá) 在按鈕上使用什么文字表達(dá)給用戶是非常重要的。它應(yīng)當(dāng)簡(jiǎn)短并切中要點(diǎn)，并以動(dòng)詞開(kāi)始，如：注冊(cè)、下載、創(chuàng)建、嘗試等。 4.尺寸問(wèn)題 如果它是你最重要的

15、按鈕并且你希望更多的用戶點(diǎn)擊它，那么讓它更醒目些是沒(méi)有壞處的。把這個(gè)按鈕設(shè)計(jì)的比其他按鈕更大些并讓用戶在更多的地方找到并點(diǎn)擊它。 5.可“呼吸”的空間 按鈕不能和網(wǎng)頁(yè)中的其他元素?cái)D在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。 第23頁(yè)/共47頁(yè) 在網(wǎng)頁(yè)設(shè)計(jì)中，簡(jiǎn)約并不一定等同于極簡(jiǎn)主義者的設(shè)計(jì)美學(xué)。簡(jiǎn)約的網(wǎng)站只是從設(shè)計(jì)、內(nèi)容、以及代碼中移除了所有不必要的元素。而極簡(jiǎn)主義的網(wǎng)站普遍符合這一標(biāo)準(zhǔn)，有許多網(wǎng)站，不管你如何想象，都不會(huì)被認(rèn)為是仍適合簡(jiǎn)單定義的“極簡(jiǎn)主義”。5.4網(wǎng)頁(yè)的簡(jiǎn)約設(shè)計(jì)5.4.1簡(jiǎn)約設(shè)計(jì)的特點(diǎn) 1.簡(jiǎn)約的設(shè)計(jì)讓

16、網(wǎng)站更容易導(dǎo)航。 2. 簡(jiǎn)約的設(shè)計(jì)讓頁(yè)面加載更快。 3. 簡(jiǎn)約的設(shè)計(jì)讓內(nèi)容更容易被“瀏覽”。 4. 簡(jiǎn)約的網(wǎng)站設(shè)計(jì)和創(chuàng)建會(huì)更快速。 5. 簡(jiǎn)約的代碼更容易避免漏洞。 6. 較小的文件意味著較少的服務(wù)器空間第24頁(yè)/共47頁(yè)5.4.2怎樣使網(wǎng)站變得簡(jiǎn)約 1.移除不必要的裝飾元素 。 2.經(jīng)常問(wèn)自己“這些元素真的很重要嗎？” 3.網(wǎng)站上哪些元素是可以被合并的。 4.一些頁(yè)面是否可以合并成一個(gè)頁(yè)面? 5.確保網(wǎng)站后端和前端一樣的簡(jiǎn)約 第25頁(yè)/共47頁(yè)5.5網(wǎng)頁(yè)中的版式設(shè)計(jì) 探討網(wǎng)頁(yè)的版式設(shè)計(jì)的藝術(shù)表現(xiàn)方法，把握網(wǎng)頁(yè)版式設(shè)計(jì)的發(fā)展趨勢(shì)，把傳統(tǒng)平面設(shè)計(jì)中美的形式規(guī)律同現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的具體問(wèn)題相結(jié)合，將平

17、面設(shè)計(jì)中美的基本形式和元素運(yùn)用到網(wǎng)頁(yè)中去，對(duì)于提高網(wǎng)頁(yè)表現(xiàn)力、改善網(wǎng)站的運(yùn)營(yíng)效果，無(wú)疑具有重要意義。5.5.1版式設(shè)計(jì)在網(wǎng)頁(yè)中的藝術(shù)表現(xiàn) 版式設(shè)計(jì)，就是在版面上，將有限的視覺(jué)元素進(jìn)行有機(jī)的排列組合，并通過(guò)理性思維，用個(gè)性化的方式表現(xiàn)出具有個(gè)人風(fēng)格和藝術(shù)特色的視覺(jué)效果。它使得版面在傳達(dá)信息的同時(shí)，也產(chǎn)生感官上的美感。版式設(shè)計(jì)是現(xiàn)代設(shè)計(jì)藝術(shù)的重要組成部分，它不僅是一種技能，更體現(xiàn)了技術(shù)與藝術(shù)的高度統(tǒng)一。隨著互聯(lián)網(wǎng)和計(jì)算機(jī)技術(shù)的不斷進(jìn)步，網(wǎng)絡(luò)以其獨(dú)特的優(yōu)勢(shì)迅速覆蓋了全球。由于它的發(fā)展融合了更多的新技術(shù)，使其藝術(shù)表現(xiàn)形式比傳統(tǒng)媒體更為多樣，并具有一些獨(dú)有特點(diǎn)。 第26頁(yè)/共47頁(yè)1.高互動(dòng)性、多維性和

18、效果多元性 互動(dòng)性是媒體的基本特征，不同媒體的互動(dòng)程度和互動(dòng)形式不同。為保持瀏覽者對(duì)網(wǎng)站的新鮮感，很多網(wǎng)站總是定期或不定期的進(jìn)行改版，內(nèi)容更是需要經(jīng)常改變甚至“時(shí)時(shí)更新”。這就需要在保持網(wǎng)站視覺(jué)形象一貫性的基礎(chǔ)上，不斷創(chuàng)作新的網(wǎng)頁(yè)設(shè)計(jì)作品，高互動(dòng)媒體特性造成網(wǎng)頁(yè)版式設(shè)計(jì)需要不斷更新并且在設(shè)計(jì)上更要注意互動(dòng)性的體現(xiàn)，否則其網(wǎng)頁(yè)作品就會(huì)淹沒(méi)在互聯(lián)網(wǎng)的汪洋之中。 第27頁(yè)/共47頁(yè)2.“不可控制”的效果和“DIY”的網(wǎng)頁(yè)版式 網(wǎng)絡(luò)應(yīng)用很難制訂出統(tǒng)一的標(biāo)準(zhǔn)，這導(dǎo)致網(wǎng)頁(yè)版式設(shè)計(jì)效果的不可控制性。 網(wǎng)頁(yè)版式甚至可以根據(jù)瀏覽者的喜好自主選擇和改變，現(xiàn)在有些網(wǎng)站就為瀏覽者提供若干種排版風(fēng)格方案，以供瀏覽者“D

19、IY” 。3.網(wǎng)絡(luò)技術(shù)與藝術(shù)創(chuàng)意的緊密結(jié)合 毋庸置疑，網(wǎng)頁(yè)制作的每一次進(jìn)步都是技術(shù)的革新帶來(lái)的，網(wǎng)頁(yè)版式設(shè)計(jì)這種藝術(shù)則對(duì)技術(shù)有著深刻的依賴性，技術(shù)的更新不斷改變著它的本質(zhì)。 第28頁(yè)/共47頁(yè)網(wǎng)絡(luò)技術(shù)日新月異的發(fā)展給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了新的表現(xiàn)天地。在網(wǎng)絡(luò)世界里，技術(shù)始終起著先導(dǎo)作用，設(shè)計(jì)則隨著它的發(fā)展而發(fā)展，技術(shù)更新對(duì)網(wǎng)頁(yè)版式設(shè)計(jì)的影響無(wú)疑是巨大的。1.技術(shù)的更新將使網(wǎng)頁(yè)版式設(shè)計(jì)不斷增加新的設(shè)計(jì)元素 表格布局將被CSS布局取代 新型瀏覽器的出現(xiàn)將使網(wǎng)頁(yè)設(shè)計(jì)更趨簡(jiǎn)約5.5.25.5.2網(wǎng)頁(yè)版式設(shè)計(jì)的發(fā)展趨勢(shì)網(wǎng)頁(yè)版式設(shè)計(jì)的發(fā)展趨勢(shì)第29頁(yè)/共47頁(yè)2. 設(shè)計(jì)方式將遵循新的要求 網(wǎng)頁(yè)像書(shū)籍一樣有文字、有

20、圖片，像電視一樣有動(dòng)態(tài)影畫(huà)、聲音，幾乎融合了所有媒體的特性。預(yù)計(jì)在今后，網(wǎng)絡(luò)不僅會(huì)作為一個(gè)獨(dú)立的媒體而成長(zhǎng)，而且會(huì)成為聯(lián)系各大媒體的重要工具，處處顯示出極強(qiáng)的生命力。同時(shí)，經(jīng)驗(yàn)的積累和新技術(shù)的運(yùn)用也將促進(jìn)網(wǎng)頁(yè)版式設(shè)計(jì)方式遵循新的要求。 更為注重色彩搭配 巧妙運(yùn)用flash 注重頁(yè)面層次和版式細(xì)節(jié) 建立合理的“路標(biāo)”第30頁(yè)/共47頁(yè) 動(dòng)畫(huà)是一種動(dòng)態(tài)的視覺(jué)上的表達(dá)、形式和結(jié)構(gòu)，并隨時(shí)間推移而變化。動(dòng)畫(huà)十分普遍，用途不盡相同，人們?cè)谟?jì)算機(jī)上、尤其是網(wǎng)頁(yè)上和在線廣告中常?？梢钥吹?。一些設(shè)計(jì)者使用動(dòng)畫(huà)來(lái)傳遞信息，并認(rèn)為在有限的計(jì)算機(jī)屏幕上動(dòng)畫(huà)比文本有用的多，但是人們對(duì)于動(dòng)畫(huà)的效果卻要小心謹(jǐn)慎。 多數(shù)人

21、在多數(shù)情況下認(rèn)為網(wǎng)頁(yè)上的動(dòng)畫(huà)是令人討厭的。很多瀏覽者在瀏覽網(wǎng)頁(yè)時(shí)常常會(huì)被網(wǎng)頁(yè)上的動(dòng)畫(huà)所干擾，或者被分散了注意力，特別是當(dāng)動(dòng)畫(huà)不能給瀏覽者正在進(jìn)行的工作帶來(lái)任何信息的時(shí)候。這種動(dòng)畫(huà)被認(rèn)為是對(duì)瀏覽者的“非主要信息刺激”或者“輔助刺激”。換句話說(shuō)，他們不能對(duì)瀏覽者正在進(jìn)行的查找數(shù)據(jù)任務(wù)或者當(dāng)前所需要的信息帶來(lái)任何有價(jià)值的信息。這類(lèi)非主要信息刺激動(dòng)畫(huà)會(huì)引起視覺(jué)上的干擾，這種干擾影響了瀏覽者搜尋信息的能力。無(wú)關(guān)緊要的動(dòng)畫(huà)經(jīng)常出現(xiàn)或者突然出現(xiàn)，往往會(huì)分散瀏覽者在有用信息上的注意力。因此，當(dāng)人們?cè)诰W(wǎng)頁(yè)上搜尋有用信息時(shí)，常常會(huì)受到這些動(dòng)畫(huà)的干擾，正確獲得所需信息的時(shí)間也隨之變長(zhǎng)，這十分令人討厭。 第第6 6章

22、章 網(wǎng)頁(yè)動(dòng)畫(huà)網(wǎng)頁(yè)動(dòng)畫(huà)第31頁(yè)/共47頁(yè)6.1網(wǎng)絡(luò)動(dòng)畫(huà)的分類(lèi)6.1.1 FLAS動(dòng)畫(huà) FLASH動(dòng)畫(huà)是近幾年出現(xiàn)的一種新的事物，他是由美國(guó)的 MACROMEDIA 公司推出的一款多媒體動(dòng)畫(huà)制作軟件。它是一種交互式動(dòng)畫(huà)設(shè)計(jì)工具，用它可以將音樂(lè)，聲效，動(dòng)畫(huà)方便地融合在一起，以制作出高品質(zhì)的動(dòng)態(tài)效果，或者說(shuō)是動(dòng)畫(huà)。6.1.2.GIF動(dòng)畫(huà) GIF 廣泛支持 Internet 標(biāo)準(zhǔn)。支持無(wú)損耗壓縮和透明度。動(dòng)畫(huà) GIF 很流行，易于使用許多 GIF 動(dòng)畫(huà)程序創(chuàng)建。 GIF 只支持 256 色調(diào)色板，因此，詳細(xì)的圖片和寫(xiě)實(shí)攝影圖像會(huì)丟失顏色信息，而看起來(lái)卻是經(jīng)過(guò)調(diào)色的。在大多數(shù)情況下，無(wú)損耗壓縮效果不如 J

23、PEG 格式或 PNG 格式。GIF 支持有限的透明度，沒(méi)有半透明效果或褪色效果 第32頁(yè)/共47頁(yè)6.1.3三維動(dòng)畫(huà) 三維動(dòng)畫(huà)又稱3D動(dòng)畫(huà)，是近年來(lái)隨著計(jì)算機(jī)軟硬件技術(shù)的發(fā)展而產(chǎn)生的一新興技術(shù)。三維動(dòng)畫(huà)軟件在計(jì)算機(jī)中首先建立一個(gè)虛擬的世界，設(shè)計(jì)師在這個(gè)虛擬的三維世界中按照要表現(xiàn)的對(duì)象的形狀尺寸建立模型以及場(chǎng)景，再根據(jù)要求設(shè)定模型的運(yùn)動(dòng)軌跡、虛擬攝影機(jī)的運(yùn)動(dòng)和其它動(dòng)畫(huà)參數(shù)，最后按要求為模型賦上特定的材質(zhì)，并打上燈光。當(dāng)這一切完成后就可以讓計(jì)算機(jī)自動(dòng)運(yùn)算，生成最后的畫(huà)面。 三維flash是利用計(jì)算機(jī)圖形學(xué)技術(shù)，將需要展示的產(chǎn)品在計(jì)算機(jī)中先進(jìn)行逼真的三維模擬運(yùn)行演示，然后再通過(guò)專(zhuān)業(yè)軟件壓縮轉(zhuǎn)換成一

24、個(gè)完全適合在網(wǎng)頁(yè)上流暢運(yùn)行的flash文件。 三維flash在網(wǎng)頁(yè)上運(yùn)行很流暢，瀏覽者無(wú)需下載插件，打開(kāi)網(wǎng)頁(yè)就可看到產(chǎn)品演示。 第33頁(yè)/共47頁(yè)6.2網(wǎng)絡(luò)動(dòng)畫(huà)的制作6.2.1常用軟件制作動(dòng)畫(huà)的軟件包括：Maya Softimage 3Dmax LIGHTWAVE Alias 是三維動(dòng)畫(huà)制作軟件Animator、ANIMO、TOONZ、RETAS PRO 商業(yè)二維動(dòng)畫(huà)TOOB BOOM STUDIO、HARMONY、SOLO、flash 網(wǎng)頁(yè)二維動(dòng)畫(huà)制作網(wǎng)絡(luò)中常見(jiàn)的flash動(dòng)畫(huà)是用FLASH制作的，一些banner是由FLASH或者imageready制作的，當(dāng)然三維軟件制作的動(dòng)畫(huà)也可以通過(guò)

25、插件轉(zhuǎn)為二維動(dòng)畫(huà)。第34頁(yè)/共47頁(yè)6.2.2傳輸速度 網(wǎng)絡(luò)傳輸速度是相對(duì)固定的，在此前提下，網(wǎng)站的文件量越小，傳輸?shù)男畔⑺俣染驮娇?，所以人們要盡可能的對(duì)網(wǎng)頁(yè)進(jìn)行優(yōu)化。6.2.3風(fēng)格統(tǒng)一 統(tǒng)一，是指設(shè)計(jì)作品的整體性，一致性。設(shè)計(jì)作品的整體效果是至關(guān)重要的，在設(shè)計(jì)中切勿將各組成部分孤立分散，那樣會(huì)使畫(huà)面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。 網(wǎng)頁(yè)上所有的圖像、文字，包括象背景顏色、區(qū)分線、字體、標(biāo)題、注腳什么的，要統(tǒng)一風(fēng)格，貫穿全站。 第35頁(yè)/共47頁(yè)6.3網(wǎng)絡(luò)動(dòng)畫(huà)的指導(dǎo)方針 研究結(jié)果表明人們必須小心地設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)以免對(duì)瀏覽者產(chǎn)生負(fù)面影響。以下列出設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)的十個(gè)原則。1不要干擾在重要信息上的注意力

26、。2避免混亂。3設(shè)定合適的持續(xù)時(shí)間。4管理布局和組織顯示對(duì)象。5遵守顏色的慣例。6使用文本和聽(tīng)覺(jué)信息來(lái)輔助動(dòng)畫(huà)。7關(guān)注對(duì)符號(hào)學(xué)的探究。8遵從合作原則。9向迪斯尼學(xué)習(xí)。10避免設(shè)計(jì)“近視”。第36頁(yè)/共47頁(yè)第第7 7章章 網(wǎng)絡(luò)形象設(shè)計(jì)網(wǎng)絡(luò)形象設(shè)計(jì)(IVIS)(IVIS)與廣告?zhèn)髅脚c廣告?zhèn)髅?.1視覺(jué)識(shí)別系統(tǒng) VI（Visual Identity），通譯為視覺(jué)識(shí)別，是CIS系統(tǒng)中最具傳播力和感染力的層面。7.1.1VI應(yīng)用要素系統(tǒng)設(shè)計(jì)類(lèi)別 1待客用項(xiàng)目類(lèi) 洽談會(huì)、會(huì)客廳、會(huì)議廳家具、煙灰缸、坐墊、招待餐飲具、客戶用文具。 2商品及包裝類(lèi) 商品包裝設(shè)計(jì)、包裝紙、包裝箱、包裝盒、各種包裝用的徽章、封

27、套、封緘、粘貼商標(biāo)、膠帶、標(biāo)簽等。 3符號(hào)類(lèi) 公司名稱招牌、建筑物外觀、招牌、室外照明、霓虹燈、出入口指示、櫥窗展示、活動(dòng)式招牌、路標(biāo)、紀(jì)念性建筑、各種標(biāo)示牌、經(jīng)銷(xiāo)商用各類(lèi)業(yè)務(wù)招牌、標(biāo)示。 第37頁(yè)/共47頁(yè)4賬票類(lèi) 訂單、貨單、賬單、委托單、各類(lèi)賬單、申請(qǐng)表、通知書(shū)、確認(rèn)信、契約書(shū)、支票、收據(jù)等。 5文具類(lèi) 專(zhuān)用信箋、便條、信封、文件紙、文件袋、介紹信等。 6服裝類(lèi) 男女職工工作服、制服、工作帽、領(lǐng)帶、領(lǐng)結(jié)、手帕、領(lǐng)帶別針、傘、手提袋等。 7出版印刷類(lèi) 股票、年度報(bào)告書(shū)、公司一覽表、調(diào)查報(bào)告、自辦報(bào)刊、公司簡(jiǎn)歷、概況、獎(jiǎng)狀等。 第38頁(yè)/共47頁(yè)8大眾傳播類(lèi) 報(bào)紙廣告、雜志廣告、電視廣告、廣

28、播廣告、郵寄廣告等。 9SP類(lèi) 產(chǎn)品說(shuō)明書(shū)、廣告?zhèn)鞑?、展示?huì)布置、公關(guān)雜志、促銷(xiāo)宣傳物、視聽(tīng)資料、季節(jié)問(wèn)候卡、明信片、各種POP類(lèi)。 10交通類(lèi) 業(yè)務(wù)用車(chē)、宣傳廣告用車(chē)、貨車(chē)、員工通勤車(chē)等外觀識(shí)別。 11證件類(lèi) 徽章、臂章、名片、識(shí)別證、公司旗幟。第39頁(yè)/共47頁(yè)7.1.2VI設(shè)計(jì)的基本原則 VI的設(shè)計(jì)不是機(jī)械的符號(hào)操作，而是以MI為內(nèi)涵的生動(dòng)表述。所以，VI設(shè)計(jì)應(yīng)多角度、全方位地反映企業(yè)的經(jīng)營(yíng)理念。同時(shí)VI設(shè)計(jì)不是設(shè)計(jì)人員的異想天開(kāi)，而是要求具有較強(qiáng)的可實(shí)施性。 風(fēng)格的統(tǒng)一性原則 強(qiáng)化視覺(jué)沖擊的原則 強(qiáng)調(diào)人性化的原則 增強(qiáng)民族個(gè)性與尊重民族風(fēng)俗的原則 可實(shí)施性原則 符合審美規(guī)律的原則 嚴(yán)格管理的原則第40頁(yè)/共47頁(yè)7.2網(wǎng)絡(luò)形象設(shè)計(jì) 互聯(lián)網(wǎng)的發(fā)展使視覺(jué)文化識(shí)別出現(xiàn)了新的空間和領(lǐng)域。網(wǎng)站的外觀形象設(shè)計(jì)非常重要。網(wǎng)站的形象設(shè)計(jì)表面上看，它不過(guò)是頁(yè)面版式編排的技巧與方法，而實(shí)際上，它不僅是一種技能，更是藝術(shù)與技術(shù)的高度統(tǒng)一。它從企業(yè)整體形象塑造的角度出發(fā)，網(wǎng)站形象的設(shè)計(jì)不僅僅是單一的網(wǎng)頁(yè)設(shè)計(jì)，而應(yīng)該是企業(yè)理念（MI）和企業(yè)行為（BI）在網(wǎng)頁(yè)設(shè)計(jì)中的具體化體現(xiàn)，這決定了網(wǎng)站形象設(shè)計(jì)的原則： 第41頁(yè)/共47頁(yè)1.設(shè)計(jì)主題鮮明一方面通過(guò)對(duì)網(wǎng)頁(yè)主題思想運(yùn)用邏輯規(guī)律進(jìn)行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收；另一方面