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

3D/全景H5制作3D/全景H5可以將產(chǎn)品的每個(gè)角度都淋漓盡致地展現(xiàn)，令用戶(hù)有身臨其境的感覺(jué)。本章從實(shí)戰(zhàn)角度對(duì)3D/全景H5的項(xiàng)目策劃、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)以及制作開(kāi)發(fā)進(jìn)行系統(tǒng)講解與演練。通過(guò)對(duì)本章的學(xué)習(xí)，讀者可以對(duì)3D/全景H5有一個(gè)基本的認(rèn)識(shí)，并快速掌握設(shè)計(jì)制作常用3D/全景H5的方法。了解金融理財(cái)行業(yè)節(jié)日祝福H5的項(xiàng)目策劃掌握金融理財(cái)行業(yè)節(jié)日祝福H5的交互設(shè)計(jì)學(xué)習(xí)目標(biāo)項(xiàng)目策劃交互設(shè)計(jì)視覺(jué)設(shè)計(jì)制作發(fā)布9.1課堂案例——金融理財(cái)行業(yè)節(jié)日祝福H5制作金融理財(cái)保險(xiǎn)公司在新春佳節(jié)之際，想制作一款H5，即達(dá)到節(jié)日祝福又起到宣傳品牌的作用。在策劃上，針對(duì)內(nèi)容分為了首尾祝福頁(yè)、3款險(xiǎn)種介紹頁(yè)以及穿插在險(xiǎn)種介紹之間的祝福頁(yè)。針對(duì)視覺(jué)，采用紅色剪紙的形式營(yíng)造春節(jié)氣氛。針對(duì)制作，運(yùn)用走馬燈的表現(xiàn)形式進(jìn)一步體現(xiàn)春節(jié)的喜慶。9.1.1項(xiàng)目策劃通過(guò)前期基本的項(xiàng)目策劃，對(duì)這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。9.1.2交互設(shè)計(jì)使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動(dòng)為傳單制作金融理財(cái)行業(yè)節(jié)日祝福H5，使用Photoshop軟件制作首頁(yè)、尊享一生、步步高升、關(guān)愛(ài)一生、歲歲平安、悅享一生、恭喜發(fā)財(cái)?shù)软?yè)面的視覺(jué)設(shè)計(jì)，使用凡科微傳單的趣味中的走馬燈功能制作最終效果。9.1.3視覺(jué)設(shè)計(jì)9.1.4制作發(fā)布效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動(dòng)為傳單制作電子商務(wù)行業(yè)活動(dòng)促銷(xiāo)H5，使用Photoshop軟件制作首屏、先領(lǐng)劵、大禮包、送親友、送長(zhǎng)輩、關(guān)注我們等頁(yè)面的視覺(jué)設(shè)計(jì)，使用凡科微傳單的趣味中的球體儀功能制作最終效果。9.2課堂練習(xí)——電子商務(wù)行業(yè)活動(dòng)促銷(xiāo)H5制作效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動(dòng)為傳單制作家居裝修行業(yè)產(chǎn)品推廣H5，使用Photoshop軟件制作全景頁(yè)面和彈窗頁(yè)面的視覺(jué)設(shè)計(jì)，使用凡科微傳單的趣味中的全景功能功能制作最終效果。9.3課后習(xí)題——家居裝修行業(yè)產(chǎn)品推廣H5制作效果圖

視頻動(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，使用Phot