指向性動效是指能夠有效的表達頁面或者內容之間的邏輯關系，通過視覺效果，直接清晰的展示用戶操作時當前的狀態。用戶通過指向性動效，能很清楚頁面或者內容的位置或者層級關系。

下面我們分享12種指向性動效和它們各自適用的場景供網頁設計師參考。(效果太好，請在WIFI下觀看)

1.滑動的效果

信息列表跟隨用戶的交互手勢而動，然后再回到相應的位置上，保持頁面整齊，這種指向動效屬于指向型動畫，內容的滑動取決于用戶是用那種手勢滑動的。它的作用就是通過指向型轉場，有效幫助用戶理清頁面內容的層級排列情況。

適用的場景

當你設計的元素需要導航以列表方式呈現的時候可以使用滑動效果，例如一些人物的選擇，款式的選擇，適合用這樣的方式呈現。

2.擴大彈出的效果

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

適合的場景：

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

3.最小化的效果

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

適合的場景：

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

4.切換對象的效果

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

適合的場景：

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

5.展開推疊的效果

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

適合的場景：

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

6.翻頁的效果

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

適合的場景：

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

7.添加到列表的效果

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

適合的場景：

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

8.導航標簽轉換的效果

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

適合的場景：

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

9.融合的效果

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

適合的場景：

當用戶操作一個功能點時可能會處罰其他功能。例如運動app開始健身或者跑步的時候，點擊開始后會出現暫定或是結束。

10.滾動的效果

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

適合的場景：

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

11.平移的效果

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

適合的場景：

移動大于界面的的頁面。例如地圖，可以配合其他功能滾動產生平移效果。

12.保存指示器的效果

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

適合的場景：

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

總結

很多動效無非是多種動效的結合，所以研究這些基礎的指向性動效是很有價值。希望通過上面分享的12種指向性動效能夠幫助網頁設計師在今后的設計中能舉一反三，做出功能性更強的動效。