《H5制作》課件-4.H5的設(shè)計(jì)與制作工具

第4講H5的設(shè)計(jì)與制作流程明確設(shè)計(jì)目標(biāo)PARTONE明確設(shè)計(jì)目標(biāo)明確設(shè)計(jì)目標(biāo)是進(jìn)行H5設(shè)計(jì)的前提條件。AH5要建立在具體的目標(biāo)上設(shè)計(jì)之初A需要考慮是直接套用模板進(jìn)行制作，還是先用圖像工具進(jìn)行頁面設(shè)計(jì)，再使用H5編輯器進(jìn)行動(dòng)效制作，并將重點(diǎn)信息羅列出來，設(shè)計(jì)前內(nèi)容策劃PARTTWO內(nèi)容策劃方向視覺方向交互方向確定好設(shè)計(jì)目標(biāo)后，即可對H5內(nèi)容進(jìn)行策劃。設(shè)計(jì)人員在進(jìn)行內(nèi)容策劃時(shí)，可以先明確內(nèi)容策劃的方向，一般可從這幾方面著手。內(nèi)容方向內(nèi)容策劃方向指以介紹內(nèi)容為主的H5頁面效果。該H5頁面可以從用戶情感出發(fā)，基于大眾所熟知和想了解的內(nèi)容入手，如節(jié)日類、信息廣告類、電視影片類等H5多方面的內(nèi)容方向進(jìn)行策劃。A內(nèi)容方向內(nèi)容策劃方向指注重與用戶建立豐富的互動(dòng)體驗(yàn)的H5頁面效果，用戶操作是該H5頁面的主要賣點(diǎn)。A交互方向視覺方向指以畫面為主的H5頁面效果。這里的視覺不是單單指好看，而是把視覺重點(diǎn)放在畫面執(zhí)行上，是畫面具有豐富的動(dòng)效，更具沖擊力。內(nèi)容策劃方向促銷類品牌宣傳選定方向，繪制原型圖視覺方向需要對其中的文案、圖片、音效、交互、動(dòng)效、視頻等進(jìn)行明確。需要策劃出分鏡頭腳本。和動(dòng)畫設(shè)計(jì)人員配合輸出方案。內(nèi)容策劃方向在繪制原型圖前策劃過程中需要了解動(dòng)畫技術(shù)方面的內(nèi)容常見的原型圖繪制方式有計(jì)算機(jī)繪制和手繪兩種。策劃人員常用原型圖繪制工具在制作內(nèi)容策劃方案中，策劃人員經(jīng)常會使用：PowerPointKeynoteAxure墨刀IllustratorWord策劃人員常用原型圖繪制工具PowerPoint是Windows系統(tǒng)常用的演示軟件。策劃人員可以利用PowerPoint軟件中的工具繪制基礎(chǔ)原型圖、標(biāo)注和演示。關(guān)于交互的文字說明，對于制作H5觸發(fā)跳轉(zhuǎn)動(dòng)畫來說不是很方便。策劃人員常用原型圖繪制工具AKeynote是Mac系統(tǒng)中的一款演示軟件，與PowerPoint功能類似。BAxure是一款專業(yè)原型繪制工具，策劃人員利用它可以進(jìn)行原型圖繪制，建立\H5交互，還可以進(jìn)行共享演示。不便于其他成員批注與修改，對于新手來說，需要一些時(shí)間學(xué)習(xí)其操作方法。是一款在線原型設(shè)計(jì)與協(xié)同工具，便于策劃人員共享演示，對于新手來說，需要一些時(shí)間學(xué)習(xí)其操作方法。墨刀可以繪制原型圖，但無法制作鏈接跳轉(zhuǎn)，使用其主要是為了展示文字。Word是Adobe公司進(jìn)行矢量圖繪制的軟件，可以用來繪制原型圖。Illustrator策劃人員常用原型圖繪制工具原型圖應(yīng)當(dāng)具備的要素原型圖應(yīng)當(dāng)具備的要素：A清晰的視覺層次B視覺流結(jié)構(gòu)C可實(shí)施性清晰的視覺層次:A由線、框、字等元素組合而成。H5原型圖設(shè)計(jì)人員在繪制H5原型圖時(shí)，需要做到層次清晰，強(qiáng)化和突出重要元素，弱化次要元素，但是，不要過度簡化次要內(nèi)容，以便增加后期制作的難度。原型圖應(yīng)當(dāng)具備的要素原型圖應(yīng)當(dāng)具備的要素A指視覺焦點(diǎn)形成的軌跡，而視覺流結(jié)構(gòu)則是指視覺流動(dòng)的方向。視覺流結(jié)構(gòu)在進(jìn)行H5原型圖設(shè)計(jì)時(shí)，設(shè)計(jì)人員需要考慮整個(gè)頁面的邏輯性，利用視覺流結(jié)構(gòu)可以幫助用戶快速理解頁面的邏輯路徑，減少用戶的認(rèn)知成本。原型圖應(yīng)當(dāng)具備的要素可實(shí)施性：H5原型圖需要通過技術(shù)實(shí)現(xiàn)頁面展現(xiàn)效果，因此H5原型圖要具備一定的可實(shí)施性，避免預(yù)想的效果不能通過技術(shù)實(shí)現(xiàn)。頁面設(shè)計(jì)PARTTHREE包括圖片、視頻和音效的搜集及信息的搜集等。搜集素材搜集素材在進(jìn)行H5設(shè)計(jì)時(shí)，設(shè)計(jì)人員常會將圖片、視頻和音效素材運(yùn)用到頁面的模塊、交互等內(nèi)容中。圖片、視頻和音效的搜集圖片、視頻和音效素材獲取方式實(shí)物拍攝錄制網(wǎng)上搜集A網(wǎng)上搜集指在互聯(lián)網(wǎng)上通過素材網(wǎng)站，搜索需要的圖片、視頻和音效進(jìn)行下載。圖片、視頻和音效的搜集B實(shí)物拍攝與錄制是搜集素材的常用方法，企業(yè)可根據(jù)自身情況對企業(yè)場景、文化活動(dòng)、產(chǎn)品等進(jìn)行拍攝與錄制，為設(shè)計(jì)人員后期的制作提供主要素材。主要是指企業(yè)信息、活動(dòng)內(nèi)容、游戲文字等。A包括企業(yè)的組織結(jié)構(gòu)、企業(yè)文化、發(fā)展方向等。企業(yè)信息活動(dòng)內(nèi)容則是根據(jù)某個(gè)活動(dòng)進(jìn)行信息的搜集，如需要為中秋節(jié)制作H5，可搜集有關(guān)中秋節(jié)的習(xí)俗、起源、詩句和典故等，便于設(shè)計(jì)時(shí)使用。信息的搜集游戲文字是針對游戲場景輸入的文字內(nèi)容，該內(nèi)容既可根據(jù)游戲場景進(jìn)行編輯，也可根據(jù)制作游戲時(shí)的初衷進(jìn)行內(nèi)容的搜集與撰寫。信息的搜集廣泛性準(zhǔn)確性及時(shí)性系統(tǒng)性01模板設(shè)計(jì)02圖像工具設(shè)計(jì)設(shè)計(jì)H5頁面在編輯器中選擇合適的模板，并將前面搜集到的素材添加到編輯器中，替換模板內(nèi)容。內(nèi)容使用模板設(shè)計(jì)H5頁面特點(diǎn)內(nèi)容展示完整，且美觀，但是存在制作不合理、不符合企業(yè)需求等特點(diǎn)。選擇模版使用模板設(shè)計(jì)H5頁面進(jìn)入編輯區(qū)選擇替換圖片上傳雙擊修改圖片、編輯文字在設(shè)計(jì)時(shí)要注意頁面的統(tǒng)一性和內(nèi)容的