對(duì)于普通用戶來(lái)說(shuō)，是關(guān)注一個(gè)應(yīng)用本身、還是更關(guān)注這個(gè)應(yīng)用的元素從A點(diǎn)到B點(diǎn)轉(zhuǎn)變的過(guò)程，這種選擇往往有些難。謹(jǐn)慎編排的動(dòng)畫可以在有多步操作的 過(guò)程中有效地引導(dǎo)用戶的注意力；在版面變化或元素重組時(shí)避免造成困惑；提高用戶體驗(yàn)的整體美感。動(dòng)畫設(shè)計(jì)不僅應(yīng)當(dāng)優(yōu)美，更應(yīng)當(dāng)服務(wù)于功能。

視覺(jué)連貫性

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

• 新入元素(Incoming elements): 完全新的元素需要有新手引導(dǎo)，從已有場(chǎng)景中轉(zhuǎn)變而來(lái)的元素需要重新被識(shí)別
• 淡出元素(Outgoing elements)：與當(dāng)前場(chǎng)景不相關(guān)的元素應(yīng)當(dāng)以恰當(dāng)?shù)姆绞奖灰瞥?/li>
• 通用元素(Shared elements)：指那些從轉(zhuǎn)場(chǎng)開(kāi)始到結(jié)束都沒(méi)有發(fā)生變化的元素?？梢允羌?xì)微至單個(gè)圖標(biāo)，也可以是顯著到占據(jù)屏幕的圖片展示

思考點(diǎn)

在設(shè)計(jì)動(dòng)畫的時(shí)候，可以從以下幾點(diǎn)開(kāi)始考慮：

• 用戶的注意力應(yīng)該被如何引導(dǎo)？什么元素和動(dòng)畫能輔助實(shí)現(xiàn)這個(gè)目標(biāo)？新入元素、淡出元素和通用元素在這個(gè)轉(zhuǎn)場(chǎng)中應(yīng)該怎樣被強(qiáng)調(diào)或弱化？
• 在設(shè)計(jì)場(chǎng)景時(shí)考慮到轉(zhuǎn)場(chǎng)，并且盡量通過(guò)色彩和通用元素在不同場(chǎng)景轉(zhuǎn)化間建立視覺(jué)聯(lián)系
• 審慎地添加動(dòng)畫，思考如何移動(dòng)一個(gè)特定的元素，從而使這個(gè)轉(zhuǎn)場(chǎng)更明晰并使人愉悅

恰當(dāng)?shù)臅r(shí)候使用紙片疊加方式。一般情況下，新入的紙片元素應(yīng)當(dāng)滑入視線。但字體元素(ink element)除外，他們應(yīng)該以淡入的方式出現(xiàn)。不提倡全屏的淡入淡出，但也比瞬間切屏要好。

避免瞬間切屏(hard cut)。瞬間切屏過(guò)于突兀，并且會(huì)導(dǎo)致用戶很難理解這個(gè)轉(zhuǎn)場(chǎng)。

有層次的時(shí)序

在建立轉(zhuǎn)場(chǎng)的時(shí)候，對(duì)于元素移動(dòng)的順序和時(shí)機(jī)都要詳加考慮。要確保這個(gè)動(dòng)畫能使信息的展示具有層次感。也就是說(shuō)，它能引導(dǎo)用戶的關(guān)注力，將最重要的內(nèi)容傳遞給用戶。

然而，這并不是說(shuō)最重要的東西先動(dòng)，最不重要的東西就后動(dòng)。元素轉(zhuǎn)場(chǎng)的時(shí)序要平滑并且避免脫節(jié)的感覺(jué)。

用遞次的動(dòng)畫引導(dǎo)用戶注意力。

所有元素同時(shí)變動(dòng)的話會(huì)使得重要的內(nèi)容無(wú)法突出展示。如果所有元素都同樣重要(你確定會(huì)發(fā)生這種情況的話)，可以考慮采用更高層級(jí)的動(dòng)畫，使這些元素成組的顯示。

連貫的編排

由于轉(zhuǎn)場(chǎng)元素在整屏范圍里移動(dòng)，他們需要以協(xié)調(diào)的方式運(yùn)動(dòng)。起到引導(dǎo)視覺(jué)焦點(diǎn)作用的元素，其整個(gè)移動(dòng)過(guò)程都要有意義、有秩序。隨機(jī)的動(dòng)畫會(huì)分散注意 力。一個(gè)編排好的應(yīng)用也能夠給用戶提供學(xué)習(xí)的時(shí)機(jī)。如果轉(zhuǎn)場(chǎng)的所有元素都很好的協(xié)調(diào)，用戶對(duì)于這個(gè)應(yīng)用的理解也會(huì)增強(qiáng)。他們「理解」這個(gè)應(yīng)用， 不會(huì)因?yàn)閯?dòng)畫而無(wú)所適從。

***實(shí)踐

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

打動(dòng)用戶的細(xì)節(jié)

動(dòng)畫可以存在于應(yīng)用程序的所有組件和擴(kuò)展中，從細(xì)小的圖標(biāo)到核心的場(chǎng)景轉(zhuǎn)換和動(dòng)作，所有元素共同構(gòu)建出一個(gè)擁有無(wú)縫體驗(yàn)、美觀且功能強(qiáng)大的應(yīng)用。

動(dòng)畫最基本的使用場(chǎng)景是過(guò)度效果，但哪怕是最基本的動(dòng)畫，只要恰到好處并足夠出色，同樣能打動(dòng)用戶。例如一個(gè)菜單圖標(biāo)變成一個(gè)箭頭或者是播放控制按鈕，這種服務(wù)間的無(wú)縫切換不僅僅能讓用戶感知，更是讓***的細(xì)節(jié)和精湛的設(shè)計(jì)充滿你的應(yīng)用。用戶真的會(huì)感受到這些小細(xì)節(jié)。

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