網頁版式設計構成

網頁版式設計構成

　　網頁的版式設計通常包括:視覺元素及其組織形式、頁面間的專場以及網站的導航形式等。以下是小編為大家收集的網頁版式設計構成，歡迎大家借鑒與參考，希望對大家有所幫助。

　　攝影視覺與網頁設計在視覺傳達上擁有這許多共同性，也許它們之間并沒有什么距離，或許他們本身就是一家。設計師同攝影師大致一樣，都是在創造可供視覺傳達的圖像，這種的共性決定了其形式方面、構成方面內在規律的相似性。攝影講究微妙的光影對比，以取得畫面豐富的層次感。攝影也看重畫面的構圖，使畫面與現實相比，更具有感染力!接下來，將通過攝影的構圖、景深、光影來闡述它與網頁設計的共性。

　　攝影構圖指照片畫面上的布局、結構。其中具體含義是根據拍攝要求，運用相機鏡頭的成像特征和攝影造型手段，在取景器這個視覺框架內運用審美原則安排畫面，使拍攝對象比現實更具藝術感染力。那么讓我們來看看攝影的構圖方式運用到網頁當中去，會duang出一個怎樣的火花呢!

　　以三個視覺中心為景物的主要位置，有時是以三點成面幾何構成來安排景物，形成一個穩定的三角形。這種三角形可以是正三角也可以是斜三角或倒三角，其中斜三角較為常用，也較為靈活。三角形構圖具有安定、均衡但不失靈活的特點。

　　正三角形如同金字塔一樣，兩條斜邊向上匯聚，其尖端有一種向上的動感。在網頁設計中，這種構圖最穩定，在心理上給人以堅實。安全的感覺。

　　三角形給人穩定的感覺，而倒三角給人的感覺截然相反，即不穩定、緊張的感覺。倒三角形構圖相對正三角形構圖而言更加新穎，但畫面的穩定和均衡感沒有正三角形構圖強烈，相比之下，它更能表現一種張力和壓迫感，使畫面更富有視覺沖擊力。

　　對稱式構圖是一種表現上下、左右對稱效果的構圖，可以給人安定、莊重、深遠之感。

　　對稱式構圖把水平線、垂直線安排在畫面中央。例如拍攝景物的倒影時，水平線要在畫面中央，才能呈現上下對稱的視覺效果。又比如說，當圖像左右對稱，就應該將垂直線安排在畫面中央，以表現為左右對稱構圖的形式美。

　　使用對稱式構圖會使畫面較為平淡，因為人的視線重復觀賞同樣的形態，會產生視覺疲勞。所以當我們采用此構圖方法時，可以利用，色彩、光影等，打破單調感。

　　當你欣賞一副畫面時，你的視線很容易被某些線條引導有木有，就像被路標指引那樣，讓你進入到特定場景中去，這個就是引導線的作用，巧妙利用引導線，可以有意識地將用戶的注意力集中于你想要表現的主題上去。

　　其實引導線并非一定是曲線，可以是人的視線，也可以是拼接在一起的小色塊等等。只要能將觀者的視線自然有序地拉到畫面中的主體對象，那么它就達到了引導線的目的，巧妙地突出主體。

　　所謂景深，就是當焦點對準某一點時，其前后都仍可清晰的范圍。它能決定是把背景模糊化來突出拍攝對象，還是拍出清晰的背景。

　　淺景深(大光圈)

　　淺景深(大光圈)是指景深越來越短，景深外的景物模糊不清，對焦點對焦到的主體，使拍攝主體清晰。

　　一些失敗的作品之所以不能引起用戶的注意力，是因為頁面沒有層次和立體感。可通過控制景深的方法，運用淺景深，讓主體清晰，背景模糊來增強突出主體，使主題跟背景有強烈的實與虛的對比。

　　深景深(小光圈)

　　小光圈是指景深變深，對焦主體以外的背景和前景不容易變模糊，保持清晰。運用深景深，使畫面更加附有空間感，且營造更有深度的氛圍。

　　利用景深，前后虛實的關系來突出主題，增加畫面層次感、空間感。

　　攝影離不開光，有光才有影�，F實生活中的自然光來自唯一的太陽光。對于投射在被攝體的光線，因方向和角度不同，不只是陰影的位置和面積會隨之改變，而被攝體的印象。感覺、包括影調和色調也會呈現不同的視覺效果。

　　高反差光影

　　光線反差的高低能營造不同的畫面氛圍，通常高反差的光影小景亮部細節表現完美，質感強烈，可給觀者非常直觀的感受;而暗部幾乎是細節全無，色調單一，這樣可以有效襯托出亮部的主體，并且暗部自身也會影響觀者的感覺。大片的留白會給用戶以無限的想象空間，是主體感覺的一種延伸與擴展。不同的主體對象使背景暗部給欣賞者的遐想空間也不同，主要的想象依據是觀者的生活經驗及自然常識。

　　視覺反差大則畫面視覺張力強

　　低反差光影

　　與高反差光影效果不同，低反差光影的作品中一般極少有極亮與極暗區域、中間亮度區域占據了幾乎全部畫面，同時，作品中各種不同色彩的飽和度較低，這樣畫面整體會營造出一種淡雅、朦朧的氛圍，給觀者的視覺效果也比較平淡、柔和。另外，低反差畫面的視覺效果也比較模糊，這種模糊并不是因為對焦不清晰，主要是由人的視覺特性引起的錯覺。

　　視覺反差小則柔和平緩，使畫面更有韻味。

　　哲學里事物時普遍聯系，在藝術范疇里所有的方向都有相似的共性，我們不妨換一個角度，也許能看到不一樣的認知。

　　這里所舉的例子僅僅只是一小部分，希望能起到拋磚引玉的作用。

　　擴展資料：

　　網頁的藝術設計是網頁制作技術與藝術表現形式的完美結合。即以先進的網頁制作技術和豐富的視聽藝術效果來全面展示網站內容。

　　網頁的版式設計就是在有限的屏幕空間上將多種媒體元素進行有機的組合，讓各種元素根據主題的要求進行合理配置。使頁面中不同元素所占的面積大小適中，通過線條色塊將不同的元素進行分類，讓訪問者能很快的從中找到信息。

　　常見的網頁板式構圖分析

　　1.同字形 很多大型網站都采用這種類型的布局這種信息內容的布局方法是在最上方放置網頁的標題以及廣告條幅，中間是網頁的主要內容，在網頁的最底部放置網站的一些基本信息，聯系方式，版權聲明，這是最常用的布局方式。

　　2.T字形 網頁的頁面頁眉是標題或廣告橫幅，頁面的左側是一系列超鏈接，右側是很寬的正文下面是網站的一些輔助信息。整體效果類似英文字母T.

　　3.三字型 頁面最上方為標題，頁面中間為正文，他可以是一些文章頁面或注冊頁面，下面是網站的相關信息。

　　4.海報型 隨著網絡技術的不斷發展，越來越多的網站會把首頁制作成一張精美的平面海報，配以一些文字和動畫效果，或是簡潔的鏈接按鈕。海報型的構圖方式能使畫面視覺沖擊力強，訪問者印象深刻。不過如果處理不當會使首頁速度較慢，所以在制作時要注意。

　　5.flash型 他與海報類型相似，只是這種結構采用了目前非常流行的flash動畫，與封面行不同的是，由于flash功能強大，頁面所表達的信息更豐富，視覺效果和聽覺效果更出色。

【網頁版式設計構成】相關文章：

網頁美工色彩設計要素構成06-10

平面設計版式技巧07-23

版式設計中的圖版率詳解08-04

版式設計中文字的編排設計06-16

設計中的色彩構成06-25

平面設計的版式編排與視覺習慣07-14

包裝設計的構成要素10-01

網頁設計基礎06-20

網頁設計課程08-09