對于普通用戶來說,是關(guān)注一個應(yīng)用本身、還是更關(guān)注這個應(yīng)用的元素從 A 點到 B 點轉(zhuǎn)變的過程,這種選擇往往有些難。謹(jǐn)慎編排的動畫可以在有多步操作的過程中有效地引導(dǎo)用戶的注意力;在版面變化或元素重組時避免造成困惑;提高用戶體驗的整體美感。動畫設(shè)計不僅應(yīng)當(dāng)優(yōu)美,更應(yīng)當(dāng)服務(wù)于功能。
示例 1:
示例 2:
在兩個視覺效果不同的頁面之間的轉(zhuǎn)場應(yīng)該平滑、輕快,更重要的是使用戶感覺清晰而非困惑。一個好的轉(zhuǎn)場可以四兩撥千斤,讓用戶清楚地了解他們應(yīng)該關(guān)注哪里。每一個轉(zhuǎn)場應(yīng)該包含以下三類元素:
在設(shè)計動畫的時候,可以從以下幾點開始考慮:
(上圖)可取
恰當(dāng)?shù)臅r候使用紙片疊加方式。一般情況下,新入的紙片元素應(yīng)當(dāng)滑入視線。但字體元素(ink element)除外,他們應(yīng)該以淡入的方式出現(xiàn)。不提倡全屏的淡入淡出,但也比瞬間切屏要好。
(上圖)不可取
避免瞬間切屏(hard cut)。瞬間切屏過于突兀,并且會導(dǎo)致用戶很難理解這個轉(zhuǎn)場。
在建立轉(zhuǎn)場的時候,對于元素移動的順序和時機都要詳加考慮。要確保這個動畫能使信息的展示具有層次感。也就是說,它能引導(dǎo)用戶的關(guān)注力,將最重要的內(nèi)容傳遞給用戶。
然而,這并不是說最重要的東西先動,最不重要的東西就后動。元素轉(zhuǎn)場的時序要平滑并且避免脫節(jié)的感覺。
(上圖)可取
用遞次的動畫引導(dǎo)用戶注意力。
(上圖)不可取
所有元素同時變動的話會使得重要的內(nèi)容無法突出展示。如果所有元素都同樣重要(你確定會發(fā)生這種情況的話),可以考慮采用更高層級的動畫,使這些元素成組的顯示。
由于轉(zhuǎn)場元素在整屏范圍里移動,他們需要以協(xié)調(diào)的方式運動。起到引導(dǎo)視覺焦點作用的元素,其整個移動過程都要有意義、有秩序。隨機的動畫會分散注意力。一個編排好的應(yīng)用也能夠給用戶提供學(xué)習(xí)的時機。如果轉(zhuǎn)場的所有元素都很好的協(xié)調(diào),用戶對于這個應(yīng)用的理解也會增強。他們「理解」這個應(yīng)用, 不會因為動畫而無所適從。
原文:Meaningful Transitions 翻譯:Jingsha 校對:阿九(Siton)