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

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

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

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

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

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

5.1圖標(biāo)動(dòng)效5.1.1初識(shí)圖標(biāo)動(dòng)效

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

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

5.1圖標(biāo)動(dòng)效5.1.1初識(shí)圖標(biāo)動(dòng)效

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

和“垂直對(duì)齊”按鈕

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

步驟13

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5

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

6

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

7

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

8

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

9

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

10

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

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

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

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

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

舵式導(dǎo)航

抽屜式導(dǎo)航

宮格式導(dǎo)航

列表式導(dǎo)航5.3導(dǎo)航欄交互動(dòng)效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個(gè)選項(xiàng)。該導(dǎo)航模式適合幾個(gè)模塊之間相互獨(dú)立，使用頻率基本相同，且需要頻繁切換的情況。它會(huì)占據(jù)界面中一定高度的空間，減少了界面中的信息承載量。

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

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

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

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

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

2．舵式導(dǎo)航

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

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

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

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

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

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

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

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

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

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

輪播導(dǎo)航

瀑布導(dǎo)航

點(diǎn)聚導(dǎo)航

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

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

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

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

1

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

3

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

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

4

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

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

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

5

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

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

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

6

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

1

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

2

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

3

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

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

4

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

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)航欄交互動(dòng)效5.3導(dǎo)航欄交互動(dòng)效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動(dòng)效步驟

6

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

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

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

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

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

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)航欄交互動(dòng)效5.3導(dǎo)航欄交互動(dòng)效2．制作頂部標(biāo)簽式導(dǎo)航欄交互動(dòng)效步驟

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

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

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

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

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

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