網(wǎng)頁設計_02_網(wǎng)頁版式設計

《網(wǎng)頁設計_02_網(wǎng)頁版式設計》由會員分享，可在線閱讀，更多相關《網(wǎng)頁設計_02_網(wǎng)頁版式設計（65頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、1西西 南南 交交 通通 大大 學學網(wǎng)網(wǎng) 頁頁 設設 計計楊楊 柳柳西南交通大學西南交通大學2v 文字的格式化文字的格式化l字號、字體、行距字號、字體、行距l(xiāng)文字的整體編排文字的整體編排 l文字的強調(diào)文字的強調(diào) l文字的顏色文字的顏色v 圖像圖像 l圖像的格式圖像的格式 l圖像的形式圖像的形式 l圖像的編排圖像的編排 l圖像的處理圖像的處理l圖像在長頁面中的應用圖像在長頁面中的應用v 版式的基本類型版式的基本類型 第二章第二章 網(wǎng)頁版式設計網(wǎng)頁版式設計 西南交通大學西南交通大學32.1 2.1 文字的格式化文字的格式化v字號、字體、行距字號、字體、行距 字號大小可以用不同的方式來計算，例如磅（

2、字號大小可以用不同的方式來計算，例如磅（pointpoint）或像素）或像素（pixelpixel）。因為以計算機的像素技術為基礎的單位需要在打印時轉）。因為以計算機的像素技術為基礎的單位需要在打印時轉換為磅，所以，建議采用磅為單位。換為磅，所以，建議采用磅為單位。最適合于網(wǎng)頁正文顯示的字體大小為最適合于網(wǎng)頁正文顯示的字體大小為1212磅左右，現(xiàn)在很多的綜合磅左右，現(xiàn)在很多的綜合性站點，由于在一個頁面中需要安排的內(nèi)容較多，通常采用性站點，由于在一個頁面中需要安排的內(nèi)容較多，通常采用9 9磅的字磅的字號。較大的字體可用于標題或其他需要強調(diào)的地方，小一些的字體可號。較大的字體可用于標題或其他需要強

3、調(diào)的地方，小一些的字體可以用于頁腳和輔助信息。需要注意的是，小字號容易產(chǎn)生整體感和精以用于頁腳和輔助信息。需要注意的是，小字號容易產(chǎn)生整體感和精致感，但可讀性較差。致感，但可讀性較差。網(wǎng)頁設計者可以用字體來更充分地體現(xiàn)設計中要表達的情感。字網(wǎng)頁設計者可以用字體來更充分地體現(xiàn)設計中要表達的情感。字體選擇是一種感性、直觀的行為。但是，無論選擇什么字體，都要依體選擇是一種感性、直觀的行為。但是，無論選擇什么字體，都要依據(jù)網(wǎng)頁的總體設想和瀏覽者的需要。據(jù)網(wǎng)頁的總體設想和瀏覽者的需要。西南交通大學西南交通大學42.1 2.1 文字的格式化文字的格式化v字號、字體、行距字號、字體、行距 粗體字強壯有力，有

4、男性特點，適合機械、建筑業(yè)等內(nèi)容；細體粗體字強壯有力，有男性特點，適合機械、建筑業(yè)等內(nèi)容；細體字高雅細致，有女性特點，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。字高雅細致，有女性特點，更適合服裝、化妝品、食品等行業(yè)的內(nèi)容。在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則在同一頁面中，字體種類少，版面雅致，有穩(wěn)定感；字體種類多，則版面活躍，豐富多采。關鍵是如何根據(jù)頁面內(nèi)容來掌握這個比例關系。版面活躍，豐富多采。關鍵是如何根據(jù)頁面內(nèi)容來掌握這個比例關系。從加強平臺無關性的角度來考慮，正文內(nèi)容最好采用缺省字體。從加強平臺無關性的角度來考慮，正文內(nèi)容最好采用缺省字體。因為瀏覽器是用本地機器上的

5、字庫顯示頁面內(nèi)容的。作為網(wǎng)頁設計者因為瀏覽器是用本地機器上的字庫顯示頁面內(nèi)容的。作為網(wǎng)頁設計者必須考慮到大多數(shù)瀏覽者的機器里只裝有三種字體類型及一些相應的必須考慮到大多數(shù)瀏覽者的機器里只裝有三種字體類型及一些相應的特定字體。而你指定的字體在瀏覽者的機器里并不一定能夠找到，這特定字體。而你指定的字體在瀏覽者的機器里并不一定能夠找到，這給網(wǎng)頁設計帶來很大的局限。解決問題的辦法是：在確有必要使用特給網(wǎng)頁設計帶來很大的局限。解決問題的辦法是：在確有必要使用特殊字體的地方，可以將文字制成圖像，然后插入頁面中。殊字體的地方，可以將文字制成圖像，然后插入頁面中。西南交通大學西南交通大學52.1 2.1 文字

6、的格式化文字的格式化v字號、字體、行距字號、字體、行距 行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接行距的變化也會對文本的可讀性產(chǎn)生很大影響。一般情況下，接近字體尺寸的行距設置比較適合正文。行距的常規(guī)比例為近字體尺寸的行距設置比較適合正文。行距的常規(guī)比例為10:1210:12，即用，即用字字1010點，則行距點，則行距1212點。這主要是出于以下考慮：適當?shù)男芯鄷纬梢稽c。這主要是出于以下考慮：適當?shù)男芯鄷纬梢粭l明顯的水平空白帶，以引導瀏覽者的目光，而行距過寬會使一行文條明顯的水平空白帶，以引導瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。字失去較好的延續(xù)性。除了對于可讀

7、性的影響，行距本身也是具有很強表現(xiàn)力的設計語除了對于可讀性的影響，行距本身也是具有很強表現(xiàn)力的設計語言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)言，為了加強版式的裝飾效果，可以有意識地加寬或縮窄行距，體現(xiàn)獨特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應用獨特的審美意趣。例如，加寬行距可以體現(xiàn)輕松、舒展的情緒，應用于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄于娛樂性、抒情性的內(nèi)容恰如其分。另外，通過精心安排，使寬、窄行距并存，可增強版面的空間層次與彈性，表現(xiàn)出獨到的匠心。行距并存，可增強版面的空間層次與彈性，表現(xiàn)出獨到的匠心。行距可以用行高（行距可以用行

8、高（line-heightline-height）屬性來設置，建議以磅或默認行）屬性來設置，建議以磅或默認行高的百分數(shù)為單位。例如：高的百分數(shù)為單位。例如：line-heightline-height：20pt20pt、line-heightline-height：150%150%。西南交通大學西南交通大學62.1 2.1 文字的格式化文字的格式化圖1：通過文字大小疏密進行處理，突出重點，層次分明。 西南交通大學西南交通大學72.1 2.1 文字的格式化文字的格式化圖2：上、中部文字編排疏散，傳達出輕松愉快的感覺。下部的文字編排采用較小的行距，與上面的編排方式形成對比，豐富了版面空間層次。 西

9、南交通大學西南交通大學82.1 2.1 文字的格式化文字的格式化v 文字的整體編排文字的整體編排 頁面里的正文部分是由許多單個文字經(jīng)過編排組成的頁面里的正文部分是由許多單個文字經(jīng)過編排組成的群體，要充分發(fā)揮這個群體形狀在版面整體布局中的作用。群體，要充分發(fā)揮這個群體形狀在版面整體布局中的作用。從藝術的角度可以將字體本身看成是一種藝術形式，它在從藝術的角度可以將字體本身看成是一種藝術形式，它在個性和情感方面對人們有著很大影響。在網(wǎng)頁設計中，字個性和情感方面對人們有著很大影響。在網(wǎng)頁設計中，字體的處理與顏色、版式、圖形等其他設計元素的處理一樣體的處理與顏色、版式、圖形等其他設計元素的處理一樣非常關

10、鍵。從某種意義上來講，所有的設計元素都可以理非常關鍵。從某種意義上來講，所有的設計元素都可以理解為圖形。解為圖形。 西南交通大學西南交通大學92.1 2.1 文字的格式化文字的格式化v 文字的整體編排文字的整體編排 （1 1）文字的圖形化）文字的圖形化字體具有兩方面的作用：一是實現(xiàn)字意與語義的功能，字體具有兩方面的作用：一是實現(xiàn)字意與語義的功能，二是美學效應。所謂文字的圖形化，即是強調(diào)它的美學效二是美學效應。所謂文字的圖形化，即是強調(diào)它的美學效應，把記號性的文字作為圖形元素來表現(xiàn)，同時又強化了應，把記號性的文字作為圖形元素來表現(xiàn)，同時又強化了原有的功能。作為網(wǎng)頁設計者，既可以按照常規(guī)的方式來原

11、有的功能。作為網(wǎng)頁設計者，既可以按照常規(guī)的方式來設置字體，也可以對字體進行藝術化的設計。無論怎樣，設置字體，也可以對字體進行藝術化的設計。無論怎樣，一切都應圍繞如何更出色地實現(xiàn)自己的設計目標。一切都應圍繞如何更出色地實現(xiàn)自己的設計目標。將文字圖形化、意象化，以更富創(chuàng)意的形式表達出深將文字圖形化、意象化，以更富創(chuàng)意的形式表達出深層的設計思想，能夠克服網(wǎng)頁的單調(diào)與平淡，從而打動人層的設計思想，能夠克服網(wǎng)頁的單調(diào)與平淡，從而打動人心。心。 西南交通大學西南交通大學102.1 2.1 文字的格式化文字的格式化圖3：將文字放大，不僅實現(xiàn)了字意與語義的功能，而且具備了視覺沖擊力。 西南交通大學西南交通大學

12、112.1 2.1 文字的格式化文字的格式化v 文字的整體編排文字的整體編排 （2 2）文字的疊置）文字的疊置文字與圖像之間或文字與文字之間在經(jīng)過疊置后，能文字與圖像之間或文字與文字之間在經(jīng)過疊置后，能夠產(chǎn)生空間感、跳躍感、透明感、雜音感和敘事感，從而夠產(chǎn)生空間感、跳躍感、透明感、雜音感和敘事感，從而成為頁面中活躍的、令人注目的元素。雖然疊置手法影響成為頁面中活躍的、令人注目的元素。雖然疊置手法影響了文字的可讀性，但是能造成頁面獨特的視覺效果。這種了文字的可讀性，但是能造成頁面獨特的視覺效果。這種不追求易讀，而刻意追求不追求易讀，而刻意追求“雜音雜音”的表現(xiàn)手法，體現(xiàn)了一的表現(xiàn)手法，體現(xiàn)了一種

13、藝術思潮。因而，它不僅大量運用于傳統(tǒng)的版式設計，種藝術思潮。因而，它不僅大量運用于傳統(tǒng)的版式設計，在網(wǎng)頁設計中也被廣泛采用。在網(wǎng)頁設計中也被廣泛采用。西南交通大學西南交通大學122.1 2.1 文字的格式化文字的格式化圖4：由字符(ASCII碼)組成的網(wǎng)站標志。 西南交通大學西南交通大學132.1 2.1 文字的格式化文字的格式化v 文字的整體編排文字的整體編排 （3 3）標題與正文）標題與正文在進行標題與正文的編排時，可先考慮將正文作雙欄、在進行標題與正文的編排時，可先考慮將正文作雙欄、三欄或四欄的編排，再進行標題的置入。將正文分欄，是三欄或四欄的編排，再進行標題的置入。將正文分欄，是為了求

14、取頁面的空間與彈性，避免通欄的呆板以及標題插為了求取頁面的空間與彈性，避免通欄的呆板以及標題插入方式的單一性。標題雖是整段或整篇文章的標題，但不入方式的單一性。標題雖是整段或整篇文章的標題，但不一定千篇一律地置于段首之上?？勺骶又?、橫向、豎向或一定千篇一律地置于段首之上?？勺骶又?、橫向、豎向或邊置等編排處理，甚至可以直接插入字群中，以新穎的版邊置等編排處理，甚至可以直接插入字群中，以新穎的版式來打破舊有的規(guī)律。式來打破舊有的規(guī)律。西南交通大學西南交通大學142.1 2.1 文字的格式化文字的格式化圖5：通過文字的大小、明暗、疏密以及疊置等變化，產(chǎn)生雜音感，起到較好的視覺引導作用。西南交通大學西

15、南交通大學152.1 2.1 文字的格式化文字的格式化v 文字的整體編排文字的整體編排 （4 4）文字編排的四種基本形式）文字編排的四種基本形式頁面里的正文部分是由許多單個文字經(jīng)過編排組成的群體，要充分發(fā)揮這頁面里的正文部分是由許多單個文字經(jīng)過編排組成的群體，要充分發(fā)揮這個群體形狀在版面整體布局中的作用。個群體形狀在版面整體布局中的作用。兩端均齊文字從左端到右端的長度均齊，字群形成方方正正的面，顯得兩端均齊文字從左端到右端的長度均齊，字群形成方方正正的面，顯得端正、嚴謹、美觀。端正、嚴謹、美觀。居中排列在字距相等的情況下，以頁面中心為軸線排列，這種編排方式居中排列在字距相等的情況下，以頁面中心

16、為軸線排列，這種編排方式使文字更加突出，產(chǎn)生對稱的形式美感。使文字更加突出，產(chǎn)生對稱的形式美感。左對齊或右對齊左對齊或右對齊使行首或行尾自然形成一條清晰的垂直左對齊或右對齊左對齊或右對齊使行首或行尾自然形成一條清晰的垂直線，很容易與圖形配合。這種編排方式有松有緊，有虛有實，跳動而飄逸，線，很容易與圖形配合。這種編排方式有松有緊，有虛有實，跳動而飄逸，產(chǎn)生節(jié)奏與韻律的形式美感。左對齊符合人們閱讀時的習慣，顯得自然；右產(chǎn)生節(jié)奏與韻律的形式美感。左對齊符合人們閱讀時的習慣，顯得自然；右對齊因不太符合閱讀習慣而較少采用，但顯得新穎。對齊因不太符合閱讀習慣而較少采用，但顯得新穎。繞圖排列將文字繞圖形邊緣

17、排列。如果將退底圖插入文字中，會令人感繞圖排列將文字繞圖形邊緣排列。如果將退底圖插入文字中，會令人感到融洽、自然。到融洽、自然。西南交通大學西南交通大學162.1 2.1 文字的格式化文字的格式化圖6：文字與圖片穿插排列，密集的文字形成塊面，豐富了頁面層次。西南交通大學西南交通大學172.1 2.1 文字的格式化文字的格式化v文字的強調(diào)文字的強調(diào) （1 1） 行首的強調(diào)行首的強調(diào)將正文的第一個字或字母放大并作裝飾性處理，嵌入段落的開頭，這將正文的第一個字或字母放大并作裝飾性處理，嵌入段落的開頭，這在傳統(tǒng)媒體版式設計中稱之為在傳統(tǒng)媒體版式設計中稱之為“下墜式下墜式”。此技巧的發(fā)明溯源于歐洲中世。

18、此技巧的發(fā)明溯源于歐洲中世紀的文稿抄寫員。由于它有吸引視線、裝飾和活躍版面的作用，所以被應紀的文稿抄寫員。由于它有吸引視線、裝飾和活躍版面的作用，所以被應用于網(wǎng)頁的文字編排中。其下墜幅度應跨越一個完整字行的上下幅度。至用于網(wǎng)頁的文字編排中。其下墜幅度應跨越一個完整字行的上下幅度。至于放大多少，則依據(jù)所處網(wǎng)頁環(huán)境而定。于放大多少，則依據(jù)所處網(wǎng)頁環(huán)境而定。 （2 2） 引文的強調(diào)引文的強調(diào)在進行網(wǎng)頁文字編排時，常常會碰到提綱挈領性的文字，即引文（也在進行網(wǎng)頁文字編排時，常常會碰到提綱挈領性的文字，即引文（也稱為眉頭）。引文概括一個段落、一個章節(jié)或全文大意，因此在編排上應稱為眉頭）。引文概括一個段落

19、、一個章節(jié)或全文大意，因此在編排上應給予特殊的頁面位置和空間來強調(diào)。引文的編排方式多種多樣，如將引文給予特殊的頁面位置和空間來強調(diào)。引文的編排方式多種多樣，如將引文嵌入正文的左右側、上方、下方或中心位置等，并且可以在字體或字號上嵌入正文的左右側、上方、下方或中心位置等，并且可以在字體或字號上與正文相區(qū)別而產(chǎn)生變化。與正文相區(qū)別而產(chǎn)生變化。（3 3）個別文字的強調(diào)）個別文字的強調(diào)如果將個別文字作為頁面的訴求重點，則可以通過加粗、加框、加下如果將個別文字作為頁面的訴求重點，則可以通過加粗、加框、加下劃線、加指示性符號、傾斜字體等手段有意識地強化文字的視覺效果，使劃線、加指示性符號、傾斜字體等手段有

20、意識地強化文字的視覺效果，使其在頁面整體中顯得出眾而奪目。另外，改變某些文字的顏色，也可以使其在頁面整體中顯得出眾而奪目。另外，改變某些文字的顏色，也可以使這部分文字得到強調(diào)。這些方法實際上都是運用了對比的法則。這部分文字得到強調(diào)。這些方法實際上都是運用了對比的法則。西南交通大學西南交通大學182.1 2.1 文字的格式化文字的格式化圖7：下墜式的行首強調(diào)，有吸引視線與活躍畫面的作用。西南交通大學西南交通大學192.1 2.1 文字的格式化文字的格式化v 4.4.文字的顏色文字的顏色在網(wǎng)頁設計中，設計者可以為文字、文字鏈接、已訪問鏈接和當前活動鏈接在網(wǎng)頁設計中，設計者可以為文字、文字鏈接、已訪

21、問鏈接和當前活動鏈接選用各種顏色。例如，如果你使用選用各種顏色。例如，如果你使用FrontpageFrontpage編輯器，默認的設置是這樣的：正編輯器，默認的設置是這樣的：正常字體顏色為黑色，默認的鏈接顏色為蘭色，鼠標點擊之后又變?yōu)樽霞t色。使用常字體顏色為黑色，默認的鏈接顏色為蘭色，鼠標點擊之后又變?yōu)樽霞t色。使用不同顏色的文字可以使想要強調(diào)的部分更加引人注目，但應該注意的是，對于文不同顏色的文字可以使想要強調(diào)的部分更加引人注目，但應該注意的是，對于文字的顏色，只可少量運用，如果什么都想強調(diào)，其實是什么都沒有強調(diào)。況且，字的顏色，只可少量運用，如果什么都想強調(diào)，其實是什么都沒有強調(diào)。況且，在一

22、個頁面上運用過多的顏色，會影響瀏覽者閱讀頁面內(nèi)容，除非你有特殊的設在一個頁面上運用過多的顏色，會影響瀏覽者閱讀頁面內(nèi)容，除非你有特殊的設計目的。計目的。 顏色的運用除了能夠起到強調(diào)整體文字中特殊部分的作用之外，對于整個顏色的運用除了能夠起到強調(diào)整體文字中特殊部分的作用之外，對于整個文案的情感表達也會產(chǎn)生影響。這涉及到色彩的情感象征性問題，限于篇幅，在文案的情感表達也會產(chǎn)生影響。這涉及到色彩的情感象征性問題，限于篇幅，在這里不做深入探討。這里不做深入探討。另外需要注意的是文字顏色的對比度，它包括明度上的對比、純度上的對比另外需要注意的是文字顏色的對比度，它包括明度上的對比、純度上的對比以及冷暖的

23、對比。這些不僅對文字的可讀性發(fā)生作用，更重要的是，你可以通過以及冷暖的對比。這些不僅對文字的可讀性發(fā)生作用，更重要的是，你可以通過對顏色的運用實現(xiàn)想要的設計效果、設計情感和設計思想。對顏色的運用實現(xiàn)想要的設計效果、設計情感和設計思想。西南交通大學西南交通大學202.1 2.1 文字的格式化文字的格式化圖8-1：根據(jù)頁面色調(diào)靈活運用文字的色彩，既符合頁面的整體氛圍，又保證了可讀性。 西南交通大學西南交通大學212.1 2.1 文字的格式化文字的格式化圖8-2：根據(jù)頁面色調(diào)靈活運用文字的色彩，既符合頁面的整體氛圍，又保證了可讀性。 西南交通大學西南交通大學222.2 2.2 圖像圖像 除了文本之外

24、，網(wǎng)頁上最重要的設計元素莫過于圖像了。除了文本之外，網(wǎng)頁上最重要的設計元素莫過于圖像了。一方面，圖像的應用使網(wǎng)頁更加美觀、有趣；另一方面，圖一方面，圖像的應用使網(wǎng)頁更加美觀、有趣；另一方面，圖像本身也是傳達信息的重要手段之一。與文字相比，它直觀、像本身也是傳達信息的重要手段之一。與文字相比，它直觀、生動，可以很容易地把那些文字無法表達的信息表達出來，生動，可以很容易地把那些文字無法表達的信息表達出來，易于瀏覽者理解和接受。易于瀏覽者理解和接受。 1. 1.圖像的格式圖像的格式 Web Web通常使用兩種圖像格式：通常使用兩種圖像格式：GIFGIF和和JPEGJPEG。除此以外，還有。除此以外，

25、還有兩種適合網(wǎng)絡傳播但沒有被廣泛應用的圖像格式：兩種適合網(wǎng)絡傳播但沒有被廣泛應用的圖像格式：PNGPNG和和MNGMNG。西南交通大學西南交通大學232.2 2.2 圖像圖像 2. 2.圖像的形式圖像的形式 同印刷排版一樣，靜態(tài)圖像在網(wǎng)頁排版中的運用不外乎四同印刷排版一樣，靜態(tài)圖像在網(wǎng)頁排版中的運用不外乎四種形式：方形圖、退底圖、出血圖以及這三種形式的結合使種形式：方形圖、退底圖、出血圖以及這三種形式的結合使用。用。 （1 1）方形圖）方形圖 即圖形以直線邊框來規(guī)范和限制，是一種最常見、最簡潔、即圖形以直線邊框來規(guī)范和限制，是一種最常見、最簡潔、最單純的形態(tài)。方形圖使圖像內(nèi)容更突出且將主體形象

26、與環(huán)最單純的形態(tài)。方形圖使圖像內(nèi)容更突出且將主體形象與環(huán)境共融，可以完整地傳達主題思想，富有感染性。配置方形境共融，可以完整地傳達主題思想，富有感染性。配置方形圖的頁面，給人以穩(wěn)重、可信、嚴謹、理性、莊重和安靜等圖的頁面，給人以穩(wěn)重、可信、嚴謹、理性、莊重和安靜等感覺，但有時也顯得平淡、呆板。感覺，但有時也顯得平淡、呆板。西南交通大學西南交通大學242.2 2.2 圖像圖像圖9：典型的方形圖，四周留出邊框，使圖片內(nèi)容突出。西南交通大學西南交通大學252.2 2.2 圖像圖像 （2 2）退底圖）退底圖 將圖像中的背景去掉，只留下主題形象。退底圖形自由將圖像中的背景去掉，只留下主題形象。退底圖形自

27、由而突出，更具有個性，因而給人印象深刻。配置退底圖的頁而突出，更具有個性，因而給人印象深刻。配置退底圖的頁面，輕松、活潑，動態(tài)十足，而且圖文結合自然，給人以親面，輕松、活潑，動態(tài)十足，而且圖文結合自然，給人以親和感。但也容易造成凌亂和不整體的感覺和感。但也容易造成凌亂和不整體的感覺。西南交通大學西南交通大學262.2 2.2 圖像圖像圖10：人物全部退底，文字色塊的安排輕松隨意，是面向年輕人的設計。西南交通大學西南交通大學272.2 2.2 圖像圖像 （3 3）出血圖）出血圖 圖像的一邊或幾個邊充滿頁面，有向外擴張和舒展之勢。圖像的一邊或幾個邊充滿頁面，有向外擴張和舒展之勢。一般用于傳達抒情或

28、運動信息的頁面，因不受邊框限制，感一般用于傳達抒情或運動信息的頁面，因不受邊框限制，感覺上與人更加接近，便于情感與動感的發(fā)揮覺上與人更加接近，便于情感與動感的發(fā)揮。西南交通大學西南交通大學282.2 2.2 圖像圖像圖11：四邊出血，有強烈的擴張感。西南交通大學西南交通大學292.2 2.2 圖像圖像圖12：主體形象退底且兩邊出血。主體形象的方向性與右側文字的排列方式具有引導視覺的作用 西南交通大學西南交通大學302.2 2.2 圖像圖像 3.3.圖像的編排圖像的編排 （1 1）四角與中軸四點結構）四角與中軸四點結構頁面的四個角與對角線、中軸四點及水平與垂直的中軸頁面的四個角與對角線、中軸四點

29、及水平與垂直的中軸線，具有支配頁面結構的作用。線，具有支配頁面結構的作用。四角是頁面邊界相交形成的四個點，把四角連接起來的四角是頁面邊界相交形成的四個點，把四角連接起來的斜線即對角線，交叉點為頁面中心。中軸四點指經(jīng)過頁面中斜線即對角線，交叉點為頁面中心。中軸四點指經(jīng)過頁面中心的垂直線和水平線的端點。這四個點可上、下、左、右移心的垂直線和水平線的端點。這四個點可上、下、左、右移動。動。通過四角與中軸四點結構的不同組合、變化，可以求得通過四角與中軸四點結構的不同組合、變化，可以求得多樣的頁面結構。在圖像排版時緊緊抓住這八個點，可以突多樣的頁面結構。在圖像排版時緊緊抓住這八個點，可以突出網(wǎng)頁的形式美

30、感，網(wǎng)頁的版式設計、視覺流程的籌劃也得出網(wǎng)頁的形式美感，網(wǎng)頁的版式設計、視覺流程的籌劃也得到相應簡化。到相應簡化。 西南交通大學西南交通大學312.2 2.2 圖像圖像圖13：著重于對左上角和右下角的控制，右下角的樹葉起到呼應與穩(wěn)定頁面的作用。 西南交通大學西南交通大學322.2 2.2 圖像圖像圖14：飽滿的頁面構圖，巧妙地利用表盤穩(wěn)定住頁面四角。西南交通大學西南交通大學332.2 2.2 圖像圖像圖15：以水平分割為主的頁面，右上角與左下角安排了文字，打破呆板的感覺。 西南交通大學西南交通大學342.2 2.2 圖像圖像 （2 2）塊狀組合與散點組合結構）塊狀組合與散點組合結構塊狀組合，即

31、通過水平、垂直線分割，將多幅圖像在頁塊狀組合，即通過水平、垂直線分割，將多幅圖像在頁面上整齊有序地排列成塊狀，這種結構具有強烈的整體感和面上整齊有序地排列成塊狀，這種結構具有強烈的整體感和秩序美感。各幅圖像相互自由疊置或分類疊置而構成的塊狀秩序美感。各幅圖像相互自由疊置或分類疊置而構成的塊狀組合，具有輕快、活潑的特性，同時也不失整體感。組合，具有輕快、活潑的特性，同時也不失整體感。散點組合，即圖像分散排列在頁面各個部位，具有自由、散點組合，即圖像分散排列在頁面各個部位，具有自由、輕快的感覺。采用這種結構應注意圖像的大小、主次，以及輕快的感覺。采用這種結構應注意圖像的大小、主次，以及方形圖、退底

32、圖和出血圖的配置，同時還應考慮疏密、均衡、方形圖、退底圖和出血圖的配置，同時還應考慮疏密、均衡、視覺流程等。視覺流程等。 西南交通大學西南交通大學352.2 2.2 圖像圖像圖16：多幅圖片使水平垂直線規(guī)律地等量分割，獲得了理性與秩序的美。西南交通大學西南交通大學363.2 3.2 圖像圖像圖17：圖片與文字穿插編排，形成散點組合。運用線條的分割、文字的群組化以及單一的背景色形成整體感。西南交通大學西南交通大學372.2 2.2 圖像圖像圖18：在塊狀組合結構中，如圖片太多，則無法突出重點。這個頁面通過改變圖片的面積和形狀，有效地分開了層次。西南交通大學西南交通大學382.2 2.2 圖像圖像

33、 4.4.圖像的處理圖像的處理 圖像的外形、大小、數(shù)量以及與背景的關系，都與內(nèi)容圖像的外形、大小、數(shù)量以及與背景的關系，都與內(nèi)容有著密切的聯(lián)系。有著密切的聯(lián)系。 （1 1）圖像的外形處理）圖像的外形處理圖像的外形能使頁面的氣氛發(fā)生變化，并直接影響瀏覽圖像的外形能使頁面的氣氛發(fā)生變化，并直接影響瀏覽者的興趣。一般而言，方形的穩(wěn)定、嚴肅，三角形的銳利，者的興趣。一般而言，方形的穩(wěn)定、嚴肅，三角形的銳利，圓形或曲線外形的柔軟親切，退底圖及一些不規(guī)則或不帶邊圓形或曲線外形的柔軟親切，退底圖及一些不規(guī)則或不帶邊框的圖像活潑?？虻膱D像活潑。 （2 2）圖像的面積）圖像的面積圖像在網(wǎng)頁中占據(jù)的面積大小能直接

34、顯示其重要程度。圖像在網(wǎng)頁中占據(jù)的面積大小能直接顯示其重要程度。一般地，大圖像容易形成視覺焦點，感染力強，傳達的情感一般地，大圖像容易形成視覺焦點，感染力強，傳達的情感較為強烈；小圖像常用來穿插在字群中，顯得簡潔而精致，較為強烈；小圖像常用來穿插在字群中，顯得簡潔而精致，有點綴和呼應頁面主題的作用。在一個頁面中，如果只有大有點綴和呼應頁面主題的作用。在一個頁面中，如果只有大圖像而無小圖像或細密的文字，就會顯得空洞，但只有小圖圖像而無小圖像或細密的文字，就會顯得空洞，但只有小圖像而無大圖像又使頁面缺乏視覺沖擊力。像而無大圖像又使頁面缺乏視覺沖擊力。 西南交通大學西南交通大學392.2 2.2 圖

35、像圖像 圖像的大小不僅決定著主從關系，也控制著頁面的均衡與圖像的大小不僅決定著主從關系，也控制著頁面的均衡與運動。大小對比強烈，給人跳躍感，使主角更突出；大小對運動。大小對比強烈，給人跳躍感，使主角更突出；大小對比減弱，則頁面穩(wěn)定、安靜。這是因為，訪問者在瀏覽頁面比減弱，則頁面穩(wěn)定、安靜。這是因為，訪問者在瀏覽頁面時，首先會注意到大圖像，然后再看到較小的圖像，這種由時，首先會注意到大圖像，然后再看到較小的圖像，這種由大到小的引導，使瀏覽者的視線在頁面上流動，便造成一種大到小的引導，使瀏覽者的視線在頁面上流動，便造成一種動勢，使頁面活潑起來。動勢，使頁面活潑起來。因此，在網(wǎng)頁設計時，應首先確定主

36、要形象與次要形象，因此，在網(wǎng)頁設計時，應首先確定主要形象與次要形象，擴大主要圖像的面積，使次要角色縮小到從屬地位。只有大擴大主要圖像的面積，使次要角色縮小到從屬地位。只有大小圖像主次得當?shù)卮┎褰M合，才能構成最佳的頁面視覺效果。小圖像主次得當?shù)卮┎褰M合，才能構成最佳的頁面視覺效果。 西南交通大學西南交通大學402.2 2.2 圖像圖像圖19：作為主體的人物形象，既突出了大小對比又增強了頁面的親和力。 西南交通大學西南交通大學412.2 2.2 圖像圖像 （3 3）圖像的數(shù)量）圖像的數(shù)量圖像的數(shù)量是根據(jù)內(nèi)容決定的。只用一幅圖像，會使內(nèi)容突圖像的數(shù)量是根據(jù)內(nèi)容決定的。只用一幅圖像，會使內(nèi)容突出、頁面

37、安定。增加一幅圖像，頁面會因為有了對比和呼應而活出、頁面安定。增加一幅圖像，頁面會因為有了對比和呼應而活躍起來。再增加一幅，則更加熱鬧、活潑。但是，限于目前網(wǎng)絡躍起來。再增加一幅，則更加熱鬧、活潑。但是，限于目前網(wǎng)絡的傳輸速度，使用圖像時一定要謹慎，大的圖像會降低頁面顯示的傳輸速度，使用圖像時一定要謹慎，大的圖像會降低頁面顯示速度，即使是小圖像，如果運用數(shù)量過多，同樣會使頁面下載速速度，即使是小圖像，如果運用數(shù)量過多，同樣會使頁面下載速度變慢。隨著網(wǎng)絡環(huán)境及技術條件的改善，這種情況已經(jīng)有了很度變慢。隨著網(wǎng)絡環(huán)境及技術條件的改善，這種情況已經(jīng)有了很大的改觀。大的改觀。 （4 4）與背景的關系）與

38、背景的關系網(wǎng)頁圖像與背景是對比和統(tǒng)一的關系。也就是說，圖像與背網(wǎng)頁圖像與背景是對比和統(tǒng)一的關系。也就是說，圖像與背景在和諧統(tǒng)一的基礎上，應存在一定的對比，以使主要圖像更加景在和諧統(tǒng)一的基礎上，應存在一定的對比，以使主要圖像更加突出。如精密的相機鏡頭以粗糙的巖石為背景，明亮的文字以深突出。如精密的相機鏡頭以粗糙的巖石為背景，明亮的文字以深邃的星空為背景，或者使用沒有背景及陪襯物的退底圖像，周圍邃的星空為背景，或者使用沒有背景及陪襯物的退底圖像，周圍留出大面積空白，都是利用對比對主體形象起到突出作用。留出大面積空白，都是利用對比對主體形象起到突出作用。西南交通大學西南交通大學422.2 2.2 圖

39、像圖像5.5.圖像在長頁面中的應用圖像在長頁面中的應用網(wǎng)頁一般都是縱向的網(wǎng)頁一般都是縱向的( (也有特意設計成橫向滾屏的也有特意設計成橫向滾屏的) )，其，其長度從一屏到三屏不等，有時甚至更多。訪問者在瀏覽頁面長度從一屏到三屏不等，有時甚至更多。訪問者在瀏覽頁面時，通過拖動垂直滾動條使網(wǎng)頁一屏一屏地顯示，但這并不時，通過拖動垂直滾動條使網(wǎng)頁一屏一屏地顯示，但這并不意味著我們可以將整個頁面分割開來，孤立地進行每一屏的意味著我們可以將整個頁面分割開來，孤立地進行每一屏的設計。頁面的整體感是建立在形象的啟承關系上，盡管頁面設計。頁面的整體感是建立在形象的啟承關系上，盡管頁面被分割成幾屏來顯示，但圖像

40、或文字的延續(xù)性應使瀏覽者得被分割成幾屏來顯示，但圖像或文字的延續(xù)性應使瀏覽者得到完整、統(tǒng)一的視覺感受。設計者所要做的就是進行通盤考到完整、統(tǒng)一的視覺感受。設計者所要做的就是進行通盤考慮，例如：尋找對比中的和諧、建立同一的視覺識別等，來慮，例如：尋找對比中的和諧、建立同一的視覺識別等，來處理好每一屏與整個頁面的關系。處理好每一屏與整個頁面的關系。 西南交通大學西南交通大學432.2 2.2 圖像圖像圖20：巧妙地運用動態(tài)元素，比印刷媒體具有更強的表現(xiàn)力。以橫貫頁面的長條色塊統(tǒng)一畫面，圖片安排隨意，疏密有致，使整體風格既統(tǒng)一又有變化。 西南交通大學西南交通大學442.3 2.3 版式的基本類型版式

41、的基本類型5.5.圖像在長頁面中的應用圖像在長頁面中的應用網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。型十種。（1 1）骨骼型）骨骼型網(wǎng)頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類網(wǎng)頁版式的骨骼型是一種規(guī)范的、理性的分割方法，類似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四似于報刊的版式。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄

42、為多。這種版式給人以和諧、理性的美。幾種分欄方式結合使多。這種版式給人以和諧、理性的美。幾種分欄方式結合使用，既理性、條理，又活潑而富有彈性。用，既理性、條理，又活潑而富有彈性。 西南交通大學西南交通大學452.3 2.3 版式的基本類型版式的基本類型圖21：綜合運用多種分欄形式。 西南交通大學西南交通大學462.3 2.3 版式的基本類型版式的基本類型（2 2）滿版型）滿版型頁面以圖像充滿整版。主要以圖像為訴求點，也可將部頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型分文字壓置于圖像之上。視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感

43、覺。隨著寬帶的普及，這種版式在網(wǎng)給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁設計中的運用越來越多。頁設計中的運用越來越多。 西南交通大學西南交通大學472.3 2.3 版式的基本類型版式的基本類型圖22：四邊出血，向外擴張，適合年輕人的口味。西南交通大學西南交通大學482.3 2.3 版式的基本類型版式的基本類型（3 3）分割型）分割型把整個頁面分成上下或左右兩部分，分別安排圖片和文把整個頁面分成上下或左右兩部分，分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來調(diào)

44、部分則理性而平靜。可以調(diào)整圖片和文案所占的面積，來調(diào)節(jié)對比的強弱。例如：如果圖片所占比例過大，文案使用的節(jié)對比的強弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細，字距、行距、段落的安排又很疏落，則造成字體過于纖細，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產(chǎn)生自然和諧的效果。線虛化處理，就會產(chǎn)生自然和諧的效果。 西南交通大學西南交通大學492.3 2.3 版式的基本類型版式的基本類型圖23：分割線上的壓置的圖片既打破了頁面分割的生硬感，也使自身得到強調(diào)。左邊框上的小標簽乃

45、點睛之筆。西南交通大學西南交通大學502.3 2.3 版式的基本類型版式的基本類型（4 4）中軸型）中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列。水平排列的頁面給人穩(wěn)定、平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。排列的頁面給人以舒暢的感覺。 西南交通大學西南交通大學512.3 2.3 版式的基本類型版式的基本類型圖24：不易覺察的中軸型版式，給人以輕快之感。 西南交通大學西南交通大學522.3 2.3 版式的基本類型版式的基本類型（5 5）曲線型）曲線型圖片、文字在頁面上作

46、曲線的分割或編排構成，產(chǎn)生韻圖片、文字在頁面上作曲線的分割或編排構成，產(chǎn)生韻律與節(jié)奏。律與節(jié)奏。 西南交通大學西南交通大學532.3 2.3 版式的基本類型版式的基本類型圖25：網(wǎng)站的導航標題沿圖形弧線排列。 西南交通大學西南交通大學542.3 2.3 版式的基本類型版式的基本類型（6 6）傾斜型）傾斜型頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)頁面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強烈的動感，引人注目。定感或強烈的動感，引人注目。 西南交通大學西南交通大學552.3 2.3 版式的基本類型版式的基本類型圖26：文字水平排列，將畫框斜置，產(chǎn)生對比與動勢，印象被加強。 西南

47、交通大學西南交通大學562.3 2.3 版式的基本類型版式的基本類型（7 7）對稱型）對稱型對稱的頁面給人穩(wěn)定、嚴謹、莊重、理性的感受。對稱的頁面給人穩(wěn)定、嚴謹、莊重、理性的感受。對稱分為絕對對稱和相對對稱。一般采用相對對稱的手對稱分為絕對對稱和相對對稱。一般采用相對對稱的手法，以避免呆板。左右對稱的頁面版式比較常見。法，以避免呆板。左右對稱的頁面版式比較常見。四角型也是對稱型的一種，是在頁面四角安排相應的視四角型也是對稱型的一種，是在頁面四角安排相應的視覺元素。四個角是頁面的邊界點，重要性不可低估。在四個覺元素。四個角是頁面的邊界點，重要性不可低估。在四個角安排的任何內(nèi)容都能產(chǎn)生安定感。控制

48、好頁面的四個角，角安排的任何內(nèi)容都能產(chǎn)生安定感?？刂坪庙撁娴乃膫€角，也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個也就控制了頁面的空間。越是凌亂的頁面，越要注意對四個角的控制。角的控制。西南交通大學西南交通大學572.3 2.3 版式的基本類型版式的基本類型圖27-1：以相對對稱手法制作的頁面。 西南交通大學西南交通大學582.3 2.3 版式的基本類型版式的基本類型圖27-1：以四角對稱手法制作的頁面。 西南交通大學西南交通大學592.3 2.3 版式的基本類型版式的基本類型（8 8）焦點型）焦點型a.a.中心以對比強烈的圖片或文字置于頁面的視覺中心。中心以對比強烈的圖片或文字置于頁面

49、的視覺中心。 b.b.向心視覺元素引導瀏覽者視線向頁面中心聚攏，就向心視覺元素引導瀏覽者視線向頁面中心聚攏，就形成了一個向心的版式。向心版式是集中的、穩(wěn)定的，是一形成了一個向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。種傳統(tǒng)的手法。 c.c.離心視覺元素引導瀏覽者視線向外輻射，則形成一離心視覺元素引導瀏覽者視線向外輻射，則形成一個離心的網(wǎng)頁版式。離心版式是外向的、活潑的，更具現(xiàn)代個離心的網(wǎng)頁版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運用時應注意避免凌亂。感，運用時應注意避免凌亂。西南交通大學西南交通大學602.3 2.3 版式的基本類型版式的基本類型圖28：通過離心的版式，清晰地傳

50、達出網(wǎng)站提供的服務。 西南交通大學西南交通大學612.3 2.3 版式的基本類型版式的基本類型（9 9）三角型）三角型網(wǎng)頁各視覺元素呈三角形排列。正三角形（金字塔型）網(wǎng)頁各視覺元素呈三角形排列。正三角形（金字塔型）最具穩(wěn)定性，倒三角形則產(chǎn)生動感。側三角形構成一種均衡最具穩(wěn)定性，倒三角形則產(chǎn)生動感。側三角形構成一種均衡版式，既安定又有動感。版式，既安定又有動感。 西南交通大學西南交通大學622.3 2.3 版式的基本類型版式的基本類型圖29：整體看為正三角形的構圖，主體形象穩(wěn)定而突出。 西南交通大學西南交通大學632.3 2.3 版式的基本類型版式的基本類型（1010）自由型）自由型自由型的頁面具有活潑、輕快的風格。自由型的頁面具有活潑、輕快的風格。 西南交通大學西南交通大學642.3 2.3 版式的基本類型版式的基本類型圖30：引導視線的圖片以散點構成，傳達隨意、輕松的氣氛。 西南交通大學西南交通大學65 謝謝 謝謝 ！ 下一章：頁面藝術設計下一章：頁面藝術設計