After Effects UI交互動畫設計-全套課件

1.1.1什么是UI設計

1.1移動UI設計概述隨著智能手機和平板電腦等移動設備的普及，移動設備成為與用戶交互最直接的體現(xiàn)。移動設備已經(jīng)成為人們?nèi)粘Ｉ钪胁豢扇鄙俚囊徊糠?，各種類型的移動App軟件層出不窮，極大的豐富了移動設備的應用。

UI即UserInterface（用戶界面）的簡稱，UI設計則是指對軟件的人機交互、操作邏輯、界面美觀3個方面的整體設計。好的UI設計不僅可以讓軟件變得有個性、有品味，還可以使用戶的操作變得更加舒服、簡單、自由，充分體現(xiàn)產(chǎn)品的定位和特點。UI設計包含范疇比較廣泛，包括軟件UI設計、網(wǎng)站UI設計、游戲UI設計、移動設備UI設計等。1.1.2

UI設計的相關(guān)術(shù)語了解用戶體驗設計領(lǐng)域的相關(guān)專業(yè)術(shù)語，如GUI、UI、ID和UE等，可以幫助我們進一步加深對該領(lǐng)域的認識。第1章UI交互動畫設計基礎.ppt第2章AfterEffectsCC軟件基礎.ppt第3章UI元素交互動畫設計.ppt第4章移動UI轉(zhuǎn)場交互動畫設計.ppt第5章移動UI界面交互動畫設計.ppt進入信息時代，多媒體的運用使得交互設計顯得更加多元化，多學科各角度的剖析讓交互設計理論更加豐富，現(xiàn)在基于交互設計的互聯(lián)網(wǎng)產(chǎn)品越來越多地投入到市場，而很多新的互聯(lián)網(wǎng)產(chǎn)品也大量吸收了交互設計的理論，使產(chǎn)品能夠給用戶帶來更好的用戶體驗。

1.2了解交互設計1.1.3移動UI設計的特點移動設備用戶在眾多的應用軟件使用過程中，最終會選擇界面視覺效果良好，并且具有良好用戶體驗的應用軟件。那么怎樣的移動應用UI設計才能夠給用戶帶來好的視覺效果和良好的用戶體驗呢？

1．第一眼體驗

2．便捷的輸入方式

3．呈現(xiàn)用戶所需

4．適當?shù)臋M向呈現(xiàn)方式

5．制作個性應用

6．不忽視任何細節(jié)1.2.1什么是交互設計交互設計，又稱為互動設計（InteractionDesign），是指設計人與產(chǎn)品或服務互動的一種機制。交互設計在于定義產(chǎn)品（軟件、移動設備、人造環(huán)境、服務、可穿帶設備以及系統(tǒng)的組織結(jié)構(gòu)等）在特定場景下反應方式相關(guān)的界面，通過對界面和行為進行交互設計，從而可以讓使用者使用人造物來完成目標，這就是交互設計的目的。1.2.2交互設計需要考慮的內(nèi)容用戶體驗設計人員在進行交互設計時考慮的事情很多，絕對不是隨便弄幾個控件擺在那里，通常要考慮很多內(nèi)容。1．確定需要這個功能2．選擇最好的表現(xiàn)形式3．設定功能的大致輪廓4．選擇適當?shù)慕换シ绞?.2.3交互設計需要遵循的習慣設計師在進行交互設計時，可以充分發(fā)揮個人的想象力，使頁面在方便操作的前提下更加豐富美觀。但是無論怎么設計，都要遵循用戶的一些習慣。例如地域文化、操作習慣等，將自己化身為用戶，找到用戶的習慣是非常重要的。1．遵循用戶的文化背景2．用戶群的人體機能3．堅持以用戶為中心4．遵循用戶的瀏覽習慣1.2.4交互設計的基本步驟通常來說，交互設計都會遵循類似如下的步驟進行設計，為特定的設計問題提供某個解決方案。交互設計的一般步驟包括以下7個。（1）用戶調(diào)研（2）概念設計（3）創(chuàng)建用戶模型（4）創(chuàng)建界面流程（5）開發(fā)原型（6）實現(xiàn)（7）系統(tǒng)測試隨著數(shù)字技術(shù)的發(fā)展以及市場競爭的日趨激烈，很多交互設計師開始將目光轉(zhuǎn)向如何為用戶創(chuàng)造更好的交互體驗，從而吸引用戶參與到網(wǎng)絡交互中來。于是，用戶體驗（UserExperience）逐漸成為交互設計的首要關(guān)注點和重要的評價標準。

1.3交互設計與用戶體驗1.3.1什么是用戶體驗用戶體驗是用戶在使用產(chǎn)品或服務的過程中建立起來的一種純主觀的心理感受。從用戶的角度來說，用戶體驗是產(chǎn)品在現(xiàn)實世界的表現(xiàn)和使用方式，滲透到用戶與產(chǎn)品交互的各個方面，包括用戶對品牌特征、信息可用性、功能性、內(nèi)容性等方面的體驗。用戶體驗是主觀的、分層次的和多領(lǐng)域的，我們可以將其分為以下6種基礎體驗。1.3.2

6種基礎體驗1.3.3交互設計的重要性用戶體驗是交互設計的首要原則和檢驗標準。從了解用戶的需求入手，到對各種可能的用戶體驗的分析，再到最終的用戶體驗測試，交互設計應該將對用戶體驗的關(guān)注貫穿于設計的全過程。即便是一個小小的設計決策，設計師也應該從用戶體驗的角度去思考。1．感官體驗2．交互體驗3．情感體驗4．信任體驗5．價值體驗6．文化體驗最近幾年UI設計領(lǐng)域最大的變化便是越來越強調(diào)用戶體驗設計，而在Web或者移動App中使用動態(tài)交互效果也就成為了一大趨勢。

1.4動態(tài)交互設計基礎動態(tài)交互效果作為一種提高交互操作可用性的方法，越來越受到重視，國內(nèi)外各大企業(yè)都在自己的產(chǎn)品中默默的加入了交互動畫效果。1.4.1了解動態(tài)交互效果優(yōu)秀的動態(tài)交互效果應該對用戶的點擊或手勢給予恰當?shù)姆答?，使用戶能夠非常方便地按照自己的意愿去掌控應用的行為，從而增強應用的使用體驗。1.4.2什么是優(yōu)秀的動態(tài)交互效果我們平時在App中看到的動態(tài)效果其實都是由一些最基礎的動態(tài)效果組合而成的，這些基本動態(tài)效果包括：移動、旋轉(zhuǎn)和縮放。在交互動畫設計軟件中，通常我們只需要設置對象的起點和終點，并在軟件中設置想要實現(xiàn)的動態(tài)效果，設計軟件便會根據(jù)你的這些設置去渲染出整個動畫效果。1.4.3基礎動態(tài)效果類型優(yōu)秀的動態(tài)效果應該反映真實的物理現(xiàn)象，如果你想表現(xiàn)的對象是一個沉甸甸的物體，那么他們的起始動畫響應的變化會比較慢。反之，物體如果是輕巧的，那么其起始動畫響應的變化會比較快。1.4.4了解緩動屬性變換是非常常見的一種動態(tài)交互效果，例如可以通過改變對象的透明度來實現(xiàn)對象淡入/淡出的動畫效果等。同時我們還可以改變對象的大小、顏色、位置等幾乎所有屬性來體現(xiàn)動畫效果。1.4.5屬性變換在大多數(shù)場景中，我們需要同時使用2種以上的動態(tài)效果，將它們有效地組合在一起，以達到更好的效果。另外我們?nèi)匀恍枰寗討B(tài)交互效果遵循普遍的物理規(guī)律，這樣才能使它們更容易被用戶接受。1.4.6組合的動態(tài)交互效果1.5.1動態(tài)效果的表現(xiàn)優(yōu)勢

1.5UI中的動態(tài)交互效果交互是一個很明顯的動態(tài)過程，人與人之間的交互就很容易明白，你問我答，你來我往，本身就是交互。交互的雙方彼此都對對方產(chǎn)生影響，進而影響到對方下一步的反應。隨著移動互聯(lián)網(wǎng)技術(shù)的發(fā)展，智能移動設備性能的提升，動態(tài)交互效果也越來越多的被應用于應際的項目中。隨著技術(shù)的不斷發(fā)展，動態(tài)交互效果越來越多的被應用于實際的項目中。手機、網(wǎng)頁等等媒介都在大范圍應用，為什么動態(tài)交互效果越來越吃香？它有哪些優(yōu)勢呢？1．展示產(chǎn)品功能2．更有利于品牌建設3．有利于展示交互原型4．增加產(chǎn)品的親和力和趣味性1.5.2動態(tài)交互效果在UI設計中的作用我們?yōu)槭裁匆褂脛討B(tài)的交互效果呢？除了能哆給用戶帶來酷炫的視覺效果外，動態(tài)交互效果在用戶體驗中其實發(fā)揮著很重要的作用。1．吸引用戶注意力2．為用戶提供操作反饋3．加強指向性4．傳遞信息深度1.5.3如何實現(xiàn)簡單的動態(tài)交互效果優(yōu)秀的動態(tài)交互效果設計在提升產(chǎn)品體驗、用戶粘性方面的積極作用有目共睹，已經(jīng)成為當下Web和APP產(chǎn)品交互設計和界面設計必不可少的元素。那么，我們可以通過哪些軟件來實現(xiàn)簡單的動態(tài)交互效果呢？

1．AdobeAfterEffects

2．AdobePhotoshop

3．AdobeFlash

1.6動態(tài)交互效果在用戶體驗中的應用當用戶打開一個界面，注意力首先會被動態(tài)的物體吸引，然后才會把注意力轉(zhuǎn)向顏色對比強的部分，最后才是形狀。這一過程是人在進化過程中形成的本能反應，基本適用所有用戶。同時一個非常重要且容易被忽略的原則：用戶的注意力是有限的，而且越來越少。并且如果界面中的動態(tài)效果過多，也會使用戶感覺非常雜亂。1.6.1為什么要添加動態(tài)效果？我們在設計動態(tài)效果之前，首先需要考慮為什么要添加動態(tài)效果？我們可以通過以下幾個方面來衡量一個動態(tài)效果是否應該出現(xiàn)。

1．動態(tài)效果是否會影響到產(chǎn)品的性能？

2．所添加的動態(tài)效果是否能夠提高產(chǎn)品的可用性？

3．所添加的動態(tài)效果是否能夠使產(chǎn)品表現(xiàn)出獨特的氣質(zhì)？1.6.2哪些地方適合添加動態(tài)效果？在明確了為什么要添加動態(tài)效果之后，我們還需要明確通常應該在移動應用的哪些地方使用動態(tài)的表現(xiàn)效果。1．加載2．刷新3．滾屏4．轉(zhuǎn)場5．營造氛圍1.6.2如何表現(xiàn)動態(tài)效果？前面已經(jīng)向大家介紹了在哪些地方適合添加動態(tài)效果，那么應該如何表現(xiàn)動態(tài)效果呢？除了前面所介紹的基礎動畫表現(xiàn)方式外，主要有以下幾種方式。

1．基于真實形態(tài)的模擬

2．人物動作夸張化

3．為元素賦予彈性

4．蒙太奇在本章中向讀者介紹了有關(guān)UI設計以及動態(tài)交互效果相關(guān)的基礎知識，使讀者對交互動畫設計有更加深入的認識和理解，從而為后面學習如何制作各種不同類型的交互動畫效果打下良好的基礎。

1.7本章小結(jié)2.1.1

AfterEffects簡介

2.1了解AfterEffectsAfterEffects可以幫助用戶高效、精確地創(chuàng)建精彩的動態(tài)圖形和視覺效果。AfterEffects在各個方面都具有優(yōu)秀的性能，不僅能夠廣泛支持各種動畫文件格式，還具有優(yōu)秀的跨平臺能力。AfterEffects作為一款優(yōu)秀的視頻特效處理軟件，經(jīng)過不斷地發(fā)展，在眾多行業(yè)中已經(jīng)得到了廣泛的使用。

AfterEffects簡稱AE，是Adobe公司開發(fā)的一個視頻剪輯及后期處理軟件，目前的最新版本是AfterEffectsCC2017。AfterEffects是制作動態(tài)影像設計不可或缺的輔助工具，是視頻后期合成處理的專業(yè)非線性編輯軟件。AfterEffects應用范圍廣泛，涵蓋視頻短片、電影、廣告、多媒體以及網(wǎng)頁等。2.1.2

AfterEffects的應用領(lǐng)域每天我們都通過不同的媒體觀看了解多彩的新聞時事、生活資訊、娛樂節(jié)目，這已經(jīng)成為我們生活不可缺少的一部分。正因為有了這些載體，影視后期處理的發(fā)展也越來越快，影視后期處理軟件的應用領(lǐng)域也越來越廣泛。2.2.1認識AfterEffects工作界面

2.2

AfterEffects工作界面在使用AfterEffects進行交互動畫設計之前，不僅要了解交互設計的理念，還要掌握其制作軟件的使用方法，AfterEffectsCC就是現(xiàn)代交互動畫設計的主流軟件之一，本節(jié)將帶領(lǐng)讀者全面認識AfterEffects工作界面。

AfterEffects的工作界面越來越人性化，將界面中的各個窗口和面板集合在一起，不是單獨的浮動狀態(tài)，這樣在操作過程免去了拖來拖去的麻煩。啟動AfterEffectsCC，可以看到全新的AfterEffectsCC工作界面。菜單欄工具欄“項目”面板“時間軸”面板“合成”窗口其他浮動面板2.2.2切換工作界面

AfterEffects中有多種工作界面，其中包括標準、所有面板、效果、浮動面板、簡約、動畫、文本、繪畫和運動跟蹤等工作界面。不同的界面適合不同的工作需求，使用起來更加方便快捷。2.2.3工具欄執(zhí)行“窗口>工具”命令，或者按快捷鍵Ctrl+1，可以在工作界面中顯示或隱藏工具欄。工具欄中包含了常用的編輯工具，使用這些工具可以在“合成”窗口中對素材進行編輯操作，如移動、縮放、旋轉(zhuǎn)、繪制圖形和輸入文字等。2.2.4了解AfterEffects中的工具面板認識了AfterEffects工具欄中的相關(guān)工具后，我們將向讀者介紹AfterEffects工作界面中的相關(guān)面板，其中“項目”面板、“合成”窗口和“時間軸”面板是我們在交互動畫設計制作過程中使用頻率最高的幾個面板。2.3.1創(chuàng)建項目文件

2.3

AfterEffects的基本操作如果需要使用AfterEffects軟件來制作交互動畫，那么首先我們必須在AfterEffects中創(chuàng)建一個新的項目，這也是AfterEffects的最基本操作之一，只有創(chuàng)建了項目，才能夠在項目中進行其他的編輯工作。在本節(jié)中將向讀者介紹AfterEffects的基本操作。在創(chuàng)建新項目文件的時候，AfterEffects軟件與其他軟件有一個明顯的區(qū)別，就是在使用AfterEffects創(chuàng)建新項目文件后，并不可以在項目中直接進行動畫的編輯操作，還需要在該項目文件中創(chuàng)建合成，才能夠進行動畫的制作與編輯操作。2.3.2保存和關(guān)閉文件用戶在對項目進行操作的過程中，需要將項目文件隨時進行保存，防止出現(xiàn)程序出錯或發(fā)生其他意外情況而帶來不必要的麻煩。如果是新創(chuàng)建的項目文件，執(zhí)行“文件>保存”命令，或按快捷鍵Ctrl+S，在彈出的“另存為”對話框中進行設置。當用戶想要關(guān)閉當前項目文件時，可以執(zhí)行“文件>關(guān)閉”命令或執(zhí)行“文件>關(guān)閉項目”命令。在AfterEffects中進行動畫設計制作過程中，通常需要使用外部的素材文件，這時就需要將素材導入到“項目”面板中，在AfterEffects中支持導入多種不同格式的素材文件。2.3.3導入素材2.3.4素材的管理操作完成導入素材的操作后，這些素材只是出現(xiàn)在“項目”面板中，如果想要進一步的對項目進行編輯，就需要對這些素材進行一些基本的操作。練習：通過導入PSD文件創(chuàng)建合成源文件：光盤\源文件\第2章\2-3-3.aep視頻：光盤\視頻\第2章\2-3-3.mp41．添加素材2．使用文件夾歸類素材3．刪除素材4．替換素材5．查看素材2.3.5

AfterEffects中的基本工作流程在學習如何在AfterEffects中制作動畫之前，本節(jié)將向讀者介紹在AfterEffects中制作動畫的一般工作流程，旨在建立一個學習的整體概念。1．新建合成2．導入素材3．添加素材4．添加文字5．渲染輸出2.4.1圖層的類型

2.4認識與操作AfterEffects圖層在AfterEffects中的圖層類似于Photoshop中的圖層，在制作交互動畫的時候所有操作都必須在圖層的基礎上來完成，所不同的是AfterEffects中的圖層包括多種類型，通過利用不同的圖層來達到所需的效果。在AfterEffects中圖層共有10種，分別為素材層、文字層、純色層、燈光層、攝像機層、空對象圖層、形狀圖層、調(diào)整圖層、AdobePhotoshop文件和MAXONCINEMA4D文件。

練習：實現(xiàn)圖片的過渡切換動畫效果源文件：光盤\源文件\第2章\2-4-1.aep視頻：光盤\視頻\第2章\2-4-1.mp42.4.2圖層的基本屬性設置在圖層左側(cè)的小三角按鈕上單擊，可以展開該圖層的相關(guān)屬性，素材圖層默認包含“變換”屬性，單擊“變換”選項左側(cè)的三角按鈕，可以看到包含了5個變換屬性，分別是“錨點”、“位置”、“縮放”、“旋轉(zhuǎn)”和“不透明度”。練習：制作移動界面背景輪換動畫效果源文件：光盤\源文件\第2章\2-4-2.aep視頻：光盤\視頻\第2章\2-4-2.mp42.4.3圖層的混合模式在AfterEffects中進行合成的時候，圖層之間可以通過混合模式來實現(xiàn)一些特殊的融合效果。當某一層使用混合模式的時候，會根據(jù)所使用的混合模式與下層圖像進行相應的融合而產(chǎn)生特殊的合成效果。2.5.1“音頻/視頻”選項

2.5認識“時間軸”面板AfterEffects中的“時間軸”面板中包含圖層，前面已經(jīng)對圖層進行了簡單的介紹，但是圖層只是“時間軸”面板中的一小部分?！皶r間軸”面板是在AfterEffects中進行動畫制作的主要操作窗口，在“時間軸”面板中可以通過對各種控制選項進行設置從而制作出不同的動畫效果。通過“時間軸”面板中的“音頻/視頻”選項，可以對合成中的每個圖層進行一些基礎的控制。2.5.2“圖層”選項在“時間軸”面板中的“圖層”選項設置區(qū)中包含“標簽”、“編號”和“圖層名稱”3個設置選項?！耙纛l/視頻”選項“圖層”選項“圖層開關(guān)”選項“轉(zhuǎn)換控制”選項“父子鏈接”選項“時間控制”選項2.5.3“圖層開關(guān)”選項單擊“時間軸”面板左下角的“展開或折疊‘圖層開關(guān)’窗格”按鈕

，可以在“時間軸”面板中的每個圖層名稱右側(cè)顯示相應的“圖層開關(guān)”控制選項。2.5.4“轉(zhuǎn)換控制”選項單擊“時間軸”面板左下角的“展開或折疊‘轉(zhuǎn)換控制’窗格”按鈕

，可以在“時間軸”面板中顯示出每個圖層的“轉(zhuǎn)換控制”選項。2.5.5“父子鏈接”選項父子鏈接是讓圖層與圖層之間建立從屬關(guān)系的一種功能，當對父對象進行操作的時候子對象也會執(zhí)行相應的操作，但子對象執(zhí)行操作的時候父對象不會發(fā)生變化。2.5.6“時間控制”選項單擊“時間軸”面板左下角的“展開或折疊‘入點’/‘出點’/‘持續(xù)時間’/‘伸縮’窗格”按鈕

，可以在“時間軸”面板中顯示出每個圖層的“時間控制”選項。2.6.1什么是關(guān)鍵幀

2.6關(guān)鍵幀與圖表編輯器使用AfterEffects制作交互動畫的過程中，首先需要制作能夠表現(xiàn)出主要意圖的關(guān)鍵動作，這些關(guān)鍵動作所在的幀就叫做動畫關(guān)鍵幀，理解和正確操作關(guān)鍵幀是使用AfterEffects制作交互動畫的關(guān)鍵。關(guān)鍵幀動畫是場景中有運動變化和屬性變化的實體動畫制作方法，其原理是記錄序列中較為關(guān)鍵的動畫幀的物理形態(tài)，兩個關(guān)鍵幀之間的其他幀可以用各種插值計算方法得到，從而達到比較流暢的效果。2.6.2關(guān)鍵幀的基本操作在使用AfterEffects制作動畫的過程中，通常需要對關(guān)鍵幀進行一系列的編輯操作，本小節(jié)將詳細介紹關(guān)鍵幀的創(chuàng)建、選擇、移動、復制和刪除操作的方法和技巧。1．創(chuàng)建關(guān)鍵幀2．選擇關(guān)鍵幀3．移動關(guān)鍵幀4．復制關(guān)鍵幀5．刪除關(guān)鍵幀練習：制作三角形交錯循環(huán)動畫源文件：光盤\源文件\第2章\2-6-2.aep視頻：光盤\視頻\第2章\2-6-2.mp42.6.3什么是關(guān)鍵幀“圖表編輯器”是AfterEffects在整合了以往版本的速率圖表的基礎上，提供的更強大、更豐富的動畫控制功能模塊，使用該功能，可以更方便地查看和操作屬性值、關(guān)鍵幀、關(guān)鍵幀插值和速率等。練習：制作小球彈跳變換動畫源文件：光盤\源文件\第2章\2-6-3.aep視頻：光盤\視頻\第2章\2-6-3.mp42.7.1蒙版原理

2.7圖層蒙版與形狀路徑AfterEffects中的蒙版是一個非常實用的功能，蒙版就是為圖形創(chuàng)建一個封閉形狀的選區(qū)，主要用來制作背景的鏤空透明和圖像間的平滑過渡等，蒙版中有多種形狀，在AfterEffects中提供了多種用來創(chuàng)建蒙版的各種遮罩工具。蒙版就是通過蒙版層中的圖形或輪廓對象，透出下面圖層中的內(nèi)容。通俗一點說，蒙版就像是上面挖了一個洞的一張紙，而蒙版圖像就是透過蒙版層上面的洞所觀察到的事物。就像一個人拿著一個望遠鏡向遠處眺望，在這里，望遠鏡就可以看成是蒙版層，而看到的事物就是蒙版層下方的圖像。2.7.2創(chuàng)建蒙版創(chuàng)建的蒙版可以有很多種形狀，在AfterEffects的工具欄中提供了多處矢量繪圖工具都可以用來創(chuàng)建蒙版。練習：創(chuàng)建基礎的矩形蒙版源文件：光盤\源文件\第2章\2-7-2.aep視頻：光盤\視頻\第2章\2-7-2.mp42.7.3修改與設置蒙版在創(chuàng)建蒙版時，有時候也許不能一步到位，或者對創(chuàng)建出的蒙版形狀不滿意，這時就需要對已經(jīng)創(chuàng)建好的蒙版形狀進行修改操作，以得到更精確適合的蒙版輪廓形狀。1．選擇節(jié)點2．移動節(jié)點3．使用“鋼筆工具”修改4．鎖定蒙版5．變換蒙版5．設置蒙版屬性練習：制作指紋掃描動畫效果源文件：光盤\源文件\第2章\2-7-3.aep視頻：光盤\視頻\第2章\2-7-3.mp42.8.1渲染工作區(qū)

2.8渲染輸出在交互動畫的制作過程中，渲染是制作完成的最后一個步驟，也是非常關(guān)鍵的一步。在AfterEffects中，可以將合成項目渲染輸出成視頻文件或者序列圖片等，由于渲染的格式影響著影片最終呈現(xiàn)出來的效果，因此即使前面制作的再精妙，不成功的渲染也會直接導致操作的失敗。如果需要將交互動畫輸出為GIF格式的動畫圖片，則還需要與Photoshop軟件相結(jié)合。當設計師完成一個項目文件的制作時，最終都需要將其渲染輸出，有時候只需要將影片中的一部分渲染輸出，而不是整個工作區(qū)的影片，此時就需要調(diào)整渲染工作區(qū)，從而將部分動畫渲染輸出。工作區(qū)域開頭工作區(qū)域結(jié)尾2.8.2渲染設置執(zhí)行“合成>添加到渲染隊列”命令，或者按快捷鍵Ctrl+M，即可打開“渲染隊列”面板。2.8.3渲染輸出在“渲染隊列”面板中完成渲染隊列中合成下方相關(guān)渲染選項的設置后，單擊“渲染隊列”面板右側(cè)的“渲染”按鈕，即可按照設置對渲染隊列中合成進行渲染輸出，并顯示渲染進度。練習：將動畫輸出為mov格式視頻文件源文件：光盤\源文件\第2章\2-8-3.mov視頻：光盤\視頻\第2章\2-8-3.mp42.8.4配合Photoshop輸出GIF文件可以先在AfterEffects中輸出mov格式的視頻文件，再將所輸出的mov格式視頻導入到Photoshop中，利用Photoshop來輸出GIF格式動畫文件。練習：使用Photoshop輸出GIF動畫源文件：光盤\源文件\第2章\2-8-4.gif視頻：光盤\視頻\第2章\2-8-4.mp42.8.5將動畫嵌入到手機模板在網(wǎng)絡中我們常常看到將動畫嵌入到手機模板的不規(guī)則動畫效果，這樣的效果是如何實現(xiàn)的呢？其實這樣的效果在AfterEffects和Photoshop中都可以實現(xiàn)，如果是在AfterEffects中，則可以通過為合成添加“邊角固定”效果，從而對該合成進行調(diào)整，得到需要的效果；如果是在Photoshop中，則可以將動畫先輸出為GIF動畫文件，再通過Photoshop將該GIF動畫創(chuàng)建為智能對象，將該智能對象嵌入到手機模板中就可以了。本章主要帶領(lǐng)讀者全面的認識了AfterEffects軟件，詳細的介紹了該軟件的工作界面和各部分主要功能的基本操作方法，這也是我們使用AfterEffects軟件制作交互動畫的基礎，在日后的交互動畫制作過程中對軟件的操作更加熟練，設計出更加完美的交互動畫。

2.9本章小結(jié)練習：將動畫效果嵌入到手機模板中源文件：光盤\源文件\第2章\2-8-5.gif視頻：光盤\視頻\第2章\2-8-5.mp43.1.1什么是動態(tài)Logo

3.1動態(tài)Logo設計隨著動態(tài)效果在UI界面中的應用越來越廣泛，許多產(chǎn)品Logo也開始使用動態(tài)的方式進行表現(xiàn)，讓傳統(tǒng)的靜態(tài)Logo動起來，轉(zhuǎn)化成為一種全新的、新穎的設計元素，能夠以新穎的方式傳遞品牌形象，給用戶留下深刻的印象。當使用動態(tài)效果來表現(xiàn)Logo時，程度不同，所呈現(xiàn)出的樣子自然也不盡相同，它可以是短而微妙的變化，也可以是一段完整的短視頻展示。一個企業(yè)和一個創(chuàng)意團隊會根據(jù)業(yè)務目標和他們想要為用戶展示的內(nèi)容類型，來選擇在Logo上附加哪種動效，以及展示多長時間。3.1.2哪些地方適合應用動態(tài)Logo當我們使用動畫方式來表現(xiàn)Logo時，它所使用的范圍就不僅僅局限于網(wǎng)絡與印刷品中，可應用的范圍變得更加廣泛，出于不同的目標，它在不同地方的功能也不盡相同。1．社交網(wǎng)絡2．企業(yè)網(wǎng)站3．演示和發(fā)布4．促銷視頻3.1.3動態(tài)Logo的表現(xiàn)優(yōu)勢動態(tài)Logo是一種更為現(xiàn)代、更為動態(tài)的品牌呈現(xiàn)方式，它和傳統(tǒng)靜態(tài)Logo一樣可以勾勒企業(yè)和公司的形象，吸引用戶和客戶的注意力。相比之下，動態(tài)Logo對于設計師的原創(chuàng)性要求更高，而這無疑是讓品牌在當前競爭中脫穎而出的好辦法。動態(tài)Logo的優(yōu)勢還表現(xiàn)在以下幾個方面。1．原創(chuàng)的形象2．更高的品牌識別度3．為用戶留下深刻印象4．呈現(xiàn)故事2．體現(xiàn)企業(yè)的專業(yè)性3.1.4設計動態(tài)Logo需要注意的問題動態(tài)Logo常常被用來宣傳，它有助于給用戶留下更為深刻的印象，提升品牌知名度，改善品牌故事的呈現(xiàn)，創(chuàng)造更為有效的企業(yè)形象。練習：制作動感模糊Logo效果源文件：光盤\源文件\第3章\3-1-4.aep視頻：光盤\視頻\第3章\3-1-4.mp43.2.1什么是圖標

3.2動態(tài)圖標設計圖標設計反應了人們對于事物的普遍理解，同時也展示了社會、人文等多種內(nèi)容。精美的圖標是一個好的移動界面的設計基礎，無論是何種行業(yè)，用戶總會喜歡美觀的產(chǎn)品，美觀的產(chǎn)品總會為用戶留下良好的第一印象。而出色的動態(tài)圖標設計，能夠更加出色的詮釋該圖標的功能。隨著科技的發(fā)展，社會的進步，人們對美、時尚、趣味和質(zhì)感的不斷追求，圖標設計呈現(xiàn)出百花齊放的局面，越來越多精致、新穎、富有創(chuàng)造力和人性化的圖標涌入瀏覽者的視野。3.2.2圖標設計的作用在移動端界面設計中，圖標設計占有很大的比例，想要設計出良好的圖標，首先需要了解圖標設計的應用價值。1．明確傳達信息2．功能具象化3．娛樂性4．統(tǒng)一形象5．美觀大方3.2.3動態(tài)圖標的表現(xiàn)方法現(xiàn)在越來越多的手機應用和Web應用都開始注重圖標的交互動態(tài)效果設計，例如手機在充電過程中電池圖標的動畫效果，以及音樂播放軟件中播放模式的改變等。恰到好處的交互動態(tài)效果可以給用戶帶來愉悅的交互體驗。1．屬性轉(zhuǎn)換法2．路徑重組法3．點線面降級法4．遮罩法5．分裂融合法6．圖標特性法練習：制作日歷圖標翻轉(zhuǎn)動畫源文件：光盤\源文件\第3章\3-2-2.aep視頻：光盤\視頻\第3章\3-2-2.mp4練習：制作圖標變形切換動畫源文件：光盤\源文件\第3章\3-2-3.aep視頻：光盤\視頻\第3章\3-2-3.mp43.3.1按鈕設計注意事項

3.3動態(tài)按鈕設計按鈕作為最基本的交互元素之一，在移動端界面中使用的頻率非常高。用戶在使用移動端應用時都是通過點擊相應的按鈕順著設計師的想法下去的，如果能夠在界面中合理的使用按鈕，用戶會得到很好的用戶體驗。移動端界面中的按鈕設計應該具備簡潔明了的圖示效果，能夠讓使用者清楚的認識按鈕的功能，產(chǎn)生功能關(guān)聯(lián)反應。群組內(nèi)的按鈕應該具有統(tǒng)一的設計風格，功能差異較大的按鈕應該有所區(qū)別。練習：制作提交按鈕動畫源文件：光盤\源文件\第3章\3-3-1.aep視頻：光盤\視頻\第3章\3-3-1.mp4

3.3.2開關(guān)按鈕開關(guān)顧名思義就是開啟和關(guān)閉，開關(guān)按鈕是移動端界面中的常見的元素，一般用于打開或關(guān)閉某個功能。在目前常見的移動操作系統(tǒng)中開關(guān)按鈕的應用非常常見，通過開關(guān)按鈕來打開或關(guān)閉應用中的某種功能，這樣的設計符合現(xiàn)實生活的經(jīng)驗，是一種習慣用法。練習：制作開關(guān)按鈕動畫源文件：光盤\源文件\第3章\3-3-2.aep視頻：光盤\視頻\第3章\3-3-2.mp43.4.1常見的進度條動畫表現(xiàn)形式

3.4進度條與工具欄動畫設計在移動端應用程度中還有一種常見的交互動畫效果就是進度條的動畫，通過進度條動畫，可以使用戶了解當前的操作進度，給用戶以心理暗示，使用戶能夠耐心等待，從而提升用戶體驗。進度條與滾動條非常相似，進度條在外觀上只是比滾動條缺少了可拖動的滑塊。進度條元素是移動端應用程序在處理任務時，實時的，以圖形方式顯示的處理當前任務的進度、完成度，剩余未完成任務量的大小和可能需要完成的時間，例如下載進度、視頻播放進度等。練習：制作加載進度條動畫源文件：光盤\源文件\第3章\3-4-1.aep視頻：光盤\視頻\第3章\3-4-1.mp43.4.2工具欄工具欄一般應用于移動端應用程序中頻繁使用的功能，而專門在應用界面中開辟出一塊地方來設置這些常用的操作。這樣的設計直觀突出，且經(jīng)常使用這類操作的用戶會覺得方便更有效率。工具欄需要根據(jù)應用界面整體的風格來進行設計，只有這樣才能夠使整個應用界面和諧統(tǒng)一。練習：制作旋轉(zhuǎn)展開工具欄動畫源文件：光盤\源文件\第3章\3-4-2.aep視頻：光盤\視頻\第3章\3-4-2.mp43.5.1文字動畫效果的表現(xiàn)優(yōu)勢

3.5文字動畫設計文字是移動端界面設計中重要的元素之一，隨著今天大設計的共融，設計的邊界也越來越模糊，過去移動端靜態(tài)的主題文字設計遇上今天的時尚交互設計，使得原本安靜的文字設計動了起來。文字設計在以往UI設計里經(jīng)常提及的是字體范式，重在其形。文字動效很少被人提及，一來是技術(shù)限制，二來是設計理念，不過隨著簡約設計的流行趨勢，如果能夠讓文字在界面中“動”起來，即使是簡單的圖文界面也會立即“活”起來，帶給用戶一種別樣的視覺體驗感。練習：制作手寫文字動畫源文件：光盤\源文件\第3章\3-5-1.aep視頻：光盤\視頻\第3章\3-5-1.mp43.5.2文字動畫的常見表現(xiàn)方法文字動畫的制作和表現(xiàn)方法與其他元素動畫的表現(xiàn)方法類似，大多數(shù)都是通過對文字的基礎屬性來實現(xiàn)的，還有通過對文字添加蒙版或添加效果來實現(xiàn)各種特殊的文字動畫效果，在本節(jié)中將向讀者介紹幾種常見的文字動畫表現(xiàn)效果。1．基礎文字動畫2．文字遮罩動畫3．與勢結(jié)合的動畫4．粒子消散動畫5．光效文字動畫6．路徑生成動畫7．動態(tài)文字云練習：制作動感遮罩文字動畫源文件：光盤\源文件\第3章\3-5-2.aep視頻：光盤\視頻\第3章\3-5-2.mp4移動端UI界面中所包含的元素眾多，而各種交互動畫效果大多數(shù)都是應用于各種小的UI元素之中，給用戶很好的提示作用，也增強了界面的表現(xiàn)力。在本章中向讀者介紹了界面中多種UI元素的動畫表現(xiàn)方式，并且通過案例的制作講解了UI元素動畫的制作方法和技巧，完成本章內(nèi)容的學習，讀者需要能夠掌握UI元素動畫制作的方法，并能夠?qū)⑵鋺玫経I界面設計中。

3.6本章小結(jié)4.1.1明確系統(tǒng)狀態(tài)

4.1如何設計出優(yōu)秀的UI動態(tài)交互效果交互設計的重點體現(xiàn)在界面中細節(jié)的交互設計。出色的細節(jié)設計可以使APP應用在競爭中脫穎而出，它們可能是實用的、不起眼的襯托，抑或使用戶印象深刻，為用戶提供幫助，甚至，引人流連忘返。通過合理的交互動畫設計就能夠很好地為用戶的操作提供合適的視覺反饋。對于移動端應用的操作過程狀態(tài)，交互動畫能夠為用戶提供實時的告知，使得用戶可以快速地理解發(fā)生的一切。4.1.2讓按鈕和操控擁有觸感

UI界面中的元素和操控元件無論處于界面中的任何位置，它們的操控都應該是可觸知的。通過及時響應輸入以及設計相應的操作反饋動畫，能夠為用戶帶來很好的視覺和動態(tài)指引。簡單來說，可以對用戶在界面中的操作行為給予視覺反饋，從而提升界面感知的清晰度。4.1.3有意義的轉(zhuǎn)場動畫可以借助交互動畫的形式讓用戶在導航和內(nèi)容之間流暢地切換，來理解屏幕中布置的元素的變化、或以此強化界面元素的層級。界面中的轉(zhuǎn)場動畫設計是一種取悅用戶的手段，能夠有效地吸引用戶的注意。在移動設備上顯得尤其出色，畢竟方寸之間容不下大量信息的堆砌。4.1.4幫助用戶開始合理的載入體驗與交互動畫設計，能夠為用戶初次接觸該移動應用時產(chǎn)生極大的沖擊，它們在信息載入過程中發(fā)揮了重大作用。當用戶在進入該APP應用時，通過動畫的表現(xiàn)形式能夠突出最重要的特性和操控，給用戶提供及時的引導和幫助。4.1.5強調(diào)界面的變化在許多情況下，界面中的動畫效果用于吸引用戶對界面中重要細節(jié)的注意力和關(guān)注。但是在界面中應用這類動畫效果時需要注意，確保該動畫服務于界面中非常重要的功能，為用戶提供良好的視覺指引，而不是為了界面更?？岫つ康奶砑觿赢嬓Ч?.1.6需要注意的細節(jié)在界面中應用交互動畫效果時應該注意以下幾個方面的細節(jié)。

1、交互動畫在界面中幾乎是不可見的，并且完全是功能性的。

2、了解用戶群體

3、遵循KISS原則

4、與界面元素視覺效果統(tǒng)一練習：制作界面列表顯示動畫源文件：光盤\源文件\第4章\4-1-6.aep視頻：光盤\視頻\第4章\4-1-6.mp44.2.1導航菜單的重要性

4.2導航菜單切換動畫移動端導航菜單的表現(xiàn)形式多種多樣，除了目前廣泛使用的交互式側(cè)邊導航菜單外，還有其他的一些表現(xiàn)形式，合理的移動端導航菜單動畫設計，不僅可以提高用戶體驗，還可以增強移動端應用的設計感。好的移動端導航菜單設計有助于用戶對APP應用的學習，更快地掌握APP應用的使用方法，并方便的操作應用程序?？梢赃@樣說，移動端界面的實用性在一定程度上取決于導航菜單設計的質(zhì)量和水平。4.2.2導航菜單的設計要點在設計移動端界面導航菜單時，最好能夠按照移動操作系統(tǒng)所設定的規(guī)范進行，不僅能使所設計出的導航菜單界面更美觀豐富，而且能與操作系統(tǒng)協(xié)調(diào)一致，使用戶能夠根據(jù)平時對系統(tǒng)的操作經(jīng)驗，觸類旁通地知曉該移動端應用的各功能和簡捷的操作方法，增強移動端應用的靈活性和可操作性。4.2.3側(cè)邊式導航的優(yōu)勢移動端的導航菜單與傳統(tǒng)PC端的導航形式有著一定的區(qū)別，主要表現(xiàn)為移動端為了節(jié)省屏幕的顯示空間，通常采用響應式導航菜單。默認情況下，在移動端界面中隱藏導航菜單，在有限的屏幕空間中充分展示界面內(nèi)容，在需要使用導航菜單時，再通過單擊相應的圖標來動態(tài)滑出導航菜單，常見的有側(cè)邊滑出菜單、頂部滑出菜單等形式。練習：制作側(cè)邊滑入菜單動畫源文件：光盤\源文件\第4章\4-2-3.aep視頻：光盤\視頻\第4章\4-2-3.mp4

4.3.1彈出

4.3

4種主流的轉(zhuǎn)場動畫效果轉(zhuǎn)場動畫效果是移動端應用最多的動態(tài)效果，連接兩個界面，雖然轉(zhuǎn)場動畫效果通常只有零點幾秒的時間，卻能夠在一定程度上影響用戶對于界面間邏輯的認知。通過合理的動畫效果讓戶能更清楚我從哪里來，現(xiàn)在在哪，怎么回去等一系列問題。彈出形式的轉(zhuǎn)場動畫效果多應用于移動端的信息內(nèi)容界面，用戶將絕大部分注意力集中在內(nèi)容信息本身上。當信息不足或者展現(xiàn)形式上不符合自身要求，臨時調(diào)用工具對該界面內(nèi)容進行添加、編輯等操作。在臨時界面停留時間短暫，只想快速操作后重新回到信息內(nèi)容本身上面。4.3.2側(cè)滑當界面之間存在父子關(guān)系或從屬關(guān)系時，通常會在這兩個界面之間使用測滑轉(zhuǎn)場動畫效果。通常看到側(cè)滑的界面轉(zhuǎn)場效果，用戶就會在頭腦中形成樹不同層級間的關(guān)系。4.3.3漸變放大漸變放大的界面切換轉(zhuǎn)場動畫與左右滑動切換的轉(zhuǎn)場動畫最大的區(qū)別是，前者大多用在張貼顯示信息的界面中，后者主要用于羅列信息的列表界面中。在張貼信息的界面中左右切換進入詳情總會給人一種不符合心理預期的感覺，違背了人們在物理世界中形成的習慣認知。4.3.4其他除了以上介紹的幾種常見的轉(zhuǎn)場動畫外，還有許多其他形式的轉(zhuǎn)場動畫效果，它們大多數(shù)都是高度模仿物理現(xiàn)實世界的樣式，例如常見的電子書翻頁動畫效果就是模仿現(xiàn)實世界中的翻書效果。練習：制作圖片翻頁切換動畫源文件：光盤\源文件\第4章\4-3-4.aep視頻：光盤\視頻\第4章\4-3-4.mp44.4.1轉(zhuǎn)場要自然

4.4轉(zhuǎn)場動畫設計規(guī)范相比于靜態(tài)的界面，動態(tài)的轉(zhuǎn)場效果更符合人們的自然認知體系，有效地降低了用戶的認知負載，屏幕上元素的變化過程，前后界面的變化邏輯，以及層次結(jié)構(gòu)之間的變化關(guān)系，都在動畫效果的表現(xiàn)下，變得更加清晰自然。從這個角度上來說，動畫效果不僅是界面的重要支持元素，也是用戶交互的基礎。在UI界面中，默認情況下，界面狀態(tài)的改變是直接而且生硬的，這使得用戶有時候很難立刻理解。當界面有兩個甚至更多狀態(tài)的時候，狀態(tài)之間的變化使用過渡動畫效果來表現(xiàn)，讓用戶明白它們是怎么來的，而非一個瞬間的過程。4.4.2層次要分明一個層次分明的轉(zhuǎn)場動畫效果通常能夠清晰地展示界面狀態(tài)的變化，抓住用戶的注意力。良好的過渡動畫效果有助于在正確的時間點，將用戶的注意到吸引到關(guān)鍵的內(nèi)容上，而這取決于動畫效果是否能夠在正確的時間強調(diào)對的內(nèi)容。4.4.3轉(zhuǎn)場要相互關(guān)聯(lián)既然同一個應用中不同功能界面的轉(zhuǎn)場過渡，自然就牽涉到變化前后界面之間的關(guān)聯(lián)。良好的轉(zhuǎn)場過渡動畫效果連接著新出現(xiàn)的界面元素和之前的交互與觸發(fā)元素，這種關(guān)聯(lián)邏輯讓用戶清楚變化的過程，以及界面中所發(fā)生的前后變化。4.4.4快速的過渡當元素在不同狀態(tài)之間切換的時候，運動過程在讓人看得清、容易理解的情況下盡量快，這樣才是最佳的狀態(tài)。為了兼顧動效的效率、理解的便捷以及用戶體驗，動效應該在用戶觸發(fā)之后的0.1s內(nèi)開始，在300ms內(nèi)結(jié)束，這樣不會浪費用戶的時間，還恰到好處。

4.4.5清晰的動畫效果動畫效果應該避免一次呈現(xiàn)過多效果，尤其當動事效果同時存在多重、復雜的變化的時候，會自然地呈現(xiàn)出混亂的態(tài)勢，少即是多的原則對于動態(tài)效果同樣是適用的。如果某個動畫效果的簡化能夠讓整個UI更加清晰直觀，那么這個修改方案一定是個好主意。當動畫效果中同時包含形狀、大小和位移變化的時候，請務必保持路徑的清晰以及變化的直觀性。練習：制作滑動刪除動畫源文件：光盤\源文件\第4章\4-4-5.aep視頻：光盤\視頻\第4章\4-4-5.mp4過渡動畫效果始終是圍繞著用戶交互和界面元素而存在的，無論在界面中需要呈現(xiàn)的是什么樣的動畫效果，可愛抑或是自然，都需要服務于所要表現(xiàn)功能，然后才是渲染界面的氛圍和感染用戶情緒。在本章中詳細向讀者介紹了移動UI轉(zhuǎn)場動畫的設計表現(xiàn)方法，并通過實例的制作，使讀者能夠掌握轉(zhuǎn)場交互動畫的制作方法，從而將理論與實踐相結(jié)合。

4.5本章小結(jié)5.1.1什么是引導界面

5.1引導界面動畫設計對于移動端的應用程序來說，用戶對于該應用程序的第一印象往往來源于該應用的引導界面。第一印象產(chǎn)生時間極短，但是它所帶來的影響卻要長遠的多，所以移動端應用的引導界面對于用戶和產(chǎn)品之間紐帶的建立是十分重要的。移動端應用軟件啟動時，在正式進入應用界面之前，會首先通過幾個引導界面向用戶介紹該款移動端應用的主要功能與特色，第一印象的好壞會極大地影響到后續(xù)的產(chǎn)品使用體驗。人們在嘗試新事物的過程中會產(chǎn)生緊張與不安，引導界面的作用就是短時間內(nèi)讓用戶對這款產(chǎn)品有一個大概的了解，緩解用戶的焦慮與不安，讓用戶更快的進入使用環(huán)境。5.1.2引導界面的3個基本功能引導界面可以制作的很簡單，也可以制作的很復雜，但是無論是簡單的還是復雜的引導界面都必須擁有3個基本功能：問候、傳遞信息和提升參與度。5.1.3引導界面的設計要素不同的移動應用程序有著不同的核心功能和目標用戶群體，其引導界面的框架與內(nèi)容也是不一樣的。但是每一款移動應用程序的用戶體驗立足點卻是相同的：用戶需求、用戶期望、產(chǎn)品性質(zhì)、經(jīng)營目標。移動端應用程序的引導界面通常包含3至5個界面，每個界面中的設計元素主要包括圖片、文字和動畫。練習：制作引導界面動畫源文件：光盤\源文件\第5章\5-1-3.aep視頻：光盤\視頻\第5章\5-1-3.mp45.2.1了解加載動畫

5.2加載界面動畫設計在UI設計中越來越注重細節(jié)，而等待和加載動畫幾乎在應用程序中無處不在。加載動畫效果幾乎是目前網(wǎng)站和移動應用設計中都無法繞過且必須的組成部分，它們不僅是大勢所趨而且是打造優(yōu)秀用戶體驗的必須組件。移動應用打開速度越慢，訪問者的心理挫折感越強，就會對移動應用的可信性和質(zhì)量產(chǎn)生懷疑。如果在等待移動應用載入期間，能夠向用戶顯示反饋信息，比如一個加載進度動畫，那么用戶的等待時間會相應的延長。5.2.2加載動畫的常見表現(xiàn)形式動效設計是大勢所趨，加載動畫也是其中的重要組成部分，它在用戶體驗設計中的作用是不可估量的，它讓折磨人的等待變成了愉悅的消遣。本節(jié)將向讀者介紹移動端常見的幾種加載動畫表現(xiàn)形式。1．進度條2．旋轉(zhuǎn)3．形象動畫

練習：制作火箭加載動畫源文件：光盤\源文件\第5章\5-2-2.aep視頻：光盤\視頻\第5章\5-2-2.mp45.3.1

UI界面動畫設計要求

5.3

UI界面交互動畫設計規(guī)范伴隨擬物化設計風潮的告一段落，UI設計更加自由隨心，現(xiàn)如今，UI交互動畫設計已經(jīng)具備豐富的特性，炫酷靈活的特效已經(jīng)是UI界面設計中不可分割的一部分。

UI界面交互動畫設計可以認為是新興的設計領(lǐng)域的分支，如同其他的設計一樣，它也是有規(guī)律可循的。在我們開始動手設計制作各種交互動畫效果之前，不妨先了解一下UI界面交互動畫效果的設計要求吧。

1．富有個性這是UI界面動畫設計最基本的要求，UI動畫設計就是要擺脫傳統(tǒng)應用的靜態(tài)設定，設計獨特的動畫效果，創(chuàng)造引