1、如何用 PPT 思維，做一個手機 H5 動效頁面？什么是H5 ? H5指的是第5代HTML編碼語言我們通常 所說的H5，是指用H5語言制作的數字產品其實，H5就是你經常在朋友圈看到的那種一頁頁呈現和交互（多為豎 屏上翻）的頁面交互形式。我們應該都見過有很多制作精良的專業級 H5 ，但也見過很多恨不得秒退的 H5 作品， 后 者一般多為非專業公司自己制作的 .掌握用在線編輯器制作 H5 的技能是非常有必要的！大 到橫行職場， 小到做私人相冊， 發朋友圈也很有面子！ 操 作簡單，效果炫酷！最關鍵的是，只要你會用 PPT ，就可以 搞定簡單的 H5 制作，足以應對日常工作生活的使用場景！ 如何用 P

2、PT 輔以 H5 呈現？我們先要了解 H5 的特點 我在這篇文章的標題中賣了個萌，雖說是“用 PPT 思維 制作H5”，實際上我制作的H5頁面屈指可數，在制作過程 中，也是真心離不開 PPTPPT 和 H5 有很多相似之處，顯然，它們都是服務于溝 通的工具，也都可以承載文字、圖片、動效、聲音等表現形 式，力求引人入勝。 兩者還同時具備“本地化”的特征。“本 地化”的意思是，解碼器廣泛存在于用戶端。以 PPT 來說， 之所以它能承載很多演示之外的功能， 也是由于 Office 軟件 已經足夠普及，所以我們做好的 PPT 可以發給大家查看 而 H5 的發展迅猛，是因為它的播放基于手機瀏覽器，比PP

3、T還要“輕量化”得多不僅保證了用戶播放，還可以 顧及多平臺的兼容，電腦、手機、 Pad 全部通吃，以這點來 說， H5 的傳播比起 PPT 的要方便了不知多少個量級。所以， H5 在某種程度上可以承載 PPT 的功能，演示界 也早已有了 H5 的江湖地位，特別是伴隨各種 H5 編輯器工 具出現之后，全民創作 H5 也已變為可能。這是銳普陳魁在 演示峰會上的一頁 PPT提到了 H5 在演示界越來越重要的地位面對不同的 H5傳播訴求，當然也要有不同的設計考量和側重。我前幾天接 到一個 H5 制作任務為公司掛牌儀式制作邀請函。Step 1. 確認設計風格，搜集素材 公司是省屬直管的大型金融國企，考慮

4、到國企背景和鮮 明的地方屬性， 我認為水墨中國風是首選。 與 PPT 的制 作流程相同，確定風格之后，要去搜集素材。我聯系了執著 于雕琢簡歷的 H5 高手 有樂，他扔給我一個中國風的PPT,里面包含大量中國風元素。最終版的素材幾乎都出自這個 PPT除了圖片素材，還要構思文字內容、確定文案。對 于邀請函而言，最重要的信息是 1 、公司品牌、事 由； 2 、時間地點； 3、主要議程；H5 的加載時間與頁面數量成正比， 所以頁面一定要少， 如果是文字類的 H5 ，我建議不要超過 5 頁。 此外，大 部分人在劃屏瀏覽 H5 頁面的時候，每頁的停留時間不會超 過5 秒，所以單頁信息量要嚴格控制，這點與

5、PPT 制作一 樣！ Step 2.用PPT完成頁面元素的布局PPT 與 H5 的最直觀區別，體現在頁面尺寸上 PPT 多為橫屏，H5多為豎屏。在我們用PPT設計頁面之前，先調整幻燈片頁面設置， 有樂建議將頁面設置為寬 17 厘 米、高 27 厘米。 設置適當的頁面大小的意義在于 可以更好的控制素材的輸出，不會因為尺寸小而導致圖片模 糊，也不會因為尺寸過大而導致文件臃腫、加載過慢。接下來的工作最需要設計感， 也是與 PPT 制作最相似的 將頁面中的元素有邏輯性、有美觀度的進行組合。與 PPT 不同的是， H5 的頁面布局需要注意兩點1、頁面底部（至少是首頁底部）要保持簡潔，讓觀眾 看清下方的操

6、作提示。看似是一個約定俗成的劃屏操作，但很多人卻 get 不 到所以很多H5會用圖標或者文字，單獨在 H5首頁提示用戶需要劃屏瀏覽，這其實是很體貼、也是很有必要的做法。2 、頁面元素的著眼點， 要控制在屏幕中間偏上的位置， 否則就要考慮引進動效， 為觀眾提供視線焦點。 Step 3. 構 思動畫效果、保存圖片素材為什么動畫和素材要放在一個步驟里進行說明？正是 因為對于 H5 而言，這兩部分內容密不可分。 由于不同 手機的機能限制，很多炫酷的效果無法完成，必須讓包含動 畫效果的元素盡可能的少。 以上邊這頁為例，三部分文 字建議存成三張圖片、設置三個動效，要將存圖和動畫一起 考慮，把頁面中相同的動

7、畫元素，以整體進行考慮。將元素存為圖片很簡單，點擊右鍵 - 另存為圖片即可， 需要注意下面幾點1、 H5 編輯器沒有豐富的字體樣式，所以要把“文字”全 部導出為 PNG 圖片（以保證半透明效果） ；2、有些圖片可能需要拆成多個H5 素材， 可能需要用到裁剪功能，或者是借助“形狀”對圖片進行拆分（拆分可以參 考這篇文章那些有趣傳神的字體是怎樣煉成的？）3 、有些裁剪過的圖片， 導出后會被拉伸 （推測是 Office 軟件 bug ），保險起見可以把裁剪過的圖片先粘貼為圖片， 再 另存為圖片。（有點繞，其實就是不要導出裁剪過的圖片素 材） Step 4.前往在線編輯網站，制作H5目前有很多在線 H

8、5 編輯工具， 例如 Maka 、易企秀操作方面基本一樣，我用的是Maka，只因已經習慣剩下的工作非常簡單，把圖片上傳，排布好。再為每張圖片添加動作（就是動畫效果）就好，與 PPT 不同的是， H5 編輯器里的動畫沒有單擊、之后的選項， 全靠“延遲”控制 時間。 排布元素的操作， 比起往 PPT 插入元素只是多了 一個上傳的過程，操作一次就會了解。動效建議逐個嘗試，了解每個動畫的特性，才會有具體運用的想法。與 PPT 的動畫效果相比， H5 的動畫有很多附加了彈性效果，比較 細膩。 把 PPT 水平拿出來，做個拉轟的 H5 ，橫行公司 毫無壓力！我認為 H5 制作是 PPTer 一定要掌握的技能！因 為相比 PPT 的復雜程度， 模板化的 H5 制作真心太簡單， 卻 占據了最重要的手機端傳播渠道！明天談談 H5 的其他制作細節，