網(wǎng)頁(yè)版式教程入門(mén)

時(shí)間：2017-05-16 14:37:06 智明1010由分享

　　網(wǎng)頁(yè)版式是什么，要學(xué)什么內(nèi)容?下面就由學(xué)習(xí)啦小編為你帶來(lái)網(wǎng)頁(yè)版式入門(mén)教程，希望你喜歡。

　　網(wǎng)頁(yè)版式入門(mén)教程

　　網(wǎng)頁(yè)版式的基本類(lèi)型主要有骨骼型、滿(mǎn)版型、分割型、中軸型、曲線型、傾斜型、對(duì)稱(chēng)型、焦點(diǎn)型、三角型、自由型十種。

　　1.骨骼型

　　網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法，類(lèi)似于報(bào)刊的版式。常見(jiàn)的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性

　　綜合運(yùn)用多種分欄形式

　　2.滿(mǎn)版型

　　頁(yè)面以圖像充滿(mǎn)整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。視覺(jué)傳達(dá)效果直觀而強(qiáng)烈。滿(mǎn)版型給人以舒展、大方的感覺(jué)。隨著寬帶的普及，這種版式在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用越來(lái)越多

　　四邊出血，向外擴(kuò)張，適合年輕人的口味

　　3.分割型

　　把整個(gè)頁(yè)面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積，來(lái)調(diào)節(jié)對(duì)比的強(qiáng)弱。例如：如果圖片所占比例過(guò)大，文案使用的字體過(guò)于纖細(xì)，字距、行距、段落的安排又很疏落，則造成視覺(jué)心理的不平衡，顯得生硬。倘若通過(guò)文字或圖片將分割線虛化處理，就會(huì)產(chǎn)生自然和諧的效果

　　分割線上的壓置的圖片既打破了頁(yè)面分割的生硬感，也使自身得到強(qiáng)調(diào)。左邊框上的小標(biāo)簽?zāi)它c(diǎn)睛之筆

　　4.中軸型

　　沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺(jué)。垂直排列的頁(yè)面給人以舒暢的感覺(jué)

　　不易覺(jué)察的中軸型版式，給人以輕快之感

　　5.曲線型

　　圖片、文字在頁(yè)面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏

　　網(wǎng)站的導(dǎo)航標(biāo)題沿圖形弧線排列

　　6.傾斜型

　　頁(yè)面主題形象或多幅圖片、文字作傾斜編排，形成不穩(wěn)定感或強(qiáng)烈的動(dòng)感，引人注目

　　文字水平排列，將畫(huà)框斜置，產(chǎn)生對(duì)比與動(dòng)勢(shì)，印象被加強(qiáng)

　　7.對(duì)稱(chēng)型

　　對(duì)稱(chēng)的頁(yè)面給人穩(wěn)定、嚴(yán)謹(jǐn)、莊重、理性的感受。

　　對(duì)稱(chēng)分為絕對(duì)對(duì)稱(chēng)和相對(duì)對(duì)稱(chēng)。一般采用相對(duì)對(duì)稱(chēng)的手法，以避免呆板。左右對(duì)稱(chēng)的頁(yè)面版式比較常見(jiàn)。

　　四角型也是對(duì)稱(chēng)型的一種，是在頁(yè)面四角安排相應(yīng)的視覺(jué)元素。四個(gè)角是頁(yè)面的邊界點(diǎn)，重要性不可低估。在四個(gè)角安排的任何內(nèi)容都能產(chǎn)生安定感?？刂坪庙?yè)面的四個(gè)角，也就控制了頁(yè)面的空間。越是凌亂的頁(yè)面，越要注意對(duì)四個(gè)角的控制

　　以相對(duì)對(duì)稱(chēng)手法制作的導(dǎo)航頁(yè)面

　　8.焦點(diǎn)型

　　焦點(diǎn)型的網(wǎng)頁(yè)版式通過(guò)對(duì)視線的誘導(dǎo)，使頁(yè)面具有強(qiáng)烈的視覺(jué)效果。焦點(diǎn)型分三種情況

　　通過(guò)離心的版式，清晰地傳達(dá)出網(wǎng)站提供的服務(wù)

　　(1)中心　以對(duì)比強(qiáng)烈的圖片或文字置于頁(yè)面的視覺(jué)中心。

　　(2)向心　視覺(jué)元素引導(dǎo)瀏覽者視線向頁(yè)面中心聚攏，就形成了一個(gè)向心的版式。向心版式是集中的、穩(wěn)定的，是一種傳統(tǒng)的手法。

　　(3)離心　視覺(jué)元素引導(dǎo)瀏覽者視線向外輻射，則形成一個(gè)離心的網(wǎng)頁(yè)版式。離心版式是外向的、活潑的，更具現(xiàn)代感，運(yùn)用時(shí)應(yīng)注意避免凌亂。

　　9.三角型

　　網(wǎng)頁(yè)各視覺(jué)元素呈三角形排列。正三角形(金字塔型)最具穩(wěn)定性，倒三角形則產(chǎn)生動(dòng)感。側(cè)三角形構(gòu)成一種均衡版式，既安定又有動(dòng)感

　　整體看為正三角形的構(gòu)圖，主體形象穩(wěn)定而突出

　　10.自由型

　　自由型的頁(yè)面具有活潑、輕快的風(fēng)格