好的構(gòu)圖能夠讓H5設(shè)計(jì)更出彩燕锥，事半功倍辜贵。今天我們就來看看一些常見的H5版式構(gòu)圖。WPS秀堂H5資深設(shè)計(jì)師@大梨哥總結(jié)了H5海報(bào)常見的7種構(gòu)圖方法脯宿，希望能給大家提供一些思路和借鑒念颈。
1.幾何的運(yùn)用
在日常設(shè)計(jì)中，我們隨處可見幾何圖形的存在连霉，簡(jiǎn)單的三角形榴芳、正方形、長(zhǎng)方形跺撼、圓形,甚至幾根線條,都可以組成很多有趣的圖形窟感，很符合現(xiàn)代審美需求，適當(dāng)?shù)倪\(yùn)用幾何能夠給H5頁(yè)面帶來動(dòng)感與節(jié)奏感歉井。加入幾根線條柿祈，幾個(gè)形狀，就能令H5頁(yè)面起到意想不到的效果哩至。
實(shí)現(xiàn)的時(shí)候需要注意的是素材不適合太過復(fù)雜和花哨躏嚎，一般可以選用純色大塊搭配漸變，主要突出形狀和區(qū)塊菩貌。
A.簡(jiǎn)單幾何
一個(gè)形狀或幾個(gè)形狀組合卢佣，占據(jù)頁(yè)面主體位置，畫面會(huì)變得更有趣生動(dòng)箭阶，內(nèi)容區(qū)域也能得到有效劃分虚茶。
這類構(gòu)圖方式對(duì)內(nèi)容沒有過多要求，可隨意安排仇参，具體排版可以根據(jù)內(nèi)容來處理嘹叫。
比如說這幾頁(yè)H5頁(yè)面，分別是由簡(jiǎn)單的圓形诈乒、三角形和不規(guī)則橢圓構(gòu)成的罩扇，都是簡(jiǎn)單幾何圖形，這也是現(xiàn)在H5封面用得最多怕磨，最普遍的一種構(gòu)圖方式暮蹂，可以很好的突出標(biāo)題寞缝，或突出產(chǎn)品圖片癌压。
B.幾何組合
幾何組合可以集中而規(guī)律的排列仰泻，從整體上抓人眼球。這種構(gòu)圖方式適合每個(gè)區(qū)塊中的內(nèi)容屬于平級(jí)關(guān)系的H5頁(yè)面滩届，例如示例中的幾個(gè)功能點(diǎn)和分類都是屬于同一級(jí)的內(nèi)容集侯，所占的比例也相同，用這種組合的排列能夠保持各內(nèi)容的關(guān)系帜消，也能讓布局更有創(chuàng)意棠枉。
如圖的這三個(gè)例子，第一個(gè)是菱形組合而成泡挺，后兩個(gè)都是六邊形組合而成辈讶，合適的幾何圖形的組合會(huì)使頁(yè)面顯得錯(cuò)落有致，這種構(gòu)圖方式會(huì)更多應(yīng)用于內(nèi)容比較多且是平級(jí)關(guān)系的H5頁(yè)面娄猫，例如產(chǎn)品的功能點(diǎn)展示贱除、公司特性展示、多個(gè)平級(jí)人物介紹等媳溺。
C.隨意組合
圖例中這種不規(guī)則的構(gòu)圖月幌，給人的感覺就是時(shí)尚不刻板，排版干凈悬蔽，易于識(shí)別扯躺。不規(guī)則的構(gòu)圖方式，避免了畫面生硬蝎困，不容易產(chǎn)生審美疲勞录语。
不同的形狀和排列，呈現(xiàn)出來的視覺效果也不一樣禾乘。這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時(shí)尚感澎埠，科技感，例如時(shí)裝盖袭，時(shí)尚活動(dòng)失暂，以及科技類H5的內(nèi)容展示等等。
2.蒙板的運(yùn)用
通常在背景顏色比較多的時(shí)候我們就可以運(yùn)用蒙版鳄虱，其實(shí)也就是一些與背景中的顏色比較協(xié)調(diào)的一些形狀弟塞，把透明度降低，這樣既不會(huì)影響圖片的完整性拙已，又能夠讓文字更加清晰决记。
上邊的例子是比較常見的一種局部蒙版的用法，就是為了區(qū)分文字和背景圖片倍踪。
另外系宫，蒙版的運(yùn)用可以讓整個(gè)H5頁(yè)面顯得更加時(shí)尚索昂。例如上邊幾個(gè)例子，背景都是一些比較鮮艷的手繪圖片扩借，在頁(yè)面的中間內(nèi)容區(qū)域適當(dāng)?shù)募尤胍恍┌咨慕凡摇⒕哂型该鞫鹊木匦危軌驂旱米≡颈容^花哨的背景潮罪，并且讓內(nèi)容更加清晰的體現(xiàn)出來康谆。這種方法比較適用于一些時(shí)尚行業(yè)，例如時(shí)裝嫉到、美妝品牌等等沃暗。
3.海報(bào)式設(shè)計(jì)
這種H5頁(yè)面通常是一張大圖覆蓋整個(gè)屏幕，再加一些文字標(biāo)題作為點(diǎn)綴何恶，效果更類似于海報(bào)大片孽锥，非常的有視覺沖擊力，很時(shí)尚细层、大氣惜辑。但對(duì)圖片的要求比較高，起碼要做到清晰美觀今艺。文字不宜過多韵丑，可以做一些簡(jiǎn)單的裝飾，提亮一下即可虚缎。
這種設(shè)計(jì)比較適合產(chǎn)品宣傳撵彻、旅行畫冊(cè)、個(gè)人簡(jiǎn)歷等等实牡，可以放一些產(chǎn)品圖片陌僵、照片、個(gè)人寫真创坞。
4.居中型設(shè)計(jì)
這里放了三張比較典型的居中型構(gòu)圖方式的H5碗短，在內(nèi)容不多的情況下，選用居中的構(gòu)圖题涨，可以讓整個(gè)H5頁(yè)面顯得更加精致簡(jiǎn)潔偎谁。
這種構(gòu)圖方式非常普遍，幾乎適合所有類型的H5纲堵，最適合一些極簡(jiǎn)的風(fēng)格巡雨，簡(jiǎn)短的文案搭配一兩張圖片，不需要很多裝飾就可以很高大上席函。
5.對(duì)稱型設(shè)計(jì)
這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分铐望，頁(yè)面一分為二，內(nèi)容劃分明確，也更加具有視覺沖擊力正蛙。
尤其是兩部分內(nèi)容是對(duì)立關(guān)系的情況下督弓，比如交換，男女乒验，冷熱等等愚隧。這些情況下的配色可以做一些大膽的對(duì)比色，就像上圖一樣的黑黃對(duì)比徊件、紅藍(lán)對(duì)比奸攻，給人的第一印象就是對(duì)立的強(qiáng)烈的視覺感受。
這種構(gòu)圖方式會(huì)更多地用于有兩部分內(nèi)容的H5頁(yè)面虱痕，如產(chǎn)品展示、劇情對(duì)話辐赞、對(duì)立關(guān)系等等部翘。
6.放射式設(shè)計(jì)
這種構(gòu)圖方式通過整體放射狀加透視構(gòu)圖，使畫面呈現(xiàn)立體與空間感响委，視覺焦點(diǎn)明確新思，畫面沖擊力強(qiáng)，富有動(dòng)感赘风。但要注意放射狀的排版不太適合文字閱讀夹囚，要注意文字排版。
建議這種構(gòu)圖方式一般在文字?jǐn)?shù)量較少的情況下可以使用邀窃。一般卡通類或者一些特定的場(chǎng)景會(huì)較多的使用這種構(gòu)圖荸哟，突出動(dòng)感。
7.流程目錄設(shè)計(jì)
如果內(nèi)容是漸進(jìn)瞬捕、流向又或者是展示各節(jié)點(diǎn)的內(nèi)容鞍历，用別的形式總感覺不夠具象，推薦用流程目錄式的構(gòu)圖來進(jìn)行設(shè)計(jì)肪虎。
這種構(gòu)圖方式能夠?qū)⒉襟E劣砍，關(guān)系，各個(gè)節(jié)點(diǎn)以及整體流向展示清楚扇救，配合圖片展示刑枝，一個(gè)枯燥的流程瞬間變得個(gè)性十足，用戶瀏覽簡(jiǎn)單明了迅腔，充滿趣味性装畅。
更多H5內(nèi)容，請(qǐng)瀏覽以往文章：
1钾挟、半年盤點(diǎn)洁灵，誰說H5過氣了，這些在2016都曾刷曝朋友圈
2、月度合集徽千，10月最火H5 TOP5苫费，你見過幾個(gè)？
3双抽、月度合集百框，9月最火H5都在這 你被刷屏了么？
4牍汹、主題H5铐维，你知道長(zhǎng)征，那你見過長(zhǎng)征主題H5嗎慎菲？
5嫁蛇、主題H，不只是驚悚 萬圣節(jié)H5策劃的6種套路
6露该、H5干貨睬棚，標(biāo)題決定瀏覽量 爆款H5都按這7個(gè)套路擬題
7、H5干貨解幼，創(chuàng)意H5都用這四種表現(xiàn)方法抑党！你不想了解一下么？
親們撵摆，我是H5知識(shí)的搬運(yùn)工底靠，后續(xù)還將更新更多H5內(nèi)容。如果你喜歡本文特铝，贊賞下唄暑中，關(guān)注下唄，小女子拜謝啦苟呐。
