《H5設(shè)計與制作（全彩慕課版）（第2版）》 課件 9 3D全景H5制作、10 視頻動畫H5制作

3D/全景H5制作3D/全景H5可以將產(chǎn)品的每個角度都淋漓盡致地展現(xiàn)，令用戶有身臨其境的感覺。本章從實戰(zhàn)角度對3D/全景H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進行系統(tǒng)講解與演練。通過對本章的學(xué)習，讀者可以對3D/全景H5有一個基本的認識，并快速掌握設(shè)計制作常用3D/全景H5的方法。了解食品餐飲行業(yè)新年祝福H5的項目策劃掌握食品餐飲行業(yè)新年祝福H5的交互設(shè)計學(xué)習目標項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布9.1課堂案例——食品餐飲行業(yè)新年祝福H5制作醉仙樓食品餐飲有限公司在新春佳節(jié)之際，想制作一款H5，即達到節(jié)日祝福又起到宣傳品牌的作用。在策劃上，針對內(nèi)容分為了首尾祝福頁、年味大集、年貨大集、年俗大集介紹頁以及穿插在中間的祝福頁。針對視覺，采用紅色剪紙的形式營造春節(jié)氣氛。針對制作，運用走馬燈的表現(xiàn)形式進一步體現(xiàn)春節(jié)的喜慶。9.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進行了梳理，并運用Axure進行了繪制。9.1.2交互設(shè)計效果圖9.1.3視覺設(shè)計效果圖9.1.4制作發(fā)布

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動為傳單制作新年年貨禮品促銷H5，使用Photoshop軟件制作首屏、先領(lǐng)劵、大禮包、送親友、送長輩、關(guān)注我們等頁面的視覺設(shè)計，使用凡科微傳單的趣味中的球體儀功能制作最終效果。9.2課堂練習——新年年貨禮品促銷H5制作效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動為傳單制作家居室內(nèi)家俱推廣H5，使用Photoshop軟件制作全景頁面和彈窗頁面的視覺設(shè)計，使用凡科微傳單的趣味中的全景功能功能制作最終效果。9.3課后習題——家居室內(nèi)家俱推廣H5制作效果圖

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

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

使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作電子數(shù)碼行業(yè)品牌推廣H5，使用Photoshop軟件制作