（中職）Flash CS6動(dòng)畫制作（第2版）4.3教學(xué)課件（）

（中職）FlashCS6動(dòng)畫制作（第2版）4.3教學(xué)課件（工信版）項(xiàng)目四Flash片頭動(dòng)畫設(shè)計(jì)與制作

任務(wù)3

掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)制作

任務(wù)目標(biāo)12掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)制作任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意

優(yōu)秀的引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)是從應(yīng)用分類、設(shè)計(jì)表現(xiàn)、內(nèi)容展示等多方面經(jīng)過(guò)細(xì)致考量并與整體氣質(zhì)相符合的設(shè)計(jì)構(gòu)思。任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意

1.應(yīng)用分類根據(jù)引導(dǎo)頁(yè)的目的、出發(fā)點(diǎn)不同，可以將其分為以下五種：功能介紹類、使用說(shuō)明類、推廣展示類、解決問(wèn)題類。①功能介紹類。功能介紹類引導(dǎo)頁(yè)主要是對(duì)產(chǎn)品的主要功能進(jìn)行展示，讓用戶對(duì)產(chǎn)品功能有一個(gè)大致的了解。采用的形式大多以文字配合界面、插圖的方式來(lái)展現(xiàn)。任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意圖4-3-1所示的易信引導(dǎo)頁(yè)動(dòng)畫，采用文字與水彩插圖結(jié)合的方式，文字分為主標(biāo)和副標(biāo)，主標(biāo)是對(duì)功能的概括，副標(biāo)是詳細(xì)描述或進(jìn)一步的補(bǔ)充說(shuō)明。圖4-3-1易信引導(dǎo)頁(yè)動(dòng)畫任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意②使用說(shuō)明類。這類引導(dǎo)頁(yè)是對(duì)用戶在使用過(guò)程中可能會(huì)遇到的困難、不清楚的操作、容易誤解的操作提前進(jìn)行告知。這類引導(dǎo)頁(yè)大多采用箭頭、圓圈進(jìn)行標(biāo)識(shí)，以手繪風(fēng)格為主。圖4-3-2所示的蝦米音樂引導(dǎo)頁(yè)動(dòng)畫，對(duì)于較難發(fā)現(xiàn)的播放隊(duì)列、歌詞的操作方式通過(guò)箭頭指示來(lái)說(shuō)明。圖4-3-2蝦米音樂引導(dǎo)頁(yè)動(dòng)畫任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意③推廣展示類。此類引導(dǎo)頁(yè)除了有一些產(chǎn)品功能的介紹外，更多的是想傳達(dá)產(chǎn)品的態(tài)度，要與整個(gè)產(chǎn)品的風(fēng)格、企業(yè)形象相一致。圖4-3-3所示的淘寶旅行軟件引導(dǎo)頁(yè)動(dòng)畫，通過(guò)清新、生活化場(chǎng)景的插圖營(yíng)造出這是一款樂享生活、跟著感覺走的出行應(yīng)用，在出行前就計(jì)劃好所有的行程安排，只要一個(gè)行李箱，說(shuō)走就走，與產(chǎn)品的理念相契合。圖4-3-3淘寶旅行引導(dǎo)頁(yè)動(dòng)畫任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意④解決問(wèn)題類。通過(guò)描述實(shí)際生活中會(huì)遇到的問(wèn)題，到最終的解決方案，讓用戶產(chǎn)生情感上的聯(lián)系，對(duì)產(chǎn)品產(chǎn)生好感，增加產(chǎn)品信譽(yù)度。圖4-3-4所示的QQ瀏覽器引導(dǎo)頁(yè)設(shè)計(jì)，通過(guò)形象的插圖說(shuō)明了QQ瀏覽器解決了其他瀏覽器在小說(shuō)閱讀方面所遇到的問(wèn)題（如搜索不到小說(shuō)、小說(shuō)章節(jié)更新等）。圖4-3-4QQ瀏覽器引導(dǎo)頁(yè)設(shè)計(jì)任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意2.表現(xiàn)方式①文字與界面組合。這是最常見的引導(dǎo)頁(yè)設(shè)計(jì)形式，簡(jiǎn)短的文字加上該功能的界面，主要運(yùn)用于功能介紹類與使用說(shuō)明類引導(dǎo)頁(yè)動(dòng)畫。能夠直觀地傳達(dá)產(chǎn)品的主要功能，缺點(diǎn)在與過(guò)于模式化，顯得千篇一律，如圖4-3-5所示。圖4-3-5文字與界面組合引導(dǎo)頁(yè)示例任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意②文字與插圖組合。文字與插圖的組合方式也是目前常見的形式之一。插圖多具象，以使用的場(chǎng)景、照片為主，來(lái)表現(xiàn)文字內(nèi)容，如圖4-3-6所示。圖4-3-6文字與插圖組合引導(dǎo)頁(yè)示例任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意

③動(dòng)態(tài)效果與音樂?，F(xiàn)今開始流行具有動(dòng)態(tài)效果的頁(yè)面，在單個(gè)頁(yè)面采用動(dòng)畫的形式，打破原有的常規(guī)，讓頁(yè)面律動(dòng)起來(lái)，同時(shí)結(jié)合動(dòng)效可以考慮頁(yè)面間切換的方式，如將默認(rèn)的左右滑動(dòng)改為上下滑動(dòng)或過(guò)幾秒自動(dòng)切換到下一頁(yè)。在瀏覽引導(dǎo)頁(yè)的時(shí)候，嘗試著加入一些與動(dòng)效節(jié)奏相符合的音樂，會(huì)是一種更加新穎的方式，如圖4-3-7所示。圖4-3-7動(dòng)態(tài)效果與音樂引導(dǎo)頁(yè)示例任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意④視頻展示。引導(dǎo)頁(yè)動(dòng)畫中通過(guò)視頻播放的方式來(lái)介紹產(chǎn)品或傳遞一種理念，這種方式多用于生活記錄類的應(yīng)用，如拍照、運(yùn)動(dòng)類應(yīng)用，給人傳達(dá)青春活力、積極樂觀的生活態(tài)度，如圖4-3-8所示圖4-3-8視頻展示引導(dǎo)頁(yè)示例任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意

3.內(nèi)容展示①展示內(nèi)容要簡(jiǎn)明扼要。動(dòng)畫所展示的信息內(nèi)容要精煉，突出重點(diǎn)。比如說(shuō)新功能推薦只需告訴用戶入口在哪里，而不是事無(wú)巨細(xì)的詳細(xì)列明每一步的操作，把一個(gè)好好的引導(dǎo)頁(yè)動(dòng)畫活生生做成一個(gè)幫助教程頁(yè)。如果是新的交互及操作方式，也可以只展示最核心、關(guān)鍵的操作，要留給用戶自己探索和發(fā)現(xiàn)的余地，引發(fā)用戶的興趣。圖4-3-9所示的手機(jī)應(yīng)用軟件引導(dǎo)頁(yè)動(dòng)畫界面，內(nèi)容簡(jiǎn)明扼要，功能一目了然。圖4-3-9主題背景的引導(dǎo)頁(yè)設(shè)計(jì)4.3.1引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意②展示內(nèi)容要連貫有序。動(dòng)畫中所展示的內(nèi)容要按照一定的順序有機(jī)的排列。比如先是亮點(diǎn)模塊的介紹再是應(yīng)用的整體呈現(xiàn)，或者按照一個(gè)核心功能的操作流程來(lái)展示引導(dǎo)頁(yè)動(dòng)畫內(nèi)容?？傊龅接兄饔写?，最后靜靜等待用戶點(diǎn)擊“立即體驗(yàn)”的那一刻，如圖4-3-10所示。圖4-3-10百度客戶端的引導(dǎo)頁(yè)設(shè)計(jì)任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意③每頁(yè)只展示一個(gè)主題。在單個(gè)引導(dǎo)頁(yè)中，信息不宜過(guò)多，只闡述一個(gè)目的，所有元素都圍繞這個(gè)目的進(jìn)行展開。如表現(xiàn)得東西太多，不妨拆分成幾頁(yè)，一頁(yè)上太多信息，只會(huì)讓用戶更快速的劃過(guò)引導(dǎo)頁(yè)。如果每一頁(yè)的內(nèi)容都主題鮮明，就算用戶走馬觀花的瀏覽也能留下些重要的信息記憶，如圖4-3-11所示。圖4-3-11視頻軟件客戶端的引導(dǎo)頁(yè)設(shè)計(jì)任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意④設(shè)計(jì)風(fēng)格與產(chǎn)品一致。引導(dǎo)頁(yè)的設(shè)計(jì)風(fēng)格要與產(chǎn)品的氣質(zhì)保持一致。如果是新聞資訊類應(yīng)用，那它的引導(dǎo)頁(yè)風(fēng)格應(yīng)該是穩(wěn)重、正統(tǒng)的；而娛樂類的應(yīng)用可能有更情感化的表現(xiàn)形式，例如漫畫形象的應(yīng)用或者是大幅背景照片的運(yùn)用。以來(lái)往為例，來(lái)往是一款針對(duì)個(gè)人用戶的及時(shí)通訊應(yīng)用，主打扎堆、閱后即焚、敲門等與微信不一樣有趣的功能，因此在引導(dǎo)頁(yè)的設(shè)計(jì)上通過(guò)趣味性、甚至有點(diǎn)搞怪的動(dòng)作與表情來(lái)表現(xiàn)這是一款有趣、歡樂的產(chǎn)品，如圖4-3-12所示。圖4-3-12來(lái)往軟件引導(dǎo)頁(yè)界面任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意⑤文案設(shè)計(jì)要言簡(jiǎn)意賅。根據(jù)愛爾蘭哲學(xué)家漢密爾頓觀察發(fā)現(xiàn)的7±2效應(yīng)，一個(gè)人的短時(shí)記憶至少能回憶出5個(gè)字，最多回憶9個(gè)，即7±2個(gè)。因此文案要控制在9個(gè)字以內(nèi)，避免用戶容易遺忘、或記憶偏差。如果表達(dá)起來(lái)困難，可以輔助一小段文字進(jìn)行補(bǔ)充。任務(wù)訓(xùn)練1掌握引導(dǎo)頁(yè)動(dòng)畫設(shè)計(jì)創(chuàng)意

精準(zhǔn)貼切的文字編排也十分重要，將專業(yè)術(shù)語(yǔ)轉(zhuǎn)換成用戶聽得懂的語(yǔ)言。尤其通過(guò)照片來(lái)表現(xiàn)主題的引導(dǎo)頁(yè)設(shè)計(jì)，文案與照片匹配，直接影響到情感傳達(dá)效果，如圖4-3-13所示。圖4-3-13文案設(shè)計(jì)引導(dǎo)頁(yè)示例任務(wù)訓(xùn)練2掌握片頭動(dòng)畫制作案例案例4-3-1手機(jī)軟件引導(dǎo)頁(yè)動(dòng)畫本例是為手機(jī)上百度地圖這款應(yīng)用軟件而制作的引導(dǎo)頁(yè)動(dòng)畫。先通過(guò)4頁(yè)引導(dǎo)頁(yè)動(dòng)畫展示手機(jī)應(yīng)用軟件特性，再通過(guò)按鈕來(lái)鏈接軟件的應(yīng)用界面，效果如圖4-3-14所示。圖4-3-14手機(jī)軟件引導(dǎo)頁(yè)動(dòng)畫效果任務(wù)小結(jié)好的引導(dǎo)頁(yè)動(dòng)畫不是一本冷冰冰的說(shuō)明書，而是真正從用戶的角度去理解引導(dǎo)頁(yè)動(dòng)畫對(duì)用戶需求。本節(jié)主要介紹了引導(dǎo)頁(yè)動(dòng)畫的設(shè)計(jì)構(gòu)思，并通過(guò)手機(jī)軟件應(yīng)用引導(dǎo)頁(yè)動(dòng)畫案例講解了引