UI交互設(shè)計案例教程 第五章

05常見UI交互動效設(shè)計與實現(xiàn)（上）簽到簽到方式教師通過“文旌課堂APP”生成簽到二維碼，并設(shè)置簽到時間，學(xué)生通過“文旌課堂APP”掃描“簽到二維碼”進(jìn)行簽到。。掃碼下載文旌課堂APP掃碼簽到

在技術(shù)和硬件飛速發(fā)展的今天，交互動效已經(jīng)成為UI中不可或缺的一部分。交互動效是為了讓用戶更好地理解當(dāng)前所發(fā)生的事情，幫助設(shè)計師解決界面功能上的問題，有效地說明產(chǎn)品的使用方法，加強用戶與界面之間的情感聯(lián)系。

本章將向同學(xué)們介紹UI中有關(guān)圖標(biāo)、按鈕和導(dǎo)航欄的交互動效的表現(xiàn)形式及其設(shè)計方法，并通過案例制作去掌握上述UI元素交互動效的制作方法，并進(jìn)一步提高軟件操作能力，培養(yǎng)實踐能力。單元導(dǎo)讀★了解圖標(biāo)、按鈕和導(dǎo)航欄交互動效的基礎(chǔ)知識和表現(xiàn)形式知識目標(biāo)★積極思考，探究操作背后的原理，增強自主學(xué)習(xí)、探究學(xué)習(xí)的意識★理論和實踐相結(jié)合，不斷培養(yǎng)自己的實踐能力，做到舉一反三、學(xué)以致用

思政目標(biāo)★掌握使用AfterEffects制作圖標(biāo)、按鈕和導(dǎo)航欄交互動效的方法和技巧

技能目標(biāo)學(xué)習(xí)目標(biāo)

5.1圖標(biāo)動效5.1.1初識圖標(biāo)動效

隨著時代的發(fā)展，靜態(tài)圖標(biāo)已經(jīng)很難滿足用戶對產(chǎn)品個性化與趣味性的要求，越來越多的手機應(yīng)用開始注重圖標(biāo)動效的設(shè)計。恰到好處的圖標(biāo)動效，不僅可以減輕認(rèn)知負(fù)擔(dān)，帶給用戶愉悅的操作體驗，還可以傳達(dá)給用戶整個App的設(shè)計理念。

例如，表示加載狀態(tài)的加載動效圖標(biāo)和清除計算機垃圾時表明已有文件添加到垃圾桶中的刪除動效圖標(biāo)，清晰明了地傳達(dá)出了圖標(biāo)的含義，如圖所示。圖標(biāo)動效

5.1圖標(biāo)動效5.1.1初識圖標(biāo)動效

因此，在設(shè)計時應(yīng)冷靜分析，按照界面風(fēng)格和功能需求添加動效，如喜馬拉雅App首頁，除底部導(dǎo)航欄的圖標(biāo)切換動效外，只有助眠專注圖標(biāo)添加了動畫特效，使該圖標(biāo)在眾多圖標(biāo)中脫穎而出，吸引了用戶的注意，突出顯示了該App的新功能，達(dá)到了設(shè)計的目的，如圖所示。圖標(biāo)動效

在設(shè)計圖標(biāo)動效時要注意，不是所有風(fēng)格、所有場景下的圖標(biāo)都適合添加動效，另外如果添加的動效過于復(fù)雜或種類過多，將會分散用戶的注意力，起到相反的效果。5.1圖標(biāo)動效5.1.2圖標(biāo)動效設(shè)計思路設(shè)計圖標(biāo)交互動效不能隨心所欲，本節(jié)講解一些設(shè)計圖標(biāo)動效的思路。1．基本屬性轉(zhuǎn)換法

基本屬性轉(zhuǎn)換法，是通過對元素的位置、大小、方向、透明度、顏色等基本屬性進(jìn)行改變，而做出的簡單有趣的動效。該方法應(yīng)用范圍十分廣泛，并且對圖標(biāo)風(fēng)格無太大要求，示例如圖所示。定位和添加圖標(biāo)動效

圖中的定位圖標(biāo)是使水滴圖形基于底部進(jìn)行旋轉(zhuǎn)所形成的動效，而添加圖標(biāo)是在圖形的不透明度由低到高、逐漸顯現(xiàn)的過程中對其進(jìn)行放大、旋轉(zhuǎn)等所形成的動效。

例如，單擊菜單圖標(biāo)之后，上下兩條線將進(jìn)行移動和重組，組成新的關(guān)閉圖標(biāo)，中間的線逐漸縮小直至消失不見，如圖所示。5.1圖標(biāo)動效5.1.2圖標(biāo)動效設(shè)計思路2．路徑重組法

路徑重組法是將圖標(biāo)中的元素或路徑進(jìn)行重組，構(gòu)成一個新的圖標(biāo)。路徑重組圖標(biāo)動效5.1圖標(biāo)動效5.1.2圖標(biāo)動效設(shè)計思路3．點線面切換法點線面切換圖標(biāo)動效

點線面切換法，顧名思義就是通過點、線、面之間的相互切換來制作圖標(biāo)動效，這是一個使用頻率較高的方法。在切換時，可以用點作為介質(zhì)，通過點繪制出線性圖形，再由線轉(zhuǎn)換為面，也可以由線直接轉(zhuǎn)換為面，如圖所示。5.1圖標(biāo)動效5.1.2圖標(biāo)動效設(shè)計思路4．遮罩法遮罩圖標(biāo)動效

遮罩法是指兩個圖形之間相互轉(zhuǎn)換時，將一個圖形作為另一圖形的遮罩所形成的圖標(biāo)動效，如圖所示。該圖標(biāo)將不可見的圓角矩形作為時鐘圖標(biāo)的遮罩，當(dāng)圓形放大時，只會顯示圓角矩形中的內(nèi)容。

因此，當(dāng)圓形放大到一定程度后就會顯示為圓角矩形，同時時鐘圖標(biāo)中的指針經(jīng)過移動和重組構(gòu)成了新的圖形。5.1圖標(biāo)動效5.1.2圖標(biāo)動效設(shè)計思路5．分裂融合法下載-完成圖標(biāo)動效

分裂融合法是將一個圖標(biāo)中的多個圖形融合在一起，形成新的圖標(biāo)，或者是將圖標(biāo)中的一個圖形分裂成多個圖形。下面來看兩個例子。

如圖所示為下載-完成圖標(biāo)，在單擊該圖標(biāo)之后，向下的箭頭變?yōu)閮蓷l豎線，然后無數(shù)的小圓向中心匯合，表示正在下載；最后小圓融合成了一個大圓，同時將中心的兩條豎線進(jìn)行重組變?yōu)閷?，表示已完成下載。

如圖所示為加載圖標(biāo)，圖標(biāo)中的水滴滴落分裂成小點，然后由小點融合成類似雪花的圖形，表示正在加載。加載圖標(biāo)動效

例如，為模擬現(xiàn)實生活中扔?xùn)|西的情景，刪除圖標(biāo)是用垃圾桶圖形來表示的，在刪除文件時，垃圾桶會上下抖動并因為重力使蓋子反彈，如圖所示。5.1圖標(biāo)動效5.1.2圖標(biāo)動效設(shè)計思路6．圖標(biāo)特性法刪除圖標(biāo)動效

圖標(biāo)特性法，是根據(jù)圖標(biāo)所表達(dá)的現(xiàn)實意義制作出與現(xiàn)實相符合的動效。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效

本案例制作的信息圖標(biāo)動效是使用圖層蒙版與“填充”效果、“液化”效果共同實現(xiàn)的，其效果如圖所示。另外，通過對關(guān)鍵幀的靈活運用實現(xiàn)了三種顏色逐個填充圖標(biāo)的動效。信息圖標(biāo)動效步驟1

在AfterEffects中新建項目，在“項目”面板下方文件列表區(qū)域空白處雙擊鼠標(biāo)左鍵，在彈出的“導(dǎo)入文件”對話框中選擇“素材與實例/第5章/案例5-1/信息.ai”，單擊“導(dǎo)入”按鈕，彈出設(shè)置對話框，在其中設(shè)置導(dǎo)入種類為“合成”，素材尺寸為“圖層大小”，單擊“確定”按鈕導(dǎo)入素材并自動創(chuàng)建合成。步驟2

雙擊“項目”面板中的合成將其打開，單擊“線條”圖層左側(cè)的“視頻”按鈕

隱藏圖層內(nèi)容。選擇“選中”和“未選中”圖層，按快捷鍵“S”顯示其“縮放”屬性，在5幀、15幀和1秒處為該屬性添加關(guān)鍵幀，設(shè)置15幀處的屬性值為70%，制作點擊圖標(biāo)的效果，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效步驟3

在工具欄中選擇橢圓工具，選擇“選中”圖層，在“合成”窗口的圖案左下角外按下鼠標(biāo)左鍵并拖動繪制一個圓形蒙版，此時，“選中”圖層中的內(nèi)容不可見。

選擇圖層中“蒙版/蒙版1”屬性組中的“蒙版擴展”屬性，在15幀和1秒處為其添加關(guān)鍵幀，使“時間指示器”位于1秒位置，在“蒙版擴展”屬性右側(cè)的藍(lán)色數(shù)字處按下鼠標(biāo)左鍵向右拖動設(shè)置屬性值，使圓形蒙版擴展到完全覆蓋“合成”窗口中的圖案，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效設(shè)置“蒙版擴展”屬性值步驟4

選擇“選中”圖層，按兩次快捷鍵“Ctrl+D”復(fù)制兩個圖層副本。選中復(fù)制的兩個圖層，在“時間軸”面板中按下鼠標(biāo)左鍵向下拖動所選圖層到原圖層下方，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效復(fù)制兩個圖層副本5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效添加“填充”效果步驟5

選中“選中3”圖層中“蒙版”屬性組中的“蒙版1”屬性，在“效果和預(yù)設(shè)”面板的搜索框中輸入“填充”并搜索，然后雙擊“填充”，為蒙版添加“填充”效果，此時在“項目”面板所在位置打開“效果控件”面板，在面板中設(shè)置填充顏色為藍(lán)綠色“#4EE6D9”，如圖所示。采用相同方法設(shè)置“選中2”圖層中蒙版的填充顏色為橙色“#EF5B3E”。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效步驟6

同時選中“選中3”圖層中“蒙版擴展”屬性上的所有關(guān)鍵幀，按下鼠標(biāo)左鍵向右整體拖動關(guān)鍵幀，使第一個關(guān)鍵幀位于18幀處；采用相同方法向右拖動“選中”圖層中“蒙版擴展”屬性上的所有關(guān)鍵幀，使第一個關(guān)鍵幀位于21幀處，此時1秒處的蒙版效果如圖所示。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效步驟7

將“時間指示器”移到23幀位置，選擇“選中2”圖層中的“蒙版1”屬性，選擇“效果/扭曲/液化”菜單項，為蒙版添加“液化”效果。在“效果控件”面板中的“工具”屬性下選擇變形工具，在“變形工具選項”屬性組中“畫筆大小”屬性右側(cè)的藍(lán)色數(shù)字處按下鼠標(biāo)左鍵向右拖動設(shè)置畫筆的大小，在“合成”窗口中按下鼠標(biāo)左鍵并拖動以調(diào)整橙色填充的邊緣，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效步驟8

選擇“選中2”圖層下“效果/液化”屬性組中的“扭曲百分比”屬性，在23幀和1秒處為該屬性添加關(guān)鍵幀，并設(shè)置1秒處的屬性值為0%，使橙色填充的邊緣恢復(fù)正常，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效步驟9

使“選中2”圖層處于選中狀態(tài)，選擇“效果控件”面板中的“液化”效果，按快捷鍵“Ctrl+C”復(fù)制該效果及其關(guān)鍵幀。選擇“選中”圖層，按快捷鍵“Ctrl+V”粘貼該效果及其關(guān)鍵幀。

按快捷鍵“U”顯示“選中”圖層上的所有關(guān)鍵幀，同時選中“扭曲百分比”屬性中的所有關(guān)鍵幀，按下鼠標(biāo)左鍵并拖動所選關(guān)鍵幀，使最后一個關(guān)鍵幀與該圖層下“蒙版擴展”屬性中的最后一個關(guān)鍵幀對齊，如圖所示。將“液化”效果復(fù)制到“選中3”圖層并執(zhí)行與“選中”圖層相同的操作。5.1圖標(biāo)動效案例練習(xí)5-1制作信息圖標(biāo)動效步驟10

單擊“線條”圖層左側(cè)的“視頻”按鈕，顯示圖層內(nèi)容并選擇該圖層。按快捷鍵“P”顯示其“位置”屬性，在1秒03幀和1秒13幀處為該屬性添加關(guān)鍵幀，設(shè)置1秒03幀處“位置”屬性的y值為-98。步驟11

選擇“選中”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，按快捷鍵“Ctrl+Alt+Shift+↑”將復(fù)制的圖層置頂，設(shè)置“線條”圖層的“TrkMat”模式為“Alpha遮罩‘選中4’”，使線條嵌入信息圖標(biāo)中。步驟12

取消選中圖層，按快捷鍵“U”顯示所有圖層中的關(guān)鍵幀。選中所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動”效果，最后將文件保存。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效

本案例制作的播放—暫停圖標(biāo)動效是通過描邊變換來實現(xiàn)從播放到暫停再到播放之間的轉(zhuǎn)換，其重點是通過“修剪路徑”屬性組和鋼筆工具來實現(xiàn)描邊變換，動效如圖所示。播放—暫停圖標(biāo)動效5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫停”圖標(biāo)動效步驟1

在AfterEffects中新建項目，選擇“合成/新建合成...”菜單項，彈出“合成設(shè)置”對話框，首先取消勾選“鎖定長寬比為...”復(fù)選框，然后設(shè)置寬度和高度分別為1280和800，幀速率為30，持續(xù)時間為5秒，背景顏色為黑色，最后單擊“確定”按鈕新建合成。

在工具欄中選擇橢圓工具，先按住快捷鍵“Alt”的同時重復(fù)單擊填充色塊，設(shè)置填充類型為無，使用相同方法設(shè)置描邊顏色的類型為純色；然后單擊描邊顏色色塊，在彈出的“形狀描邊顏色”對話框中設(shè)置顏色為紅色“#CD737B”（如圖所示），并設(shè)置描邊寬度為40。設(shè)置描邊顏色5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟2

按住快捷鍵“Shift”的同時，在“合成”窗口中按下鼠標(biāo)左鍵并拖動繪制正圓，此時在“時間軸”面板中會自動新建一個形狀圖層，選擇新建圖層并按快捷鍵“Enter”，將其重命名為“圓形”，設(shè)置其“內(nèi)容/橢圓1/橢圓路徑1”屬性組中的“大小”屬性值為“608，608”。

選中圓形，按快捷鍵“Ctrl+Alt+Home”使圓形的錨點位于其中心位置，單擊“對齊”面板中的“水平對齊”按鈕

和“垂直對齊”按鈕

使圓形居中顯示，如圖所示。使圓形居中

★提示：在默認(rèn)情況下，“水平對齊”按鈕和“垂直對齊”按鈕位于界面右側(cè)的“對齊”面板中，如找不到該面板可選擇“窗口/對齊”菜單項將其打開。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫停”圖標(biāo)動效步驟3

按快捷鍵“F2”取消選中圖層，在工具欄中選擇多邊形工具，按住快捷鍵“Shift”的同時，在“合成”窗口中圓形的中心位置繪制正三角形（繪制時按快捷鍵“↑/↓”可調(diào)節(jié)多邊形邊數(shù)）。

將圖層重命名為“三角形”，設(shè)置其“內(nèi)容/多邊星形1/多邊星形路徑1”屬性組中的“外徑”屬性值為129，并設(shè)置其錨點位于中心位置。使三角形居中顯示，然后設(shè)置“變換”屬性組中的“旋轉(zhuǎn)”屬性值為90°。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟4

此時，三角形的角為尖角，與圓形風(fēng)格不符，單擊“三角形”圖層下“內(nèi)容/多邊星形1/描邊1”屬性組中“線段連接”屬性右側(cè)的“﹀”按鈕，在下拉列表中選擇“圓角連接”，使三角形的尖角變?yōu)閳A角，如圖所示。將三角形的角改為圓角5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫停”圖標(biāo)動效步驟5

選擇“圓形”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，按快捷鍵“Ctrl+Alt+Shift+↓”將復(fù)制的圖層置底，設(shè)置其描邊顏色為綠色“#6DAC93”，并單擊圖層左側(cè)的“視頻”按鈕

隱藏圖層內(nèi)容。步驟

6右鍵單擊“圓形”圖層下“內(nèi)容/橢圓1”屬性組中的“橢圓路徑1”屬性，在彈出的快捷菜單中選擇“轉(zhuǎn)換為貝塞爾曲線路徑”，即可在“合成”窗口中直接編輯圓形的頂點，如圖所示。將圓形的路徑轉(zhuǎn)換為貝塞爾曲線路徑5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟7

在工具欄中選擇添加“頂點”工具，單擊圓形上方頂點右側(cè)路徑添加一個新的頂點；在工具欄中選擇選取工具，同時選中添加的頂點和圓形上方頂點，右鍵單擊所選頂點，在彈出的快捷菜單中選擇“蒙版和形狀路徑/已關(guān)閉”，取消“已關(guān)閉”的選擇狀態(tài)，此時兩個頂點之間會斷開連接，如圖所示。斷開頂點間的連接5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟8

單擊“圓形”圖層下“內(nèi)容/橢圓1/描邊1”屬性組中“線段端點”下拉按鈕，在下拉列表中選擇“圓頭端點”，使步驟7中的兩個頂點在視覺上形成閉合，如圖所示。改變圓形的線段端點5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟9

設(shè)置“三角形”圖層“變換”屬性組中的“不透明度”屬性值為60%，以方便查看。在工具欄中選擇鋼筆工具，選擇“圓形”圖層，在“合成”窗口中單擊步驟7添加的頂點并繪制路徑，如圖所示。繪制暫停圖標(biāo)左側(cè)豎線

★提示：在修改路徑時，選擇圖層下“內(nèi)容/橢圓1”屬性組中的“路徑1”屬性可以顯示路徑的頂點。在移動頂點的控制手柄時，按住快捷鍵“Alt”可以只移動頂點的一側(cè)手柄，之后如果再次移動該頂點的控制手柄，默認(rèn)是只移動頂點的一側(cè)手柄，再次按快捷鍵“Alt”可同時移動頂點的兩側(cè)手柄。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟10

選擇“三角形”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，設(shè)置復(fù)制圖層“變換”屬性組中的“旋轉(zhuǎn)”屬性值為270°。單擊“合成”窗口下方的“選擇網(wǎng)格和參考線選項”按鈕，在下拉列表中選擇“標(biāo)尺”，使“標(biāo)尺”處于選擇狀態(tài)，此時，“合成”窗口的上方和左側(cè)會顯示標(biāo)尺，如圖所示。顯示標(biāo)尺5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟10

在“合成”窗口的橫向標(biāo)尺處，按下鼠標(biāo)左鍵向下拖動到合適位置，添加水平方向的輔助線；在豎向標(biāo)尺處，按下鼠標(biāo)左鍵向右拖動到合適位置，添加垂直方向的輔助線。使用相同方法再添加一條水平方向的輔助線和一條垂直方向的輔助線，效果如圖所示。添加輔助線5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟11

隱藏“圓形”圖層內(nèi)容，右鍵單擊“三角形”圖層下“內(nèi)容/多邊星形1”屬性組中的“多邊星形路徑1”屬性，在彈出的快捷菜單中選擇“轉(zhuǎn)換為貝塞爾曲線路徑”，使用添加“頂點”工具在三角形下方頂點偏上位置添加頂點，使用步驟7中的方法斷開添加的頂點和下方頂點的連接，如圖所示。

在“三角形”圖層下“內(nèi)容/多邊星形1/描邊1”屬性組中“線段端點”屬性的下拉列表中選擇“圓頭端點”，然后選擇“三角形”圖層，使用鋼筆工具在“合成”窗口中單擊添加的頂點并繪制路徑，如圖所示。斷開頂點間的連接繪制暫停圖標(biāo)右側(cè)豎線5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟12

選中“三角形2”圖層，按快捷鍵“Delete”刪除圖層，并設(shè)置“三角形”圖層“變換”屬性組中的“不透明度”屬性值為100%。

步驟13

單擊“圓形”圖層左側(cè)的“視頻”按鈕

顯示圖層內(nèi)容，選擇該圖層的“內(nèi)容”屬性，單擊該屬性右側(cè)的按鈕

，在彈出的菜單中選擇“修剪路徑”，添加“修剪路徑”屬性組，如圖所示。將“時間指示器”移到0秒處，依次單擊“內(nèi)容/修剪路徑1”屬性組中“開始”屬性和“結(jié)束”屬性左側(cè)的“秒表”按鈕

，在當(dāng)前位置添加關(guān)鍵幀，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟14

按下鼠標(biāo)左鍵向右拖動“開始”屬性右側(cè)的藍(lán)色數(shù)字改變屬性值，使圓形路徑恢復(fù)為初始狀態(tài)，修改后的“開始”屬性值為19.5%，如圖所示。

知識鏈接：“修剪路徑”是作用于圖形路徑上的效果，可以改變路徑的起止點。該屬性組中的“開始”屬性指路徑起點的位置；“結(jié)束”屬性指路徑終點的位置；“偏移”屬性右側(cè)的第一個數(shù)值表示路徑整體的旋轉(zhuǎn)圈數(shù)，第二個數(shù)值表示路徑整體的旋轉(zhuǎn)角度值。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟15

在1秒處為“開始”屬性和“結(jié)束”屬性添加關(guān)鍵幀，并設(shè)置其屬性值分別為0%和9.4%，使豎線的兩個端點分別與水平方向上的兩條參考線對齊，如圖所示。

★提示：由于繪制路徑的不同可能會導(dǎo)致“開始”屬性和“結(jié)束”屬性的屬性值與文中所描述的屬性值有所不同，在繪制時以實際情況為準(zhǔn)。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟16

使用步驟13的方法在“三角形”圖層中添加“修剪路徑”屬性組，在0秒和1秒處為“內(nèi)容/修剪路徑1”屬性組中的“開始”屬性和“結(jié)束”屬性添加關(guān)鍵幀并設(shè)置屬性值，兩處的關(guān)鍵幀屬性值如圖所示。此時，便完成了簡單的轉(zhuǎn)換動效，接下來添加細(xì)節(jié)，為圖標(biāo)添加抖動和變色效果。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫?！眻D標(biāo)動效步驟17

同時選中“三角形”圖層和“圓形”圖層，按快捷鍵“P”顯示它們的“位置”屬性，在20幀、1秒和1秒06幀處為該屬性添加關(guān)鍵幀，將“時間指示器”移到1秒位置，設(shè)置“三角形”圖層中“位置”屬性的y值為365，“圓形”圖層中“位置”屬性的y值為435，以制作抖動效果，如圖所示。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫停”圖標(biāo)動效步驟18

選擇“三角形”圖層下“內(nèi)容/多邊星形1/描邊1”屬性組中的“顏色”屬性，在20幀和1秒處為該屬性添加關(guān)鍵幀，設(shè)置1秒處的“顏色”屬性為綠色“#6DAC93”。對“圓形”圖層執(zhí)行相同操作。步驟19

選擇“三角形”圖層下“內(nèi)容/多邊星形1/描邊1”屬性組中的“顏色”屬性，在20幀和1秒處為該屬性添加關(guān)鍵幀，設(shè)置1秒處的“顏色”屬性為綠色“#6DAC93”。對“圓形”圖層執(zhí)行相同操作。如圖所示。5.1圖標(biāo)動效案例練習(xí)5-2制作“播放—暫停”圖標(biāo)動效步驟20

按快捷鍵“F2”取消選中圖層，按快捷鍵“U”顯示所有圖層中的關(guān)鍵幀，拖動鼠標(biāo)同時選中所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動”效果。至此，圖標(biāo)由播放到暫停的轉(zhuǎn)換已制作完成。

將“時間指示器”移到2秒15幀位置，同時選中“三角形”圖層中的所有關(guān)鍵幀，按快捷鍵“Ctrl+C”復(fù)制所選關(guān)鍵幀，然后按快捷鍵“Ctrl+V”從當(dāng)前位置依次粘貼復(fù)制的關(guān)鍵幀。對其余圖層執(zhí)行相同操作。同時選中復(fù)制的所有關(guān)鍵幀，右鍵單擊所選關(guān)鍵幀，在彈出的快捷菜單中選擇“關(guān)鍵幀輔助/時間反向關(guān)鍵幀”（如圖所示），使圖標(biāo)由暫停轉(zhuǎn)換到播放。選擇“關(guān)鍵幀輔助/時間反向關(guān)鍵幀”菜單5.1圖標(biāo)動效

工匠精神是我們民族精神和時代精神的生動體現(xiàn)，折射出各行各業(yè)一線勞動者的精神風(fēng)貌，為各個專業(yè)領(lǐng)域高質(zhì)量發(fā)展不斷注入精神動力。

不只是勞動技術(shù)人員要具備工匠精神，我們UI交互設(shè)計師也要具備工匠精神，在設(shè)計原型圖，制作交互動效時，要不斷嘗試，追求卓越，專注負(fù)責(zé)，在遵循設(shè)計規(guī)范的同時滿足個性化需求，設(shè)計出既精美又能滿足用戶需求的產(chǎn)品。匠心筑夢5.2按鈕交互動效5.2.1按鈕的作用1．引導(dǎo)作用具有引導(dǎo)作用的按鈕可以引導(dǎo)用戶操作，提高用戶對UI整體的認(rèn)知，提升用戶操作的成功率，提高用戶使用產(chǎn)品的整體感受。例如，一些電商類App界面底部的“加入購物車”按鈕和“立即購買”按鈕，可以清楚地告訴產(chǎn)生購買欲望的用戶下一步該如何操作，如圖所示；還有一些App中的“點擊領(lǐng)取”按鈕，使用新穎的樣式吸引用戶眼球，引導(dǎo)用戶點擊，以進(jìn)入下一個頁面，如圖所示。電商App底部的引導(dǎo)購買按鈕

“點擊領(lǐng)取”按鈕示例5.2按鈕交互動效5.2.1按鈕的作用2．功能操作作用

具有功能操作作用的按鈕可以實現(xiàn)相應(yīng)的功能，如開關(guān)、確認(rèn)、返回、折疊、展開、前進(jìn)、后退等按鈕。這類按鈕強調(diào)的是其承載的功能，因此在設(shè)計時應(yīng)當(dāng)弱化按鈕樣式，重點突出主體功能，一些常見的功能類按鈕如圖所示。5.2按鈕交互動效5.2.2如何設(shè)計出出色的交互按鈕1．按鈕需要看起來可點擊

界面中的每個元素都需要用戶花費時間和精力去理解。要想讓用戶快速、準(zhǔn)確地理解哪些元素為按鈕，首先就要確保該按鈕在視覺上看起來是可點擊的。具有陰影效果的按鈕

由于設(shè)計師是界面元素的設(shè)計者，因此可以很容易地感知并理解哪些元素為按鈕，以及界面各種元素的功能，這也導(dǎo)致了設(shè)計師對可點擊按鈕的理解與用戶不同。在設(shè)計可點擊按鈕時，不可想當(dāng)然地進(jìn)行設(shè)計，要注意以下幾個方法。

（1）為按鈕添加適當(dāng)?shù)年幱靶Ч?，使按鈕變得更加立體并浮于界面上，使用戶可以快速感知，并有想按下去的沖動，如圖所示。5.2按鈕交互動效5.2.2如何設(shè)計出出色的交互按鈕

（2）使用高飽和度或者對比度強烈的色彩，來突出按鈕元素的不同，吸引用戶點擊，如明亮的黃色、藍(lán)色和紅色等，都比較抓人眼球，如圖所示。

（3）注意按鈕周圍的留白，如果周圍同類元素過多，且元素間間距過小，就很容易被用戶忽視。色彩對比強烈的按鈕2．合適的擺放位置

在設(shè)計時，應(yīng)該把按鈕擺放在合適的位置，即用戶容易發(fā)現(xiàn)或者期待看到它的地方。這就要求設(shè)計師要盡可能使用傳統(tǒng)的布局，將按鈕放置到特定的位置。

例如，界面或者彈出框的底部、信息的正下方等。5.2按鈕交互動效5.2.2如何設(shè)計出出色的交互按鈕3．明確按鈕的功能

除了讓用戶可以快速理解和發(fā)現(xiàn)按鈕外，還需要清楚地告訴用戶按下此按鈕會產(chǎn)生什么效果，以免用戶感到困惑，或進(jìn)行錯誤操作。

有的按鈕上會包含文本，以清楚地告訴用戶該按鈕的功能。這類按鈕上的文本要盡可能簡潔、直觀，并且符合界面風(fēng)格。

還有的按鈕上繪制的是圖形，如下載、關(guān)閉、確定等按鈕。這類按鈕使用圖形代表文字向用戶傳達(dá)信息，這就要求按鈕上圖形所代表的含義是大眾所接受、認(rèn)可和理解的，否則很容易使用戶對按鈕功能產(chǎn)生誤解。5.2按鈕交互動效5.2.2如何設(shè)計出出色的交互按鈕3．明確按鈕的功能

例如，在登錄界面中，向右的箭頭按鈕和對勾圖形按鈕雖然表面上沒有登錄的意思，但能感知按鈕功能是可以切換到下一級界面或完成此界面操作的，與登錄按鈕功能相似，因此利于用戶理解，并且可以代替文本式的登錄按鈕，如圖所示。5.2按鈕交互動效5.2.2如何設(shè)計出出色的交互按鈕4．適當(dāng)?shù)某叽?/p>

按鈕要足夠大才更容易引起用戶注意，才能在眾多界面元素中脫穎而出。按鈕尺寸要足夠大并不是說可以無限大，而是一個相對值，相對于界面中其他元素的尺寸。5．合理的順序

按鈕的順序要符合按鈕所具備的功能，也要符合用戶的習(xí)慣。例如，在瀏覽電子書的上一頁和下一頁時，總是上一頁的按鈕在前，下一頁的按鈕在后。6．注意按鈕的視覺層次

按鈕除了要比界面中的其他元素突出，同一界面上的按鈕與按鈕之間也要注意層級關(guān)系，其可以通過對顏色、尺寸、排列順序等進(jìn)行處理使重要的按鈕處于突出位置，其余按鈕進(jìn)行弱化處理。5.2按鈕交互動效5.2.2如何設(shè)計出出色的交互按鈕

例如，在界面中不止一個按鈕時，重要的按鈕使用明亮的綠色重點突出，其余按鈕在保證其位置和尺寸的基礎(chǔ)上使用灰色線框進(jìn)行弱化處理，如圖所示。突出重要按鈕7．給予用戶適當(dāng)?shù)姆答?/p>

當(dāng)用戶點擊或輕觸按鈕時，他們會希望按鈕或者界面可以給出適當(dāng)?shù)姆答仯駝t會認(rèn)為自己沒有觸碰到按鈕從而進(jìn)行重復(fù)操作，或者認(rèn)為該元素不屬于按鈕而導(dǎo)致理解錯誤。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效開關(guān)按鈕交互動效

開關(guān)按鈕交互動效是交互設(shè)計中最常見的動效之一，開關(guān)按鈕常用于控制App界面中功能的開啟與關(guān)閉，并且大多數(shù)開關(guān)按鈕都是通過滑塊來切換功能狀態(tài)的，在制作時，要注意切換動效的流暢性與自然性，給用戶一種舒適自然的感覺。

本案例制作開關(guān)按鈕交互動效，效果如圖所示。步驟1

在AfterEffects中新建項目，選擇“合成/新建合成...”菜單項，彈出“合成設(shè)置”對話框，在其中設(shè)置寬度和高度分別為600和400，幀速率為30，持續(xù)時間為5秒，背景顏色為白色，然后單擊“確定”按鈕新建合成。步驟2

在工具欄中選擇圓角矩形工具，先按住快捷鍵“Alt”的同時重復(fù)單擊填充色塊，設(shè)置填充類型為純色；然后單擊填充色塊，在彈出的“形狀填充顏色”對話框中設(shè)置顏色為淺灰色“#CFD1D2”，使用相同方法設(shè)置描邊顏色的類型為無。

在“合成”窗口中按下鼠標(biāo)左鍵并拖動繪制圓角矩形。選擇“時間軸”面板中新建的形狀圖層，按快捷鍵“Enter”，將其重命名為“灰框”，作為按鈕關(guān)閉時的背景。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟3

選擇“灰框”圖層下“內(nèi)容/矩形1/矩形路徑1”屬性組中的“大小”屬性，先單擊該屬性名稱右側(cè)的“約束比例”按鈕，使該按鈕為不可見狀態(tài)，然后設(shè)置“大小”屬性值為“140，70”；選擇“矩形路徑1”屬性組中的“圓度”屬性，在該屬性名稱右側(cè)的藍(lán)色數(shù)字處按下鼠標(biāo)左鍵并向右拖動，使圓角矩形兩端顯示為半圓，設(shè)置圓角矩形的錨點位于其中心位置，并使其居中顯示，如圖所示。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟4

選擇“灰框”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，將復(fù)制的圖層重命名為“綠框”，設(shè)置其填充顏色為綠色“#43C943”。按快捷鍵“Ctrl+Alt+Shift+↓”將圖層置底，并隱藏該圖層內(nèi)容，作為按鈕開啟時的狀態(tài)。步驟

5

取消選中圖層，在工具欄中選擇橢圓工具，設(shè)置填充顏色為白色，制作開關(guān)按鈕交互動效在“合成”窗口中按住快捷鍵“Shift”的同時按下鼠標(biāo)左鍵并拖動繪制正圓。先將新建圖層重命名為“滑塊”，設(shè)置其“大小”屬性值為“60，60”；然后設(shè)置正圓的錨點位于其中心位置，并使其居中顯示，作為開關(guān)按鈕中左右滑動的滑塊。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟

6

制作滑塊左右滑動的動效。選擇“滑塊”圖層，按快捷鍵“P”顯示其“位置”屬性，設(shè)置屬性的x值為265，在10幀和1秒05幀處為該屬性添加關(guān)鍵幀，設(shè)置1秒05幀處屬性的x值為335，如圖所示。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟

7

同時選中步驟6添加的關(guān)鍵幀，按快捷鍵“F9”添加“緩動”效果。單擊“時間軸”面板圖層控制區(qū)域右上方的“圖表編輯器”按鈕進(jìn)入圖表編輯器模式，顯示“位置”屬性的速度圖表，單擊曲線上的關(guān)鍵幀，顯示關(guān)鍵幀手柄，按下鼠標(biāo)左鍵并拖動手柄，調(diào)整速度曲線的坡度（速度圖表曲線的坡度越陡速度越快，反之越慢），如圖所示。單擊“圖表編輯器”按鈕退出圖表編輯器模式。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟

8

在1秒處為“滑塊”圖層的“位置”屬性添加關(guān)鍵幀，并設(shè)置屬性的x值為343。按快捷鍵“Shift+S”顯示其“縮放”屬性，在12幀、22幀和1秒05幀處為該屬性添加關(guān)鍵幀，單擊該屬性名稱右側(cè)的“約束比例”按鈕，使該按鈕為不可見狀態(tài)，然后設(shè)置22幀處水平方向的屬性值為116%，選中“縮放”屬性上的所有關(guān)鍵幀按快捷鍵“F9”添加“緩動”效果。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟

9

制作灰框從有縮小到無，并且在縮小過程中向右移動的效果。先顯示“綠框”圖層內(nèi)容，然后選擇“灰框”圖層，依次按快捷鍵“P”和“Shift+S”，同時顯示圖層的“位置”屬性和“縮放”屬性，在10幀和1秒05幀處為它們添加關(guān)鍵幀，設(shè)置1秒05幀處“位置”屬性的x值為320，“縮放”屬性值為0%，如圖所示。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟

10

選擇“綠框”圖層，按快捷鍵“T”顯示其“不透明度”屬性，在10幀和1秒05幀處為該屬性添加關(guān)鍵幀，并設(shè)置10幀處的屬性值為0%。取消選中圖層，按快捷鍵“U”顯示所有圖層中的關(guān)鍵幀。同時選中“灰框”圖層和“綠框”圖層中的所有關(guān)鍵幀，按快捷鍵“F9”添加“緩動”效果。步驟

11將“時間指示器”移到2秒位置，先選擇“滑塊”圖層中的所有關(guān)鍵幀，按快捷鍵“Ctrl+C”復(fù)制關(guān)鍵幀；然后按快捷鍵“Ctrl+V”將復(fù)制的關(guān)鍵幀從當(dāng)前時間開始依次粘貼，對其余圖層執(zhí)行相同操作。同時選中復(fù)制的所有關(guān)鍵幀，右鍵單擊選中關(guān)鍵幀，在彈出的快捷菜單中，選擇“關(guān)鍵幀輔助/時間反向關(guān)鍵幀”，如圖所示。5.2按鈕交互動效案例練習(xí)5-3制作開關(guān)按鈕交互動效步驟

12通過預(yù)覽可以發(fā)現(xiàn)，滑塊在1秒05幀和2秒之間不停移動。單擊“時間軸”面板中的“圖表編輯器”按鈕進(jìn)入圖表編輯器模式，選擇“滑塊”圖層的“位置”屬性，顯示“位置”屬性的速度圖表，選擇1秒05幀處的關(guān)鍵幀，單擊時間線區(qū)域下方的“將選定的關(guān)鍵幀轉(zhuǎn)換為定格”按鈕，使該時間段內(nèi)的速度圖表曲線變?yōu)橹本€，如圖所示。步驟

13最后將文件保存。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型

UI中常見的導(dǎo)航欄的類型有標(biāo)簽式導(dǎo)航、舵式導(dǎo)航、抽屜式導(dǎo)航、宮格式導(dǎo)航和列表式導(dǎo)航，如圖所示。在設(shè)計時，可以根據(jù)頁面內(nèi)容、主次分類等選擇合適的類型。需要注意的是，在設(shè)計導(dǎo)航欄時，相同等級的頁面要盡可能保持一致。標(biāo)簽式導(dǎo)航

舵式導(dǎo)航

抽屜式導(dǎo)航

宮格式導(dǎo)航

列表式導(dǎo)航5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型

1．標(biāo)簽式導(dǎo)航

1）底部標(biāo)簽式導(dǎo)航

底部標(biāo)簽式導(dǎo)航位于界面底部，通常采用文字加圖標(biāo)的方式表現(xiàn)，也有純圖標(biāo)的形式，一般有3～5個選項。該導(dǎo)航模式適合幾個模塊之間相互獨立，使用頻率基本相同，且需要頻繁切換的情況。它會占據(jù)界面中一定高度的空間，減少了界面中的信息承載量。

2）頂部標(biāo)簽式導(dǎo)航

頂部標(biāo)簽式導(dǎo)航位于界面頂部，用于展示同一模塊下不同類型的信息，一般不超過9個選項，通常與底部標(biāo)簽式導(dǎo)航組合使用。除如圖所示的標(biāo)準(zhǔn)樣式外，頂部標(biāo)簽式導(dǎo)航還有滑動樣式和下拉樣式兩種。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型

1．標(biāo)簽式導(dǎo)航

當(dāng)選項數(shù)量較多，且沒有優(yōu)先級區(qū)分時，可以使用滑動樣式，讓用戶通過左右滑動來查看更多的選項，如圖所示。此類導(dǎo)航樣式的缺點是，只能看見可見范圍內(nèi)的幾個選項，其余選項處于不可見的狀態(tài)，因此設(shè)計時需要提供足夠的視覺線索來表明該導(dǎo)航欄可左右滑動。

當(dāng)選項功能很多且沒有那么重要時，可以使用下拉樣式，如圖所示。此類導(dǎo)航樣式也需要有提示信息來向用戶表明點擊按鈕可以展開下拉列表，如在導(dǎo)航文字旁邊添加向下的箭頭。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型

2．舵式導(dǎo)航

當(dāng)選項多到底部標(biāo)簽式導(dǎo)航難以承載時，會在其中間加一個功能按鈕，并將一部分選項放到功能按鈕中，這便是舵式導(dǎo)航，它屬于底部標(biāo)簽式導(dǎo)航的擴展形式。

一般功能按鈕與導(dǎo)航欄中的其他圖標(biāo)相比會更加醒目。當(dāng)用戶點擊功能按鈕時，其中的選項會以滑動、彈射等動效形式展開，在為用戶提供更多選項和功能的同時，有效提高了導(dǎo)航欄的趣味性。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型3．抽屜式導(dǎo)航

抽屜式導(dǎo)航也可稱為“側(cè)邊式導(dǎo)航”，在默認(rèn)情況下處于隱藏狀態(tài)，當(dāng)點擊相應(yīng)圖標(biāo)時會像抽屜一樣從側(cè)邊拉出，如圖所示。

這種導(dǎo)航節(jié)省了主頁面空間，給用戶帶來更沉浸式的閱讀與操作體驗，適合不需要頻繁切換的次要功能。

抽屜式導(dǎo)航的缺點是入口比較隱蔽，增加了用戶的使用成本。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型4．宮格式導(dǎo)航

宮格式導(dǎo)航將所有信息入口全部聚合在頁面中，適合功能較多且功能之間差異較大的應(yīng)用，如圖所示。

此類導(dǎo)航具有較強的延展性，可以無限擴展內(nèi)容，但一級頁面大多為信息入口，具體信息在下一級頁面中，增加了用戶的認(rèn)知成本，且不同入口間缺乏聯(lián)動性。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型5．列表式導(dǎo)航

列表式導(dǎo)航主要針對某個模塊中的具體內(nèi)容進(jìn)行組織分類，并以列表的形式呈現(xiàn)，多用于輔助主導(dǎo)航展示模塊中的內(nèi)容層次，一般不會用在App首頁，如圖所示。

該導(dǎo)航結(jié)構(gòu)清晰、易于用戶理解，當(dāng)列表中的內(nèi)容信息量過大或列表條目過多時，可以加入搜索功能，以方便用戶查找。5.3導(dǎo)航欄交互動效5.3.1常見導(dǎo)航欄的類型5．列表式導(dǎo)航

除上述常見導(dǎo)航類型外，還有輪播導(dǎo)航、瀑布導(dǎo)航和點聚導(dǎo)航等，如圖所示。其中，輪播導(dǎo)航是指將所有信息平鋪在界面中，并通過左右滑動來切換信息的導(dǎo)航。瀑布導(dǎo)航是指在界面中通過上下滾動來切換信息的導(dǎo)航，其表現(xiàn)方式以圖片為主。點聚導(dǎo)航是指點擊按鈕，按鈕中所包含功能信息在周圍展開的導(dǎo)航，其展開方式與舵式導(dǎo)航相似，但不同的是該按鈕的放置沒有固定位置。

輪播導(dǎo)航

瀑布導(dǎo)航

點聚導(dǎo)航

在實際應(yīng)用中，可單獨使用一種導(dǎo)航類型，也可同時使用多種導(dǎo)航類型，但不管如何設(shè)計都要以滿足用戶需求為目的。（1）在設(shè)計導(dǎo)航欄時，可以通過改變顏色或添加圖形等方法，設(shè)置當(dāng)前選項的選中狀態(tài)，使用戶可以一眼識別當(dāng)前所處頁面的位置。（2）首先，導(dǎo)航欄中要盡可能使用通用圖標(biāo)，尤其是純圖標(biāo)類型的導(dǎo)航欄，以傳達(dá)正確的、不易被誤解的信息；其次，包含文本的導(dǎo)航欄要注意文本長度，避免折行，還要注意文本所表達(dá)的信息是否準(zhǔn)確。（3）在繪制導(dǎo)航欄時，要注意選項之間的間距，避免圖標(biāo)和文本之間過于緊湊。（4）導(dǎo)航結(jié)構(gòu)并不是越復(fù)雜越好，相反，用戶需要點擊的導(dǎo)航層級越少，越便于用戶操作，越容易受到用戶青睞。5.3導(dǎo)航欄交互動效5.3.2交互式導(dǎo)航欄的設(shè)計要點

交互式導(dǎo)航欄可以為用戶帶來更好的體驗，但在設(shè)計時不能忽略其本身的功能。接下來講解一些交互式導(dǎo)航欄的設(shè)計要點。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效

頂部標(biāo)簽式導(dǎo)航欄是常用的導(dǎo)航類型，用戶可以通過點擊導(dǎo)航欄中的導(dǎo)航項跳轉(zhuǎn)到其他界面，在點擊導(dǎo)航項時可以給其添加適當(dāng)?shù)慕换有?，以表明?dāng)前導(dǎo)航項的選中狀態(tài)。為了使效果更加真實還要制作出鼠標(biāo)點擊的效果。

本案例制作頂部標(biāo)簽式導(dǎo)航欄交互動效，效果如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效步驟

1

在AfterEffects中新建項目，先選擇“合成/新建合成...”菜單項，在彈出的“合成設(shè)置”對話框中設(shè)置寬度和高度分別為1200和600，幀速率為30，背景顏色為深藍(lán)色“#28303B”，持續(xù)時間為12秒；然后單擊“確定”按鈕新建合成。1．繪制頂部標(biāo)簽式導(dǎo)航欄步驟2在工具欄中選擇矩形工具，設(shè)置填充顏色為白色，描邊為無，在“合成”窗口中按下鼠標(biāo)左鍵并拖動以繪制矩形，將圖層重命名為“導(dǎo)航框”。單擊“導(dǎo)航框”圖層下“內(nèi)容/矩形1/矩形路徑1”屬性組中“大小”屬性右側(cè)的“約束比例”按鈕，使該按鈕為不可見狀態(tài)，然后設(shè)置該屬性值為“720，112”，之后設(shè)置矩形錨點位于其中心位置，并使矩形居中顯示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效步驟

3

在工具欄中選擇橫排文字工具，在“合成”窗口中導(dǎo)航框上單擊鼠標(biāo)左鍵，輸入“首頁”。選中文字，在“字符”面板中設(shè)置其字體為“黑體”，字號為30，顏色為灰色“#919191”，如圖所示。

繪制頂部標(biāo)簽式導(dǎo)航欄在工具欄中選擇向后平移（錨點）工具，在“合成”窗口中按下鼠標(biāo)左鍵并拖動錨點到文本框上邊框的中心，如圖所示；設(shè)置“首頁”圖層“變換”屬性組中的“位置”屬性值為“298，282”，使文字位于導(dǎo)航框中心靠上的位置，如圖所示。1．繪制頂部標(biāo)簽式導(dǎo)航欄案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效步驟

4

選擇“首頁”圖層，按快捷鍵“Ctrl+D”復(fù)制一個圖層副本，雙擊“首頁2”圖層進(jìn)入文本編輯模式，刪除原文字“首頁”，輸入“推薦”。采用相同方法再復(fù)制3個圖層副本，分別輸入“電視劇”“電影”“動漫”。1．繪制頂部標(biāo)簽式導(dǎo)航欄

選擇“電視劇”圖層，在工具欄中選擇向后平移（錨點）

工具，在“合成”窗口中按下鼠標(biāo)左鍵向右拖動錨點到文本框上邊框的中心。同時選中復(fù)制的4個圖層副本，按快捷鍵“P”顯示它們的“位置”屬性，然后分別設(shè)置該屬性的x值為413、537、664、776，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效步驟

5

取消選中圖層，在工具欄中選擇矩形工具，設(shè)置填充顏色為灰色“#918F9C”，描邊為無，在“合成”窗口中按下鼠標(biāo)左鍵并拖動以繪制矩形。將圖層重命名為“菜單按鈕”，單擊“大小”屬性右側(cè)的“約束比例”按鈕，然后設(shè)置該屬性值為“38，3”。

使矩形的錨點位于其中心位置，然后設(shè)置“變換”屬性組中的“位置”屬性值為“904，288”。

選擇“菜單按鈕”圖層并復(fù)制一個圖層副本，設(shè)置復(fù)制圖層“變換”屬性組中“位置”屬性的y值為304。1．繪制頂部標(biāo)簽式導(dǎo)航欄案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效1．繪制頂部標(biāo)簽式導(dǎo)航欄步驟

6

取消選中圖層，使用矩形工具繪制一個“大小”屬性值為“118，3”的矩形，設(shè)置其填充顏色為橙色“#ED7554”，描邊為無，錨點位于其中心位置，“變換”屬性組中的“位置”屬性值為“299，355”，將圖層重命名為“橫條”，至此頂部標(biāo)簽式導(dǎo)航欄就繪制完成了，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

1

首先繪制鼠標(biāo)點擊首頁導(dǎo)航項時，“首頁”文本放大并改變顏色的效果。選擇“首頁”圖層，按快捷鍵“S”顯示其“縮放”屬性，在1秒和1秒12幀處為該屬性添加關(guān)鍵幀，設(shè)置1秒12幀處的屬性值為130%，然后在1秒10幀處添加關(guān)鍵幀并設(shè)置屬性值為135%。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

2

在“效果和預(yù)設(shè)”面板的搜索框輸入“填充”并搜索，然后雙擊“填充”為“首頁”圖層添加“填充”效果，選擇“首頁”圖層下“效果/填充”屬性組中的“顏色”屬性，在1秒和1秒12幀處為該屬性添加關(guān)鍵幀，設(shè)置1秒處的“顏色”屬性為灰色“#919191”，1秒12幀處的“顏色”屬性為橙色“#ED7554”，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

3

制作鼠標(biāo)點擊首頁導(dǎo)航項時橫條漸顯效果。選擇“橫條”圖層，依次按快捷鍵“S”和“Shift+T”顯示其“縮放”屬性和“不透明度”屬性，在1

秒和制作頂部標(biāo)簽式導(dǎo)航欄交互動效1秒12幀處為這兩個屬性添加關(guān)鍵幀。將“時間指示器”移到1秒位置，單擊“縮放”屬性右側(cè)的“約束比例”按鈕，使該按鈕為不可見狀態(tài)，然后設(shè)置其水平方向的屬性值為0%，“不透明度”屬性值也為0%，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

4

制作鼠標(biāo)在0秒開始移動，1秒處點擊首頁導(dǎo)航項，然后在1秒10幀處消失的效果。取消選中圖層，使用橢圓工具繪制一個“大小”屬性值為“32，32”的正圓，設(shè)置其填充顏色為無，描邊顏色為灰色“#838383”，描邊寬度為1，錨點位于其中心位置。將圖層重命名為“鼠標(biāo)”，設(shè)置其“變換”屬性組中的“位置”屬性值為“288，308”，使鼠標(biāo)位于首頁導(dǎo)航項左下方位置。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

5

選擇“鼠標(biāo)”圖層，在0秒、16幀和1秒10幀處為“變換”屬性組中的“位置”屬性添加關(guān)鍵幀，設(shè)置0秒處的屬性值為“226，328”；在0秒、16幀、26幀、1秒和1秒10幀處為“變換”屬性組中的“縮放”屬性添加關(guān)鍵幀，設(shè)置0秒、16幀和26幀處的屬性值為80%，1秒處的屬性值為70%；在0秒、16幀、1秒和1秒10幀處為“變換”屬性組中的“不透明度”屬性添加關(guān)鍵幀，設(shè)置0秒和1秒10幀處的屬性值為0%，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

6

將“時間指示器”移到1秒10幀位置，選擇“鼠標(biāo)”圖層，按快捷鍵“Ctrl+Shift+D”將所選圖層從當(dāng)前位置拆分為兩個圖層。選擇“鼠標(biāo)2”圖層，按快捷鍵“U”顯示其上已添加的關(guān)鍵幀，同時選中該圖層上的所有關(guān)鍵幀，按下鼠標(biāo)左鍵向右拖動關(guān)鍵幀，使第一個關(guān)鍵幀位于2秒位置。

★提示：接下來制作鼠標(biāo)點擊推薦導(dǎo)航項時，“推薦”文本放大并改變顏色，下方“橫條”由“首頁”文本下方移至“推薦”文本下方，同時“首頁”文本恢復(fù)原狀的效果。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

6設(shè)置2秒處的“位置”屬性值為“288，308”，2秒16幀和3秒10幀處的“位置”屬性值為“408，306”，將“時間指示器”移到2秒位置，按快捷鍵“Alt+[”，將圖層時間線入點修剪到當(dāng)前時間，如圖所示?！笆髽?biāo)2”圖層的關(guān)鍵幀設(shè)置案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

7將“時間指示器”移到3秒位置（鼠標(biāo)進(jìn)行點擊的位置），選擇“首頁”圖層中已添加的關(guān)鍵幀，按快捷鍵“Ctrl+C”復(fù)制關(guān)鍵幀，同時選中“首頁”圖層和“推薦”圖層，按快捷鍵“Ctrl+V”將復(fù)制的關(guān)鍵幀從當(dāng)前位置開始依次粘貼，此時“首頁”和“推薦”文本從3秒處開始放大并改變顏色。

首先選中“首頁”圖層中復(fù)制的關(guān)鍵幀，右鍵單擊所選關(guān)鍵幀，在彈出的快捷菜單中選擇“關(guān)鍵幀輔助/時間反向關(guān)鍵幀”；然后選中“首頁”圖層中3秒12幀處的關(guān)鍵幀，按下鼠標(biāo)左鍵向左拖動關(guān)鍵幀到3秒08幀處，制作“首頁”文本恢復(fù)原狀的效果，如圖所示見下頁。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效鼠標(biāo)點擊推薦導(dǎo)航項時“推薦”和“首頁”圖層的關(guān)鍵幀設(shè)置案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

8選擇“橫條”圖層，在3秒和3秒12幀處為“變換”屬性組中的“位置”屬性添加關(guān)鍵幀，設(shè)置3秒12幀處屬性的x值為412；在3秒、3秒05幀和3秒12幀處為“變換”屬性組中的“不透明度”屬性添加關(guān)鍵幀，設(shè)置3秒05幀處的屬性值為50%，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

9接下來制作鼠標(biāo)點擊電視劇導(dǎo)航項時的動效。參照步驟6的方法，首先在“鼠標(biāo)2”圖層最后一個關(guān)鍵幀的位置拆分該圖層；然后拖動“鼠標(biāo)3”圖層上的關(guān)鍵幀到4秒處，使該圖層的第一個關(guān)鍵幀位于“鼠標(biāo)2”圖層最后一個關(guān)鍵幀的后20幀處。將時間線入點修剪到4秒，最后設(shè)置“位置”屬性上關(guān)鍵幀的屬性值，實現(xiàn)鼠標(biāo)點擊電視劇導(dǎo)航項的動效，關(guān)鍵幀設(shè)置如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

9復(fù)制“推薦”圖層上的所有關(guān)鍵幀，粘貼到“電視劇”圖層中，使粘貼的第一個關(guān)鍵幀位于5秒處，制作“電視劇”文本放大并改變顏色的效果。復(fù)制“首頁”圖層3秒到3秒08幀之間的關(guān)鍵幀（“首頁”文本恢復(fù)原狀的關(guān)鍵幀），粘貼到“推薦”圖層中，使粘貼的第一個關(guān)鍵幀與位于5秒處，制作“推薦”文本恢復(fù)原狀的效果，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

10制作橫條從“推薦”文本下方移到“電視劇”文本下方的動效。首先將“時間指示器”移到5秒位置，選中步驟8添加的所有關(guān)鍵幀，按快捷鍵“Ctrl+C”復(fù)制關(guān)鍵幀；然后按快捷鍵“Ctrl+V”將復(fù)制的關(guān)鍵幀從當(dāng)前位置開始依次粘貼，并設(shè)置5秒12幀處“位置”屬性的x值為536。

制作橫條移到“電視劇”文本下方后拉長的效果。在5秒和5秒12幀處為“橫條”圖層“變換”屬性組中的“縮放”屬性添加關(guān)鍵幀，設(shè)置5秒12幀處水平方向的屬性值為125%，如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

11參照步驟9的方法制作鼠標(biāo)點擊電影導(dǎo)航項時的動效。注意鼠標(biāo)圖層第一個關(guān)鍵幀的位置位于之前鼠標(biāo)圖層最后一個關(guān)鍵幀的后20幀處。在制作“電影”文本放大并改變顏色，同時“電視劇”文本恢復(fù)原狀的效果時，直接將相應(yīng)的關(guān)鍵幀復(fù)制粘貼到鼠標(biāo)進(jìn)行點擊時的位置即可，相應(yīng)圖層的關(guān)鍵幀設(shè)置如圖所示。案例練習(xí)5-4制作頂部標(biāo)簽式導(dǎo)航欄交互動效5.3導(dǎo)航欄交互動效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動效步驟

11選擇“橫條”圖層，復(fù)制該圖