在產(chǎn)品設(shè)計(jì)中，動畫和運(yùn)動的重要性不可低估。正如尼爾森·諾曼集團(tuán)(Nielsen Norman Group)所強(qiáng)調(diào)的，它們不僅吸引注意力，還增強(qiáng)用戶的愉悅感，讓產(chǎn)品顯得新鮮和現(xiàn)代化。當(dāng)動畫足夠復(fù)雜時，它可以為用戶提供清晰的反饋，使界面更具直觀性。
特別是在產(chǎn)品設(shè)計(jì)中，過渡動畫至關(guān)重要，因?yàn)樗鼈兛梢云椒€(wěn)地引導(dǎo)用戶從一個階段過渡到下一個。它們使產(chǎn)品更容易使用，更有吸引力，連接不同的步驟，提高整體產(chǎn)品質(zhì)量。
由于動畫和運(yùn)動起著至關(guān)重要的作用，產(chǎn)品團(tuán)隊(duì)都意識到它們的重要性。設(shè)計(jì)師會將它們呈現(xiàn)為原型，以在發(fā)布前演示和測試他們的產(chǎn)品。然而，設(shè)計(jì)完美的動畫是一項(xiàng)復(fù)雜的工作。挑戰(zhàn)在于找到細(xì)微和強(qiáng)調(diào)之間的平衡。雖然有許多在線資源和文章深入探討動畫的復(fù)雜性，但令人驚訝的是，很多產(chǎn)品在成功實(shí)施動畫方面還存在不足。
本文專注于過渡動畫。其目標(biāo)是展示過渡動畫的原則，并提供基礎(chǔ)、緊湊且可以立即應(yīng)用于任何人設(shè)計(jì)過程中的示例。這些見解并非板上釘釘?shù)囊?guī)則，而是新產(chǎn)品創(chuàng)建的指導(dǎo)性考慮因素。請將其視為對過渡動畫藝術(shù)的簡明實(shí)用指南。
實(shí)現(xiàn)更好的過渡動畫六個原則：
1.淡入淡出的透明度
2.縮放以增加活力
3.保持一致的方向性
4.平衡速度
5.確定優(yōu)先級、排序和分組
6.建立空間感
1.淡入淡出的透明度
淡入/淡出
設(shè)置淡入淡出的透明度是一項(xiàng)基本但強(qiáng)大的原則。僅使用這一技巧就可以產(chǎn)生顯著的影響。當(dāng)從當(dāng)前屏幕切換到下一個屏幕時，可以通過淡出無關(guān)元素并讓下一部分漸入來提供簡潔的反饋?？梢酝ㄟ^在任何設(shè)計(jì)/原型工具中將透明度值從100變?yōu)?（或從0變?yōu)?00）來實(shí)現(xiàn)這一效果。這種過渡效果有助于提高用戶體驗(yàn)，使界面切換更加流暢和自然。
圖1-1
圖1-1
切換過渡效果對比。突然的過渡效果感覺不連貫（見左圖），而添加透明度效果則更加流暢和吸引人（見右圖）。
圖1-2
圖1-2
菜單打開的對比。與左圖所示的突然自下而上地裁切菜單不同，使用淡入動畫提供了更加溫和和流暢的過渡，如右圖所示。這增強(qiáng)了用戶與菜單的互動。
圖1-3
圖1-3
這是一個常見的示例，使用淡入淡出動畫來過渡從一個狀態(tài)到另一個狀態(tài)。此外，它還使用了縮放和垂直移動進(jìn)行動畫處理，這將在接下來的原則中詳細(xì)介紹。
作為一個高級用例，這種技術(shù)可以在兩個屏幕層或序列之間實(shí)現(xiàn)無縫的互動。通過使用這種方法，場景過渡對用戶來說幾乎是不可察覺的。許多成功的產(chǎn)品采用這種策略以提升用戶體驗(yàn)。
圖1-4
圖1-4
在切換到下一個狀態(tài)時，“個人資料視圖”層平滑地移動。下圖中可以找到詳細(xì)的分解說明。
圖1-5
圖1-5
這種流暢的過渡是通過利用兩個“個人資料視圖”層（小和大）實(shí)現(xiàn)的。通過在這兩個層之間加入縮放效果，并在它們之間平滑地淡入淡出，過渡看起來就像一個單一的標(biāo)題層無縫地連接了兩個屏幕狀態(tài)。
2.使用縮放增添生動感
漸變縮放--縮放效果的常用用法
縮放引入了過渡中的動態(tài)、生動感和方向性元素。例如，在切換到下一個屏幕時，可以將現(xiàn)有的組件和界面從100%縮小到90%，同時附加淡出效果。例如，在顯示疊加層時，可以將當(dāng)前屏幕縮小。這給人一種疊加層從較高層滑動而來的印象，突顯了狀態(tài)之間的連接性?？梢愿鶕?jù)需要上下調(diào)整縮放值。通常，縮放與第一個原則一起使用：淡入/淡出。
圖2-1
圖2-1
在淡入淡出效果中加入縮放效果使物體呈現(xiàn)出更加動態(tài)和生動的存在感，正如這個示例所演示的那樣。這個過渡具有一種優(yōu)雅的動態(tài)，就好像界面從頂部到底部滑動進(jìn)出一樣。
圖2-2（1）
圖2-2（2）
圖2-2
這里是一些在文本層上使用縮放效果的示例。
圖2-2（1）展示了如何使用縮放和輕微淡出來突出活動和非活動層。
圖2-2（2）還展示了如何通過縮放文本和卡片層來實(shí)現(xiàn)生動的過渡效果。
圖2-3（1）
圖2-3（2）
圖2-3
這兩個示例展示了如何通過縮放過渡來增強(qiáng)較大的元素。
圖2-3（1）在音樂應(yīng)用程序中，可以在專輯封面過渡時看到常見的縮放效果。隨著音樂播放器疊加層縮小，專輯封面平穩(wěn)地縮小到縮略圖大小。
圖2-3（2）在打開疊加層時，還可以將其縮小，顯示前一個屏幕的輕微突出，以暗示背景中有一層。這是iOS的默認(rèn)疊加層樣式。
3.保持一致的方向性
產(chǎn)品中的任何移動、縮放或動作都自然地暗示了一個方向。這表明了產(chǎn)品的上下聯(lián)動，是使過渡看起來一致的強(qiáng)大方式。重要的是記錄詳細(xì)的方向信息，比如元素是向上還是向下移動，疊加層是從哪一側(cè)進(jìn)入等等。設(shè)計(jì)良好的產(chǎn)品會保持明確和一致的方向性，與其互動相匹配。
圖3-1
圖3-1
（左）在典型的社交媒體應(yīng)用程序中，使用水平導(dǎo)航切換瀏覽選項(xiàng)是一種常見行為。這樣，可以滑動或點(diǎn)擊切換視圖。
（右）另一方面，這個應(yīng)用程序具有稍有不同的垂直導(dǎo)航布局。在這種情況下，上下滑動是切換瀏覽選項(xiàng)的方式。
圖3-2
圖3-2
在這兩個應(yīng)用程序示例中，當(dāng)滾動瀏覽帖子時，它們的方向性是相反的。
（左）正如預(yù)期的那樣，可以通過上下滑動瀏覽帖子。
（右）考慮到這個應(yīng)用程序采用垂直導(dǎo)航，瀏覽帖子將是水平操作。
圖3-3
圖3-3
即使在打開菜單或其他相關(guān)的過渡時，也可以始終暗示應(yīng)用程序的總體方向性。
（左）打開菜單意味著應(yīng)用程序的垂直瀏覽體驗(yàn)。
（右）菜單元素從左到右出現(xiàn)，表示應(yīng)用程序的水平瀏覽體驗(yàn)。
4.平衡速度
適當(dāng)?shù)膭赢嬎俣忍峁┝藢?shí)際的反饋和有意義的體驗(yàn)。
過渡速度過慢可能會讓用戶感到厭煩，而過快的過渡則缺乏意義。這就是為什么平衡速度非常重要。根據(jù)一些文章，速度從100毫秒到500毫秒是理想的，并適用于大多數(shù)情況。可以將其作為指導(dǎo)原則，但需要根據(jù)實(shí)際產(chǎn)品進(jìn)行自定義。這是創(chuàng)建與其他產(chǎn)品不同的獨(dú)特產(chǎn)品的另一種方式。
圖4-1
圖4-1
快速操作，比如這個示例中的切換滑塊，非常重要，因?yàn)樗枰m當(dāng)?shù)乃俣葋頌槿藗兲峁┓答仭Ｓ捎谶@是頁面內(nèi)過渡，所以它應(yīng)該比頁面之間的動畫稍快一些。
圖4-2
圖4-2
對于具有許多元素的頁面到頁面的過渡，需要提供一些上下文，以使人們不感到與每個狀態(tài)斷開連接。這種過渡可能會比頁面內(nèi)的過渡稍慢一些。但這并不一定意味著要減慢動畫速度。適當(dāng)?shù)乃俣热匀恢陵P(guān)重要，以確保產(chǎn)品不會感到緩慢。
5.確定優(yōu)先級、排序和分組
圖5-1
圖5-1
如果屏幕上的所有元素同時進(jìn)行動畫，那么它會顯得繁忙和復(fù)雜。這就是為什么它采用了按重要性優(yōu)先級排序的級聯(lián)過渡。在這個應(yīng)用程序中，主要元素應(yīng)該是“個人資料視圖”和支持圖表，因?yàn)檫@些元素存在于兩個狀態(tài)中。然后是次要元素，它們比主要元素不那么重要，可以隨后進(jìn)行過渡。
圖5-2
圖5-2
在折疊播放器視圖時，音樂應(yīng)用程序的過渡似乎較為復(fù)雜?？梢酝ㄟ^簡單地專注于封面和標(biāo)題層來實(shí)現(xiàn)無縫的過渡。在下圖中看到更詳細(xì)的分解。
圖5-3
圖5-3
（左）這個動畫展示了播放器疊加層如何最小化。如你所見，現(xiàn)有的音樂標(biāo)題和播放器元素通過向下滑動到底部來簡單地消失。
（右）在屏幕最小化后，新的標(biāo)題層出現(xiàn)。這樣就不會分散注意力，不會影響播放器和封面的縮放動畫。
6.建立空間感
盡管用戶的互動區(qū)域限制于設(shè)備屏幕，但設(shè)計(jì)可見框架之外的“無形”空間至關(guān)重要。建立空間感有助于用戶形成對產(chǎn)品的心理模型，提升他們的體驗(yàn)。通常，設(shè)計(jì)師使用多個功能性層來為平面屏幕引入深度和空間感。
圖6-1（1）
圖6-1（1）
圖6-1
這張圖示詳細(xì)展示了音樂應(yīng)用程序的上下互動。它描述了該應(yīng)用程序中的功能層是如何組成的，以及當(dāng)播放器視圖折疊并顯示最小化視圖的概覽屏幕時，過渡是如何發(fā)生的。
圖6-2（1）
圖6-2（2）
圖6-2
這個示例分為兩部分。首先，它展示了這個社交媒體應(yīng)用程序屏幕的多個層是如何構(gòu)建的。其次，評論疊加層從底部滑入，同時現(xiàn)有屏幕縮小并引入了深色背景層——這是應(yīng)用程序中最底層的層。
除此之外，所有具有方向性移動的層和元素都屬于空間性。以下示例具有相同的互動和層元素，但使用不同的空間模型來為產(chǎn)品體驗(yàn)創(chuàng)造不同的感覺。
圖6-3
圖6-3
正如方向性原則所強(qiáng)調(diào)的，這兩個應(yīng)用程序具有不同的導(dǎo)航結(jié)構(gòu)。通過超越屏幕區(qū)域并理解過渡和移動的起源，人們可以掌握總體空間結(jié)構(gòu)。構(gòu)建這樣的空間框架大大豐富了產(chǎn)品用戶體驗(yàn)的獨(dú)特性。
在我們探索了復(fù)雜的過渡動畫世界之后，顯而易見的是，看似微不足道的細(xì)節(jié)對用戶體驗(yàn)有著重大影響。這里提供的示例和原則是一個基礎(chǔ)，但可以從與現(xiàn)有的應(yīng)用程序和產(chǎn)品日?；又屑橙§`感。通過個人經(jīng)驗(yàn)，可以學(xué)會打造自己獨(dú)特的動畫風(fēng)格，為用戶提供獨(dú)特的體驗(yàn)。掌握這些原則，嘗試日常遇到的事物，看著創(chuàng)作逐漸展現(xiàn)出自己的生命力。
精選文章：