兔展H5頁面製作|H5版面設計原則

其實講到版式設計，網上一大波的教程，H5的版面設計原則也是基於此延伸出來的，只是我們的範圍縮小的一些，是針對一個固定的尺寸的圖文動畫結合的交流。考慮到大部分是基礎用户，我們就講些簡單易懂的排版技巧。

操作方法

（01）分割排版分割排版分為上下分割和左右分割，整個版面分成上下或左右兩部分，在上半部或下半部配置圖片(可以是單幅或多幅)，另一部分則配置文字與簡單的形狀元素。切割的方式是現在普遍流行且應用較多的排版方式，它使得圖片部分感性而有活力，而文字則理性而靜止。在手機端更適用於上下分割，也是常規的佈局方式。

（02）中軸排版將圖形作水平方向或垂直方向排列，文字配置在上下或左右。水平排列的版面，給人穩定、安靜、平和與含蓄的感覺。垂直排列的版面，給人強烈的動感。

（03）滿版排版滿版型排版，版面以圖像充滿整版，主要以圖像為訴示，視覺傳達直觀而強烈。文字配置在上下、左右或中部（邊部和中心）的圖像上。滿版型，給人大方、舒展的感覺。是商品廣告H5常用的形式。

（04）傾斜型傾斜性的版面主體形象或多幅圖像作傾斜編排，造成版面強烈的動感和不穩定因素，引人注目。

（05）重心型重心型版式容易讓人產生視覺焦點，使其更加突出。有 3種類型：1.直接以獨立而輪廓分明的形象佔據版面中心；2.向心：視覺元素向版面中心聚攏的運動；3.離心：猶如石子投入水中，產生一圈一圈向外擴散的弧線的運動。

（06）自由型自由型的排版方式，主要取決與個人的設計能力和審美標準，無規律的、隨意的編排構成。有活潑、輕快的感覺。