原作者：Pablo Stanley 原文連結
將選項卡種的內容做成可滑動的
- 好的動效將內容從一個標籤頁淡出，再淡入到另一個標籤頁；
- 優秀的動效讓頁面內容在不同標籤之間移動，能夠展現過度時的連續性。
當你設計選項卡或者彈出選單這種互動時，試著將內容的位置與開啟它的動作相關聯。通過這種方式，你可以將你的內容和內容的位置都做成可視動畫。做這種頁面時，也加上一個可以在不同內容之間切換的滑動手勢。
關聯卡片上的相關元素
左邊的卡片開啟一個新頁面是滑上來的； 右邊則是擴充套件了卡片並使其佔滿螢幕。
- 好的動畫展示資訊詳情頁時使用左滑或者上劃的方式；
- 優秀的動畫會在有共同資訊的兩種狀態之間建立聯絡。
當給兩種不同的狀態的過渡做動畫時，看看這兩種狀態之間有沒有共有的元素，如果有則可以在動畫中體現兩者的聯絡。在InVision Studio中，兩個相關聯的頁面有重複的元素時，當你建立一個Motion的時候，系統會自動在兩個元素之間建立關聯動畫。這讓建立動畫原型變得輕而易舉。
在內容中使用瀑布流效果
左邊的卡片通過滑動和淡入的效果顯示; 右邊的卡片在同樣動畫的基礎上，讓每個卡片都有短時間的延遲。
- 當卡片進入螢幕時，好的動畫改變它的位置和透明度；
- 優秀的動畫則會快速蔓延每組元素。
要達到瀑布流的效果，可以將每個動畫元素都保持相同的動畫速度以及持續時長，並對其按序設定一定的延時。要將瀑布流的形式應用在組裡，不能應用在單獨的元素上。保持動畫的快速簡介，谷歌的提醒功能裡，每個元素出現的間隔不超過20毫秒。點選動畫裡的瀑布流形式檢視更多案例。
讓內容推開其他元素
左邊的動畫中，動畫效果直接出線在其他內容上面。右邊的動畫中，隨著動畫的擴大，其他內容被推開了。
- 好的動畫直接在畫面中移動和展示元素；
- 優秀的動畫則會展示出動畫對其周圍元素的影響。
讓內容與周圍的環境相互動。這意味著讓內容吸引或者趕走它周圍的元素。
讓選單從按鈕中出現
左圖中選單直接從下面滑入；右圖的選單則從開啟它的按鈕中擴充套件出來。
- 好的動畫選單出現的方向與開啟它的按鈕的方向保持一致；
- 優秀的動畫選單從開啟它的按鈕中展開。
用按鈕展示不同的狀態
左邊的動畫使用文字表明狀態；右邊的動畫則直接使用按鈕展示不同狀態。
- 好的互動將活動狀態用文字方式展示在按鈕旁邊；
- 優秀的互動則直接用按鈕展示不同狀態。
試著用按鈕本身展示不同狀態。例如：用旋轉菊花或者載入動畫代替CTA；或者在按鈕背景中加一個動畫表明程式。具體方式取決於你，核心就是利用好已有的使用者已經與之互動的空間。如果你使用按鈕顏色去確認成功狀態，對於使用者來說就是一個大彩蛋。
將使用者的注意力引導到重要的東西上
左圖中的案例使用顏色和位置讓元素突出顯示；右圖中則使用了一個簡單的小動畫吸引使用者的注意力。
- 好的設計使用顏色、尺寸和位置，來突出需要格外引起使用者注意並觸發使用者行為的重點內容；
- 優秀的設計使用動畫引導使用者將注意力放在重要的地方，並且不會打擾到使用者。
當使用者需要做出一些重要的操作時，試著將這些操作的按鈕以動畫的方式展現，以吸引使用者的注意力。可以做一些簡單細微的動畫並逐漸增加強度，並根據行動的重要性改變按鈕的大小、顏色和動畫的速度。記住只在最重要的操作上使用動畫，因為你用的動畫越多，它就變得越不重要並且會打擾到使用者。