H5交互融媒體作品創(chuàng)作 課件全套 第1-5章 H5作品制作準(zhǔn)備-H5作品的交互設(shè)計(jì)與互動(dòng)效果制作

普通高等學(xué)校應(yīng)用型教材·新聞傳播學(xué)H5交互融媒體作品創(chuàng)作

（第2版）

目錄ContentsH5作品制作準(zhǔn)備H5作品的選題與策劃H5作品的素材查找與加工H5作品的頁(yè)面設(shè)計(jì)01020304課程配套教材方正飛翔數(shù)字版功能快速入門05H5作品的交互設(shè)計(jì)與互動(dòng)效果制作06

目錄ContentsH5制作綜合實(shí)踐:出版領(lǐng)域H5作品的測(cè)試、發(fā)布與運(yùn)營(yíng)H5制作綜合實(shí)踐:傳媒領(lǐng)域090708專用名詞術(shù)語(yǔ)表附錄H5作品制作準(zhǔn)備本章要點(diǎn)關(guān)鍵詞第1章1.辨析H5的概念,掌握H5這一名詞的由來(lái)。2.掌握H5作為一種作品形態(tài),在新聞?lì)I(lǐng)域的應(yīng)用。3.掌握H5作品制作的注意事項(xiàng),并能夠?qū)⒅畱?yīng)用到H5作品中。4.掌握H5作品的基本制作流程。H5制作規(guī)范制作流程第1節(jié)H5技術(shù)常識(shí)

一、什么是H5

如果你在國(guó)外與從事互聯(lián)網(wǎng)或新媒體行業(yè)的工作者談及H5,他們甚至?xí)](méi)有聽說(shuō)過(guò)這個(gè)引爆中國(guó)移動(dòng)互聯(lián)網(wǎng)的名詞!實(shí)際上,H5是中國(guó)人專用的一個(gè)名詞,有人說(shuō),H5是HTML5的簡(jiǎn)稱,中文意思是第五代超文本標(biāo)記語(yǔ)言,是一項(xiàng)伴隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的興起而發(fā)展的技術(shù)標(biāo)準(zhǔn)。但事實(shí)上，這個(gè)說(shuō)法在H5這個(gè)名詞剛剛出現(xiàn)時(shí),或許是正確的,但在2014年之后,H5出現(xiàn)在各個(gè)領(lǐng)域,H5早就超出了“HTML5縮寫”這個(gè)說(shuō)法的含義,成為了一種在中國(guó)興起和流行的特殊作品形態(tài)。

在進(jìn)行H5作品的制作之前,我們需要對(duì)H5這種作品形態(tài)和相關(guān)的技術(shù)有一個(gè)基本的了解,這樣才能更好地根據(jù)H5的技術(shù)特點(diǎn),進(jìn)行作品的選題、策劃,根據(jù)H5可以實(shí)現(xiàn)的交互效果進(jìn)行作品的制作。在本節(jié)中,我們對(duì)H5這一名詞和作品形態(tài)的來(lái)源、H5的技術(shù)特點(diǎn)和優(yōu)勢(shì),以及H5的應(yīng)用領(lǐng)域進(jìn)行介紹。Heybuddy,thisH5isexcellent!老鐵，H5是啥?。?！HyperTextMarkupLanguage5（H5）Web標(biāo)準(zhǔn)“超文本標(biāo)記語(yǔ)言”第5個(gè)版本通俗的講：是網(wǎng)絡(luò)頁(yè)面編輯腳本的規(guī)范和標(biāo)準(zhǔn)H5可以說(shuō)是伴隨移動(dòng)互聯(lián)網(wǎng)的興起應(yīng)運(yùn)而生的技術(shù)曾經(jīng)，我們認(rèn)為H5是它的簡(jiǎn)稱

我們可以認(rèn)為H5是一個(gè)多項(xiàng)技術(shù)與技術(shù)標(biāo)準(zhǔn)的集合

我們可以認(rèn)為H5是一種獨(dú)立的作品形態(tài)H5CSS3Javascript微信文章HTML5PPTAPP游戲

二、H5的技術(shù)特點(diǎn)與優(yōu)勢(shì)跨終端跨平臺(tái)技術(shù)更新快融媒體強(qiáng)交互

三、H5的應(yīng)用領(lǐng)域內(nèi)容生產(chǎn)市場(chǎng)營(yíng)銷游戲

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

作品形態(tài)策劃思路第1節(jié)怎樣才算是一個(gè)好的H5選題

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

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

無(wú)論是內(nèi)容為主的H5作品，還是以營(yíng)銷宣傳為目的的H5作品，評(píng)判的首要標(biāo)準(zhǔn)，都是這部作品是否有一個(gè)正面的價(jià)值取向。在進(jìn)行H5作品的選題和策劃時(shí)，有很多制作者將選題和內(nèi)容策劃的重點(diǎn)落在了創(chuàng)新性和實(shí)用性方面，但一個(gè)明確、正面的價(jià)值取向，才是能夠畫龍點(diǎn)睛地表達(dá)作品內(nèi)容的重要部分。一個(gè)正面的價(jià)值取向，意味著要從作品中突出對(duì)正面或負(fù)面內(nèi)容的引導(dǎo)和啟迪意義。比如在新聞報(bào)道、圖書的解讀營(yíng)銷的H5作品中，不可避免地會(huì)出現(xiàn)負(fù)面新聞，或者文字作品中的負(fù)面情節(jié)，在這時(shí)，我們要注意內(nèi)容的呈現(xiàn)方式，并且從作品情節(jié)的選取上來(lái)做一些取舍，引導(dǎo)用戶進(jìn)行正面的解讀。

二、好的作品，可以用思想和觀點(diǎn)打動(dòng)用戶

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

三、作品可以兼顧內(nèi)容高度概括性與細(xì)節(jié)的完整性

H5作品不同于傳統(tǒng)媒體，它需要在很小的移動(dòng)終端的屏幕上，用融媒體元素和交互內(nèi)容呈現(xiàn)某一主題，因此選取各種融媒體信息，巧妙地進(jìn)行融合與濃縮，就顯得尤為重要。一個(gè)好的H5作品，應(yīng)該兼顧內(nèi)容高度的概括性與細(xì)節(jié)的完整性，基于這一原則，在內(nèi)容方面應(yīng)該做出適當(dāng)?shù)娜∩帷?/p>

除此之外，形式跟內(nèi)容能否結(jié)合得好也是重點(diǎn)之一。形式最終是為傳播目的服務(wù)的，有些作品如果不能將形式和內(nèi)容結(jié)合起來(lái)，則交互會(huì)顯得不太切題、畫蛇添足，因此好的作品，本質(zhì)上還是要有效告知用戶作品的主題與相關(guān)信息，表現(xiàn)形式如果與作品的選題和內(nèi)容關(guān)系不大的話，反而會(huì)混淆視聽、分散主題。作品如果可以兼顧內(nèi)容高度概括性與細(xì)節(jié)的完整性，就一定要在內(nèi)容方面有一個(gè)整體框架與嚴(yán)謹(jǐn)?shù)倪壿?，這一點(diǎn)，滲透于作品的內(nèi)容和形式中，也是好作品的要素。

四、作品的交互設(shè)計(jì)、操作指引須合理

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

五、H5作品的平面和版式設(shè)計(jì)依然重要

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

一、明確作品形態(tài)——為什么要做H5作品

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

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

一個(gè)優(yōu)質(zhì)的H5作品，究其本質(zhì)，還是對(duì)內(nèi)容解讀和呈現(xiàn)得生動(dòng)恰當(dāng)。那么，有了一個(gè)選題之后，我們?nèi)绾螐倪@個(gè)選題進(jìn)行延伸，組織H5作品的內(nèi)容，形成完整的內(nèi)容策劃方案呢?在策劃和制作H5作品時(shí)，多數(shù)制作者會(huì)采用頭腦風(fēng)暴或模仿的方式，邊制作邊構(gòu)思，這樣可能會(huì)導(dǎo)致H5作品發(fā)布后達(dá)不到預(yù)期的效果或傳播目的。

因此在這一節(jié)中，我們介紹一種從0到1打造H5作品的思路，可以幫助你形成一個(gè)從H5作品的定位，到最終的發(fā)布和運(yùn)營(yíng)策略的閉環(huán)式的H5作品策劃方案，

二、如何從0到1策劃H5作品H5內(nèi)容策劃定位需求分析功能確認(rèn)界面和交互運(yùn)營(yíng)策略定位、定調(diào)性、定用戶確認(rèn)要為誰(shuí)做、整體基調(diào)是什么樣子的，目標(biāo)用戶畫像。目標(biāo)用戶想要什么如果我是用戶，我想要什么樣的功能和交互形式

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

UI和產(chǎn)品體驗(yàn)設(shè)計(jì)符合目標(biāo)用戶審美的界面，適當(dāng)加入人機(jī)交互的內(nèi)容

怎么運(yùn)營(yíng)H5作品上線后，要怎么運(yùn)營(yíng)？一個(gè)實(shí)戰(zhàn)案例騰訊新聞極速版：國(guó)旗微信頭像H5換頭像H5產(chǎn)品策劃定位需求分析功能確認(rèn)界面和交互運(yùn)營(yíng)策略定位：打造一款可以生成微信頭像H5，用戶可以制作帶有國(guó)旗形象的微信頭像并進(jìn)行保存和更換。調(diào)性：喜迎國(guó)慶、愛(ài)國(guó)、正能量、刷屏用戶：微信所有用戶用戶需求：表達(dá)愛(ài)國(guó)情懷、展示個(gè)人形象、體驗(yàn)H5的趣味性功能需求：選擇頭像樣式、保存新頭像以便更換互動(dòng)需求：步驟簡(jiǎn)單、不復(fù)雜、無(wú)需二次加工、產(chǎn)品功能：調(diào)用微信頭像/用戶選擇圖片、選擇頭像樣式、生成頭像、保存頭像UI設(shè)計(jì)：國(guó)慶元素、喜慶、極簡(jiǎn)、最短時(shí)間完成交互產(chǎn)品體驗(yàn)：快好省怎么運(yùn)營(yíng)：主流媒體、微博、抖音等社交平臺(tái)、KOL/大V、微信朋友圈社交傳播需求分析與功能設(shè)計(jì)國(guó)慶到了，讓我換個(gè)頭像，為祖國(guó)慶生！我想使用微信頭像，這樣非?？旖?，而且好像真的是微信官方直接給我的，哈哈！我想突出我的頭像和別人的不完全一樣好的，我可以把圖片保存下來(lái)?yè)Q微信頭像了！我想上傳自己的照片or給別人做一個(gè)，這樣更有意思~頭像不滿意or我還想換別的頭像，再玩一次吧~滿足用戶的個(gè)性化需求四種頭像裝飾運(yùn)營(yíng)與傳播：微信平臺(tái)運(yùn)營(yíng)與傳播：微博平臺(tái)一些無(wú)傷大雅的小插曲H5活動(dòng)如何結(jié)束為什么要結(jié)束？如何結(jié)束？敲黑板劃重點(diǎn)國(guó)旗微信頭像H5之所以會(huì)取得成功，是因?yàn)橛脩魜?lái)自微信平臺(tái)解決了微信用戶大眾的、高頻的剛需用戶思維的功能設(shè)計(jì)：簡(jiǎn)單投入&豐富產(chǎn)出運(yùn)營(yíng)形成閉環(huán)問(wèn)題討論H5和PPT、圖書、視頻、微信文章等作品形態(tài)，有何異同?嘗試著尋找一些你認(rèn)為成功的H5案例，分析它們的策劃方案與成功之處。0102H5作品的素材查找與加工本章要點(diǎn)關(guān)鍵詞第3章1.了解查找H5作品多媒體素材的渠道。2.掌握H5作品中對(duì)于多媒體素材的文件大小與格式的要求。3.掌握多媒體素材的處理和壓縮方法。多媒體素材素材預(yù)處理靈感來(lái)源

圖片音頻

視頻

字體

其他工具查找&加工頁(yè)面加載超過(guò)5秒就會(huì)有74%的用戶離開頁(yè)面。加載時(shí)間HTML5作品基于網(wǎng)絡(luò)環(huán)境，受網(wǎng)絡(luò)加載速度的影響。素材設(shè)計(jì)的美觀程度，作品的動(dòng)畫效果。閱讀體驗(yàn)過(guò)大的資源走的不僅僅是流量，還有話費(fèi)……網(wǎng)絡(luò)資費(fèi)素材預(yù)處理20M10M3M5M報(bào)名賀卡類介紹類游戲互動(dòng)類大型專題報(bào)道簡(jiǎn)單活動(dòng)介紹、節(jié)日祝福，表單、圖片數(shù)據(jù)收集展示活動(dòng)專題、企業(yè)信息、新書內(nèi)容全面的介紹，圖文內(nèi)容量大，少量視頻。答題游戲、邏輯測(cè)試，含大量互動(dòng)內(nèi)容以及不同結(jié)果展示。兩會(huì)、國(guó)慶、紀(jì)念日、時(shí)事熱點(diǎn)突發(fā)事件的大型專題報(bào)道，大量圖文音視頻內(nèi)容。作品大小音頻Mp3格式200K以內(nèi)圖片PNG、JPG格式小圖：50K以內(nèi)中圖：100K以內(nèi)背景圖：200K以內(nèi)視頻MP4格式（H.264）20M以內(nèi)本地上傳的不宜過(guò)大或過(guò)長(zhǎng)可使用通用視頻代碼嵌入素材大小靈感來(lái)源Fotor懶設(shè)計(jì)：/Seeseed：/視覺(jué)me：http://www.shijue.me/UI中國(guó)：/飛屋博客：/blog凹凸實(shí)驗(yàn)室：https://aotu.io/數(shù)英網(wǎng)：/圖片查找&加工站酷：/優(yōu)設(shè)：/UEDNA：/Dribble：/千圖網(wǎng)：/昵圖網(wǎng)：/PhotoshopIlustrator美圖秀秀MIX濾鏡大師簡(jiǎn)拼音頻查找&加工站長(zhǎng)素材：/愛(ài)給網(wǎng)：/ADOBE素材庫(kù)：/en/na/audition/offers/audition_dlc.html云端剪輯：/桌面軟件：Audacity視頻加工Premiere會(huì)聲會(huì)影VUE小影字體查找字加工具方正飛翔數(shù)字版全面對(duì)接字加工具問(wèn)題討論嘗試著用表格的方式總結(jié)一下,在H5作品中運(yùn)用到的素材種類、推薦格式與大小、素材查找渠道、素材處理工具,以及查找與加工過(guò)程中的相關(guān)注意事項(xiàng)。01第四章H5作品的頁(yè)面設(shè)計(jì)第一節(jié)表現(xiàn)型字體與功能型字體表現(xiàn)型文字？功能型文字？1.方正字跡-龍吟體2.方正俠客體3.方正工業(yè)黑4.方正有貓?jiān)?.方正精氣神體6.方正摩登體第二節(jié)如何選擇合適的字體？1.將要表達(dá)的信息配上“適當(dāng)”的感覺(jué)2.多傾聽讀者的心聲現(xiàn)在我們已經(jīng)為我們的設(shè)計(jì)配了完美字體，但仍然有個(gè)問(wèn)題，并非所有人對(duì)同一種字體都有一樣的感覺(jué)?？赡苡幸蝗喝擞X(jué)得這款字體很新潮，另一群就覺(jué)得它過(guò)時(shí)，選擇了適合的字體后，我們也要確定它適合我們的觀眾。因?yàn)槿藗兛醋煮w的方式受到文化連結(jié)的影響，而文化又和年齡及地區(qū)有相當(dāng)大的關(guān)系。所以要對(duì)我們的目標(biāo)群眾有敏感度，如果對(duì)選擇的字體有所遲疑，不妨多問(wèn)問(wèn)H5的目標(biāo)用戶，分析目標(biāo)受眾的特性，不僅能夠幫我們選擇更合適的字體，還能讓你的文字排版效果更好。3.混排時(shí)中英文字體的匹配很多時(shí)候我們做H5時(shí)會(huì)遇到中西文混排的情況，漢字與拉丁字母的形體結(jié)構(gòu)是有差異的，漢字為方塊字，而拉丁文有上升線和下伸線。如果想要在中西文混排時(shí)兩種字體視覺(jué)大小近似，首先要選擇風(fēng)格接近的兩種字體，再根據(jù)選擇，通過(guò)調(diào)整拉丁字體大小來(lái)看設(shè)計(jì)效果。3.混排時(shí)中英文字體的匹配3.混排時(shí)中英文字體的匹配第三節(jié)文字與正文讓字型的尺寸搭配設(shè)計(jì)的內(nèi)容A.字重B.字號(hào)《設(shè)計(jì)中的邏輯》正文字體：方正蘭亭黑默認(rèn)字號(hào)17px可以試試14px17px14px第四節(jié)表現(xiàn)型與功能型字體推薦方正蘇新詩(shī)古印宋方正榜書楷方正字跡-驚鴻體方正字跡-勁顏體方正潤(rùn)扁宋方正粗金陵簡(jiǎn)體南京國(guó)子監(jiān)刻本《南齊書》方正字跡-龍吟體第五節(jié)通過(guò)版面率、圖版率合理安排H5頁(yè)面的層次留白是影響版面率的重要因素，一般來(lái)說(shuō):留白越多，版面率越低，H5頁(yè)面越顯得恬靜典雅；留白越少，版面率越高，H5頁(yè)面越顯得活潑熱鬧。留白少留白多圖版率高圖版率低一般來(lái)說(shuō)，當(dāng)圖版率為0時(shí)，讀者對(duì)H5的閱讀欲望會(huì)很低，會(huì)讓人覺(jué)得這個(gè)H5頁(yè)面非常單調(diào)乏味。對(duì)于陳述性信息較多的頁(yè)面，增加圖版率，恢復(fù)讀者的閱讀興趣，增加留白，讓整個(gè)版面重新充滿生機(jī)。除了增加圖片、插畫等元素，我們也可以通過(guò)色塊來(lái)增加圖版率。大家可以在具體設(shè)計(jì)時(shí)，思考如何將復(fù)雜冗長(zhǎng)的信息通過(guò)圖像的方式表達(dá)。H5作品的交互設(shè)計(jì)與互動(dòng)效果制作本章要點(diǎn)關(guān)鍵詞第6章1.掌握H5作品中交互設(shè)計(jì)的總體原則。2.了解H5作品中的不同交互類型及其分類。3.掌握使用方正飛翔數(shù)字版制作不同類型互動(dòng)效果的方法。交互設(shè)計(jì)

互動(dòng)效果第

1

節(jié)

交互設(shè)計(jì)原則與方法20世紀(jì)七八十年代之交,舊金山灣區(qū)一群敬業(yè)而有遠(yuǎn)見的研究員、工程師和設(shè)計(jì)師正在忙于發(fā)明未來(lái)人們與電腦交互的方式。從施樂(lè)帕克研究中心(Xerox

PARC)到斯坦福國(guó)際研究院(SRI),最后到蘋果電腦公司,人們開始討論,為數(shù)字產(chǎn)品創(chuàng)造出可用、易用的“人性化界面”到底意味著什么。20世紀(jì)80年代中期,兩位工業(yè)設(shè)計(jì)師比爾·莫格里奇(BillMoggridge)和比爾·韋普朗克(BillVerplank)著手設(shè)計(jì)第一臺(tái)筆記本電腦GRiDCompass。他們?yōu)樽约核龅墓ぷ鲃?chuàng)造了“交互設(shè)計(jì)”一詞。盡管交互設(shè)計(jì)常常被看作為一門新興的設(shè)計(jì)學(xué)科,但實(shí)際上人類社會(huì)已經(jīng)有著很長(zhǎng)時(shí)間的交互設(shè)計(jì)歷史。作為一門從人機(jī)交互(Human

ComputerInteraction)領(lǐng)域分支并發(fā)展得來(lái)的新型學(xué)科,交互設(shè)計(jì)具有十分典型的跨學(xué)科特征,涉及范圍包括計(jì)算機(jī)科學(xué)、計(jì)算機(jī)工程學(xué)、信息學(xué)、美學(xué)、心理學(xué)與社會(huì)學(xué)等。●所謂交互設(shè)計(jì),是指在人與產(chǎn)品、服務(wù)及系統(tǒng)之間創(chuàng)建一系列對(duì)話,其更偏向于技術(shù)性的設(shè)定與實(shí)現(xiàn)過(guò)程。世界交互設(shè)計(jì)協(xié)會(huì)第一任主席雷曼(Reimann)對(duì)于交互設(shè)計(jì)做出了如下定義:“交互設(shè)計(jì)是定義人工制品(設(shè)計(jì)客體)、環(huán)境和系統(tǒng)的行為的設(shè)計(jì)?！薄駨募夹g(shù)層面而言,交互設(shè)計(jì)需要涉及計(jì)算機(jī)工程學(xué)、語(yǔ)言編程、信息設(shè)備、信息架構(gòu)學(xué)的運(yùn)用。從用戶層面而言,交互設(shè)計(jì)涉及人類行為學(xué)、人因?qū)W、心理學(xué)。從設(shè)計(jì)層面而言,交互設(shè)計(jì)還涉及工業(yè)設(shè)計(jì)、界面表現(xiàn)、產(chǎn)品語(yǔ)意及傳達(dá)?！駥?duì)于H5交互設(shè)計(jì)而言,在合理選擇了H5制作工具、輔助工具、設(shè)計(jì)工具后,我們需要重點(diǎn)思考的,是用戶使用你的H5作品時(shí)的體驗(yàn),因此需要結(jié)合用戶心理、操作習(xí)慣、視覺(jué)感受來(lái)做整體考量。一、視覺(jué)可見原則二、環(huán)境貼切原則三、一致性原則四、容錯(cuò)與及時(shí)反饋原則第

2

節(jié)

互動(dòng)效果的分類H5的互動(dòng)效果種類繁多,實(shí)際上對(duì)H5互動(dòng)效果的分類并沒(méi)有統(tǒng)一的說(shuō)法和分類標(biāo)準(zhǔn),這里僅提供一種筆者認(rèn)為分類標(biāo)準(zhǔn)比較明晰的、按照H5互動(dòng)效果功能來(lái)源的分類方式,即市面上H5的互動(dòng)效果可以分為三類:基于傳感器的互動(dòng)效果、基于觸摸屏操作的互動(dòng)效果以及基于融媒體展示的互動(dòng)效果?；趥鞲衅鞫ㄎ粩z像頭麥克風(fēng)01基于觸摸屏操作單屏滾動(dòng)手勢(shì)操作虛擬現(xiàn)實(shí)增強(qiáng)現(xiàn)實(shí)02基于畫面呈現(xiàn)視頻動(dòng)畫特效互動(dòng)03一、基于傳感器的互動(dòng)效果er，ea，’－’市仰的·’·n·，，噸幽守矗“．民舍····’也伊4‘··－a’，電.-.鄉(xiāng)、..:tJ:_日在兄袖』”

回』=-y占ansmh‘，俏“，‘－旬．仇．”．，．?dāng)偽?/p>

說(shuō)恰已·忽地也刻”’

－.舍嗡

”相宜本草

《鄉(xiāng)音祝?！?/p>

HS圖5-2-2,itti

鄉(xiāng)古祝福二、

基于觸摸屏操作的互動(dòng)效果圖5-2-4《溫戚電影十周年》

HS三、

基于融媒體展示的互動(dòng)功能圖5-2-7《穿越宇宙的邀請(qǐng)函》

HS方正飛翔數(shù)字版V8.3除了41種預(yù)設(shè)動(dòng)畫外，新增路徑動(dòng)畫、形變動(dòng)畫、形變路徑三種可自定