有意義的轉場動畫

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

示例

示例

視覺連貫性

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

思考點

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

示例


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

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

有層次的時序

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

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

示例


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

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

連貫的編排

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

最佳實踐

示例

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

两码中特期期