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

網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)

字體設(shè)計(jì)基礎(chǔ)

主講：杜敬卿網(wǎng)頁(yè)界面設(shè)計(jì)字體1網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)

字體設(shè)計(jì)基礎(chǔ)

主講：杜敬卿網(wǎng)頁(yè)界面設(shè)第4章網(wǎng)頁(yè)中的字體設(shè)計(jì)

文字，是人類思想感情交流的必然產(chǎn)物。隨著人類文明的進(jìn)步，它由簡(jiǎn)單而復(fù)雜，逐步形成了科學(xué)的完美而規(guī)范化的程式。它既具有人類思想感情的抽象意義與韻調(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è)計(jì)原理網(wǎng)頁(yè)界面設(shè)計(jì)字體2第4章網(wǎng)頁(yè)中的字體設(shè)計(jì)文字，是人類思想感情交流的必然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ā)揮出文字感染力的最大功能。網(wǎng)頁(yè)界面設(shè)計(jì)字體32．風(fēng)格要統(tǒng)一網(wǎng)頁(yè)界面設(shè)計(jì)字體34．字型勻稱字與字之間看起來(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)文字的傳播效果。網(wǎng)頁(yè)界面設(shè)計(jì)字體44．字型勻稱網(wǎng)頁(yè)界面設(shè)計(jì)字體44.2字體與版式設(shè)計(jì)文字在排版設(shè)計(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)。網(wǎng)頁(yè)界面設(shè)計(jì)字體54.2字體與版式設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體53.編排形式文字的編排形式多種多樣4.文字編排的特殊表現(xiàn)文字在版式中扮演著重要的角色，同時(shí)它的形式也是靈活多變的。網(wǎng)頁(yè)界面設(shè)計(jì)字體63.編排形式網(wǎng)頁(yè)界面設(shè)計(jì)字體64.3網(wǎng)頁(yè)中文字顏色的運(yùn)用一般來(lái)說(shuō)，網(wǎng)頁(yè)的背景色應(yīng)該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來(lái)自然、舒暢。而為了追求醒目的視覺(jué)效果，可以為標(biāo)題使用較深的顏色。下面是大家設(shè)計(jì)網(wǎng)頁(yè)和瀏覽的網(wǎng)頁(yè)時(shí)，對(duì)網(wǎng)頁(yè)背景色和文字色彩搭配經(jīng)常采用的色彩，這些顏色可以做正文的底色，也可以做標(biāo)題的底色，再搭配不同的字體網(wǎng)頁(yè)界面設(shè)計(jì)字體74.3網(wǎng)頁(yè)中文字顏色的運(yùn)用網(wǎng)頁(yè)界面設(shè)計(jì)字體7

網(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章網(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è)性，情緒。網(wǎng)頁(yè)界面設(shè)計(jì)字體8網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長(zhǎng)們最希望掌握，也是最難以5.1.2樹(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í)丁的人。首先必須保證內(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)源。網(wǎng)頁(yè)界面設(shè)計(jì)字體95.1.2樹(shù)立網(wǎng)站風(fēng)格網(wǎng)頁(yè)界面設(shè)計(jì)字體9logo是徽標(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)志和門戶。

2.LOGO是網(wǎng)站形象的重要體現(xiàn)。

3.LOGO能使大眾便于選擇。5.2網(wǎng)頁(yè)Logo設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體10logo是徽標(biāo)或者商標(biāo)的英文說(shuō)法，起到對(duì)徽標(biāo)擁有公司的識(shí)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。網(wǎng)頁(yè)界面設(shè)計(jì)字體115.2.2國(guó)際規(guī)范網(wǎng)頁(yè)界面設(shè)計(jì)字體115.2.3設(shè)計(jì)流程1.調(diào)研分析標(biāo)志不僅僅是一個(gè)圖形或文字的組合，它是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類別、經(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)備。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ī)范的傳播。網(wǎng)頁(yè)界面設(shè)計(jì)字體125.2.3設(shè)計(jì)流程網(wǎng)頁(yè)界面設(shè)計(jì)字體125.2.4制作工具和方法目前并沒(méi)有專門制作LOGO的軟件，其實(shí)也并不需要這樣的一種軟件。平時(shí)所使用的圖像處理軟件或者加上動(dòng)畫(huà)制作軟件（如果要做一個(gè)動(dòng)畫(huà)的LOGO的話）都可以很好地勝任這份工作，如FIREWORKS、PHOTOSHOP、EasyGIFAnimator等。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)站的類型、內(nèi)容和風(fēng)格

5.在最小的空間盡可能的表達(dá)出整個(gè)網(wǎng)站、公司的創(chuàng)意，精神等網(wǎng)頁(yè)界面設(shè)計(jì)字體135.2.4制作工具和方法網(wǎng)頁(yè)界面設(shè)計(jì)字體13LOGO的應(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)遵循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.6制作要素網(wǎng)頁(yè)界面設(shè)計(jì)字體14LOGO的應(yīng)用一直是CIS導(dǎo)入的基礎(chǔ)和最直接的表現(xiàn)形式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ù)和平靜，豎線給人的感覺(jué)是高、直率、輕和浮躁感，點(diǎn)給人的感覺(jué)是擴(kuò)張或收縮，容易引起人的注意等。網(wǎng)頁(yè)界面設(shè)計(jì)字體153.內(nèi)涵性網(wǎng)頁(yè)界面設(shè)計(jì)字體155.2.7LOGO設(shè)計(jì)決定品牌命運(yùn)5.2.8logo設(shè)計(jì)分類1.具象表現(xiàn)形式：具象表現(xiàn)是忠實(shí)于客觀物象的自然形態(tài)，對(duì)客觀物象采用經(jīng)過(guò)高度概括與提煉的具象圖形進(jìn)行設(shè)計(jì)的一種表現(xiàn)形式。⑴人體造型的圖形

⑵動(dòng)物造型的圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體165.2.7LOGO設(shè)計(jì)決定品牌命運(yùn)網(wǎng)頁(yè)界面設(shè)計(jì)字體16⑶植物造型的圖形⑷器物造型的圖形⑸自然造型的圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體17⑶植物造型的圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體172.抽象表現(xiàn)形式抽象表現(xiàn)形式是以抽象的圖形符號(hào)來(lái)表達(dá)標(biāo)志的含義，以理性規(guī)劃的幾何圖形或符號(hào)為表現(xiàn)形式。⑴圓形標(biāo)志圖形⑵四方形標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體182.抽象表現(xiàn)形式網(wǎng)頁(yè)界面設(shè)計(jì)字體18⑶三角形的標(biāo)志圖形⑷多邊形標(biāo)志圖形⑸方向形標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體19⑶三角形的標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體193.文字表現(xiàn)形式：文字表現(xiàn)是以標(biāo)志形象與字體組合而成一個(gè)整體。標(biāo)志是一種視覺(jué)圖形，但文字標(biāo)志同時(shí)具有語(yǔ)言特征和語(yǔ)音形式。⑴漢字標(biāo)志圖形⑵拉丁字母標(biāo)志圖形⑶數(shù)字標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體203.文字表現(xiàn)形式：網(wǎng)頁(yè)界面設(shè)計(jì)字體205.3導(dǎo)航欄的統(tǒng)一與變化5.3.1導(dǎo)航欄導(dǎo)航系統(tǒng)的作用：告訴在哪里，可以去哪里，這里有什么，附近有什么，指引瀏覽著下一步的行為。1.導(dǎo)航系統(tǒng)的分類全站、區(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ú)論何時(shí)，用戶都能離開(kāi)指南。⑶允許用戶在指南中前進(jìn)、后退的自由移動(dòng)。⑷指南的設(shè)計(jì)目的是回答問(wèn)題的。⑸截圖應(yīng)該明確，具有把重點(diǎn)功能放大的效果。⑺如果指南有好幾頁(yè)，要有目錄。網(wǎng)頁(yè)界面設(shè)計(jì)字體215.3導(dǎo)航欄的統(tǒng)一與變化網(wǎng)頁(yè)界面設(shè)計(jì)字體214.高級(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ǔ)上。網(wǎng)頁(yè)界面設(shè)計(jì)字體224.高級(jí)設(shè)計(jì)導(dǎo)航方法：網(wǎng)頁(yè)界面設(shè)計(jì)字體22打開(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.2按鈕設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體23打開(kāi)網(wǎng)頁(yè)后，促使瀏覽者繼續(xù)瀏覽，除了主頁(yè)上的內(nèi)容外，按鈕設(shè)計(jì)3.文字表達(dá)在按鈕上使用什么文字表達(dá)給用戶是非常重要的。它應(yīng)當(dāng)簡(jiǎn)短并切中要點(diǎn)，并以動(dòng)詞開(kāi)始，如：注冊(cè)、下載、創(chuàng)建、嘗試等…。4.尺寸問(wèn)題如果它是你最重要的按鈕并且你希望更多的用戶點(diǎn)擊它，那么讓它更醒目些是沒(méi)有壞處的。把這個(gè)按鈕設(shè)計(jì)的比其他按鈕更大些并讓用戶在更多的地方找到并點(diǎn)擊它。5.可“呼吸”的空間按鈕不能和網(wǎng)頁(yè)中的其他元素?cái)D在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。網(wǎng)頁(yè)界面設(shè)計(jì)字體243.文字表達(dá)網(wǎng)頁(yè)界面設(shè)計(jì)字體24

在網(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ì)讓網(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ù)器空間網(wǎng)頁(yè)界面設(shè)計(jì)字體25在網(wǎng)頁(yè)設(shè)計(jì)中，簡(jiǎn)約并不一定等同于極簡(jiǎn)主義者的設(shè)計(jì)美學(xué)。簡(jiǎn)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)約網(wǎng)頁(yè)界面設(shè)計(jì)字體265.4.2怎樣使網(wǎng)站變得簡(jiǎn)約網(wǎng)頁(yè)界面設(shè)計(jì)字體265.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é)合，將平面設(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)。網(wǎng)頁(yè)界面設(shè)計(jì)字體275.5網(wǎng)頁(yè)中的版式設(shè)計(jì)5.5.1版式設(shè)計(jì)在網(wǎng)頁(yè)中的藝術(shù)表現(xiàn)1.高互動(dòng)性、多維性和效果多元性互動(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)的汪洋之中。網(wǎng)頁(yè)界面設(shè)計(jì)字體281.高互動(dòng)性、多維性和效果多元性網(wǎng)頁(yè)界面設(shè)計(jì)字體282.“不可控制”的效果和“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)格方案，以供瀏覽者“DIY”

。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ì)。網(wǎng)頁(yè)界面設(shè)計(jì)字體292.“不可控制”的效果和“DIY”的網(wǎng)頁(yè)版式網(wǎng)頁(yè)界面設(shè)計(jì)字體網(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.2網(wǎng)頁(yè)版式設(shè)計(jì)的發(fā)展趨勢(shì)網(wǎng)頁(yè)界面設(shè)計(jì)字體30網(wǎng)絡(luò)技術(shù)日新月異的發(fā)展給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了新的表現(xiàn)天地。在網(wǎng)絡(luò)世2.設(shè)計(jì)方式將遵循新的要求網(wǎng)頁(yè)像書(shū)籍一樣有文字、有圖片，像電視一樣有動(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)”網(wǎng)頁(yè)界面設(shè)計(jì)字體312.設(shè)計(jì)方式將遵循新的要求網(wǎng)頁(yè)界面設(shè)計(jì)字體31

動(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ù)人在多數(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à)值的信息。這類非主要信息刺激動(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章網(wǎng)頁(yè)動(dòng)畫(huà)網(wǎng)頁(yè)界面設(shè)計(jì)字體32動(dòng)畫(huà)是一種動(dòng)態(tài)的視覺(jué)上的表達(dá)、形式和結(jié)構(gòu)，并隨時(shí)間推移6.1網(wǎng)絡(luò)動(dòng)畫(huà)的分類6.1.1FLAS動(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ú)損耗壓縮效果不如JPEG格式或PNG格式。GIF支持有限的透明度，沒(méi)有半透明效果或褪色效果網(wǎng)頁(yè)界面設(shè)計(jì)字體336.1網(wǎng)絡(luò)動(dòng)畫(huà)的分類網(wǎng)頁(yè)界面設(shè)計(jì)字體336.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ò)專業(yè)軟件壓縮轉(zhuǎn)換成一個(gè)完全適合在網(wǎng)頁(yè)上流暢運(yùn)行的flash文件。三維flash在網(wǎng)頁(yè)上運(yùn)行很流暢，瀏覽者無(wú)需下載插件，打開(kāi)網(wǎng)頁(yè)就可看到產(chǎn)品演示。網(wǎng)頁(yè)界面設(shè)計(jì)字體346.1.3三維動(dòng)畫(huà)網(wǎng)頁(yè)界面設(shè)計(jì)字體346.2網(wǎng)絡(luò)動(dòng)畫(huà)的制作6.2.1常用軟件制作動(dòng)畫(huà)的軟件包括：MayaSoftimage3DmaxLIGHTWAVEAlias是三維動(dòng)畫(huà)制作軟件Animator、ANIMO、TOONZ、RETASPRO商業(yè)二維動(dòng)畫(huà)TOOBBOOMSTUDIO、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ò)插件轉(zhuǎn)為二維動(dòng)畫(huà)。網(wǎng)頁(yè)界面設(shè)計(jì)字體356.2網(wǎng)絡(luò)動(dòng)畫(huà)的制作網(wǎng)頁(yè)界面設(shè)計(jì)字體356.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)格，貫穿全站。網(wǎng)頁(yè)界面設(shè)計(jì)字體366.2.2傳輸速度網(wǎng)頁(yè)界面設(shè)計(jì)字體366.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．不要干擾在重要信息上的注意力。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ì)“近視”。網(wǎng)頁(yè)界面設(shè)計(jì)字體376.3網(wǎng)絡(luò)動(dòng)畫(huà)的指導(dǎo)方針網(wǎng)頁(yè)界面設(shè)計(jì)字體37第7章網(wǎng)絡(luò)形象設(shè)計(jì)(IVIS)與廣告?zhèn)髅?.1視覺(jué)識(shí)別系統(tǒng)

VI（VisualIdentity），通譯為視覺(jué)識(shí)別，是CIS系統(tǒng)中最具傳播力和感染力的層面。7.1.1VI應(yīng)用要素系統(tǒng)設(shè)計(jì)類別1．待客用項(xiàng)目類洽談會(huì)、會(huì)客廳、會(huì)議廳家具、煙灰缸、坐墊、招待餐飲具、客戶用文具。2．商品及包裝類商品包裝設(shè)計(jì)、包裝紙、包裝箱、包裝盒、各種包裝用的徽章、封套、封緘、粘貼商標(biāo)、膠帶、標(biāo)簽等。3．符號(hào)類公司名稱招牌、建筑物外觀、招牌、室外照明、霓虹燈、出入口指示、櫥窗展示、活動(dòng)式招牌、路標(biāo)、紀(jì)念性建筑、各種標(biāo)示牌、經(jīng)銷商用各類業(yè)務(wù)招牌、標(biāo)示。網(wǎng)頁(yè)界面設(shè)計(jì)字體38第7章網(wǎng)絡(luò)形象設(shè)計(jì)(IVIS)與廣告?zhèn)髅?.1視覺(jué)識(shí)別系統(tǒng)4．賬票類訂單、貨單、賬單、委托單、各類賬單、申請(qǐng)表、通知書(shū)、確認(rèn)信、契約書(shū)、支票、收據(jù)等。5．文具類專用信箋、便條、信封、文件紙、文件袋、介紹信等。6．服裝類男女職工工作服、制服、工作帽、領(lǐng)帶、領(lǐng)結(jié)、手帕、領(lǐng)帶別針、傘、手提袋等。7．出版印刷類股票、年度報(bào)告書(shū)、公司一覽表、調(diào)查報(bào)告、自辦報(bào)刊、公司簡(jiǎn)歷、概況、獎(jiǎng)狀等。網(wǎng)頁(yè)界面設(shè)計(jì)字體394．賬票類網(wǎng)頁(yè)界面設(shè)計(jì)字體398．大眾傳播類報(bào)紙廣告、雜志廣告、電視廣告、廣播廣告、郵寄廣告等。9．SP類產(chǎn)品說(shuō)明書(shū)、廣告?zhèn)鞑?、展示?huì)布置、公關(guān)雜志、促銷宣傳物、視聽(tīng)資料、季節(jié)問(wèn)候卡、明信片、各種POP類。10．交通類業(yè)務(wù)用車、宣傳廣告用車、貨車、員工通勤車等外觀識(shí)別。11．證件類徽章、臂章、名片、識(shí)別證、公司旗幟。網(wǎng)頁(yè)界面設(shè)計(jì)字體408．大眾傳播類網(wǎng)頁(yè)界面設(shè)計(jì)字體407.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)格管理的原則網(wǎng)頁(yè)界面設(shè)計(jì)字體417.1.2VI設(shè)計(jì)的基本原則網(wǎng)頁(yè)界面設(shè)計(jì)字體417.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ì)的原則：

網(wǎng)頁(yè)界面設(shè)計(jì)字體427.2網(wǎng)絡(luò)形象設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體421.設(shè)計(jì)主題鮮明一方面通過(guò)對(duì)網(wǎng)頁(yè)主題思想運(yùn)用邏輯規(guī)律進(jìn)行條理性處理，使之符合瀏覽者獲取信息的心理需求和邏輯方式，讓瀏覽者快速地理解和吸收；另一方面通過(guò)對(duì)網(wǎng)頁(yè)構(gòu)成元素運(yùn)用藝術(shù)的形式美法則進(jìn)行條理性處理，更好地營(yíng)造符合設(shè)計(jì)目的的視覺(jué)環(huán)境，突出主題，增強(qiáng)瀏覽者對(duì)網(wǎng)頁(yè)的注意力，增進(jìn)對(duì)網(wǎng)頁(yè)內(nèi)容的理解。2．形式與內(nèi)容的統(tǒng)一。任何設(shè)計(jì)都有一定的形式和內(nèi)容，內(nèi)容決定形式，形式又反作用于內(nèi)容，優(yōu)秀的設(shè)計(jì)應(yīng)該是形式與內(nèi)容的完美統(tǒng)一。

3．網(wǎng)站形象的整體性。設(shè)計(jì)時(shí)強(qiáng)調(diào)其整體性，可以使瀏覽者更快捷、更準(zhǔn)確、更全面地認(rèn)識(shí)它、掌握它，并給人一種內(nèi)部有機(jī)聯(lián)系、外部和諧完整的美感。網(wǎng)頁(yè)界面設(shè)計(jì)字體431.設(shè)計(jì)主題鮮明網(wǎng)頁(yè)界面設(shè)計(jì)字體437.3網(wǎng)絡(luò)廣告廣告是網(wǎng)頁(yè)設(shè)計(jì)的重要部分，對(duì)于依靠廣告收入的網(wǎng)站所有者和企業(yè)，這是顯而易見(jiàn)的。沒(méi)有足夠或者正確的空間給廣告，將給業(yè)務(wù)帶來(lái)很大的負(fù)面影響，一旦出現(xiàn)這種情況，為了銷售業(yè)績(jī)就會(huì)企圖移動(dòng)或開(kāi)辟新廣告位，從而導(dǎo)致網(wǎng)站看上去很尷尬而且無(wú)組織，因?yàn)檫@些位置沒(méi)有在起初的設(shè)計(jì)過(guò)程中被考慮進(jìn)來(lái)。1．在線廣告的難題。2．網(wǎng)絡(luò)廣告如何影響網(wǎng)站的設(shè)計(jì)?3．網(wǎng)絡(luò)廣告布局和間距。4．顏色。5．流動(dòng)。網(wǎng)頁(yè)界面設(shè)計(jì)字體447.3網(wǎng)絡(luò)廣告網(wǎng)頁(yè)界面設(shè)計(jì)字體447.4如何創(chuàng)建內(nèi)容豐富的企業(yè)網(wǎng)站的網(wǎng)頁(yè)創(chuàng)建內(nèi)容豐富的網(wǎng)頁(yè)，意味著增加以文本為主的欄目，以及在原有頁(yè)面中配上大量的與該網(wǎng)站的關(guān)鍵詞相關(guān)的文本文字。這樣才有助于提升網(wǎng)站的排名，增加網(wǎng)頁(yè)被搜索引擎抓取的機(jī)會(huì)，從而更容易讓人找到。幾種常用方法來(lái)創(chuàng)建內(nèi)容豐富的網(wǎng)頁(yè)：1.背景信息。2.產(chǎn)品信息。3.常見(jiàn)問(wèn)題(FAQ)或問(wèn)與答(Q&A)。4.發(fā)布專業(yè)文章。5.友情鏈接。網(wǎng)頁(yè)界面設(shè)計(jì)字體457.4如何創(chuàng)建內(nèi)容豐富的企業(yè)網(wǎng)站的網(wǎng)頁(yè)網(wǎng)頁(yè)界面設(shè)計(jì)字體45第8章經(jīng)典網(wǎng)頁(yè)解析8.1產(chǎn)品類網(wǎng)頁(yè)分析8.2創(chuàng)意類網(wǎng)頁(yè)分析8.3卡通類網(wǎng)頁(yè)分析8.4公司網(wǎng)頁(yè)分析8.5網(wǎng)頁(yè)主色調(diào)分析8.6欣賞網(wǎng)頁(yè)8.7常見(jiàn)的網(wǎng)頁(yè)策劃、設(shè)計(jì)、開(kāi)發(fā)錯(cuò)誤1、導(dǎo)航菜單使用圖片、FLASH。2、不恰當(dāng)?shù)厥褂脠D片。3、內(nèi)容里特殊字體的運(yùn)用。4、新窗口打開(kāi)。5、無(wú)實(shí)際意義的特效。網(wǎng)頁(yè)界面設(shè)計(jì)字體46第8章經(jīng)典網(wǎng)頁(yè)解析8.1產(chǎn)品類網(wǎng)頁(yè)分析網(wǎng)頁(yè)界面設(shè)計(jì)字體46、內(nèi)容滾動(dòng)。7、用戶難以獲取自己想要的內(nèi)容。8、文件名命名不規(guī)范。9、長(zhǎng)篇文章未設(shè)置分頁(yè)。10、顏色搭配錯(cuò)誤，網(wǎng)頁(yè)難于閱讀。11、沒(méi)有返回指向。12、顯眼的點(diǎn)擊計(jì)數(shù)器。13、使用框架。14、不恰當(dāng)?shù)厥褂寐曇簟?5、兼容性不佳。16、急于發(fā)布網(wǎng)站。17、發(fā)布網(wǎng)站后未登錄搜索引擎。18、不留空白。19、缺乏互動(dòng)性。網(wǎng)頁(yè)界面設(shè)計(jì)字體476、內(nèi)容滾動(dòng)。網(wǎng)頁(yè)界面設(shè)計(jì)字體47網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)

字體設(shè)計(jì)基礎(chǔ)

主講：杜敬卿網(wǎng)頁(yè)界面設(shè)計(jì)字體48網(wǎng)頁(yè)界面設(shè)計(jì)基礎(chǔ)

字體設(shè)計(jì)基礎(chǔ)

主講：杜敬卿網(wǎng)頁(yè)界面設(shè)第4章網(wǎng)頁(yè)中的字體設(shè)計(jì)

文字，是人類思想感情交流的必然產(chǎn)物。隨著人類文明的進(jìn)步，它由簡(jiǎn)單而復(fù)雜，逐步形成了科學(xué)的完美而規(guī)范化的程式。它既具有人類思想感情的抽象意義與韻調(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è)計(jì)原理網(wǎng)頁(yè)界面設(shè)計(jì)字體49第4章網(wǎng)頁(yè)中的字體設(shè)計(jì)文字，是人類思想感情交流的必然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ā)揮出文字感染力的最大功能。網(wǎng)頁(yè)界面設(shè)計(jì)字體502．風(fēng)格要統(tǒng)一網(wǎng)頁(yè)界面設(shè)計(jì)字體34．字型勻稱字與字之間看起來(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)文字的傳播效果。網(wǎng)頁(yè)界面設(shè)計(jì)字體514．字型勻稱網(wǎng)頁(yè)界面設(shè)計(jì)字體44.2字體與版式設(shè)計(jì)文字在排版設(shè)計(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)。網(wǎng)頁(yè)界面設(shè)計(jì)字體524.2字體與版式設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體53.編排形式文字的編排形式多種多樣4.文字編排的特殊表現(xiàn)文字在版式中扮演著重要的角色，同時(shí)它的形式也是靈活多變的。網(wǎng)頁(yè)界面設(shè)計(jì)字體533.編排形式網(wǎng)頁(yè)界面設(shè)計(jì)字體64.3網(wǎng)頁(yè)中文字顏色的運(yùn)用一般來(lái)說(shuō)，網(wǎng)頁(yè)的背景色應(yīng)該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來(lái)自然、舒暢。而為了追求醒目的視覺(jué)效果，可以為標(biāo)題使用較深的顏色。下面是大家設(shè)計(jì)網(wǎng)頁(yè)和瀏覽的網(wǎng)頁(yè)時(shí)，對(duì)網(wǎng)頁(yè)背景色和文字色彩搭配經(jīng)常采用的色彩，這些顏色可以做正文的底色，也可以做標(biāo)題的底色，再搭配不同的字體網(wǎng)頁(yè)界面設(shè)計(jì)字體544.3網(wǎng)頁(yè)中文字顏色的運(yùn)用網(wǎng)頁(yè)界面設(shè)計(jì)字體7

網(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章網(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ū)別之一?；蛘呱剩蛘呒夹g(shù)，或者是交互方式，能讓瀏覽者明確分辨出網(wǎng)站的獨(dú)有性。風(fēng)格是有人性的。通過(guò)網(wǎng)站的外表、內(nèi)容、文字、交流可以概括出一個(gè)站點(diǎn)的個(gè)性，情緒。網(wǎng)頁(yè)界面設(shè)計(jì)字體55網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是站長(zhǎng)們最希望掌握，也是最難以5.1.2樹(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í)丁的人。首先必須保證內(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)源。網(wǎng)頁(yè)界面設(shè)計(jì)字體565.1.2樹(shù)立網(wǎng)站風(fēng)格網(wǎng)頁(yè)界面設(shè)計(jì)字體9logo是徽標(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)志和門戶。

2.LOGO是網(wǎng)站形象的重要體現(xiàn)。

3.LOGO能使大眾便于選擇。5.2網(wǎng)頁(yè)Logo設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體57logo是徽標(biāo)或者商標(biāo)的英文說(shuō)法，起到對(duì)徽標(biāo)擁有公司的識(shí)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。網(wǎng)頁(yè)界面設(shè)計(jì)字體585.2.2國(guó)際規(guī)范網(wǎng)頁(yè)界面設(shè)計(jì)字體115.2.3設(shè)計(jì)流程1.調(diào)研分析標(biāo)志不僅僅是一個(gè)圖形或文字的組合，它是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類別、經(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)備。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ī)范的傳播。網(wǎng)頁(yè)界面設(shè)計(jì)字體595.2.3設(shè)計(jì)流程網(wǎng)頁(yè)界面設(shè)計(jì)字體125.2.4制作工具和方法目前并沒(méi)有專門制作LOGO的軟件，其實(shí)也并不需要這樣的一種軟件。平時(shí)所使用的圖像處理軟件或者加上動(dòng)畫(huà)制作軟件（如果要做一個(gè)動(dòng)畫(huà)的LOGO的話）都可以很好地勝任這份工作，如FIREWORKS、PHOTOSHOP、EasyGIFAnimator等。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)站的類型、內(nèi)容和風(fēng)格

5.在最小的空間盡可能的表達(dá)出整個(gè)網(wǎng)站、公司的創(chuàng)意，精神等網(wǎng)頁(yè)界面設(shè)計(jì)字體605.2.4制作工具和方法網(wǎng)頁(yè)界面設(shè)計(jì)字體13LOGO的應(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)遵循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.6制作要素網(wǎng)頁(yè)界面設(shè)計(jì)字體61LOGO的應(yīng)用一直是CIS導(dǎo)入的基礎(chǔ)和最直接的表現(xiàn)形式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ù)和平靜，豎線給人的感覺(jué)是高、直率、輕和浮躁感，點(diǎn)給人的感覺(jué)是擴(kuò)張或收縮，容易引起人的注意等。網(wǎng)頁(yè)界面設(shè)計(jì)字體623.內(nèi)涵性網(wǎng)頁(yè)界面設(shè)計(jì)字體155.2.7LOGO設(shè)計(jì)決定品牌命運(yùn)5.2.8logo設(shè)計(jì)分類1.具象表現(xiàn)形式：具象表現(xiàn)是忠實(shí)于客觀物象的自然形態(tài)，對(duì)客觀物象采用經(jīng)過(guò)高度概括與提煉的具象圖形進(jìn)行設(shè)計(jì)的一種表現(xiàn)形式。⑴人體造型的圖形

⑵動(dòng)物造型的圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體635.2.7LOGO設(shè)計(jì)決定品牌命運(yùn)網(wǎng)頁(yè)界面設(shè)計(jì)字體16⑶植物造型的圖形⑷器物造型的圖形⑸自然造型的圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體64⑶植物造型的圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體172.抽象表現(xiàn)形式抽象表現(xiàn)形式是以抽象的圖形符號(hào)來(lái)表達(dá)標(biāo)志的含義，以理性規(guī)劃的幾何圖形或符號(hào)為表現(xiàn)形式。⑴圓形標(biāo)志圖形⑵四方形標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體652.抽象表現(xiàn)形式網(wǎng)頁(yè)界面設(shè)計(jì)字體18⑶三角形的標(biāo)志圖形⑷多邊形標(biāo)志圖形⑸方向形標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體66⑶三角形的標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體193.文字表現(xiàn)形式：文字表現(xiàn)是以標(biāo)志形象與字體組合而成一個(gè)整體。標(biāo)志是一種視覺(jué)圖形，但文字標(biāo)志同時(shí)具有語(yǔ)言特征和語(yǔ)音形式。⑴漢字標(biāo)志圖形⑵拉丁字母標(biāo)志圖形⑶數(shù)字標(biāo)志圖形網(wǎng)頁(yè)界面設(shè)計(jì)字體673.文字表現(xiàn)形式：網(wǎng)頁(yè)界面設(shè)計(jì)字體205.3導(dǎo)航欄的統(tǒng)一與變化5.3.1導(dǎo)航欄導(dǎo)航系統(tǒng)的作用：告訴在哪里，可以去哪里，這里有什么，附近有什么，指引瀏覽著下一步的行為。1.導(dǎo)航系統(tǒng)的分類全站、區(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ú)論何時(shí)，用戶都能離開(kāi)指南。⑶允許用戶在指南中前進(jìn)、后退的自由移動(dòng)。⑷指南的設(shè)計(jì)目的是回答問(wèn)題的。⑸截圖應(yīng)該明確，具有把重點(diǎn)功能放大的效果。⑺如果指南有好幾頁(yè)，要有目錄。網(wǎng)頁(yè)界面設(shè)計(jì)字體685.3導(dǎo)航欄的統(tǒng)一與變化網(wǎng)頁(yè)界面設(shè)計(jì)字體214.高級(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ǔ)上。網(wǎng)頁(yè)界面設(shè)計(jì)字體694.高級(jí)設(shè)計(jì)導(dǎo)航方法：網(wǎng)頁(yè)界面設(shè)計(jì)字體22打開(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.2按鈕設(shè)計(jì)網(wǎng)頁(yè)界面設(shè)計(jì)字體70打開(kāi)網(wǎng)頁(yè)后，促使瀏覽者繼續(xù)瀏覽，除了主頁(yè)上的內(nèi)容外，按鈕設(shè)計(jì)3.文字表達(dá)在按鈕上使用什么文字表達(dá)給用戶是非常重要的。它應(yīng)當(dāng)簡(jiǎn)短并切中要點(diǎn)，并以動(dòng)詞開(kāi)始，如：注冊(cè)、下載、創(chuàng)建、嘗試等…。4.尺寸問(wèn)題如果它是你最重要的按鈕并且你希望更多的用戶點(diǎn)擊它，那么讓它更醒目些是沒(méi)有壞處的。把這個(gè)按鈕設(shè)計(jì)的比其他按鈕更大些并讓用戶在更多的地方找到并點(diǎn)擊它。5.可“呼吸”的空間按鈕不能和網(wǎng)頁(yè)中的其他元素?cái)D在一起。它需要充足的margin(外邊距)才能更加突出，也需要更多的padding(內(nèi)邊距)才能讓文字更容易閱讀。網(wǎng)頁(yè)界面設(shè)計(jì)字體713.文字表達(dá)網(wǎng)頁(yè)界面設(shè)計(jì)字體24

在網(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ì)讓網(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ù)器空間網(wǎng)頁(yè)界面設(shè)計(jì)字體72在網(wǎng)頁(yè)設(shè)計(jì)中，簡(jiǎn)約并不一定等同于極簡(jiǎn)主義者的設(shè)計(jì)美學(xué)。簡(jiǎn)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)約網(wǎng)頁(yè)界面設(shè)計(jì)字體735.4.2怎樣使網(wǎng)站變得簡(jiǎn)約網(wǎng)頁(yè)界面設(shè)計(jì)字體265.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é)合，將平面設(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)。網(wǎng)頁(yè)界面設(shè)計(jì)字體745.5網(wǎng)頁(yè)中的版式設(shè)計(jì)5.5.1版式設(shè)計(jì)在網(wǎng)頁(yè)中的藝術(shù)表現(xiàn)1.高互動(dòng)性、多維性和效果多元性互動(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)的汪洋之中。網(wǎng)頁(yè)界面設(shè)計(jì)字體751.高互動(dòng)性、多維性和效果多元性網(wǎng)頁(yè)界面設(shè)計(jì)字體282.“不可控制”的效果和“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)格方案，以供瀏覽者“DIY”

。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ì)。網(wǎng)頁(yè)界面設(shè)計(jì)字體762.“不可控制”的效果和“DIY”的網(wǎng)頁(yè)版式網(wǎng)頁(yè)界面設(shè)計(jì)字體網(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.2網(wǎng)頁(yè)版式設(shè)計(jì)的發(fā)展趨勢(shì)網(wǎng)頁(yè)界面設(shè)計(jì)字體77網(wǎng)絡(luò)技術(shù)日新月異的發(fā)展給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了新的表現(xiàn)天地。在網(wǎng)絡(luò)世2.設(shè)計(jì)方式將遵循新的要求網(wǎng)頁(yè)像書(shū)籍一樣有文字、有圖片，像電視一樣有動(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)”網(wǎng)頁(yè)界面設(shè)計(jì)字體782.設(shè)計(jì)方式將遵循新的要求網(wǎng)頁(yè)界面設(shè)計(jì)字體31

動(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ù)人在多數(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à)值的信息。這類非主要信息刺激動(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章網(wǎng)頁(yè)動(dòng)畫(huà)網(wǎng)頁(yè)界面設(shè)計(jì)字體79動(dòng)畫(huà)是一種動(dòng)態(tài)的視覺(jué)上的表達(dá)、形式和結(jié)構(gòu)，并隨時(shí)間推移6.1網(wǎng)絡(luò)動(dòng)畫(huà)的分類6.1.1FLAS動(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ú)損耗壓縮效果不如JPEG格式或PNG格式。GIF支持有限的透明度，沒(méi)有半透明效果或褪色效果網(wǎng)頁(yè)界面設(shè)計(jì)字體806.1網(wǎng)絡(luò)動(dòng)畫(huà)的分類網(wǎng)頁(yè)界面設(shè)計(jì)字體336.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ò)專業(yè)軟件壓縮轉(zhuǎn)換成一個(gè)完全適合在網(wǎng)頁(yè)上流暢運(yùn)行的flash文件。三維flash在網(wǎng)頁(yè)上運(yùn)行很流暢，瀏覽者無(wú)需下載插件，打開(kāi)網(wǎng)頁(yè)就可看到產(chǎn)品演示。網(wǎng)頁(yè)界面設(shè)計(jì)字體816.1.3三維動(dòng)畫(huà)網(wǎng)頁(yè)界面設(shè)計(jì)字體346.2網(wǎng)絡(luò)動(dòng)畫(huà)的制作6.2.1常用軟件制作動(dòng)畫(huà)的軟件包括：MayaSoftimage3DmaxLIGHTWAVEAlias是三維動(dòng)畫(huà)制作軟件Animator、ANIMO、TOONZ、RETASPRO商業(yè)二維動(dòng)畫(huà)TOOBBOOMSTUDIO、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ò)插件轉(zhuǎn)為二維動(dòng)畫(huà)。網(wǎng)頁(yè)界面設(shè)計(jì)字體826.2網(wǎng)絡(luò)動(dòng)畫(huà)的制作網(wǎng)頁(yè)界面設(shè)計(jì)字體356.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)格，貫穿全站。網(wǎng)頁(yè)界面設(shè)計(jì)字體836.2.2傳輸速度網(wǎng)頁(yè)界面設(shè)計(jì)字體366.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．不要干擾在重要信息上的注意力。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ì)“近視”。網(wǎng)頁(yè)界面設(shè)計(jì)字體846.3網(wǎng)絡(luò)動(dòng)畫(huà)的指導(dǎo)方針網(wǎng)頁(yè)界面設(shè)計(jì)字體37第7章網(wǎng)絡(luò)形象設(shè)計(jì)(IVIS)與廣告?zhèn)髅?.1視覺(jué)識(shí)別系統(tǒng)

VI（VisualIdentity），通譯為視覺(jué)識(shí)別，是CIS系統(tǒng)中最具傳播力和感染力的層面。7.1.1VI應(yīng)用要素系統(tǒng)設(shè)計(jì)類別1．待客用項(xiàng)目類洽談會(huì)、會(huì)客廳、會(huì)議廳家具、煙灰