1、網絡信息制作與發布第四章 Web藝術設計7/19/2022第四章 Web藝術設計主要內容： 本章主要介紹Web設計所需的美學原理和設計法則，具體涉及到影響網頁觀感的色彩、文字、圖像、導航元件以及版面設計等方面的知識。7/19/20224.1 Web設計環境 在進行網頁設計和制作的過程中，了解網絡的相關技術以及訪問者的外在條件（如訪問者的訪問速度、計算機平臺、使用何種瀏覽器等）是十分重要的。這些因素將影響你設計的Web文件大小和設計復雜程度。7/19/20224.1 Web設計環境4.1.1 Web的技術環境1.關于瀏覽器的技術2.關于屏幕分辨率的技術3.關于帶寬的技術7/19/2022關于瀏覽

2、器的技術 網頁設計者首先面臨的問題是如何使網頁在不同瀏覽器中都能正常顯示。由于每種瀏覽器對HTML文件標簽的解釋都不同，導致對HTML文件的顯示方式的解釋存在差異。因此設計者應盡量在多種瀏覽器環境中測試自己的工作，以便對用戶使用的瀏覽器提出要求或說明。7/19/2022關于瀏覽器的技術（1）采用可兼容的技術 盡量使設計的網頁可以在各種瀏覽器中使用。不使用最新版本的HTML規范編碼，便于與各種版本的瀏覽器兼容。（2）采用最新的技術設計 這就要求用戶采用最新的瀏覽器，還要有能夠顯示特殊媒體類型的增強插件，這樣才能跟上設計者的步伐。（3）采用對用戶指定特定瀏覽器的方式7/19/2022關于瀏覽器的技

3、術 總之，在對瀏覽器的選擇上，可以采用一種能促進漸進開發的策略。 例如：在創建站點時使用前一個舊版本的HTML來編碼，然后慢慢向其中加入一些增強特性，不斷向最新版本靠近，使用戶使用新舊版本的瀏覽器都可訪問。若要加入一些需要插件支持的動畫或特殊效果，則要使用大多數瀏覽器都支持的開發工具。7/19/2022關于屏幕分辨率的技術 顯示器的屏幕分辨率：是指顯示器屏幕所能顯示的象素總數，這一指標是由顯示器和顯示卡的性能決定的。通常用水平和垂直方向的象素數目的乘積表示。如：800600。 隨著計算機顯示器和顯示卡性能的提高，在網頁設計中，很多人已經將800600作為基本的分辨率。7/19/2022關于寬帶

4、的技術 因此網站設計者應在不同的連接速度下進行瀏覽測試，以獲得在不同的連接速度下瀏覽網頁的真實情況。 在設計時應盡量簡化頁面,少使用圖形或將圖形大小限制在1015KB范圍之內。7/19/20224.1 Web設計環境4.1.2 Web的媒體環境規劃Web站點時應考慮以下幾點：1.計算機屏幕的形狀2.要有足夠的對比度以利于用戶閱讀3.屏幕分辨率比印刷品低得多7/19/20224.1 Web設計環境4.1.3 Web的設計流程1. Web設計的兩個階段2. Web設計的一般步驟3. Web站點的主要類型7/19/2022Web設計的兩個階段 Web的設計流程通常包含兩個階段： 第一階段：了解客戶需

5、求，然后根據不 同的網站類型進行創意，同時與技術人 員溝通，了解設計所需的技術難度，確 定方案。 第二階段：制作出頁面樣例，與客戶交 流征求意見，然后修改，直到確認，由 制作人員協助完成設計。7/19/2022Web設計的一般步驟1.首先要明確網站的性質和目的。2.要分析網站的用戶。3.確定頁面的結構和框架。4.應在不同機器、瀏覽器和不同速度下測試網頁，及早查處所出現的問題。 7/19/20224.2 Web設計元素4.2.1 色彩1. 色彩基礎2. 色彩感覺3. 色調和色彩搭配4. 計算機色彩5. 網頁色彩搭配的原則6. 搭配技巧7/19/2022色彩基礎1.顏色的產生2.色彩的屬性 色相、

6、飽和度、明度（亮度）3.色彩的三原色和色環 三原色：紅、黃、藍 色環： 暖色、中性色、冷色 同類色、鄰近色、對比色、互補色7/19/2022色彩感覺1.心理感覺：冷暖、輕重、軟硬、華麗樸素、積極消極2.顏色的聯想7/19/2022色調和色彩的搭配1.色調2.配色 色相搭配 明度搭配 飽和度搭配 整體色調7/19/2022計算機色彩1.色彩模式：RGB、CMYK、Lab2.色深：顏色數2色深位數3.混色4.網絡安全色： 256287/19/2022網頁色彩搭配的原則1.色彩的合理性2.色彩的獨特性3.色彩的藝術性7/19/2022搭配技巧1.非彩色的搭配2.彩色的搭配3.網頁色彩掌握的過程 單色

7、五彩繽紛標準色單色7/19/20224.2 Web設計元素4.2.2 文本 網頁中的文本有兩種狀態：HTML文本和圖形文件格式的文字圖像。1. 字體2. 字號和字距7/19/2022字體 網頁字體也是網頁的主要組成部分，是信息的重要載體。 字體的分類：1. 英文字體2. 中文字體3. 襯線和字族7/19/2022字號和字距字號的大小有以下三種標定方法：號數制：從初號、一號到八號，有16種之多。號數越大，字體越小。級數制：從8級到96級，級數越大，字體越大。點數制：從5磅到72磅，有21種之多。磅數越大，字體越大。點數制是世界流行的計算字體的標準單位。7/19/2022字號和字距網頁文字的字號變

8、化宜少不宜多。選擇少量的字體和字號會使頁面看起來顯得更干凈。如果在網頁設計中使用了一種用戶沒有安裝的字體，則瀏覽器將用缺省字體顯示。（PC中的英文缺省字體是：Time New Roman）。7/19/2022字號和字距字距和行距 字距:字與字之間的距離。行距：行與行之間的距離。字距與行距之間的比例關系：行距至少要大于字距。加寬字距和行距有輕松、疏朗之感。行與行之間要考慮適當增加空白，以便閱讀。7/19/2022字號和字距 文字塊的形狀由編排形式決定，在版面設計中，主要有如下編排方式：兩邊對齊左（或右）對齊中間對齊圖文繞排7/19/2022字號和字距網頁中每一頁的文字應盡量完整每一頁應有清晰的標

9、題盡量少用閃爍字在文字使用上要特別注意易讀性和趣味性一般網頁文字字體是穩定的，閱讀要求識別輕松，濃淡適宜。7/19/2022小結光的三原色是什么？P108顏色分為哪兩種？P179 色彩的屬性是什么？P179WINDOWS的操作系統中缺省的中文字體有哪些？P1917/19/20224.2 Web設計元素4.2.3 圖像與VI設計1. 網頁圖像和文件格式2. 選擇圖形工具3. 網頁中的圖像4. 網頁版面中圖像的編排5. 視覺標識設計7/19/2022網頁圖像和文件格式數字圖像類型1.位圖：又稱為柵格圖像。是用小方形 柵格（即象素）組成的圖像，與分辨 率有關。2.矢量圖：由矢量定義的直線或曲線組 成

10、的圖像。矢量圖形與分辨率無關。7/19/2022網頁圖像和文件格式圖像文件格式基礎知識1.GIF2.JPG3.PNG3.BMP7/19/2022網頁圖像和文件格式 GIF是為網絡圖形傳送而設計的，采用了無損壓縮技術，色深為8位。GIF還有兩個重要特點：透明和交錯顯示。 JPG是適合于照片和連續灰度圖像的最佳格式，色深24位（真彩色）。適合具有豐富細節的圖片。 PNG（便攜式網絡圖形格式）是專為Web設計，但由于缺乏瀏覽器支持，一直未能普及。7/19/2022網頁圖像和文件格式 BMP格式是Windows中的標準圖像文件格式，有壓縮和不壓縮兩種形式。 TIF最早是為了存儲掃描儀圖像而設計。也是P

11、C中使用最廣泛的圖像文件格式。 TGA是Truevision公司為其顯卡開發的一種圖像文件格式，現已成為數字化圖像，7/19/2022網頁圖像和文件格式Web圖像的應用： 統一的格式 速度的限制7/19/2022選擇圖形圖像設計工具Adobe公司的PhotoshopAdobe的ImageReady是一個微型的Photoshop版本，后來被集成到了Photoshop中。Adobe的Illustrator是一個高端的繪圖工具。Macromedia公司的Firework是一款集圖形處理和文本處理于一體的功能強大的應用軟件。7/19/2022網頁中的圖像照片類繪畫類7/19/2022網頁版面中圖像的編

12、排（1）圖像的選擇與剪裁（2）圖像形狀的變化（3）虛實的變化7/19/2022視覺標識設計（VI設計） 視覺標識（VI：Visual Identity）是指通過視覺語言的運用來樹立形象和傳播信息。其應用一直是CIS（Corporate Identity System：企業識別系統）的基礎和最直接的表現形式。CIS的策劃和運作往往以VI來表現，是CIS的一部分。7/19/2022視覺標識設計（VI設計）1.設計網站的標志2.選擇網站的標準色彩3.選擇網站的標準字體4.構思網站的廣告詞7/19/20224.2 Web設計元素4.2.4 動畫 網頁中的插圖可以像電視動畫一樣真實生動，有人用情景化設計

13、來描繪將來的網頁設計。 無論人或動物的視覺，總是先注意到運動著的東西。因此，很多廣告公司都將自己的網絡廣告做成動畫的形式，以便獲得最大的宣傳效果。7/19/2022Web動畫的發展狀況（1）動畫的初級階段（2）無處不在的GIF89a（3）動畫的新貴Shockware（4）用Java來實現動畫（5）Flash動畫和Streaming技術7/19/2022動畫制作的工具GIF AnimationAdobe Image ReadyFlash7/19/2022動畫原理 傳統的動畫是由很多靜態畫面序列連續地播放形成的。計算機的動畫和傳統的動畫原理基本上是一樣的，只是有些名詞叫法不同。幀（Frame）：每

14、個動畫單元幀速率（fps：Frame per second，指一秒鐘動畫所包含的幀數）是動畫概念的一項重要指標7/19/2022網頁中的動畫廣告 廣告的任務是在最短的時間內傳達一個簡潔明了的信息或意念，因此網絡動畫廣告的創作比一般意義上的故事情節動畫更為自由。7/19/20224.2 Web設計元素4.2.5 視頻和音頻 Web多媒體在信息的傳遞中扮演著重要和獨特的角色，因此一個網頁設計師要時刻跟蹤這些技術的發展狀態，對多媒體的應用應有比較理智的認識。 7/19/2022音頻網上使用的音頻格式文件大部分經過壓縮，主要有：MIDI格式RA（Real Audio）格式MP3 （MPEG1 Play

15、er 3）格式MP4格式：VQF格式：WMA格式：WAV（Wave From Audio File）格式：AIF格式：AU格式：7/19/2022視頻 計算機上使用的是數字視頻（電視電影視頻是模擬信號），它是將傳統的模擬視頻片斷捕捉并進行轉換而成（如：VCD），下面介紹有關視頻格式和視頻嵌入技術方面的知識。7/19/2022視頻MOV格式 AVI格式RM（Real Media）格式ASF格式7/19/2022視頻將視頻/音頻文件嵌入到HTML的方法鏈接：這種方式就像放置任何其它鏈接一樣。嵌入：采用這種方法可以對網絡上的視頻文件邊下載邊播放，或者可以讓視頻信息與其它內容出現在同一頁面。但是這要求

16、用戶端有相應的插件（Plug in）才能播放。7/19/2022虛擬現實（VR） 虛擬現實（Virtual Reality）是一項與多媒體技術密切相關的邊緣技術。 HTML是面向二維的，而VRML（Virtual Reality Modeling Language，虛擬現實建模語言) 是一個開放的、面向三維的、可擴充的三維場景描述語言。7/19/20224.2 Web設計元素4.2.6 導航和交互設計 交互式設計就是在無序且繁瑣的信息之間創造一個具有吸引力的、高效的瀏覽路線，給人以極大的自由度去創造和選擇他們想要的信息，并輕易地了解整個系統與組織的內容。7/19/2022人機交互的常用方式1.

17、問答式對話2.菜單交互3.功能鍵4.圖符5.查詢語言界面6.自然語言界面7/19/2022人機交互的特點1.簡易性2.友好性3.靈活性4.明確性5.一致性6.容錯性7.反饋性6.圖形化7/19/2022超鏈接設計1.超文本2.友好交互設計3.組織網頁上的信息4.增加合理的導航鏈接7/19/2022超鏈接設計1.超文本 超文本是一個編寫和組織信息的豐富環境。有了超文本鏈接，用戶可以按自己的順序和方式去瀏覽信息，隨心所欲地從一個感興趣的地方跳到另一處，并立即找到所需的信息。7/19/2022超鏈接設計2.友好交互設計 友好的交互設計還應能讓用戶知道他在網站中所處的位置，應提供足夠的位置信息，使用戶

18、清楚地知道：我在哪？我能去哪？ 我怎樣去哪？ 我如何回到起點？7/19/2022超鏈接設計3.組織網頁上的信息 信息設計是決定一個網站成功與否的重要因素。如何使鏈接、按鈕與網頁有機地結合起來，既醒目又和諧統一，是網頁設計師的重要任務。A、安排鏈接結構的原則B、組織網頁信息的常用方法7/19/2022超鏈接設計4.增加合理的導航鏈接導航欄：導航欄就像網站的目錄一樣，通過它可知道網站有那些欄目。每個欄目的內容如何。導航欄的每部分都與站點的其它頁面相鏈接。其它鏈接設計：導航欄可以使用戶訪問站點的各個頁面，目錄頁面可以使用戶準確地找到所需的內容。對于較長的頁面可以在該頁面建立若干個書簽，便于閱讀?？傊?/p>

19、，應根據需要采用盡可能多的鏈接形式。7/19/2022網站目錄結構和鏈接結構對頁面設計的影響設計原則與目的： 設計網站目錄結構的原則是方便網站的管理與維護；設計鏈接結構的原則是方便瀏覽者的閱讀。對頁面的影響： 采用何種鏈接結構將直接影響到版面的布局。總之，設計鏈接結構的目的在于用最少的鏈接得到最高的瀏覽效率。7/19/20224.3 Web頁面設計 Web網頁設計不同于傳統的平面或版式設計，但從其表現形式來看，還是以圖像、文字為主的靜態設計。因此與傳統的平面和版式設計有一定的類似。7/19/20224.3 Web頁面設計4.3.1 版式設計基礎 版面：指頁面編排所具有的外在形式，是各種內容編排布局的整體表現形式。 版面設計的任務： 版面設計的基本原則：7/19/2022平面構成基礎1.潛在的結構2.點的結構3.線的結構4.面的結構7/19/2022平面構成基礎1.潛在的結構 版面中一些潛在的線與點，可衍生出各種各樣的結構，使版面的布局更清晰和合理。這些版面結構往往與視覺流程的設計和形式法則的運用有密切的聯系。7/19/2022平面構成基礎2.點的結構 點是