《版式設(shè)計(jì)項(xiàng)目教程》4網(wǎng)頁(yè)版式設(shè)計(jì)

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

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