網(wǎng)頁(yè)的版式設(shè)計(jì)整理（部分）

時(shí)間：2023-09-30 10:18:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-30 10:18:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)頁(yè)的版式設(shè)計(jì)整理（部分）： 主要是自己手動(dòng)打字整理總結(jié)的之前的，可能有些不全，是為了防止自己忘記，加深記憶。

網(wǎng)頁(yè)的版式設(shè)計(jì)通常包括：視覺(jué)元素及其組織形式、頁(yè)面間的專場(chǎng)以及網(wǎng)站的導(dǎo)航形式等。“視覺(jué)元素的組織”包括元素的大小和數(shù)量、表格的布局、散點(diǎn)組合與塊狀組合、主題形象的體現(xiàn)、留白效果的表現(xiàn)、圖與文的關(guān)系、曲線與直線的組織、水平線與垂直線以及斜線的比較，等等。根據(jù)不同的組織形式，可以將網(wǎng)頁(yè)的版式大致劃分為以下幾種類型：骨骼型、滿版型、分割型、中軸型、傾斜型、對(duì)稱型、焦點(diǎn)型、三角型、自由型。

骨骼型：網(wǎng)頁(yè)中骨骼型是一種規(guī)范、嚴(yán)謹(jǐn)?shù)姆指罘绞?，類似于?bào)刊的版式。常見(jiàn)的網(wǎng)頁(yè)骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。通常以豎向分欄居多。這種版式給人以和諧、理性的美。

骨骼型版式常為綜合門(mén)戶、新聞媒體類網(wǎng)站所采用。

例如：crl.cn

滿版型

滿版型頁(yè)面以圖像充滿整版。主要以圖像為訴求點(diǎn)，可將部分文字置于圖像之上。視覺(jué)傳達(dá)效果直觀而突出，給人以生動(dòng)大方的感覺(jué)。

滿版型版式被各種網(wǎng)站所采用，其中以韓國(guó)網(wǎng)站居多。

例如：http:?????

http://www.t1j.co.kr/

http://event.kt.co.kr/


分割型

分割型版式指把真?zhèn)€頁(yè)面分成上下或左右兩部分，分別安排圖片或文字內(nèi)容。兩部分形成對(duì)比，使圖片部分感性而具表現(xiàn)力，文字部分則理性而具說(shuō)服力?？梢哉{(diào)整圖片和文字所占的面積比例，來(lái)調(diào)節(jié)對(duì)比的強(qiáng)弱。如果圖片比例過(guò)大，文字字體過(guò)于纖細(xì)，段落疏松，會(huì)造成視覺(jué)心理的不平衡，顯得生硬。如果通過(guò)文字或圖片將分割線虛化處理，就會(huì)產(chǎn)生自然和諧的效果。

例如：http://www.hitom.co.kr/

http://www.vonosoup.co.kr/


中軸型

中軸型版式指沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺(jué)。垂直排列的頁(yè)面給人以舒暢的感覺(jué)。中軸型版式為各類網(wǎng)站所采用。

例如：http://torchrelay.beijing2008.cn/

http://www.samsungypm.com/


傾斜型

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

傾斜型版式為各類網(wǎng)站所采用。

例如：??? ?? | Huvis

Welcome previsualsdesign.com - Hostmonster.com

http://www.coca-cola.com.ar/elladococacola/


對(duì)稱型

對(duì)稱型版式的頁(yè)面給人穩(wěn)定、嚴(yán)謹(jǐn)、理性的感覺(jué)。對(duì)稱分為絕對(duì)對(duì)稱和相對(duì)對(duì)稱。一般采用相對(duì)對(duì)稱的手法，以避免呆板。左右對(duì)稱的頁(yè)面版式比較常見(jiàn)。四角型對(duì)稱也是其中一種，指在頁(yè)面四角安排相應(yīng)的視覺(jué)元素。

對(duì)稱型版式為各類網(wǎng)站所采用。

例如：http://pianteepassione/com/

?? - ???? ???! ??


焦點(diǎn)型

焦點(diǎn)型的網(wǎng)頁(yè)版式通過(guò)對(duì)瀏覽者視線的誘導(dǎo)，可以使頁(yè)面產(chǎn)生強(qiáng)烈的視覺(jué)效果，如集聚感或膨脹感等。

焦點(diǎn)型分三種情況：

中心---將圖片或文字置于頁(yè)面的視覺(jué)中心。

向心---視覺(jué)元素引導(dǎo)瀏覽者的視線向頁(yè)面中心聚攏。

離心---視覺(jué)元素引導(dǎo)瀏覽者的視線向外輻射。

例如：行政書(shū)士 講座ナビ

http://musicaltalk.cafe24.com/

Buy Lubricants, Jelly & Sex Toys for Couples online | K-Y?



三角型

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

例如：?????

ペレーダ | molten モルテンスポーツ事業(yè)本部

http://orions.co.kr/



自由型

自由型版式的頁(yè)面具有活潑、輕快的氣氛。

自由型版式也可應(yīng)用于多種網(wǎng)站。

例如：http://9dan.aekung.co.kr/

http://www.sonnorl.co.kr/