指向性動(dòng)效是指能夠有效的表達(dá)頁(yè)面或者內(nèi)容之間的邏輯關(guān)系，通過(guò)視覺(jué)效果，直接清晰的展示用戶操作時(shí)當(dāng)前的狀態(tài)。用戶通過(guò)指向性動(dòng)效，能很清楚頁(yè)面或者內(nèi)容的位置或者層級(jí)關(guān)系。

下面我們分享12種指向性動(dòng)效和它們各自適用的場(chǎng)景供網(wǎng)頁(yè)設(shè)計(jì)師參考。(效果太好，請(qǐng)?jiān)赪IFI下觀看)

1.滑動(dòng)的效果

信息列表跟隨用戶的交互手勢(shì)而動(dòng)，然后再回到相應(yīng)的位置上，保持頁(yè)面整齊，這種指向動(dòng)效屬于指向型動(dòng)畫(huà)，內(nèi)容的滑動(dòng)取決于用戶是用那種手勢(shì)滑動(dòng)的。它的作用就是通過(guò)指向型轉(zhuǎn)場(chǎng)，有效幫助用戶理清頁(yè)面內(nèi)容的層級(jí)排列情況。

適用的場(chǎng)景

當(dāng)你設(shè)計(jì)的元素需要導(dǎo)航以列表方式呈現(xiàn)的時(shí)候可以使用滑動(dòng)效果，例如一些人物的選擇，款式的選擇，適合用這樣的方式呈現(xiàn)。

2.擴(kuò)大彈出的效果

頁(yè)面中的內(nèi)容會(huì)從縮略圖轉(zhuǎn)化為全屏視圖（一般這個(gè)內(nèi)容的中心點(diǎn)也會(huì)跟隨移動(dòng)到屏幕的中央）。反向動(dòng)效就是內(nèi)容從全屏視圖轉(zhuǎn)換為縮略圖。它的優(yōu)點(diǎn)是能清楚的告訴用戶點(diǎn)擊的地方被放大了。

適合的場(chǎng)景：

當(dāng)你設(shè)計(jì)的元素是需要和用戶進(jìn)行單一交互的時(shí)候，例如點(diǎn)開(kāi)圖片查看詳情，讓轉(zhuǎn)場(chǎng)過(guò)渡更自然。

3.最小化的效果

頁(yè)面元素點(diǎn)擊之后縮小，然后移動(dòng)到屏幕上相應(yīng)的位置，相反的動(dòng)效就是擴(kuò)大，從縮略圖重新變?yōu)槿痢＿@樣做的好處是能夠清楚的告訴用戶，最小化的元素可以在哪里被找到，如果沒(méi)有動(dòng)效引導(dǎo)，可能用戶需要花時(shí)間去尋找。

適合的場(chǎng)景：

當(dāng)用戶想要最小化某個(gè)元素的時(shí)候，例如搜索、添加快捷按鈕的點(diǎn)擊事件，符合從哪來(lái)到哪去的原理。

4.切換對(duì)象的效果

當(dāng)前頁(yè)面移動(dòng)到后面，新的頁(yè)面移動(dòng)到前面，這樣能夠清楚解釋頁(yè)面之間是進(jìn)行切換的，不會(huì)顯得轉(zhuǎn)換的太突兀和莫名其妙。

適合的場(chǎng)景：

當(dāng)用戶在元素之間切換。滑動(dòng)效果相對(duì)來(lái)說(shuō)比較單一和常見(jiàn)，使用動(dòng)效切換可以讓用戶產(chǎn)生眼前一亮的效果，例如一些商品款式的切換，就可以使用這樣的效果。

5.展開(kāi)推疊的效果

堆疊在一起的元素被展開(kāi)。能夠清楚的告訴用戶每個(gè)元素的排列情況，從哪里來(lái)到哪里去，也顯得更加有趣。

適合的場(chǎng)景：

當(dāng)用戶打開(kāi)一堆功能選項(xiàng)的時(shí)候。例如一個(gè)功能里面隱藏了好幾個(gè)二級(jí)功能時(shí)，就可以使用這樣的效果，利于用戶引導(dǎo)。

6.翻頁(yè)的效果

當(dāng)用戶實(shí)施滑動(dòng)手勢(shì)的時(shí)候，出現(xiàn)像現(xiàn)實(shí)生活中翻頁(yè)一般的效果。真正動(dòng)效轉(zhuǎn)場(chǎng)也能夠清晰的展現(xiàn)列表層級(jí)的信息架構(gòu)，并且模仿現(xiàn)實(shí)生活中的動(dòng)效更加富有情感。

適合的場(chǎng)景：

當(dāng)用戶進(jìn)行一些翻頁(yè)操作時(shí)。例如看小說(shuō)，讀長(zhǎng)篇文章，使用這樣的效果會(huì)更貼近現(xiàn)實(shí)生活，引起用戶共鳴。

7.添加到列表的效果

新的元素加入到原有的列表中，舊的元素被推開(kāi)而不是替換，從而有現(xiàn)實(shí)中騰出位置的感覺(jué)，這種轉(zhuǎn)場(chǎng)效果能夠清楚的展現(xiàn)列表重新排列的過(guò)程，讓用戶知道新舊信息的位置，不會(huì)產(chǎn)生迷惑。

適合的場(chǎng)景：

當(dāng)用戶需要進(jìn)行新操作時(shí)。有一些頁(yè)面呈現(xiàn)的是將新的事件替換掉舊的，而使用這樣的動(dòng)效可以讓用戶更清晰的知道自己做了什么，例如點(diǎn)贊，打賞。

8.導(dǎo)航標(biāo)簽轉(zhuǎn)換的效果

根據(jù)內(nèi)容的轉(zhuǎn)換，按鈕相應(yīng)的在視覺(jué)上做出改變，而標(biāo)題是隨著內(nèi)容移動(dòng)而改變的，這樣能夠清晰的展示標(biāo)簽和內(nèi)容之間的從屬關(guān)系，讓用戶能夠清晰理解頁(yè)面之間的架構(gòu)。

適合的場(chǎng)景：

同一層級(jí)頁(yè)面之間的切換。例如切換導(dǎo)航，或者進(jìn)度流程。使用動(dòng)效可以讓用戶更了解架構(gòu)，是標(biāo)簽而不是按鈕的感覺(jué)。

9.融合的效果

元素會(huì)根據(jù)用戶的點(diǎn)擊交互而分離或者是結(jié)合，用戶可以感受到元素與元素之間的關(guān)聯(lián)，比起直接切換，顯然用融合動(dòng)畫(huà)更加有趣。

適合的場(chǎng)景：

當(dāng)用戶操作一個(gè)功能點(diǎn)時(shí)可能會(huì)處罰其他功能。例如運(yùn)動(dòng)app開(kāi)始健身或者跑步的時(shí)候，點(diǎn)擊開(kāi)始后會(huì)出現(xiàn)暫定或是結(jié)束。

10.滾動(dòng)的效果

根據(jù)用戶的手勢(shì)進(jìn)行滾動(dòng)操作，非常使用與列表信息的查看。這個(gè)交互方式是我們用的最頻繁的，仙子我們也可以加入一些動(dòng)效使這個(gè)交互更加的有趣和豐富。

適合的場(chǎng)景：

當(dāng)用戶垂直或者水平移動(dòng)頁(yè)面時(shí)。例如列表，圖片，很多場(chǎng)景下都可以使用，也因此過(guò)于平凡，可以加一些動(dòng)效讓頁(yè)面活起來(lái)。

11.平移的效果

當(dāng)一張圖片在我們有限的屏幕里沒(méi)有辦法看完的時(shí)候，會(huì)使用這樣的效果。除了放大效果，這樣的平移還可以加上動(dòng)效配合一些功能使用。

適合的場(chǎng)景：

移動(dòng)大于界面的的頁(yè)面。例如地圖，可以配合其他功能滾動(dòng)產(chǎn)生平移效果。

12.保存指示器的效果

用戶一旦進(jìn)行保存、下載某個(gè)物體，物體會(huì)復(fù)制一份，同時(shí)縮小、移動(dòng)到保存指示器中。這樣可以提示用戶下載或者是收藏的內(nèi)容在哪里可以找到，能夠告訴用戶對(duì)象已經(jīng)被添加。

適合的場(chǎng)景：

當(dāng)用戶添加書(shū)簽、下載、保存，加入等行為的時(shí)候使用。

總結(jié)

很多動(dòng)效無(wú)非是多種動(dòng)效的結(jié)合，所以研究這些基礎(chǔ)的指向性動(dòng)效是很有價(jià)值。希望通過(guò)上面分享的12種指向性動(dòng)效能夠幫助網(wǎng)頁(yè)設(shè)計(jì)師在今后的設(shè)計(jì)中能舉一反三，做出功能性更強(qiáng)的動(dòng)效。