對于普通用戶來說，是關注一個應用本身、還是更關注這個應用的元素從A點到B點轉變的過程，這種選擇往往有些難。謹慎編排的動畫可以在有多步操作的 過程中有效地引導用戶的注意力；在版面變化或元素重組時避免造成困惑；提高用戶體驗的整體美感。動畫設計不僅應當優美，更應當服務于功能。

視覺連貫性

在兩個視覺效果不同的頁面之間的轉場應該平滑、輕快，更重要的是使用戶感覺清晰而非困惑。一個好的轉場可以四兩撥千斤，讓用戶清楚地了解他們應該關注哪里。每一個轉場應該包含以下三類元素：

• 新入元素(Incoming elements): 完全新的元素需要有新手引導，從已有場景中轉變而來的元素需要重新被識別
• 淡出元素(Outgoing elements)：與當前場景不相關的元素應當以恰當的方式被移除
• 通用元素(Shared elements)：指那些從轉場開始到結束都沒有發生變化的元素。可以是細微至單個圖標，也可以是顯著到占據屏幕的圖片展示

思考點

在設計動畫的時候，可以從以下幾點開始考慮：

• 用戶的注意力應該被如何引導？什么元素和動畫能輔助實現這個目標？新入元素、淡出元素和通用元素在這個轉場中應該怎樣被強調或弱化？
• 在設計場景時考慮到轉場，并且盡量通過色彩和通用元素在不同場景轉化間建立視覺聯系
• 審慎地添加動畫，思考如何移動一個特定的元素，從而使這個轉場更明晰并使人愉悅

恰當的時候使用紙片疊加方式。一般情況下，新入的紙片元素應當滑入視線。但字體元素(ink element)除外，他們應該以淡入的方式出現。不提倡全屏的淡入淡出，但也比瞬間切屏要好。

避免瞬間切屏(hard cut)。瞬間切屏過于突兀，并且會導致用戶很難理解這個轉場。

有層次的時序

在建立轉場的時候，對于元素移動的順序和時機都要詳加考慮。要確保這個動畫能使信息的展示具有層次感。也就是說，它能引導用戶的關注力，將最重要的內容傳遞給用戶。

然而，這并不是說最重要的東西先動，最不重要的東西就后動。元素轉場的時序要平滑并且避免脫節的感覺。

用遞次的動畫引導用戶注意力。

所有元素同時變動的話會使得重要的內容無法突出展示。如果所有元素都同樣重要(你確定會發生這種情況的話)，可以考慮采用更高層級的動畫，使這些元素成組的顯示。

連貫的編排

由于轉場元素在整屏范圍里移動，他們需要以協調的方式運動。起到引導視覺焦點作用的元素，其整個移動過程都要有意義、有秩序。隨機的動畫會分散注意 力。一個編排好的應用也能夠給用戶提供學習的時機。如果轉場的所有元素都很好的協調，用戶對于這個應用的理解也會增強。他們「理解」這個應用， 不會因為動畫而無所適從。

***實踐

• 除非這個動畫是被限制在某一個軸上或者是與其它元素一起從/往某個點協調的移動，否則盡量避免線性路徑
• 確保元素移動的方向在整個轉場過程中都是協調一致的。避免沖突的動作和重疊的運動路徑
• 思考更深層的含義：是什么在什么的下方運動，為什么會這樣？
• 如果所有運動的元素都在屏幕上按路徑移動，看起來是否優美整齊？ 這是否能讓用戶清楚地知道應該看哪里？
• 通過新舊元素的連貫性的動畫來表現空間上的關系
• 通過和諧一致的動畫引導用戶的注意力
• 避免混亂不連貫的動畫，元素以隨機方向離開或進入等會造成用戶的困惑

打動用戶的細節

動畫可以存在于應用程序的所有組件和擴展中，從細小的圖標到核心的場景轉換和動作，所有元素共同構建出一個擁有無縫體驗、美觀且功能強大的應用。

動畫最基本的使用場景是過度效果，但哪怕是最基本的動畫，只要恰到好處并足夠出色，同樣能打動用戶。例如一個菜單圖標變成一個箭頭或者是播放控制按鈕，這種服務間的無縫切換不僅僅能讓用戶感知，更是讓***的細節和精湛的設計充滿你的應用。用戶真的會感受到這些小細節。

原文：Meaningful Transitions 翻譯：Jingsha 校對：阿九(Siton)