普通高等學校應用型教材·新聞傳播學H5交互融媒體作品創作

（第2版）

目錄ContentsH5作品制作準備H5作品的選題與策劃H5作品的素材查找與加工H5作品的頁面設計01020304課程配套教材方正飛翔數字版功能快速入門05H5作品的交互設計與互動效果制作06

目錄ContentsH5制作綜合實踐:出版領域H5作品的測試、發布與運營H5制作綜合實踐:傳媒領域090708專用名詞術語表附錄H5作品制作準備本章要點關鍵詞第1章1.辨析H5的概念,掌握H5這一名詞的由來。2.掌握H5作為一種作品形態,在新聞領域的應用。3.掌握H5作品制作的注意事項,并能夠將之應用到H5作品中。4.掌握H5作品的基本制作流程。H5制作規范制作流程第1節H5技術常識

一、什么是H5

如果你在國外與從事互聯網或新媒體行業的工作者談及H5,他們甚至會沒有聽說過這個引爆中國移動互聯網的名詞!實際上,H5是中國人專用的一個名詞,有人說,H5是HTML5的簡稱,中文意思是第五代超文本標記語言,是一項伴隨著移動互聯網技術的興起而發展的技術標準。但事實上，這個說法在H5這個名詞剛剛出現時,或許是正確的,但在2014年之后,H5出現在各個領域,H5早就超出了“HTML5縮寫”這個說法的含義,成為了一種在中國興起和流行的特殊作品形態。

在進行H5作品的制作之前,我們需要對H5這種作品形態和相關的技術有一個基本的了解,這樣才能更好地根據H5的技術特點,進行作品的選題、策劃,根據H5可以實現的交互效果進行作品的制作。在本節中,我們對H5這一名詞和作品形態的來源、H5的技術特點和優勢,以及H5的應用領域進行介紹。Heybuddy,thisH5isexcellent!老鐵，H5是啥啊？！HyperTextMarkupLanguage5（H5）Web標準“超文本標記語言”第5個版本通俗的講：是網絡頁面編輯腳本的規范和標準H5可以說是伴隨移動互聯網的興起應運而生的技術曾經，我們認為H5是它的簡稱

我們可以認為H5是一個多項技術與技術標準的集合

我們可以認為H5是一種獨立的作品形態H5CSS3Javascript微信文章HTML5PPTAPP游戲

二、H5的技術特點與優勢跨終端跨平臺技術更新快融媒體強交互

三、H5的應用領域內容生產市場營銷游戲

四、H5制作的注意事項素材瀏覽器頁面瀏覽器選擇市面瀏覽器多種多樣，為什么要選谷歌瀏覽器？寬度適配垂直居中高度適配水平居中自動適配全屏頁面寬度始終與設備瀏覽器的頁面的寬度保持一致，并根據頁面的實際寬度對您的作品等比例縮放后，進行居中顯示。上下兩側進行一定的剪裁或留白。【推薦使用場景】手機端豎屏顯示頁面高度始終與設備瀏覽器的頁面的高度保持一致，并根據頁面的實際高度對您的作品等比例縮放后，進行居中顯示。進行一定的剪裁或留白。【推薦使用場景】手機端橫屏顯示、PC端橫屏顯示頁面總會完整、不變形地顯示在您的瀏覽器中。在屏幕的上下或左右兩側，可能會產生留白。【推薦使用場景】PC端橫屏顯示、Pad端橫屏或豎屏顯示頁面總會充滿您的瀏覽器窗口進行顯示。不會在頁面中產生任何留白，但由于會將頁面進行拉伸和縮放，可能會造成您的頁面變形。【推薦使用場景】PC端、Pad端、手機端橫屏顯示屏幕自適應1234作品選題內容策劃30%素材查找素材加工20%頁面設計交互設計30%作品測試上線與運營20%五、H5作品的制作流程問題討論什么是H5？你如何給不熟悉新媒體技術的人介紹H5？你是否可以舉一些例子，說明H5的技術特點和優勢？如果你和同學組成了3人團隊，進行H5的策劃與制作，需要如何安排分工？010203H5作品的選題與策劃本章要點關鍵詞第2章1.掌握評價H5作品選題的不同角度與標準。2.掌握H5這一作品形態適用的情況。3.掌握結構化的H5策劃思路與方法。作品選題

作品形態策劃思路第1節怎樣才算是一個好的H5選題

如今，我們可以在多種渠道看到無數H5作品，也可以看到時常有在朋友圈刷屏的爆款H5作品，這些作品通常被用戶們給予了很高評價，那么，到底怎樣才算是一個好的H5選題呢?我們可以從以下幾個角度來判斷。

一、一部好的作品，首要的是正面的價值取向

無論是內容為主的H5作品，還是以營銷宣傳為目的的H5作品，評判的首要標準，都是這部作品是否有一個正面的價值取向。在進行H5作品的選題和策劃時，有很多制作者將選題和內容策劃的重點落在了創新性和實用性方面，但一個明確、正面的價值取向，才是能夠畫龍點睛地表達作品內容的重要部分。一個正面的價值取向，意味著要從作品中突出對正面或負面內容的引導和啟迪意義。比如在新聞報道、圖書的解讀營銷的H5作品中，不可避免地會出現負面新聞，或者文字作品中的負面情節，在這時，我們要注意內容的呈現方式，并且從作品情節的選取上來做一些取舍，引導用戶進行正面的解讀。

二、好的作品，可以用思想和觀點打動用戶

除了正面的價值導向以外，好的作品能夠“自己講故事”，通過內容來表現和傳達深刻觀點和思想。不同類型的作品，傳達的觀點與思想也不盡相同。比如一個以營銷宣傳為目的、力圖打造爆款、創造商業價值的H5作品，主要傳達的思想更多的是亮眼的創意和所營銷產品的獨特之處。在作品策劃方面，這類作品力求可以在瀏覽和閱讀的短時間內，滿足用戶的好奇心，貼合主題或品牌的調性，或者還具有一些傳播度高的特性，比如輕松好玩、有趣味性、吸引用戶參與、能夠為用戶提供某些價值等等。再如一個對硬新聞進行解讀的H5作品，它傳達的思想肯定與營銷宣傳的H5作品不同，而是更加注重引起用戶的思考與共鳴。對于這種類型的H5作品，文案故事基于客觀事實，能夠通過敘述方式、文案和融媒體元素贏得用戶的信任，故事情節和各種信息環環相扣，以傳達某種思想或情緒為主線，讓用戶感到有共鳴、有看點，打動用戶的心。

三、作品可以兼顧內容高度概括性與細節的完整性

H5作品不同于傳統媒體，它需要在很小的移動終端的屏幕上，用融媒體元素和交互內容呈現某一主題，因此選取各種融媒體信息，巧妙地進行融合與濃縮，就顯得尤為重要。一個好的H5作品，應該兼顧內容高度的概括性與細節的完整性，基于這一原則，在內容方面應該做出適當的取舍。

除此之外，形式跟內容能否結合得好也是重點之一。形式最終是為傳播目的服務的，有些作品如果不能將形式和內容結合起來，則交互會顯得不太切題、畫蛇添足，因此好的作品，本質上還是要有效告知用戶作品的主題與相關信息，表現形式如果與作品的選題和內容關系不大的話，反而會混淆視聽、分散主題。作品如果可以兼顧內容高度概括性與細節的完整性，就一定要在內容方面有一個整體框架與嚴謹的邏輯，這一點，滲透于作品的內容和形式中，也是好作品的要素。

四、作品的交互設計、操作指引須合理

H5作品使用了豐富的交互效果，但如果忽略了作品的操作指引，則會讓用戶的體驗過程非常坎坷，用戶因某一操作而無法繼續閱讀，心情跌落谷底時，也就認定H5作品不是個好作品了。作品的操作指引是至關重要的，決定了作品的用戶體驗是否良好。因為H5是占據用戶很大注意力資源的一種作品類型，制作者必須讓用戶打開作品，并且一直跟著制作者的思路看下去，因此一個清晰的交互和操作指引，是用戶的引路標，可以幫助用戶聚焦于作品的主要內容和體驗路徑。

五、H5作品的平面和版式設計依然重要

雖然H5屬于新媒體作品的范疇，但平面和版式設計，尤其是需要遵循的版式規律與規范依然重要。比如H5作品中使用了傳統的工筆畫和寫意畫作為平面元素。那么版面上的其他元素，也應該符合這種中國傳統書寫的規范，如果左右排列不一致，則會造成用戶閱讀的混亂。除了版式設計上的問題，H5作品在選擇字體時，也應選擇易讀性較強的字體作為正文字體，以提升作品的易讀性，讓用戶有良好的閱讀體驗。在第四章中，我們會著重講解H5作品的頁面設計。第2節如何進行H5作品的選題

一、明確作品形態——為什么要做H5作品

在融合媒體蓬勃發展的今天，我們看到的媒介形式多種多樣，除了傳統的圖書、報刊、音視頻以外，現如今H5、APP、小程序也成為了呈現內容和分享內容的載體，更有虛擬現實(VR)、增強現實(AR)、可穿戴式設備正在逐漸普及……面對如此多元的內容載體，在進行H5作品的選題時，我們需要首先問自己兩個問題:這個選題承載的內容，是否適合用H5的形態進行呈現?用H5呈現相比于其他作品形態，有什么優勢?不同的內容有不同的特點，而這些內容用不同的方式呈現，會有不同的偏重點和不同的效果。在下面，我們會通過幾個案例，為大家介紹H5這種作品形態與其他融媒體形態在呈現內容方面的區別。從對比中，我們可以思考何種內容適合用H5這種形式呈現。H5與PPT作為最早登錄朋友圈的一批作品，特斯拉H5保留了H5最初的模樣。可口可樂推出的《分享快樂128年》，將這種“動”又向前推進了一步。H5與PPTBurberry的《從倫敦到上海的旅程》是當時交互體驗的集大成者搖一搖，進入H5頁面點一點，探索油畫般的倫敦清晨擦一擦，使屏幕上的晨霧散去點擊河面，河水會隨之泛起漣漪點擊屏幕上的白點，抵達終點上海H5與PPTH5與圖書H5與長視頻《記住鄉愁：守塔人》/x/page/r3052v4dpuhH5與短視頻新湖南：苗寨“十八”變

中國軍網：你收到的是1927年8月1日發來的包裹H5作品的特點融媒體音視頻、圖文等多種形式融合非線性敘事強交互交互、傳播、用戶參與H5適合H5的選題素材充足、種類豐富選題需要解讀，用戶愿意少量時間快速了解選題用戶的操作和交互可以幫助用戶理解內容有一定時間和資源準備

一個優質的H5作品，究其本質，還是對內容解讀和呈現得生動恰當。那么，有了一個選題之后，我們如何從這個選題進行延伸，組織H5作品的內容，形成完整的內容策劃方案呢?在策劃和制作H5作品時，多數制作者會采用頭腦風暴或模仿的方式，邊制作邊構思，這樣可能會導致H5作品發布后達不到預期的效果或傳播目的。

因此在這一節中，我們介紹一種從0到1打造H5作品的思路，可以幫助你形成一個從H5作品的定位，到最終的發布和運營策略的閉環式的H5作品策劃方案，

二、如何從0到1策劃H5作品H5內容策劃定位需求分析功能確認界面和交互運營策略定位、定調性、定用戶確認要為誰做、整體基調是什么樣子的，目標用戶畫像。目標用戶想要什么如果我是用戶，我想要什么樣的功能和交互形式

功能清單基于用戶，選擇所需功能，并將他們有機整合

UI和產品體驗設計符合目標用戶審美的界面，適當加入人機交互的內容

怎么運營H5作品上線后，要怎么運營？一個實戰案例騰訊新聞極速版：國旗微信頭像H5換頭像H5產品策劃定位需求分析功能確認界面和交互運營策略定位：打造一款可以生成微信頭像H5，用戶可以制作帶有國旗形象的微信頭像并進行保存和更換。調性：喜迎國慶、愛國、正能量、刷屏用戶：微信所有用戶用戶需求：表達愛國情懷、展示個人形象、體驗H5的趣味性功能需求：選擇頭像樣式、保存新頭像以便更換互動需求：步驟簡單、不復雜、無需二次加工、產品功能：調用微信頭像/用戶選擇圖片、選擇頭像樣式、生成頭像、保存頭像UI設計：國慶元素、喜慶、極簡、最短時間完成交互產品體驗：快好省怎么運營：主流媒體、微博、抖音等社交平臺、KOL/大V、微信朋友圈社交傳播需求分析與功能設計國慶到了，讓我換個頭像，為祖國慶生！我想使用微信頭像，這樣非常快捷，而且好像真的是微信官方直接給我的，哈哈！我想突出我的頭像和別人的不完全一樣好的，我可以把圖片保存下來換微信頭像了！我想上傳自