網頁版式設計的圖文魅力-網站美工設計基礎第四章

第七講

第四章網頁版式設計的圖文魅力

《網站美工設計基礎》學習目的本章側重介紹版式設計的基本要素、類型及形式法則；了解網頁的界面空間；掌握網頁的版式構成與設計；培養(yǎng)學習者對優(yōu)秀網頁版式分析和模仿能力。在完成基礎知識教學任務的同時，著重提高學習者對網頁版式設計的認識和理解，加強學習者實際動手能力的培養(yǎng)，最終能設計出優(yōu)秀網頁。網站美工設計基礎學習內容版式設計的視覺要素和造型要素版式設計的形式原理網頁的版式設計學習要求掌握：網頁版式的基本類型、網頁內容的編排。理解：版式設計的形式法則。了解：版式設計的基本要素、網頁的界面空間。網站美工設計基礎4．1版式設計的視覺要素和造型要素4．1．1版式設計的視覺要素文字、圖形、色彩是版式設計中最基本的視覺要素。因此，設計者在處理版面時，必須掌握各要素的特征，以便于更有效、更合理的表現與傳達主題思想和設計意圖。網站美工設計基礎文字

文字是版式設計中的重要信息載體，視覺識別特征的符號系統，是一種高尚的藝術表現形式，具有啟迪性和傳達性。文字既是版面的核心，也是視覺傳達最直接的方式。因此，文字設計是增強視覺傳達效果，提高作品的訴求力，賦予版式審美價值的一項重要構成技術。網站美工設計基礎（1）字體和字號

字體是文字最基本的元素，字體的設計、選用是版式構成的基礎。在版式設計中，字體首先作為造型元素而出現，在運用中不同字體造型具有不同的獨立品格，給予人不同的視覺感受和比較直接的視覺訴求力。中文常用的字體主要有宋體、仿宋體、黑體、楷書等。網站美工設計基礎網站美工設計基礎網站美工設計基礎網站美工設計基礎將文字圖形化，把記號性的文字作為圖形元素來表現，強化了原有的功能網站美工設計基礎

文字與文字間經過疊置后，產生空間感、跳躍感，體現了一種藝術思潮。網站美工設計基礎形象字體，根據文字的意思或內容進行藝術創(chuàng)造的字體，內容與形式達到和諧的統一。網站美工設計基礎意象字體將特定的文字個性化，一目了然地展示文字的內容，產生更多的回味。網站美工設計基礎

（2）字距與行距

字距和行距的變化也會對文本的可讀性產生很大影響，行距的常規(guī)比例為10:12，即用字10點，則行距12點。適當的行距會形成一條明顯的水平空白帶，以引導瀏覽者的目光，而行距過寬會使一行文字失去較好的延續(xù)性。

網站美工設計基礎

圖形

版式設計中圖形元素同樣有著十分重要的作用。一方面，圖形的應用使版面更加美觀、有趣；另一方面，圖形本身也是傳達信息的重要手段之一。與文字相比，它直觀、生動，可以很容易地把那些文字無法表達的信息表達出來，易于瀏覽者理解和接受，具有視覺效果和導讀效果。網站美工設計基礎圖形元素的表現形式可分為兩大類，一類是以攝影、寫實手法為主的稱為“圖片”。網站美工設計基礎網站美工設計基礎網站美工設計基礎網站美工設計基礎

另一類是以手繪、電腦繪制為主的稱為“圖形”。網站美工設計基礎網站美工設計基礎網站美工設計基礎

3．色彩

色彩既有美化又具實用的功能，為版式設計增添了許多魅力。色彩能起到畫龍點睛和錦上添花的作用，但運用不當也會破壞版面的整體效果。因此，如何運用好色彩也是版式設計要解決的主要內容之一。

對比色色彩組合比同色系色彩組合更容易吸引注意力網站美工設計基礎網站美工設計基礎不同的色調體現著不同主題的網站網站美工設計基礎

4．1．2版式設計的造型要素

點、線、面是一切造型的基礎，也是版式構成的主要語言。版式設計就是在版面空間中處理和協調好點、線、面的相互依存相互作用的關系，組合出各種各樣的形態(tài)，構建成一個個千變萬化的全新版面。

1.點點相對于線和面來說是一個短而小的形態(tài)，在平面設計中能起到吸引注意力的作用。網站美工設計基礎網站美工設計基礎網站美工設計基礎

2.線線相對于點和面來說是一個細而長的形態(tài)，具有分隔空間的作用。網站美工設計基礎線的自由分隔，起了引導作用單線構成的圖形，與人物圖片形成鮮明對比網站美工設計基礎3.面面有長、寬兩度空間，無厚度，也稱為“形”，是設計中的重要因素。在現實版式設計中，其表現也包容了各種色彩、肌理等方面的變化，同時面的形狀和邊緣對面的性質也有著很大的影響，在不同的情況下會使面的形象產生極多的變化。在基本視覺要素中，面的視覺影響力最大，在畫面上往往起著舉足輕重的作用。網站美工設計基礎網站美工設計基礎

相對于點、線來說，面能起到穩(wěn)定版面的作用。網站美工設計基礎

4．2版式設計的審美形式原理

美是每一個人追求的精神享受。當你接觸任何一件有存在價值的事物時，它必定具備合乎邏輯的內容和形式。然而單從形式條件來評價某一事物或某一視覺形象，美或丑的感覺在大多數人中共存著一種源于人們長期生產、生活積累的共識，使我們逐漸發(fā)現了形式美的基本法則。網站美工設計基礎

一、對稱與均衡

對稱與均衡是圖案最基本的兩種組織、構成形式。對稱體現了靜感與穩(wěn)定性，具有端莊，安定的美；均衡則表現了動感和變化性，具有生動、活潑的美。對稱是指圖形或物體對某個中心點、中心線、對稱面，在形狀、大小或排列上具有一一對應的關系；均衡是不對稱形態(tài)的一種平衡。網站美工設計基礎二、重復與交錯

版面設計中反復使用的基本形或線的形狀、大小、方向都是相同的稱為重復。重復使設計產生安定、整齊、規(guī)律的統一。但視覺感受有時容易顯的呆板、平淡、缺乏趣味性的變化，因此在版面中可安排一些交錯與重疊，使版面變得靈活。

網站美工設計基礎網站美工設計基礎交錯使版面變得靈活重復圖形構成的版面效果網站美工設計基礎

三、節(jié)奏與韻律

節(jié)奏是規(guī)律性的重復。音樂靠節(jié)拍體現節(jié)奏，繪畫通過線條、形狀肌理和色彩體現節(jié)奏。節(jié)奏往往呈現一種秩序美。

網站美工設計基礎

韻律更多地呈現一種靈活的流動美。它變節(jié)奏的等距間隔為幾何級數的變化間隔，賦予重復的音節(jié)或圖形以強弱起伏、抑揚頓挫的規(guī)律變化，產生優(yōu)美的律動感。節(jié)奏與韻律往往互相依存，互為因果。網站美工設計基礎采用同一個圖形，在大小、顏色上作漸變，達到優(yōu)美旋律的追求。

網站美工設計基礎

四、對比與調和

對比是差異性的強調，對比的因素存在于相同或相異的性質之間。在版面設計中，缺少對比效果，就缺少活力。

網站美工設計基礎版面設計可以從諸多方面運用對比手法：如虛實、聚散、繁簡、主次、輕重、大小、方向、長短、粗細、曲直、強弱、黑白、色相、純度、色調等的對比。網站美工設計基礎調和是指適合、舒適、安定、統一，是近似性的強調，使兩者或兩者以上的要素相互具有共性。網站美工設計基礎明暗對比網站美工設計基礎

對比中的漸變網站美工設計基礎

五、變異與秩序

變異是一種在整體效果中的局部突變。將變異的原理用于版式設計，會使版面更活躍、更豐富、更有情趣，而異質形象往往就是整個版面最具動感、最引人關注的焦點，也是其含義延伸或轉折的始端。網站美工設計基礎

表現形式有位置、規(guī)律的轉移、色彩等的變異，也可依據大小、方向、形狀的不同來構成特異效果。網站美工設計基礎文字的部分變異，增強了版面的視覺感和意義。網站美工設計基礎形象富有秩序的變異

網站美工設計基礎

六、虛實與留白

“虛與實”是中國畫論對二維平面空間利用的概括。是指占有實際版面的部分是“實”，留白的地方為“虛”。

網站美工設計基礎留白即可以完全是空白，但有時也可以用細弱的文字、圖形或淡淡的色彩來做底，這要根據內容而定。在排版設計中，巧妙地留白，是為了更好地襯托主題，造成版面的空間層次。網站美工設計基礎虛實層次使版面主次更加突出留白使想象更加豐富

4.3網頁的版式設計

所謂網頁的版式設計，是在有限的屏幕空間上將視聽多媒體元素進行有機的排列組合，將理性思維個性化的表現出來，是一種具有個人風格和藝術特色的視聽傳達方式。網站美工設計基礎網站美工設計基礎

它在傳達信息的同時，也產生感官上的美感和精神上的享受。同報刊雜志等平面媒體的版式設計有很多共同之處，在網頁制作中占有重要的地位。網站美工設計基礎

4.3.1網頁界面空間

網頁界面空間是指網頁中多媒體元素的設計安排和多媒體元素呈現的信息量的多少。網頁的界面設計一般和以下項目有所聯系：瀏覽軟件，即網頁瀏覽器（工具欄、地址欄、狀態(tài)欄、菜單欄）和導航要素（主菜單、子菜單、搜索欄、歷史紀錄等）及各種內容（標志、圖像、文本、著作權標志等）

網站美工設計基礎網頁的界面

網站美工設計基礎

4.3.2網頁版式的基本類型

網頁版式的基本類型主要有：骨格型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型。

網站美工設計基礎

骨格形網頁具有構建的意味，一般情況下都會顯示其良好的條理性。骨格型網頁版式示意圖網站美工設計基礎骨格型網頁版式

骨格型網頁版式網站美工設計基礎

滿版形網頁設計其充實的版面整體性較好，但容易產生壓抑和無空間感，然而版面使用率高。反之，如果將版面統籌布局后留有大量的空間，造成視覺上的低版面率，會給人一種品味高雅的格調。滿版型網頁版式示意圖網站美工設計基礎滿版型網頁版式

滿版型網頁版式網站美工設計基礎網站美工設計基礎視覺上的底版面率設計網站美工設計基礎

分割形的網頁條分縷析，板塊內容界限分明，具有很強的秩序感和條理性。分割型網頁版式示意圖網站美工設計基礎分割型網頁版式

分割型網頁版式網站美工設計基礎