頁面設(shè)計與制作（全彩慕課版）（周建國 第2版）課件全套 第1-10章 初識頁面- 視頻動畫頁面的制作

H5初識隨著移動互聯(lián)網(wǎng)的興起，H5逐漸成為了互聯(lián)網(wǎng)傳播領(lǐng)域的一個重要傳播形式，因此學(xué)習(xí)和掌握H5成為了廣大互聯(lián)網(wǎng)從業(yè)人員的重要技能之一。本章對H5的定義、發(fā)展、特點、應(yīng)用以及類型進(jìn)行系統(tǒng)講解。通過對本章的學(xué)習(xí)，讀者可以對H5有一個宏觀的認(rèn)識，有助于高效便利地進(jìn)行后續(xù)的H5設(shè)計制作。掌握H5的定義了解H5的發(fā)展了解H5的特點熟悉H5的應(yīng)用熟悉H5的類型學(xué)習(xí)目標(biāo)H5指的是移動端上基于HTML5技術(shù)的交互動態(tài)網(wǎng)頁，是用于移動互聯(lián)網(wǎng)的一種新型營銷工具，通過移動平臺（如微信）傳播。1.1H5的定義網(wǎng)易云音樂：你的榮格心理原型PUPUPULA：2018汪年全家福我是創(chuàng)益人×騰訊廣告×騰訊基金會：敦煌數(shù)字修復(fù)開始階段引爆階段綻放階段成熟階段1.2H5的發(fā)展1.開始階段H5的開始可以追溯到2014年，其最初的呈現(xiàn)狀態(tài)和PPT類似，將經(jīng)過簡單設(shè)計的靜態(tài)頁面設(shè)置成滑動翻頁效果，常用于婚禮邀請、企業(yè)招聘等。

1.2H5的發(fā)展免費婚禮邀請函模版2.引爆階段2014年下半年，一款名為《圍住神經(jīng)貓》的H5小游戲，引爆了微信朋友圈，最后頁面瀏覽量達(dá)數(shù)億級。隨后相繼產(chǎn)生的《看你有多色》等小游戲，讓H5真正的開啟了引爆。

1.2H5的發(fā)展圍住神經(jīng)貓博雅：看你有多色3.綻放階段2015年～2016年是H5的全面綻放階段。在這一階段中的H5交互設(shè)計酷炫、表現(xiàn)形式新穎，以最大限度加強(qiáng)用戶參與感，提高用戶分享H5的意愿。

1.2H5的發(fā)展豆瓣：我們的精神世界淘寶×京東：造物節(jié)邀請函訊極光計劃：記憶重構(gòu)4.成熟階段2017年后，H5慢慢褪去了一些復(fù)雜酷炫的交互效果，開始走向成熟。這一階段的H5輕互動，重內(nèi)容，傳播量最大的主要有兩種形式，一種是純視頻類H5，另一種是測試類H5。

1.2H5的發(fā)展騰訊：穿越未來來看你貝殼租房×奇葩說：100年后你將住在哪個奇葩星球H5具有跨平臺、多媒體、強(qiáng)互動以及易傳播的特點。

1.3H5的特點H5的特點H5的應(yīng)用形式多樣，常見的應(yīng)用領(lǐng)域有品牌宣傳、產(chǎn)品展示、活動推廣、知識分享、新聞熱點、會議邀請、企業(yè)招聘、培訓(xùn)招生等。

1.4H5的應(yīng)用網(wǎng)易云音樂：尋找「夢想」的旅程，用于品牌宣傳騰訊：2016騰訊WE大會·無境，用于會議邀請奧美：稀有動物懸賞令，用于企業(yè)招聘營銷宣傳類知識新聞類游戲互動類網(wǎng)站應(yīng)用類1.5H5的類型1.營銷宣傳類營銷宣傳類H5是最常見的，它通常都是為產(chǎn)品、品牌以及活動做宣傳推廣而設(shè)計的。

招商銀行APP：來！坐！騰訊：NextIdeax故宮寶馬：全新BMWM2即將上市1.5H5的類型2.知識新聞類知識新聞類H5同樣比較普遍，它通常都是根據(jù)社會重大事件進(jìn)行宣傳新聞、普及知識的。

澎湃新聞：垃圾分類可視化查詢手冊網(wǎng)易新聞：自白騰訊新聞×WWF×微公益：騰訊新聞1.5H5的類型3.游戲互動類游戲互動類H5一般比較簡單，在微信中點開就可以直接玩，不用安裝卸載，通常多為娛樂或引流而制作。

網(wǎng)易新聞×噠噠×999皮炎平：守護(hù)你的幸運(yùn)足球網(wǎng)易新聞×噠噠：睡姿大比拼小米：我在宮里遇到一件奇怪的事1.5H5的類型4.網(wǎng)站應(yīng)用類網(wǎng)站應(yīng)用類H5在產(chǎn)品設(shè)計領(lǐng)域中常被稱為“H5網(wǎng)站”，可以直接在瀏覽器中觀看和操作，不像App那樣需要安裝，它通常帶有大量信息及App中的部分功能。

站酷花瓣UI中國1.5H5的類型H5的設(shè)計與制作從0到1開始打造一款H5，這是策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)相互配合的綜合過程。本章對H5設(shè)計與制作的項目流程、常用軟件、基本規(guī)范、注意事項以及創(chuàng)意方法進(jìn)行系統(tǒng)講解。通過對本章的學(xué)習(xí)，讀者可以對H5的整體設(shè)計與制作有一個基本的認(rèn)識，有助于高效便利地進(jìn)行后續(xù)的H5設(shè)計和制作。了解設(shè)計與制作H5的項目流程熟悉設(shè)計與制作H5的常用軟件掌握設(shè)計與制作H5的基本規(guī)范掌握設(shè)計與制作H5的注意事項熟悉設(shè)計與制作H5的創(chuàng)意方法學(xué)習(xí)目標(biāo)設(shè)計與制作H5的項目流程可以按照前期策劃、交互設(shè)計、設(shè)計執(zhí)行、制作開發(fā)、測試發(fā)布以及運(yùn)營推廣來進(jìn)行。通常大型互聯(lián)網(wǎng)公司在制作時往往會由團(tuán)隊分工合作完成，受眾面較窄的H5則只需要由一個綜合能力較強(qiáng)的人員獨立完成。2.1H5設(shè)計與制作的項目流程H5的常用軟件包括前期策劃、交互設(shè)計、視覺設(shè)計、動效設(shè)計、影音編輯、制作開發(fā)以及在線輔助這7類。2.2H5設(shè)計與制作的常用軟件2.2H5設(shè)計與制作的常用軟件H5的設(shè)計尺寸H5的頁面適配H5的文字使用H5的圖片壓縮2.3設(shè)計與制作H5的基本規(guī)范設(shè)計與制作H5的基本規(guī)范可以分為設(shè)計尺寸、頁面適配、文字使用以及圖片壓縮。2.3設(shè)計與制作H5的基本規(guī)范1.H5的設(shè)計尺寸根據(jù)目前多數(shù)的H5在線制作工具，設(shè)計尺寸普遍采用在iPhone5的手機(jī)屏幕尺寸640px×1136px的基礎(chǔ)上，減去微信或瀏覽器觀看時的128px導(dǎo)航欄和狀態(tài)欄，因此畫面最終的有效尺寸是640px×1008px。有個別H5在線制作工具的有效尺寸會有些許區(qū)別。如凡科的畫面最終有效尺寸是750px×1206px，其根據(jù)的是iPhone6/7/8的手機(jī)屏幕尺寸去掉導(dǎo)航欄和狀態(tài)欄而來。而iH5默認(rèn)尺寸是640px×1040px，則是根據(jù)iPhone6/7/8plus的手機(jī)屏幕尺寸去掉導(dǎo)航欄和狀態(tài)欄又整體縮小而來。因此H5的尺寸設(shè)計需要結(jié)合最終使用的工具來進(jìn)行，而分辨率都是72px。2.3設(shè)計與制作H5的基本規(guī)范2.H5的頁面適配H5的頁面適配包括H5工具的自動適配、頁面安全區(qū)的設(shè)置以及H5其他設(shè)備的處理3個方面。2.3設(shè)計與制作H5的基本規(guī)范（1）H5工具的自動適配H5的在線制作工具本身就具備自動適配的功能，因此最主流的尺寸雖然是根據(jù)iPhone5的手機(jī)屏幕尺寸而來，也可以保證對于大多數(shù)手機(jī)的自動滿屏適配。2.3設(shè)計與制作H5的基本規(guī)范凡科H5制作中設(shè)置的出血凡科H5制作中未設(shè)置出血（2）頁面安全區(qū)的設(shè)置針對于設(shè)計師而言，如果要適配如iPhoneX/XS等大屏手機(jī)，可以將背景設(shè)計得較大。而類似按鈕、信息等重要內(nèi)容不要放到非安全區(qū)域中，否則在小屏手機(jī)中內(nèi)容會被裁掉。2.3設(shè)計與制作H5的基本規(guī)范（3）H5其他設(shè)備的處理H5雖然具有跨平臺的特點，但其主要分享設(shè)備還是依靠手機(jī)，而且如重力感應(yīng)等交互效果亦不適合用計算機(jī)瀏覽器打開。因此，針對運(yùn)用計算機(jī)瀏覽器觀看體驗不佳的H5，設(shè)計師可以為網(wǎng)頁瀏覽器設(shè)置一個掃碼頁，引導(dǎo)用戶用手機(jī)掃碼觀看。2.3設(shè)計與制作H5的基本規(guī)范3.H5的文字使用通常500個漢字約占1KB的內(nèi)存，而一張將文字導(dǎo)出的圖片至少占10KB的內(nèi)存。因此除非字體經(jīng)過設(shè)計，不建議將文字以圖片的形式輸出。2.3設(shè)計與制作H5的基本規(guī)范4.H5的圖片壓縮圖片的壓縮同樣可以減少H5文件的大小，提升加載速度。在使用Photoshop將設(shè)計稿導(dǎo)出圖片進(jìn)行制作時，選擇“存儲為Web所用格式”會進(jìn)行圖片的壓縮。2.3設(shè)計與制作H5的基本規(guī)范瀏覽器的選擇交互控件的使用H5的加載優(yōu)化微信誘導(dǎo)分享2.4H5的注意事項1.瀏覽器的選擇由于H5的制作都是通過線上工具完成，因此在瀏覽器的選擇方面一定要注意。這里建議使用谷歌瀏覽器，因為谷歌瀏覽器可以最大程度保證線上操作的順暢。2.4H5的注意事項2.交互控件的使用（1）輸入框彈出式輸入框在H5中容易造成頁面錯位，因此盡量不要設(shè)置彈出式輸入框，通?？梢酝ㄟ^點擊直接在輸入位置進(jìn)行輸入。（2）播放器系統(tǒng)的不同對于播放器控件的支持也有所不同，在iOS系統(tǒng)中可以進(jìn)行類似自動播放的自由設(shè)置，但在Android系統(tǒng)中，并不支持自動播放。2.4H5的注意事項3.H5的加載優(yōu)化（1）全局加載全局加載，是在H5的加載結(jié)束后一次性加載好所有內(nèi)容（內(nèi)嵌視頻等形式的富媒體除外），這種加載方式最常用。（2）優(yōu)先加載優(yōu)先加載，是先加載主要內(nèi)容，再加載次要內(nèi)容，這種加載方式應(yīng)用較少，多用于內(nèi)容較多的圖文混排頁面。（3）分段加載分段加載，是將H5分成幾段，當(dāng)用戶看至一段后，才會對下一段進(jìn)行加載，這種加載方式適合分章節(jié)的H5。2.4H5的注意事項4.微信誘導(dǎo)分享（1）誘導(dǎo)分享類內(nèi)容微信不建議誘導(dǎo)分享類內(nèi)容，類似明示暗示分享、夸張言語脅迫、紅包利益誘惑等形式都有可能被禁。（2）誘導(dǎo)關(guān)注類內(nèi)容微信不建議強(qiáng)制或誘導(dǎo)用戶關(guān)注公眾帳號，類似關(guān)注后查看答案、領(lǐng)取紅包、關(guān)注后方可參與活動等形式都有可能被禁。（3）H5游戲、測試類內(nèi)容微信不建議傳播H5游戲、測試類內(nèi)容，類似手速、好友問答、性格測試，測試簽等形式都有可能被禁。2.4H5的注意事項H5的常用策劃方法H5的常用交互方法H5的創(chuàng)意設(shè)計風(fēng)格H5的動效設(shè)計運(yùn)用H5的音效設(shè)計方法H5的常用測試方法H5的常規(guī)數(shù)據(jù)分析2.5H5的創(chuàng)意實現(xiàn)H5的創(chuàng)意實現(xiàn)可以從內(nèi)容策劃、交互交互、視覺設(shè)計、動效設(shè)計、音效設(shè)計、測試方法以及數(shù)據(jù)分析這7個方面進(jìn)行尋找。2.5H5的創(chuàng)意實現(xiàn)1.符合用戶習(xí)慣H5主要依靠手機(jī)進(jìn)行傳播，因此H5的策劃需要符合移動端用戶的習(xí)慣。移動端用戶的習(xí)慣主要體現(xiàn)在畫面尺寸、閱讀習(xí)慣、場景習(xí)慣3個方面。2.結(jié)合用戶心理精品H5的用戶心理主要表現(xiàn)為情感共鳴、構(gòu)思新奇、加入鼓勵以及主動參與這4個方面。3.制定對應(yīng)形式策劃時根據(jù)不同的內(nèi)容，需要制定對應(yīng)的展現(xiàn)形式，展現(xiàn)形式可以分為頁面展示、交互引導(dǎo)以及用戶操作3大類型。2.5.1H5的常用策劃方法1

.結(jié)合手勢手勢是移動端中非常重要的交互方式，同時也極大地提高了H5操作的便捷性。常用的手勢有點擊、長按、滑動以及拖動。2.利用硬件手機(jī)中的很多硬件設(shè)備都可以被應(yīng)用于H5中，增強(qiáng)H5的使用體驗。常被利用的硬件設(shè)備有攝像頭、語音話筒、手機(jī)陀螺儀。3.使用技術(shù)伴隨技術(shù)的發(fā)展，H5可以通過新的技術(shù)帶給用戶新的體驗。在H5中使用的常見新技術(shù)可以總結(jié)為VR、AR、3D以及雙屏互動。2.5.2H5的常用交互方法H5的常用創(chuàng)意設(shè)計風(fēng)格可以總結(jié)為極簡冷淡、扁平圖形、攝影圖像、拼貼疊加、懷舊復(fù)古、現(xiàn)代科技、仿真寫實以及手繪插畫8種。2.5.3H5的常用創(chuàng)意設(shè)計風(fēng)格H5的動效設(shè)計運(yùn)用可以通過轉(zhuǎn)場動效、內(nèi)容動效、功能動效以及輔助動效這4個方面進(jìn)行介紹。2.5.4H5的動效設(shè)計運(yùn)用H5音效設(shè)計可以分為背景音效以及輔助音效。1.背景音效H5常見的背景音效有3類，分別是功能音效、擬聲音效以及環(huán)境音效。2.輔助音效H5常見的輔助音效有3類，分別是功能音效、擬聲音效以及環(huán)境音效。2.5.5H5的音效設(shè)計方法在H5正式上線之前，都會進(jìn)行幾次測試以收獲反饋及效果。常用的測試方法微信有小范圍測試以及微信公眾號測試。1.微信小范圍測試微信小范圍測試是指將H5通過單獨發(fā)送好友，轉(zhuǎn)發(fā)朋友圈以及發(fā)送至微信群進(jìn)行的測試。2.微信公眾號測試微信公眾號測試是指如果我們有自己的公眾號，可以將做的H5以鏈接或二維碼的形式編輯到微信圖文中進(jìn)行的測試。同時可以在圖文中將常見的引導(dǎo)問題以選擇題的形式出現(xiàn)，提升用戶反饋的參與度。2.5.6H5的常用測試方法PV：PV(PageView)即頁面瀏覽量或點擊量。用戶每一次對H5的每個頁面訪問均被記錄1次。用戶對同一頁面的多次訪問，訪問量累計。UV：UV(UniqueVisitor)即獨立訪客數(shù)，指訪問H5的人數(shù)。在同一天內(nèi)，相同的客戶端只被計算一次。IP：IP(lnternetProt0COI)即互聯(lián)網(wǎng)協(xié)議，IP值指一天內(nèi)舊地址不同的用戶訪問H5的數(shù)量。在同一天內(nèi)，相同的IP只被計算1次。跳出率：跳出率指僅瀏覽了H5其中的一個頁面就離開的訪問量與總訪問量的百分比。它是衡量H5內(nèi)容質(zhì)量的重要標(biāo)準(zhǔn)。2.5.7H5的常規(guī)數(shù)據(jù)分析留存時間：留存時間指用戶瀏覽H5的停留時間，可以被分為總留存時間和單頁面停留時間。和跳出率一樣，它也是衡量H5內(nèi)容質(zhì)量的重要標(biāo)準(zhǔn)。用戶轉(zhuǎn)化率：用戶轉(zhuǎn)化率指用戶通過H5進(jìn)行了相應(yīng)目標(biāo)行動的數(shù)量與總訪問量的百分比。對于需要進(jìn)行跳轉(zhuǎn)外部鏈接的H5，用戶轉(zhuǎn)化率是非常重要的數(shù)據(jù)。2.5.7H5的常規(guī)數(shù)據(jù)分析互動游戲H5制作互動游戲H5由于具備簡單有趣及交互性強(qiáng)的特點，因此給用戶帶來了一定的感官刺激，并且間接地將企業(yè)的品牌進(jìn)行了宣傳。本章從實戰(zhàn)角度對互動游戲H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進(jìn)行系統(tǒng)講解與演練。通過對本章的學(xué)習(xí)，讀者可以對互動游戲H5有一個基本的認(rèn)識，并快速掌握設(shè)計制作常用互動游戲H5的方法。了解媒體娛樂行業(yè)消消樂H5的項目策劃掌握媒體娛樂行業(yè)消消樂H5的交互設(shè)計學(xué)習(xí)目標(biāo)項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布3.1課堂案例——媒體娛樂行業(yè)消消樂H5制作KingGameStudios是一家游戲工作室，此次想借助H5在網(wǎng)絡(luò)上獲取一定的關(guān)注度。在策劃上，結(jié)合了工作室的游戲性質(zhì)，運(yùn)用H5制作工具中的模版設(shè)計一款消除類益智H5小游戲。旨在通過游戲，刺激用戶了解甚至關(guān)注到KingGameStudios。3.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。3.1.2交互設(shè)計媒體娛樂行業(yè)消消樂H5原型圖本次H5由于采用的是制作工具中的模版，因此可以直接到制作，不需要進(jìn)行專門的視覺設(shè)計。3.1.3視覺設(shè)計使用谷歌瀏覽器注冊登錄易企秀官網(wǎng)，使用互動H5免費模板制作媒體娛樂行業(yè)消消樂，并修改活動名稱、分享描述以及關(guān)注的二維碼。3.1.4制作發(fā)布效果圖注冊登錄易企秀官網(wǎng)，查找符合要求的互動H5模板，調(diào)整相關(guān)的文字內(nèi)容。3.2課堂練習(xí)——食品餐飲行業(yè)翻牌子H5制作效果圖注冊登錄易企秀官網(wǎng)，查找符合要求的互動H5模板，調(diào)整相關(guān)的文字內(nèi)容。3.3課后習(xí)題——健康醫(yī)療行業(yè)打地鼠H5制作效果圖活動抽獎H5制作活動抽獎H5通常可以在短時間內(nèi)快速傳播，吸引較多的流量，因此常用于引流推廣活動。本章從實戰(zhàn)角度對活動抽獎H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進(jìn)行系統(tǒng)講解與演練。通過對本章的學(xué)習(xí)，讀者可以對活動抽獎H5有一個基本的認(rèn)識，并快速掌握設(shè)計制作常用活動抽獎H5的方法。了解電子商務(wù)行業(yè)九宮格H5的項目策劃掌握電子商務(wù)行業(yè)九宮格H5的交互設(shè)計學(xué)習(xí)目標(biāo)項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布4.1課堂案例——電子商務(wù)行業(yè)九宮格H5制作Shopping是一款專業(yè)的綜合類購物平臺，此次想在618電商大促來臨之際，推出一個活動抽獎H5刺激用戶進(jìn)行商品購買。在策劃上，為了能讓用戶感受抽獎的真實與刺激，將結(jié)合H5制作工具的九宮格抽獎模板，分別設(shè)置一、二、三等獎，并限制用戶1天3次的抽獎機(jī)會，進(jìn)一步刺激用戶進(jìn)行抽獎。4.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。4.1.2交互設(shè)計使用谷歌瀏覽器注冊登錄凡科官網(wǎng)，使用凡科互動免費模板制作電子商務(wù)行業(yè)九宮格，修改并替換首頁中的素材、替換中獎頁面素材、調(diào)整獎項設(shè)置以及高級設(shè)置。4.1.3視覺設(shè)計4.1.4制作發(fā)布效果圖使用谷歌瀏覽器注冊登錄凡科官網(wǎng)，使用凡科互動免費模板制作金融理財行業(yè)搖一搖H5，修改并替換首頁中的素材、替換中/未中獎頁面素材、調(diào)整獎項設(shè)置以及高級設(shè)置。4.2課堂練習(xí)——金融理財行業(yè)搖一搖H5制作效果圖

使用谷歌瀏覽器注冊登錄凡科官網(wǎng)，使用凡科互動免費模板制作文化傳媒行業(yè)刮刮樂H5，修改并替換首頁中的素材、中/未中獎頁面素材、調(diào)整獎項設(shè)置以及高級設(shè)置。4.3課后習(xí)題——文化傳媒行業(yè)刮刮樂H5制作效果圖

測試問答H5制作測試問答H5因為夠能激起用戶參與分享的欲望，因此它一直都是眾多H5中最受歡迎的一類。本章從實戰(zhàn)角度對測試問答H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進(jìn)行系統(tǒng)講解與演練。通過對本章的學(xué)習(xí)，讀者可以對測試問答H5有一個基本的認(rèn)識，并快速掌握設(shè)計制作常用測試問答H5的方法。了解文化傳媒行業(yè)知識分享H5的項目策劃掌握文化傳媒行業(yè)知識分享H5的交互設(shè)計學(xué)習(xí)目標(biāo)項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布5.1課堂案例——IT互聯(lián)網(wǎng)行業(yè)節(jié)日答題H5制作知學(xué)在五一勞動節(jié)來臨之際，希望推出一款節(jié)日祝福及宣傳自身品牌的H5。在策劃上，沿用了5.2的經(jīng)驗，結(jié)合了H5制作工具的節(jié)日文化答題模板，既起到了節(jié)日祝福同時又可以很好的宣傳公司的品牌。5.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。5.1.2交互設(shè)計使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動免費模板制作IT互聯(lián)網(wǎng)行業(yè)節(jié)日答題H5，修改并替換首頁中的素材、替換中獎頁面素材、調(diào)整獎項設(shè)置以及高級設(shè)置。5.1.3視覺設(shè)計5.1.4制作發(fā)布效果圖使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動免費模板制作IT互聯(lián)網(wǎng)行業(yè)腦力測試H5，修改并替換首頁中的素材、調(diào)整獎項設(shè)置以及高級設(shè)置。5.2課堂練習(xí)——IT互聯(lián)網(wǎng)行業(yè)腦力測試H5制作效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動免費模板制作文化傳媒行業(yè)知識分享H5，修改并替換首頁中的素材、調(diào)整獎項設(shè)置以及高級設(shè)置。5.3課后習(xí)題——文化傳媒行業(yè)知識分享H5制作效果圖

滑動翻頁H5制作滑動翻頁H5是最常見的一類H5，是最被廣大用戶接受的互動方式。本章從實戰(zhàn)角度對滑動翻頁H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進(jìn)行系統(tǒng)講解與演練。通過對本章的學(xué)習(xí)，讀者可以對滑動翻頁H5有一個基本的認(rèn)識，并快速掌握設(shè)計制作常用滑動翻頁H5的方法。了解文化傳媒行業(yè)企業(yè)招聘H5的項目策劃掌握文化傳媒行業(yè)企業(yè)招聘H5的交互設(shè)計學(xué)習(xí)目標(biāo)項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布6.1課堂案例——文化傳媒行業(yè)企業(yè)招聘H5制作ArtDesign是一家成立了近20年的專業(yè)型廣告設(shè)計公司，此次想通過H5進(jìn)行企業(yè)人才招聘。在內(nèi)容上，我們的內(nèi)容分為了首頁、關(guān)于我們、工作環(huán)境、福利待遇、招聘崗位、招聘流程以及崗位需求。在視覺上，運(yùn)用圖文結(jié)合以及高級灰體現(xiàn)公司的沉穩(wěn)大氣。在制作上，摒棄復(fù)雜的表現(xiàn)效果，采用簡單翻頁讓用戶的注意力集中在招聘內(nèi)容上。6.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。6.1.2交互設(shè)計使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動微傳單制作文化傳媒行業(yè)企業(yè)招聘H5，使用Photoshop軟件制作首頁、關(guān)于我們、工作環(huán)境、福利待遇、招聘崗位、招聘流程和崗位申請等頁面的視覺效果，使用凡科微傳單動畫功能制作H5頁面動畫。6.1.3視覺設(shè)計6.1.4制作發(fā)布效果圖

使用谷歌瀏覽器登錄iH5官網(wǎng)，使用Photoshop軟件制作頁面的視覺設(shè)計，使用iH5的動效和翻頁功能制作最終效果。6.2課堂練習(xí)——汽車工業(yè)行業(yè)活動邀請H5制作效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動微傳單制作教育咨詢行業(yè)培訓(xùn)招生H5，使用Photoshop軟件制作首各個頁面的視覺設(shè)計，使用凡科微傳單的翻頁和趣味中的快閃功能制作最終效果。6.3課后習(xí)題——教育咨詢行業(yè)培訓(xùn)招生H5制作效果圖

長頁滑動H5制作長頁滑動H5的本質(zhì)是一鏡到底展示信息內(nèi)容，其免去了用戶翻頁跳轉(zhuǎn)的操作，可以更好地提高用戶瀏覽體驗。本章從實戰(zhàn)角度對長頁滑動H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進(jìn)行系統(tǒng)講解與演練。通過對本章的學(xué)習(xí)，讀者可以對長頁滑動H5有一個基本的認(rèn)識，并快速掌握設(shè)計制作常用長頁滑動H5的方法。了解食品餐飲行業(yè)產(chǎn)品介紹H5的項目策劃掌握食品餐飲行業(yè)產(chǎn)品介紹H5的交互設(shè)計學(xué)習(xí)目標(biāo)項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布7.1課堂案例——食品餐飲行業(yè)產(chǎn)品介紹H5制作TreeCake是一家致力提供新鮮美味的線上蛋糕品牌，本次想借助H5推廣店內(nèi)熱銷蛋糕，達(dá)到用戶關(guān)注品牌進(jìn)行購買的目的。在策劃上，針對內(nèi)容分為了品牌介紹以及產(chǎn)品介紹。針對視覺，以蛋糕圖片為主，采用金色和白色，凸顯蛋糕的品質(zhì)與新鮮。針對制作，主要運(yùn)用長頁的表現(xiàn)形式提高用戶瀏覽體驗。7.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。7.1.2交互設(shè)計使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作食品餐飲行業(yè)產(chǎn)品介紹H5，使用Photoshop軟件制作頁面的視覺設(shè)計。使用iH5的頁面>剪切>使用滾動條功能制作最終效果。7.1.3視覺設(shè)計7.1.4制作發(fā)布效果圖

使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作文化傳媒行業(yè)活動邀請H5，使用Photoshop軟件制作頁面的視覺設(shè)計，使用iH5的頁面>剪切>使用滾動條功能、事件功能制作最終效果。7.2課堂練習(xí)——文化傳媒行業(yè)活動邀請H5制作效果圖

使用谷歌瀏覽器登錄iH5官網(wǎng)，使用iH5制作服裝飾品行業(yè)產(chǎn)品營銷H5，使用Photoshop軟件制作頁面的視覺設(shè)計，使用iH5的頁面>剪切>使用滾動條功能制作最終效果。7.3課后習(xí)題——服裝飾品行業(yè)產(chǎn)品營銷H5制作效果圖

畫中畫H5制作畫中畫H5本質(zhì)是一鏡到底展示信息內(nèi)容，其表現(xiàn)形式較普通的翻頁效果更為有趣。本章從實戰(zhàn)角度對畫中畫H5的項目策劃、交互設(shè)計、視覺設(shè)計以及制作開發(fā)進(jìn)行系統(tǒng)講解與演練。通過對本章的學(xué)習(xí)，讀者可以對畫中畫H5有一個基本的認(rèn)識，并快速掌握設(shè)計制作常用畫中畫H5的方法。了解IT互聯(lián)網(wǎng)行業(yè)產(chǎn)品介紹H5的項目策劃掌握IT互聯(lián)網(wǎng)行業(yè)產(chǎn)品介紹H5的交互設(shè)計學(xué)習(xí)目標(biāo)項目策劃交互設(shè)計視覺設(shè)計制作發(fā)布8.1課堂案例——IT互聯(lián)網(wǎng)行業(yè)活動邀請H5制作2019互聯(lián)網(wǎng)大咖會議在召開之際，需要制作一款H5邀請函，通過網(wǎng)絡(luò)讓更多互聯(lián)網(wǎng)人士參與本會。在策劃上，針對內(nèi)容分為了首頁、會議介紹、會議嘉賓以及會議安排。針對視覺，采用藍(lán)色字報的形式彰顯科技與信息。針對制作，主要運(yùn)用畫中畫的表現(xiàn)形式體現(xiàn)趣味性。8.1.1項目策劃通過前期基本的項目策劃，對這支H5的原型進(jìn)行了梳理，并運(yùn)用Axure進(jìn)行了繪制。8.1.2交互設(shè)計使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動為傳單制作IT互聯(lián)網(wǎng)行業(yè)活動邀請H5，使用Photoshop軟件制作首頁、會議簡介、會議嘉賓、會議安排等頁面的視覺設(shè)計，使用凡科微傳單趣味功能中畫中畫功能制作H5頁面動畫。8.1.3視覺設(shè)計8.1.4制作發(fā)布效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動微傳單制作文化傳媒行業(yè)企業(yè)招聘H5，使用Photoshop軟件制作首頁、公司簡介、程序猿、設(shè)計獅和新媒體等頁面的視覺設(shè)計，使用凡科微傳單趣味功能中畫中畫功能制作H5頁面動畫。8.2課堂練習(xí)——設(shè)計服務(wù)公司招聘H5制作效果圖

使用谷歌瀏覽器登錄凡科官網(wǎng)，使用凡科互動微傳單制作食品餐飲行業(yè)產(chǎn)品營銷H5，使用Photoshop軟件制作首頁、優(yōu)惠活動、優(yōu)惠卷、和優(yōu)惠產(chǎn)品等頁面的視覺設(shè)計，使用凡科微傳單趣味功能中畫中畫功能制作H5頁面動畫。8.3課后習(xí)題——食品餐飲行業(yè)產(chǎn)品營銷H5制作效果圖

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

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