（中職）Flash CS6動畫制作（第2版）4.3教學課件（）

（中職）FlashCS6動畫制作（第2版）4.3教學課件（工信版）項目四Flash片頭動畫設(shè)計與制作

任務(wù)3

掌握引導頁動畫設(shè)計制作

任務(wù)目標12掌握引導頁動畫設(shè)計創(chuàng)意掌握引導頁動畫設(shè)計制作任務(wù)訓練1掌握引導頁動畫設(shè)計創(chuàng)意

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

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

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

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

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