頁面設計與制作（全彩慕課版）（第2版）課件 第9、10章 3D全景頁面的制作、視頻動畫頁面的制作

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

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

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

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

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

使用谷歌瀏覽器登錄iH5官網，使用iH5制作電子數碼行業(yè)品牌推廣H5，使用Phot