很多的UI設計師朋友可能還不瞭解UI中的H5頁面如何設計，那麼今天我們就來談談如何設計H5界面吧~

概述

廣義上的H5指的是html5，即網頁所使用的html代碼——第五代超文本標記語言，但是因為國內長期拿h5頁面來做運營宣傳活動，所以在我們UI設計領域的h5代指為移動端運營網頁。

那麼h5基本上可以劃分為三種類型：信息展示、註冊領取、互動遊戲等。

在我們日常的工作需求中接到h5的需求通常分為內部需求和外部需求，內部需求通常是公司內部的年會等活動，而外部需求多為運營需求。那麼在我們接到不同的需求時，我們就需要依據不同的需求要求來實現對應的設計稿。

制作方式

我們一般以兩種方式來輸出H5頁面，一種是直接套用網站模版，另一種是自己制作輸出。

網站模版

先說套用模版，在選擇模版網站時，我們可以選擇稿定設計、易企秀等平臺網站

稿定設計官網10f5785dca7c89f6f5c17f85ca81d4c9易企秀官網

大傢可以點擊鏈接去直接搜索模版進行套用，操作比較簡單，就不演示瞭。

制作流程

如果我們要自己制作輸出，那麼我們需要先瞭解H5界面的結構

H5的結構一般分為：

• 微信頂欄
• 頭部主視覺
• 主要模塊
• 內容模塊1
• 內容模塊2

e0110fed35584e8c1da6cecf6f8c435b

在我們制作H5頁面的時候我們需要現將運營的文案打出來，然後再進行排版設計。

62814f4ab323a2605d317242fd5e838e

在我們進行H5頁面設計的時候需要為瞭營造“氛圍感”去不斷的添加細節、按鈕、背景質感等。通過這些細節共同來構建出一個良好的頁面。

總結

H5頁面的制作最重要的就是氛圍感，它和UI不同，它是建立在氛圍感上形成的運營活動。如果我們要輸出良好的h5頁面就需要對它的平面視覺、廣告創意設計有一定的瞭解，一個好的h5頁面的設計離不開設計師的平面基礎和視覺能力，一定要通過增加視覺點來不斷增強頁面的視覺沖擊力。