2.2 簡單3步快速做出專業級互動H5

在了解了H5的制作平臺和常用工具后，接下來我們就可以試著動手做一個H5作品了。本節以人人秀平臺為例，介紹H5作品的主要制作流程。

2.2.1 在模板庫中挑選H5模板和素材

首先是選擇一個商業場景，我們必須對H5做一個定位，也就是說你準備用H5做什么？如圖2-18所示，列舉了部分商業場景的應用目的。

假如我們要做一個攝影的活動宣傳H5，則可以打開人人秀的“模板商店”頁面，在“行業”菜單中選擇“攝影”選項，即可找到所有符合要求的H5模板，如圖2-19所示。

接下來根據企業營銷的目標，選擇合適的小游戲或者其他營銷目標，進行復制。例如，這里選擇了“尋找最美全家?！蹦０?。對于攝影行業的企業來說，拍全家福是非常熱門的業務，企業可以經常使用H5展開一系列全家福主題活動，來吸引用戶參與。單擊模板縮覽圖后，彈出一個預覽窗口，用戶可以掃描二維碼在手機上查看活動模板，也可以通過電腦查看該模板，如圖2-20所示。

單擊“使用”按鈕，即可在人人秀編輯器中打開該模板，如圖2-21所示。

2.2.2 H5模板素材中的替換與活動配置

打開活動模板后，用戶可以將H5中的品牌素材、宣傳文案以及背景音樂等替換成與營銷活動或企業相關的內容。例如，雙擊其中的文字，即可修改文本內容，如圖2-22所示。

如果希望使用自己的素材，可以單擊“我的圖片”按鈕切換至“我的圖片”選項卡，然后單擊“上傳圖片”按鈕，上傳本地圖片作為背景。用戶也可以單擊“我的圖片”按鈕，上傳大小為640像素×1100像素的圖片作為背景。在“我的圖片”下方選擇需要的圖片即可插入H5頁面中，如企業的Logo等，調整到合適的位置，如圖2-23所示。當然，我們也可以在圖片庫中選擇使用合適的圖片。

【專家提醒】

H5圖片格式通常為jpg、jpeg、png以及gif等，可以設置其相框、序列幀、樣式（包括背景顏色、文字顏色、透明度、圓角、邊距以及邊框等）、陰影（包括水平陰影、垂直陰影、顏色以及模糊度等）以及位置（包括寬度、高度、X與Y位置、旋轉角度以及大小等）等屬性。

然后為H5頁面補充文字，單擊“文字”按鈕，系統會自動在H5頁面中插入文本框，編輯文本框內的文字，并為其設置合適的字體和顏色，如圖2-24所示。

然后切換至活動頁面進行活動配置，選擇“照片投票”活動插件后，在右側窗口中單擊“投票設置”按鈕，如圖2-25所示。在彈出的對話框中可以設置相應的活動名稱、時間、投票次數、報名方式以及插件樣式等，如圖2-26所示。

2.2.3 一鍵生成H5作品并進行發布推廣

H5作品測試完成后，即可開始發布上線活動，并且做好相關的客服工作，以及對H5作品進行推廣。H5作品完成后，單擊右上角的“發布”按鈕，進入作品發布界面，界面的左側是發布預覽，可以預覽分享界面，如圖2-27所示。

設置欄的左上角可修改分享頭像，在文本框內輸入分享標題，選中右側的“#分享數#”復選框，可以在分享時顯示已經分享的人數。下方的文本框可以輸入分享詳情。分享詳情下面可以對翻頁效果和作品分類進行設置。

基本設置編輯完成后，單擊“下一步”按鈕或者“高級設置”標簽，切換至“高級設置”選項卡，如圖2-28所示。

在“高級設置”選項卡中可以進行加載頁設置和版權設置；在“菜單欄”選項區中可以選擇是否顯示關注公眾號和微信菜單欄，單擊右側的鉛筆符號可以進行相應的設置。

單擊下方黃色的“更多設置”按鈕，可以進一步對H5作品樣式進行設置，設置內容包括翻頁進度條、閱讀數、彈幕/點贊以及評論審核等，如圖2-29所示。

單擊“下一步”按鈕，進入“近期活動”界面，顯示近期可以參加的活動，如圖2-30所示。例如，當前的活動為“申請作為模板”，申請通過可以獲得相應數量的秀點，用來在平臺中購買相關的模板和服務。

全部設置完成后，單擊紅色的“發布”按鈕即可成功發布作品。作品發布成功后，會跳轉至“分享推廣”界面，顯示作品的二維碼鏈接和微信小程序碼，如圖2-31所示。同時頁面下方還會出現作品打分，幫助用戶修改和完善H5作品內容。

掃描二維碼進入作品鏈接，可以查看H5活動的頁面效果，如圖2-32所示。

用戶可以選擇以下3種方式進行推廣。

（1）點擊微信右上角的按鈕，在菜單中點擊“復制鏈接”按鈕獲取作品地址，直接推送H5作品地址，如圖2-33所示。

（2）直接將作品轉發到朋友圈或者微信群中進行推廣，如圖2-34所示。

（3）獲取作品地址，將作品鏈接填入微信公眾號的“閱讀原文”鏈接、下拉菜單網址中進行推廣。用戶也可以在H5后臺的“擴展網址”頁面選擇推廣網址，可以添加多個推廣網址，分別把每個推廣網址置于不同的推廣渠道。