當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >概念動(dòng)畫(huà)，讓 UI 設(shè)計(jì)脫穎而出

概念動(dòng)畫(huà)，讓 UI 設(shè)計(jì)脫穎而出

發(fā)布時(shí)間：2024-03-13 15:01:51 瀏覽量：114次

用戶(hù)界面中的動(dòng)畫(huà)一直是一個(gè)熱門(mén)話(huà)題，它在用戶(hù)界面的概念動(dòng)畫(huà)領(lǐng)域尤為活躍，它提供了創(chuàng)造性的實(shí)驗(yàn)并突破了UI 運(yùn)動(dòng)的極限。

什么是概念動(dòng)畫(huà)？

概念動(dòng)畫(huà)是概念藝術(shù)的一個(gè)領(lǐng)域，它是一種運(yùn)動(dòng)設(shè)計(jì)，旨在傳達(dá)特定的想法，然后再將其投入實(shí)際產(chǎn)品中。在用戶(hù)界面設(shè)計(jì)中，概念動(dòng)畫(huà)可以在交互、過(guò)渡、控件操作、標(biāo)記系統(tǒng)反饋的動(dòng)畫(huà)等各種概念中找到。設(shè)計(jì)師使用各種工具，其中可以提到Adob?e After Effects、Principle、 Figma和InVision。

為什么在 UI 設(shè)計(jì)中需要概念動(dòng)畫(huà)？

這在今天還是個(gè)有爭(zhēng)議的問(wèn)題，概念動(dòng)畫(huà)除了現(xiàn)成的解決方案和經(jīng)過(guò)良好檢查的方法之外，還嘗試超越限制和規(guī)則的方法。這種動(dòng)畫(huà)對(duì)于技術(shù)實(shí)現(xiàn)來(lái)說(shuō)可能看起來(lái)不真實(shí)、不必要或不可能。關(guān)鍵是靜態(tài)設(shè)計(jì)（字形、圖標(biāo)、更改控件或整個(gè)界面的顏色和形狀）和UI動(dòng)畫(huà)提供了使應(yīng)用程序從有時(shí)看起來(lái)像克隆的類(lèi)似應(yīng)用程序人群中脫穎而出的方法。

所有開(kāi)發(fā)人員都討厭概念動(dòng)畫(huà)且永遠(yuǎn)不想致力于其實(shí)現(xiàn)的說(shuō)法是不正確的。實(shí)際上，在其他創(chuàng)意領(lǐng)域，有些人認(rèn)為創(chuàng)新是不可能實(shí)現(xiàn)的。而其他人則竭盡全力尋找新的方法和方法，解決新問(wèn)題。

需求決定供給，一旦“市場(chǎng)”看到一個(gè)新鮮的設(shè)計(jì)理念，尤其是動(dòng)畫(huà)，就會(huì)有人尋求使其成為現(xiàn)實(shí)并在現(xiàn)實(shí)世界中使用的方法。此刻設(shè)計(jì)師的思想產(chǎn)物不再只是一個(gè)概念。

在技術(shù)方面，概念動(dòng)畫(huà)的實(shí)現(xiàn)是一個(gè)花費(fèi)時(shí)間的問(wèn)題，而不是這種可能性的普遍存在。

UI 動(dòng)畫(huà)概念示例

滾動(dòng)項(xiàng)目列表

第一個(gè)示例具有與項(xiàng)目列表的交互作用：左側(cè)的變體只是將所有列表向上移動(dòng)，而右側(cè)的變體則模擬拉動(dòng)卡片并稍加保留。第二個(gè)變體看起來(lái)很活潑，并為滾動(dòng)過(guò)程增添了一點(diǎn)樂(lè)趣。另一個(gè)有趣的事情是，正確的概念會(huì)在卡片之間產(chǎn)生更多空間的視覺(jué)錯(cuò)覺(jué)，從而支持界面中更多空氣的感覺(jué)。

轉(zhuǎn)型從列表中的項(xiàng)目

左邊的選項(xiàng)顯示了從列表或菜單到特定項(xiàng)目界面的基本過(guò)渡方式，而右邊的選項(xiàng)則為過(guò)程添加了動(dòng)態(tài)。

打開(kāi)側(cè)邊菜單

概念動(dòng)畫(huà)還可以為打開(kāi)側(cè)邊菜單等基本操作添加生命力和動(dòng)態(tài)性，設(shè)計(jì)師使用對(duì)象的漸進(jìn)流程，使過(guò)程看起來(lái)更加優(yōu)雅。

逼真界面中的 UI 動(dòng)畫(huà)概念

概念動(dòng)畫(huà)是用戶(hù)界面設(shè)計(jì)的創(chuàng)意階段之一：設(shè)計(jì)師可能會(huì)提供不同的選項(xiàng)來(lái)與客戶(hù)和開(kāi)發(fā)人員進(jìn)行討論。下面示例來(lái)自dribbble

總結(jié)

事實(shí)上，創(chuàng)新事物的創(chuàng)造和研究幾乎始于任何行業(yè)或創(chuàng)意領(lǐng)域的概念。看看汽車(chē)行業(yè)或建筑，記住新的藝術(shù)方向在歷史上是如何出現(xiàn)和發(fā)展的。無(wú)論是什么領(lǐng)域，對(duì)概念的態(tài)度都會(huì)表現(xiàn)出兩種對(duì)立面，從“這只是與現(xiàn)實(shí)生活無(wú)關(guān)的幻想”到“為什么不......”這兩種變體都是可行的。盡管如此，無(wú)論好壞，都是來(lái)自使進(jìn)步成為可能的力量的概念。

在UI動(dòng)畫(huà)領(lǐng)域也觀察到同樣的情況，今天大多數(shù)動(dòng)畫(huà)被認(rèn)為是我們界面不可或缺的一部分，不久前還是一種“不真實(shí)”的概念。如今，當(dāng)形狀和顏色追求簡(jiǎn)單和干凈時(shí)，動(dòng)畫(huà)成為使應(yīng)用程序和解決方案在激烈競(jìng)爭(zhēng)中脫穎而出的行之有效的方式。