APP場景轉(zhuǎn)換，怎能少了動畫

動畫是用戶體驗的重要組成部分，當(dāng)動畫運(yùn)用到APP中的場景轉(zhuǎn)換時，它能夠巧妙地傳達(dá)很多東西。很多場景——發(fā)送消息、打開設(shè)置、選中復(fù)選框、 導(dǎo)航到另一個頁面，動畫轉(zhuǎn)換都能夠抓住用戶的注意力。

在本文中，我們一起回顧一下功能動畫補(bǔ)充可視化設(shè)計，支持交互的常見情況。

當(dāng)用戶進(jìn)行了某種操作時，他們是期望看到反饋的，即系統(tǒng)已經(jīng)接收到了指令并且正在處理。下面就來看幾個動畫反饋提升用戶體驗的例子。

確認(rèn)用戶的操作：當(dāng)用戶看到反饋之后，他們就知道系統(tǒng)已經(jīng)接收了指令，從而避免了重復(fù)的點(diǎn)擊。

下拉刷新，更新頁面內(nèi)容：加載指示這種反饋形式幫助用戶了解系統(tǒng)正在處理他們的請求。

等待下載內(nèi)容的時候，也不必然就是無趣的。幾乎任何APP都可以在加載內(nèi)容時使用動畫，以防止用戶離開。加載動畫可以讓用戶把注意力集中在反饋上，從而覺得等待沒又那么漫長。

有時候用戶需要通過一系列的步驟才能完成一項操作。我們必須得讓用戶明白這些步驟是相互關(guān)聯(lián)的，動畫就能達(dá)到這種效果。

下面這個例子就表明了如何使用動畫來創(chuàng)建事件的線性進(jìn)程。動畫可以幫助設(shè)計師制作“逐漸展現(xiàn)”的信息呈現(xiàn)方式。這種方式大大減少了單個界面的信息呈現(xiàn)量，易用性更好。這里有兩個使用漸進(jìn)式信息呈現(xiàn)來提供有意義的信息的例子。

當(dāng)我們在頁面上引入一個新元素時，我們試圖集中用戶的注意力，并幫助他們接受這個新元素。動畫能夠幫助我們在引入新元素時定義對象關(guān)系和層次結(jié)構(gòu)。

動畫可以幫助用戶建立更好的空間信息心理模型。這對手機(jī)用戶來說尤其重要，因為短時間關(guān)注+小屏幕尺寸的這種組合讓用戶很容易在屏幕中迷失。

我們可以使用動畫來引導(dǎo)用戶，動畫有助于解釋信息是如何從一個狀態(tài)流到另一個狀態(tài)的。及時告知用戶他們所處的狀態(tài)能夠避免迷失感.

在下面這個例子中，浮動操作按鈕(FAB)轉(zhuǎn)換為頭部，并向用戶表明這兩個對象是如何相互關(guān)聯(lián)的。

認(rèn)知負(fù)荷是指使用產(chǎn)品所需要的腦力消耗，它直接影響用戶使用APP時的難易程度。通常來說，使用一款產(chǎn)品需要耗費(fèi)的腦力越多，用戶就越不喜歡。

作為設(shè)計師，我們的目標(biāo)就是設(shè)計易用的界面。如果動畫運(yùn)用的好的話，就能有效降低用戶完成任務(wù)所需付出的努力。

幾乎所有的APP都需要用戶填寫一些表單，任何表單都有文本占位符作為字段的標(biāo)簽。當(dāng)用戶點(diǎn)擊這個字段時，標(biāo)簽就消失了。結(jié)果，用戶就很難搞清楚這個字段代表什么。這個時候，浮動標(biāo)簽就能夠幫助用戶知道自己在做什么。

APP中的元素在于用戶產(chǎn)生交互之后，功能會有所改變。比如，當(dāng)用戶點(diǎn)擊了按鈕，按鈕就不一樣了。這時，動畫能夠解答用戶的疑問“現(xiàn)在這個元素變成什么了？”在許多移動界面中，功能轉(zhuǎn)換能常見的一個例子就是“切換”。動畫能夠幫助用戶理解元素當(dāng)前處于什么狀態(tài)。

有時候，一個元素的功能變化就能導(dǎo)致整個視覺的改變。例如，下面這個漢堡菜單，轉(zhuǎn)換到X的時候，整個頁面都變了。

動畫效果是強(qiáng)大的，它解決了界面內(nèi)的許多功能問題，讓界面非常有活力，并且積極響應(yīng)了用戶。不管你設(shè)計的是什么類型的APP，其實(shí)都是在向用戶講故事，動畫就是讓故事更生動的好方法之一。

原作者：Nick Babich

原文鏈接：https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7

翻譯：熊小熊 集創(chuàng)堂