無線終端H5設(shè)計(jì)網(wǎng)店美工視覺設(shè)計(jì)實(shí)戰(zhàn)教程第10章目錄ContentsH5的基礎(chǔ)知識(shí)H5的制作10.210.1實(shí)戰(zhàn)演練10.310.1.1H5概述3HTML（HyperTextMarkupLanguage）意為“超文本標(biāo)記語言”，可以將其理解為一種網(wǎng)頁編輯的標(biāo)識(shí)規(guī)范，現(xiàn)在的絕大多數(shù)網(wǎng)頁都建立在HTML之上。HTML第5代HTML，HTML5在功能上實(shí)現(xiàn)了巨大突破，能夠獨(dú)立完成視頻、音頻、畫圖的操作而無須依賴第三方插件；并且具有極強(qiáng)的兼容性，能夠適應(yīng)包括PC、Mac、iPhone和Android等幾乎所有的電子設(shè)備平臺(tái)。HTML5我們?cè)诒緯兴褂玫腍5概念，并不是指HTML5這種語言本身，而是指運(yùn)用HTML5制作出的移動(dòng)網(wǎng)頁，不僅視覺效果好，更擁有之前移動(dòng)網(wǎng)頁所沒有的強(qiáng)大功能，如網(wǎng)頁版App、網(wǎng)頁小游戲、互動(dòng)頁面等。本書中的H510.1.2H5的類型4通過文字、畫面和音樂等手段，為受眾營(yíng)造某種特定的場(chǎng)景，通過場(chǎng)景來講故事，使受眾沉浸其中。場(chǎng)景型類似于調(diào)查問卷，主要是針對(duì)目標(biāo)用戶，選取具有懸念性的話題作為測(cè)試內(nèi)容，讓受眾選擇答案來進(jìn)行互動(dòng)。測(cè)驗(yàn)型就像是網(wǎng)頁版的PPT，本身不具備互動(dòng)性，但是視覺設(shè)計(jì)優(yōu)秀，憑借畫面就足以打動(dòng)受眾。展示型在H5中播放視頻，由于動(dòng)態(tài)的圖像配合音樂，對(duì)受眾產(chǎn)生了強(qiáng)烈刺激，效果遠(yuǎn)勝圖文，而且能夠與受眾展開多元的人機(jī)互動(dòng)。視頻型以技術(shù)優(yōu)勢(shì)取勝、運(yùn)用炫酷的技術(shù)來吸引受眾的H5，常見的技術(shù)型H5包括全景/VR、3D畫面、重力感應(yīng)以及多屏互動(dòng)等。技術(shù)型憑借H5網(wǎng)頁強(qiáng)大的互動(dòng)性，可以制作出各種網(wǎng)頁游戲，網(wǎng)頁游戲可以吸引受眾進(jìn)行長(zhǎng)時(shí)間、反復(fù)的互動(dòng)，也容易被二次傳播。游戲型H5類型10.1.3H5的制作工具5兔展人人秀MAKAiH5簡(jiǎn)單易上手，模板多樣，動(dòng)畫效果添加便捷，但是模板精美度一般。操作簡(jiǎn)單，互動(dòng)功能強(qiáng)大，但是價(jià)格較高，免費(fèi)版功能嚴(yán)重缺失?？畈僮骱?jiǎn)單，專注于推廣，為用戶推薦模板，但是的文字樣式、圖片樣式和特效類型都較少。強(qiáng)大的編輯能力，媲美HTML5編程效果，但是上手難度較大，學(xué)習(xí)成本較高。用HTML5語言編程是一項(xiàng)專業(yè)性極強(qiáng)的工作，絕大多數(shù)網(wǎng)店美工并沒有掌握HTML5的編程技能，因此需要借助一些現(xiàn)成的H5制作工具。制作工具10.1.4H5的制作流程6主題策劃構(gòu)思創(chuàng)意方案技術(shù)支持素材準(zhǔn)備進(jìn)行制作目錄ContentsH5的基礎(chǔ)知識(shí)H5的制作10.210.1實(shí)戰(zhàn)演練10.310.2.1使用MAKA工具制作H58MAKA工具中有很多不同類型的模板，其操作方法也比較簡(jiǎn)單，可以讓網(wǎng)店美工快速地制作出H5。本例主要是制作一個(gè)女裝上新的H5頁面，其具體操作步驟如下。選擇模板2輸入文本1510.2.1使用MAKA工具制作H593更改模板背景45查看默認(rèn)的背景效果修改文本內(nèi)容添加精油素材10.2.1使用MAKA工具制作H510刪除圖片和文本76添加設(shè)計(jì)文本10.2.1使用MAKA工具制作H511刪除第2、6、7張頁面模板上傳本地圖片9810.2.1使用MAKA工具制作H512設(shè)置動(dòng)畫效果10修改文本顏色1110.2.1使用MAKA工具制作H513為按鈕添加鏈接12設(shè)置倒計(jì)時(shí)時(shí)間1310.2.2使用iH5工具制作H514

iH5是一款非常強(qiáng)大的H5制作工具，它可以實(shí)現(xiàn)人機(jī)交互的多種效果。本例將使用iH5工具制作一個(gè)美妝店鋪的活動(dòng)H5，該H5中主要通過商品的展示來體現(xiàn)促銷活動(dòng)內(nèi)容，其具體操作步驟如下。創(chuàng)建作品新建頁面1210.2.2使用iH5工具制作H515添加素材設(shè)置動(dòng)效添加素材設(shè)置動(dòng)效34添加素材設(shè)置動(dòng)效510.2.2使用iH5工具制作H516繪制矩形5添加“文案”素材并設(shè)置動(dòng)效610.2.2使用iH5工具制作H517設(shè)置“小模塊”動(dòng)效789向右滑動(dòng)1設(shè)置“圖文展示1”命令10.2.2使用iH5工具制作H5181011打開banner的“編輯數(shù)據(jù)”對(duì)話框編輯banner圖片和文本數(shù)據(jù)打開商品的“編輯數(shù)據(jù)”對(duì)話框編輯商品圖片和文本數(shù)據(jù)10.2.2使用iH5工具制作H519繪制大矩形添加背景素材設(shè)置閃爍動(dòng)效12131410.2.2使用iH5工具制作H520設(shè)置飛入（從右）動(dòng)效輸入文本繪制小矩形16創(chuàng)建矩形動(dòng)效15171810.2.2使用iH5工具制作H521輸入、復(fù)制與修改文本設(shè)置護(hù)膚品的動(dòng)效192010.2.2使用iH5工具制作H522最終效果設(shè)置淡入動(dòng)效2122目錄ContentsH5的制作10.2實(shí)戰(zhàn)演練10.3H5的基礎(chǔ)知識(shí)10.110.310.3.1制作新品促銷H524010302在MAKA官方網(wǎng)站中找到適合新品促銷H5的模板注重感官的習(xí)慣性與舒適性，合理控制各頁面的內(nèi)容通過修改模板中的素材、文案、形狀，并添加不同的動(dòng)畫，完成本例的制作

02各頁面元素的動(dòng)畫設(shè)置設(shè)計(jì)思路知識(shí)要點(diǎn)01運(yùn)用字體大小、顏色、粗細(xì)的搭配來顯示出文字的層級(jí)10.3.1制作新品促銷H525

3.操作步驟用MAKA工具來制作新品促銷H5的具體操作步驟如下。應(yīng)用模板110.3.1制作新品促銷H526刪除其他元素替換文本圖片2310.3.1制作新品促銷H527設(shè)置“旋轉(zhuǎn)出現(xiàn)”動(dòng)畫添加花瓣素材54調(diào)整圖層順序62810.3.1制作新品促銷H578設(shè)置圖片樣式與動(dòng)畫效果修改文本字體替換優(yōu)惠券圖片添加素材并設(shè)置動(dòng)畫效果10929添加素材并設(shè)置陰影效果10.3.1制作新品促銷H511更換按鈕顏色并設(shè)置陰影效果1312更換按鈕顏色10.3.1制作新品促銷H