版式設(shè)計項目教程BANSHISHEJIXIANGMUJIAOCHENG4.1網(wǎng)頁設(shè)計基礎(chǔ)知識4.2圖版編排的構(gòu)成4.3項目實訓(xùn)案例4.4項目總結(jié)4.5習(xí)題網(wǎng)頁版式設(shè)計4.1網(wǎng)頁設(shè)計基礎(chǔ)知識4.1.1網(wǎng)頁的平面構(gòu)成網(wǎng)頁設(shè)計是一個系統(tǒng)整合工程，包括內(nèi)容、技術(shù)和視覺傳達設(shè)計三個環(huán)節(jié)，是藝術(shù)與技術(shù)的結(jié)合。當我們確定好一個網(wǎng)頁的內(nèi)容和主題，就需要在現(xiàn)有技術(shù)條件下明確設(shè)計的對象，運用各種設(shè)計要素來表現(xiàn)網(wǎng)頁的主題。進行網(wǎng)頁設(shè)計時需要考慮：（1）文字設(shè)計：LOGO文字、正文文字、按鈕文字。（2）圖標設(shè)計：按鈕、LOGO、矢量圖標、像素圖標。（3）導(dǎo)航設(shè)計：導(dǎo)航條、站點地圖。（4）音頻設(shè)計：背景音樂、動畫音樂。（5）視頻設(shè)計：網(wǎng)絡(luò)廣告、網(wǎng)絡(luò)視頻。（6）動畫設(shè)計：網(wǎng)絡(luò)廣告、GIF動畫、FLASH動畫。（7）圖形、圖像設(shè)計：廣告條、矢量圖形、像素圖案。（8）VR設(shè)計：三維廣告、虛擬現(xiàn)實等。平面廣告版式設(shè)計1）網(wǎng)頁設(shè)計中點的構(gòu)成點表示位置，既無長度也無寬度，是最小的單位。一個單獨而細小的對象都可稱之為點，點在頁面中能起到點睛的作用。2）網(wǎng)頁設(shè)計中線的構(gòu)成線具有長度而無寬度，點的移動軌跡形成了線。線具有閉合成形、分割區(qū)域、限定范圍、視覺導(dǎo)向的功能。平面廣告版式設(shè)計3）網(wǎng)頁設(shè)計中面的構(gòu)成面是線移動軌跡的結(jié)果，有長度和寬度。面的產(chǎn)生：點的形狀的擴大；無數(shù)點在量上的群集；線的寬度不斷地增加和線的平移翻轉(zhuǎn)的軌跡。面具有充實、穩(wěn)重、整體的特征。平面廣告版式設(shè)計4.1.2色彩搭配在網(wǎng)頁設(shè)計中，色彩具有先聲奪人的力量，是網(wǎng)頁設(shè)計中最直接、最有力的表現(xiàn)形式，既可以表現(xiàn)網(wǎng)站風(fēng)格，樹立網(wǎng)站形象，又給人留下深刻的印象。平面廣告版式設(shè)計1）色彩的形成真正揭開光色之謎的是英國科學(xué)家牛頓。17世紀后半期，牛頓進行了著名的色散實驗。結(jié)果出現(xiàn)了意外的奇跡：在對面墻上出現(xiàn)了一條七色組成的光帶，而不是一片白光，七色按紅、橙、黃、綠、青、藍、紫的順序一色緊挨一色地排列著，極像雨過天晴時出現(xiàn)的彩虹。2）網(wǎng)頁設(shè)計中色彩的基本原則色彩的個性鮮明性。色彩的合理性。色彩的聯(lián)想性。色彩的藝術(shù)風(fēng)格性。3）網(wǎng)頁色彩搭配的技巧網(wǎng)頁設(shè)計中的色彩運用詮釋了整體風(fēng)格的統(tǒng)一性。作為展示給瀏覽者的頁面，色彩是呈現(xiàn)的第一視覺沖擊力，色彩的搭配、區(qū)域分布、提示性功能等，都可以通過色彩來進行視覺上的空間劃分。平面廣告版式設(shè)計4）頁面各要素的色彩搭配（1）背景與文字。

（2）LOGO和BANNER。（3）導(dǎo)航、小標題。（4）鏈接顏色設(shè)置。平面廣告版式設(shè)計4.1.3網(wǎng)頁編排設(shè)計文字是人類思想感情交流的必然產(chǎn)物。隨著人類文明的進步，它由簡到繁，逐步形成了科學(xué)的規(guī)范化的程式。平面廣告版式設(shè)計1）文字編排方式網(wǎng)頁里的正文部分是由許多單個文字經(jīng)過編排組成的群體，我們要充分發(fā)揮這個群體形狀在界面整體布局中的作用。（1）兩端對齊。（2）一端對齊。（3）文字繞圖編排。（4）自由編排。（5）標題與正文的編排。平面廣告版式設(shè)計2）網(wǎng)頁布局的基本結(jié)構(gòu)（1）左右對稱結(jié)構(gòu)布局。（2）“同”字型結(jié)構(gòu)布局。（3）“回”字型結(jié)構(gòu)布局。（4）“匡”字型結(jié)構(gòu)布局。平面廣告版式設(shè)計（5）自由式結(jié)構(gòu)布局。（6）“另類”結(jié)構(gòu)布局。平面廣告版式設(shè)計4.2圖版編排的構(gòu)成4.2.1圖的設(shè)計方式在版式設(shè)計中，圖片與文字一樣是重要的構(gòu)成元素，圖片的放置、數(shù)量與位置等會直接影響版面的編排效果。平面廣告版式設(shè)計1）圖片的面積與張力圖片面積的控制可以體現(xiàn)主次分明的格局。2）圖片的數(shù)量圖片數(shù)量的多少可以影響觀者的閱讀興趣，數(shù)量較多可以營造熱鬧的版面氛圍，也可以形成對比的格局.3）圖片的方向圖片的方向是指在一個版面中，因圖片擺放所形成的版面視覺走向，如水平方向、垂直方向、傾斜方向等。單體建模與標準材質(zhì)4.2.2造型原理1）對稱當從訂口處裝訂對頁的時候，采用能夠使所安排的頁面內(nèi)容在對折時完美地互相重合的構(gòu)圖，就會形成右側(cè)頁面與左側(cè)頁面左右對稱的形式。2）節(jié)奏與韻律節(jié)奏與韻律來自于音樂概念，正如歌德所言：“美麗屬于韻律?！表嵚杀滑F(xiàn)代版式設(shè)計所吸收。韻律是按照一定的條理、秩序，重復(fù)連續(xù)地排列，形成一種律動形式。平面廣告版式設(shè)計圖片的構(gòu)成方式直接關(guān)系著版面的視覺效果。圖片在版面中的構(gòu)成方式是根據(jù)版式結(jié)構(gòu)與版面風(fēng)格來安排的，所以，版式設(shè)計中圖片的分布類型是多種多樣的。4.2.3構(gòu)成的種類平面廣告版式設(shè)計1）上下;2）左右;3）中軸分布;4）自由分布平面廣告版式設(shè)計4.3項目實訓(xùn)案例要求：（1）布局合理，具有藝術(shù)表現(xiàn)性、多向交互性。（2）設(shè)計出新穎有創(chuàng)造力并且實用的網(wǎng)頁界面設(shè)計。提示：（1）網(wǎng)頁設(shè)計從策劃、設(shè)計、制作到發(fā)布需要制訂一個完整而嚴謹?shù)牧鞒?，以便提高工作效率，達到事半功倍的效果。網(wǎng)頁設(shè)計的流程主要包括項目規(guī)劃、內(nèi)容組織、頁面設(shè)計、測試發(fā)布、站點推廣、評估反饋六個環(huán)節(jié)。（2）這里的練習(xí)主要是設(shè)計主界面，要求主界面內(nèi)容完整。4.3.1網(wǎng)頁版式設(shè)計案例—傳媒藝術(shù)系網(wǎng)頁界面設(shè)計平面廣告版式設(shè)計要求：（1）布局合理，具有藝術(shù)表現(xiàn)性、多向交互性。（2）設(shè)計出新穎有創(chuàng)造力并且實用的網(wǎng)頁界面。提示：（1）設(shè)計網(wǎng)頁時，一定要注意頁面版式的合理性，注重版式的設(shè)計，不要板塊冗雜；頁面版式的搭配，注重協(xié)調(diào)簡潔。同時要注意頁面色彩的搭配，多用暖色調(diào)，協(xié)調(diào)搭配冷暖色。（2）這里的練習(xí)主要是設(shè)計幾個大的界面設(shè)計效果。4.3.2個人網(wǎng)頁界面設(shè)計案例平面廣告版式設(shè)計平面廣告版式設(shè)計4.4項目總結(jié)1）匠心獨具的網(wǎng)頁風(fēng)格與整體設(shè)計自從網(wǎng)頁走上藝術(shù)的道路，成為視覺傳達藝術(shù)家族的新成員以來，匠心獨具的網(wǎng)頁風(fēng)格設(shè)計就成為網(wǎng)頁設(shè)計的原則與特征中首要的一點，它對網(wǎng)頁的整體形式設(shè)計作了一個概括性的要求說明。2）詞約指明的網(wǎng)頁結(jié)構(gòu)與導(dǎo)航設(shè)計詞約指明，意指言辭簡潔，旨意明確，在此處用以形容優(yōu)秀的網(wǎng)頁結(jié)構(gòu)和導(dǎo)航設(shè)計，強調(diào)網(wǎng)頁結(jié)構(gòu)與導(dǎo)航設(shè)計一定要簡潔清晰、明確實在。平面廣告版式設(shè)計3）渾然一體的網(wǎng)頁內(nèi)容與形式設(shè)計內(nèi)容決定形式，形式表現(xiàn)內(nèi)容，渾然一體的網(wǎng)頁內(nèi)容與形式設(shè)計是優(yōu)秀網(wǎng)頁設(shè)計的原則與特征之一。網(wǎng)頁內(nèi)容主要是指網(wǎng)頁的圖片、文字與多媒體元素等信息的綜合，是網(wǎng)頁基本組成部分；網(wǎng)頁形式則主要是指網(wǎng)頁風(fēng)格、版式、色彩、設(shè)計元素等相關(guān)設(shè)計語言，是網(wǎng)頁的外在表現(xiàn)方式。廣告表現(xiàn)的基本原則平面廣告版式設(shè)計4.5習(xí)題設(shè)計一個個人網(wǎng)頁界面，體現(xiàn)個人的風(fēng)格特點。要