用戶界面設計中的動畫是近幾年UI領域中的熱門話題，尤其活躍在概念動畫領域。它為設計師提供創(chuàng)造性實驗并推動UI動畫設計的發(fā)展。UI動畫在APP應用和網(wǎng)站的頁面設計中對用戶的吸引程度之高毋庸置疑，今天，讓我們來看看使得UI設計中正流行的概念動畫到底是什么吧。

1、什么是UI概念動畫？

概念動畫是屬于概念藝術領域的。它是一種運動設計，用于在將特定想法投入真實產品之前傳達它。在用戶界面設計中，我們可以看到概念動畫的各種使用場景，用于交互，過渡，控件的操作，系統(tǒng)反饋的動畫標記等。動畫設計師會使用各種工具來實現(xiàn)它，比如Adobe After Effects，Principle，F(xiàn)igma和InVision。

為什么在UI設計中需要概念性動畫？

時至今日，這仍是一個頗有爭議的問題。概念性動畫試圖超越已有的限制和規(guī)則，以及現(xiàn)成的解決方案和經過精心研究的方法。在技術實現(xiàn)上，這類動畫可能看來不真實、不必要，甚至不可能。

而且，無論是靜態(tài)設計（包括字形、圖標、改變控件或整個界面的顏色和形狀）還是UI動畫，這些可以讓一個應用程序脫穎而出的元素，有時看起來非常相似，就像是克隆的一樣。

需求決定供應。一旦“市場”看到一個新的設計概念，尤其是動畫，設計師們就會尋求實現(xiàn)它的方法并在現(xiàn)實世界中使用它。實踐表明，在技術方面，概念動畫的實現(xiàn)是一個花時間的工作，但不是不能實現(xiàn)。

2、UI動畫概念的示例

滾動項目列表

第一個示例包含與項目列表的交互：左側變體只是將所有列表向上移動，但是右側變體模仿拉動卡片設計的。第二個變體看起來很生動，為滾動過程增添了一些樂趣。另一件有趣的事情是，正確的概念會在卡片之間產生更多空間的視覺錯覺。

從列表轉換到項目

下面是另一個例子：左側是從列表或菜單轉換到特定項目界面的基本形式，而右側的概念性動畫則使界面跳轉過程更為生動。

側拉式菜單（Side menu）

概念性動畫也可以是一些基本操作更加鮮活，如側拉式菜單的打開。設計師通過使用流暢的漸進動畫逐一展現(xiàn)菜單條目時，整個過程顯得更加優(yōu)雅。

其他案例欣賞

Finance App動畫創(chuàng)建了從餅圖到應用顏色標記的列表的時尚過渡

Music News App動畫在從類別屏幕到列表的過渡中使用形狀和線條

Home Budget app中的UI動畫概念增加了打開漢堡包菜單的動態(tài)

Business Card 中的UI概念模仿從配置文件頭像拉出卡的有趣

Calendar app的動畫概念設置從日歷屏幕到計劃屏幕的優(yōu)雅過渡

3、UI動畫概念的主要好處

事實上，概念是所有行業(yè)或者創(chuàng)新行業(yè)在創(chuàng)新和研究創(chuàng)新的開始。無論是什么領域，對概念的態(tài)度都會表現(xiàn)出兩種對立面，即“這只是一種與現(xiàn)實生活毫無關系的幻想”和“為什么不……”兩種變體都是可行的。無論如何，無論好壞，來自力量的概念都有可能取得進展。

在UI動畫領域中也是相同的情況。今天被認為是我們界面不可或缺的大多數(shù)動畫都是不久前的一種“不真實”的概念。在扁平化設計時代，當形狀和顏色追求簡潔時，在緊張競爭中，動畫成為應用程序和設計解決方案脫穎而出的可靠方法。

以上就是本次關于UI概念動畫的介紹了，你是不是也是盯著這些好看的動畫效果看了很久呢？