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

幾個HTML5頁面的設計技巧分享給大家，希望對大家有所幫助。

1、運用幾何圖形

生活中隨處可見幾何圖形的存在，簡單的三角形、正方形、長方形和圓形甚至幾根線條就可以組成很多簡潔大氣的圖形，適當的運用幾何圖形能夠給H5頁面帶來動感與節奏感。

幾何圖形構圖常用于公司宣傳，產品介紹中，可以給人一種很強烈的整潔和商務感。

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

2、運用蒙版

當背景顏色比較復雜的時候，通常會使用蒙版，主要方法是插入形狀，調色至與背景中的顏色比較協調，降低透明度，這樣既不會影響圖片的完整性，又能夠讓文字更加清晰。

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

3、海報式設計

海報式設計通常是一張大圖覆蓋整個屏幕，再加一些文字標題作為點綴，效果更類似于我們平時看到的一些海報大片，非常的有視覺沖擊力。這種設計比較適合產品宣傳、旅行畫冊、個人簡歷等等，可以放一些產品圖片、照片、個人寫真。

4、居中型設計

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

5、慎用向右滑動

交互上，慎用向右滑動的操作方式。如：刮刮樂涂抹效果，左右滑動翻頁等。因為蘋果手機上，向右滑動容易觸發返回“上一級頁面”效果。

6、慎用橫屏展示

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

體驗上，需要用戶設備開啟屏幕旋轉功能，才能正常觀看，用戶操作成本高。對不同屏幕的手機，長寬比例不一，難以展示最佳的視覺效果。

7、按鈕遠離頁面底部

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

原因：更好的設備各種屏幕的手機，避免按鈕被擋住。

8、慎用疊加效果

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

原因：給重構挖坑，導致不好切圖，無法還原視覺效果。

掌握上述8個技巧，做好Html5設計一點都不難，快來制作你的HTML5作品吧。