本文主要說的是指向性動效。什么是指向性動效，是指能夠有效的描述物體之間的邏輯關系，同時通過視覺效果，可視化的描述用戶操作時候當前的狀態(tài)，用戶可以很清晰的感受到物體與物體之間的位置或者層級關系。

指向型動效的分類

1.滑動

信息列表會跟隨著用戶的交互手勢而動，然后卡片到相應的位置上，保持整齊感，它屬于指向型動畫，物體的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉(zhuǎn)場，有效幫助用戶清理頁面層級的排列情況。

2.擴大

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

3.最小化

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

4.切換對象

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

5.展開推疊

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

6.翻頁

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

7.添加到列表

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

8.導航標簽轉(zhuǎn)換

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

9.融合

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

10.滾動

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

11.平移

當一張圖片在我們有限的屏幕里沒有辦法看完的時候，會使用這樣的效果。除了放大效果，這樣的平移還可以加上動效配合一些功能使用。

12.保存指示器

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

適合場景

1.滑動效果

適合場景：當你設計的元素需要導航以列表方式呈現(xiàn)的時候可以使用滑動效果。例如一些明星的選擇，款式的選擇，適合用這樣的方式呈現(xiàn)。

2.彈出效果

適合場景：當你設計的元素是需要和用戶進行單一交互的時候。例如點開圖片查看詳情，讓轉(zhuǎn)場過渡更自然。

3.最小化

適合場景：當用戶想要最小化某個元素的時候。例如搜索、添加快捷按鈕的點擊事件，符合從哪來到哪去的原理。

4.切換對象

適合場景：當用戶在元素之間切換。滑動效果相對來說比較單一和常見，使用動效切換可以讓用戶產(chǎn)生眼前一亮的效果，例如一些商品款式的切換，就可以使用這樣的效果。

5.展開推疊

適合場景：當用戶打開一堆功能選項的時候。例如一個功能里面隱藏了好幾個二級功能時，就可以使用這樣的效果，利于用戶引導。

6.翻頁效果

適合場景：當用戶進行一些翻頁操作時。例如看小說，讀長篇文章，使用這樣的效果會更貼近現(xiàn)實生活，引起用戶共鳴。

7.添加到列表

適合場景：當用戶需要進行新操作時。有一些頁面呈現(xiàn)的是將新的事件替換掉舊的，而使用這樣的動效可以讓用戶更清晰的知道自己做了什么，例如點贊，打賞。

8.導航標簽轉(zhuǎn)換

適合場景：同一層級頁面之間的切換。例如切換導航，或者進度流程。使用動效可以讓用戶更了解架構，是標簽而不是按鈕的感覺。

9.融合效果

適合場景：當用戶操作一個功能點時可能會處罰其他功能。例如運動app開始健身或者跑步的時候，點擊開始后會出現(xiàn)暫定或是結(jié)束。

10.滾動

適合場景：當用戶垂直或者水平移動頁面時。例如列表，圖片，很多場景下都可以使用，也因此過于平凡，可以加一些動效讓頁面活起來。

11.平移

適合場景：移動大于界面的的頁面。例如地圖，可以配合其他功能滾動產(chǎn)生平移效果。

12.保存指示器

適合場景：當用戶添加書簽、下載、保存，加入等行為的時候使用。

作者：蔣文結(jié)

公眾號：UI頭條