頁(yè)面設(shè)計(jì)與制作（全彩慕課版）（第2版）課件 第10章 視頻動(dòng)畫(huà)頁(yè)面的制作

視頻動(dòng)畫(huà)H5制作視頻動(dòng)畫(huà)H5擁有強(qiáng)烈的故事情節(jié)，加之與情節(jié)環(huán)環(huán)相扣的音效，往往令用戶(hù)在體驗(yàn)時(shí)目不轉(zhuǎn)睛并產(chǎn)生強(qiáng)烈的真實(shí)感。本章從實(shí)戰(zhàn)角度對(duì)視頻動(dòng)畫(huà)H5的項(xiàng)目策劃、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)以及制作開(kāi)發(fā)進(jìn)行系統(tǒng)講解與演練。通過(guò)對(duì)本章的學(xué)習(xí)，讀者可以對(duì)視頻動(dòng)畫(huà)H5有一個(gè)基本的認(rèn)識(shí)，并快速掌握設(shè)計(jì)制作常用視頻動(dòng)畫(huà)H5的方法。了解文化傳媒行業(yè)活動(dòng)推廣H5的項(xiàng)目策劃掌握文化傳媒行業(yè)活動(dòng)推廣H5的交互設(shè)計(jì)學(xué)習(xí)目標(biāo)項(xiàng)目策劃交互設(shè)計(jì)視覺(jué)設(shè)計(jì)制作發(fā)布10.1課堂案例——旅游出行行業(yè)活動(dòng)推廣H5制作旅行社在春節(jié)推出了新加坡七日游旅行套餐，現(xiàn)在想策劃一款H5來(lái)推廣該旅行套餐。在內(nèi)容上，首先模擬鎖屏界面，界面上提示收到微信消息，點(diǎn)擊消息解鎖進(jìn)入模擬的微信聊天界面，親戚分享旅行心情并讓我瀏覽其朋友圈，接著場(chǎng)景轉(zhuǎn)換到模擬的朋友圈界面，開(kāi)始瀏覽別人分享的各處景觀。最后的頁(yè)面，點(diǎn)擊按鈕可以跳轉(zhuǎn)到新加坡七日游的鏈接了解活動(dòng)。針對(duì)視覺(jué)，模擬了鎖屏、微信聊天和朋友圈界面，加強(qiáng)了代入感。針對(duì)制作，微信聊天以及朋友圈觀看會(huì)以視頻的形式展現(xiàn)，同時(shí)瀏覽朋友圈的視頻中也嵌入了很多小視頻，使整個(gè)H5非常生動(dòng)。10.1.1項(xiàng)目策劃通過(guò)前期基本的項(xiàng)目策劃，對(duì)這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。10.1.2交互設(shè)計(jì)使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作旅游出行行業(yè)產(chǎn)品介紹H5，使用Photoshop軟件制作頁(yè)面的視覺(jué)設(shè)計(jì)，使用iH5的動(dòng)效、事件、橫幅制作最終效果。10.1.3視覺(jué)設(shè)計(jì)10.1.4制作發(fā)布效果圖

使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作文化傳媒行業(yè)活動(dòng)推廣H5，使用Photoshop軟件制作頁(yè)面的視覺(jué)效果，使用iH5的動(dòng)效、事件、橫幅功能制作最終效果。10.2課堂練習(xí)——文化傳媒行業(yè)活動(dòng)推廣H5制作效果圖

使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作電子數(shù)碼行業(yè)品牌推廣H5，使用Photoshop軟件制作頁(yè)面的視覺(jué)設(shè)計(jì)，使用iH5的動(dòng)效、事件、橫幅功能制作最終效果。10.3