中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

轉場動畫可以通過很多種方式來強化用戶行為，那移動應用里有些什么轉場動畫呢？在這篇文章中，我們將講述當功能性的動畫補充視覺設計和支持交互時的常見情況。

動畫是用戶體驗的重要組成部分。當涉及到移動應用的轉場時，你可以通過細致的動畫傳遞豐富的信息。發送信息、打開設置、點擊復選框、導航去其他頁面-這些都是變化的時刻，對轉場進行動畫設計是一種強化用戶行為的絕佳方式。

在這篇文章中，我們將講述當功能性的動畫補充視覺設計和支持交互時的常見情況。

一、提供系統的狀態

當用戶觸發了某些操作時，他們期望得到一個視覺反饋，系統需要清晰地表明它已經接收到這個操作請求同時正在運行中。

這里有一些有益于用戶體驗的動畫反饋案例：

1. 確認用戶操作

用戶得到系統對于該操作的確認，當用戶可以得到有效的視覺反饋，這就可以防止用戶重新點擊操作元素。

Notify users of the results of their actions. Image:?Colin?Garven

2. 使用下拉刷新對于頁面的內容進行更新

加載提示的視覺反饋幫助用戶理解系統正在對于用戶的請求做處理。

Subtle animation helps users understand what is going on. Image:?Ramotion

3. 等待內容加載

加載并不一定很枯燥，幾乎所有的移動應用都可以在頁面加載時，利用微妙的動畫來防止用戶離開。加載動畫可以持續占據用戶的視覺反饋，結果就是用戶感覺等待的時間更短。

Animation can keep the user engaged even before the app fully loads. Image:?UI8

二、在任務流程中連接不同的步驟

有時用戶需要一系列的步驟來完成操作，而這些步驟需要清晰的標明他們是緊密相連的，動畫能夠幫助你連接不同的步驟創造一個完整的體驗。

下面是一個如何利用動畫來創造連續線性事件的優秀案例：

Image:?Jakub?Antalík

動畫可以幫助設計師創造漸進式展現，漸進式展現通過減少同一時間內信息量的展現，使界面更加簡單易學。

這里有兩個很好的例子，說明使用漸進式展現提供有意義的信息塊。

Image:?Anton Skvortsov

三、引入新元素

當我們在頁面上引入一個新的元素時，我們嘗試將用戶的注意力聚焦在這個對象上，同時幫助他們回答這樣一個問題：“為什么我會看到這個新對象”？

動畫可以幫助你在引入新元素時定義對象之間的關系和層級。

Animation can show where new objects are coming from. Image:?Virgil?Pana

四、提供用戶空間方位感

動畫能夠幫助用戶構建空間感更好的心智模型，尤其是對手機用戶而言，在小屏幕上進行短時間關注這種組合方式，很容易導致用戶在屏幕之間迷失方向。

我們可以用動畫引導用戶，動畫有助于解釋信息如何從一種狀態流向另一種狀態。通過向用戶提供關于他們目前正在進行的操作的信息，可以防止用戶迷失方向。

Orientational animation lets you know where are you now in relation to where you came from. Image:?Jae-seong, Jeong

在接下來的案例中，浮動操作按鈕(FAB)轉換到頂部，并向用戶說明這兩個對象之間的相互關系。

Animation can help you build a relationship between elements. Image:?Anish?Chandran

五、減少認知負荷

認知負荷是使用產品所需的腦力勞動，認知負荷直接影響用戶如何輕松地與移動應用產生交互。一般來說，使用產品的工作量越大，產品就越不理想。

作為設計師，我們的目標應該是創造簡單易用的界面。如果過使用得當，動畫可以減少用戶在完成任務時的工作量。

在大多數的移動應用中，用戶不得不填寫很多表單，許多表單都將文本占位符作為字段區域的標簽。當用戶點擊這些字段區域時，標簽就會消失。

結果就是：用戶很難弄清這個字段區域代表什么，浮動標簽幫助用戶理解上下文，同時讓用戶在與長表單發生交互時感到舒適。

When it comes to user input, don’t rely on users memory. Make all critical information visible. Image:?MDS

六、幫助用戶理解功能變化

當元素交互后，元素的功能也隨之變化。舉個例子：當用戶點擊了一個按鈕后，這個按鈕就代表了不同的含義，動畫可以幫助用戶找到“這個元素現在做什么”的答案。

在手機界面中，開關就是個常見的功能性改變的例子，動畫幫助用戶理解當前元素的含義。

Button animates on tap so users can see the change. Image:?Jurre?Houtkamp

在一些案例中，單個元素的功能性改變會導致整體界面的變化。例如：漢堡菜單變成“x”同時激活了新的界面。

Make it clear to users that object utility was changed. Image:?Tamas?Kojo

七、總結

動畫在復雜場景中的使用是非常強大的，它解決了界面中很多功能性問題，同時讓用戶感覺到產品真實和真誠的反應。無論你設計哪一款移動應用，動畫都將幫助你向用戶更加有效地講述故事。

原文作者：pazzamanu

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

譯文作者：pazzamanu

譯文鏈接：https://www.jianshu.com/p/7f6648a09149

本文由 @pazzamanu 授權發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議