隨著HTML5技術(shù)的成熟，H5頁(yè)面越來(lái)越受大家歡迎，各種H5頁(yè)面層出不窮，那如何才能讓自己的H5頁(yè)面在眾多頁(yè)面中脫穎而出呢？

幾個(gè)HTML5頁(yè)面的設(shè)計(jì)技巧分享給大家，希望對(duì)大家有所幫助。

1、運(yùn)用幾何圖形

生活中隨處可見(jiàn)幾何圖形的存在，簡(jiǎn)單的三角形、正方形、長(zhǎng)方形和圓形甚至幾根線條就可以組成很多簡(jiǎn)潔大氣的圖形，適當(dāng)?shù)倪\(yùn)用幾何圖形能夠給H5頁(yè)面帶來(lái)動(dòng)感與節(jié)奏感。

幾何圖形構(gòu)圖常用于公司宣傳，產(chǎn)品介紹中，可以給人一種很強(qiáng)烈的整潔和商務(wù)感。

*注意：一般會(huì)是純色大塊搭配漸變，主要突出形狀和區(qū)塊。

2、運(yùn)用蒙版

當(dāng)背景顏色比較復(fù)雜的時(shí)候，通常會(huì)使用蒙版，主要方法是插入形狀，調(diào)色至與背景中的顏色比較協(xié)調(diào)，降低透明度，這樣既不會(huì)影響圖片的完整性，又能夠讓文字更加清晰。

蒙版的運(yùn)用比較普遍，MAKA眾多H5都采用這種版式制作。

3、海報(bào)式設(shè)計(jì)

海報(bào)式設(shè)計(jì)通常是一張大圖覆蓋整個(gè)屏幕，再加一些文字標(biāo)題作為點(diǎn)綴，效果更類似于我們平時(shí)看到的一些海報(bào)大片，非常的有視覺(jué)沖擊力。這種設(shè)計(jì)比較適合產(chǎn)品宣傳、旅行畫(huà)冊(cè)、個(gè)人簡(jiǎn)歷等等，可以放一些產(chǎn)品圖片、照片、個(gè)人寫(xiě)真。

4、居中型設(shè)計(jì)

在內(nèi)容不多的情況下，選用居中的構(gòu)圖，可以讓人們的視線集中在頁(yè)面中部，可以讓整個(gè)H5頁(yè)面顯得更加精致簡(jiǎn)潔，同時(shí)也更加專注于重點(diǎn)內(nèi)容。這種構(gòu)圖方式非常普遍，幾乎適合所有類型的H5。

5、慎用向右滑動(dòng)

交互上，慎用向右滑動(dòng)的操作方式。如：刮刮樂(lè)涂抹效果，左右滑動(dòng)翻頁(yè)等。因?yàn)樘O(píng)果手機(jī)上，向右滑動(dòng)容易觸發(fā)返回“上一級(jí)頁(yè)面”效果。

6、慎用橫屏展示

交互上，慎用橫屏展示效果。

體驗(yàn)上，需要用戶設(shè)備開(kāi)啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高。對(duì)不同屏幕的手機(jī)，長(zhǎng)寬比例不一，難以展示最佳的視覺(jué)效果。

7、按鈕遠(yuǎn)離頁(yè)面底部

視覺(jué)上，功能按鈕等，遠(yuǎn)離頁(yè)面底部（大概128px，這個(gè)尺寸不是固定值），具體看重構(gòu)采用什么適配方式（僅供參考：640*1136 px，從上往下計(jì)算，主要內(nèi)容在1008px內(nèi)）。

原因：更好的設(shè)備各種屏幕的手機(jī)，避免按鈕被擋住。

8、慎用疊加效果

視覺(jué)上，慎用“光線疊加效果”或PS里面的“圖層樣式”效果。如：給圖層加個(gè)“柔光”、“濾色”、“色相”等等效果，除非這個(gè)視覺(jué)元素可以合并為一體。

原因：給重構(gòu)挖坑，導(dǎo)致不好切圖，無(wú)法還原視覺(jué)效果。

掌握上述8個(gè)技巧，做好Html5設(shè)計(jì)一點(diǎn)都不難，快來(lái)制作你的HTML5作品吧。