UI界面設(shè)計(jì)

ui設(shè)計(jì)的動(dòng)畫(huà)效果有什么作用？

4149

用戶界面設(shè)計(jì)中的動(dòng)畫(huà)一直是這幾年熱議的話題，尤其活躍在概念動(dòng)畫(huà)領(lǐng)域。它為設(shè)計(jì)師提供創(chuàng)造性實(shí)驗(yàn)并推動(dòng)UI動(dòng)畫(huà)的發(fā)展。

UI動(dòng)畫(huà)對(duì)APP應(yīng)用和網(wǎng)站的好處毋庸置疑，今天，讓我們與Tubik動(dòng)畫(huà)設(shè)計(jì)師Kirill Yerokhin繼續(xù)討論概念動(dòng)畫(huà)是如何推進(jìn)產(chǎn)品的成功。

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

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

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

這是一個(gè)頗有爭(zhēng)議的問(wèn)題。概念性動(dòng)畫(huà)試圖超越已有的限制和規(guī)則，以及現(xiàn)成的解決方案和經(jīng)過(guò)精心研究的方法。這種動(dòng)畫(huà)對(duì)于技術(shù)實(shí)現(xiàn)來(lái)說(shuō)可能看起來(lái)不真實(shí)，不必要或不可能。

但是，靜態(tài)設(shè)計(jì)（字形，圖標(biāo)，改變顏色和控件的形狀或整個(gè)界面）和UI的動(dòng)畫(huà)提供了讓?xiě)?yīng)用程序從類似應(yīng)用程序（有時(shí)看起來(lái)像克隆）中脫穎而出的方法。

用于移動(dòng)游戲交互的動(dòng)畫(huà)概念的示例

有報(bào)告稱，所有開(kāi)發(fā)人員都討厭概念動(dòng)畫(huà)并且從不想實(shí)現(xiàn)，這并不是真的，至少在設(shè)計(jì)中不是。實(shí)際上，在其他創(chuàng)造性的領(lǐng)域中，有些人認(rèn)為創(chuàng)新是難以置信的，不可能的。而其他人則盡力而為，找到新方式和方法來(lái)幫助人們解決新問(wèn)題。

需求決定供應(yīng)。一旦“市場(chǎng)”看到一個(gè)新的設(shè)計(jì)概念，尤其是動(dòng)畫(huà)，設(shè)計(jì)師們就會(huì)尋求實(shí)現(xiàn)它的方法并在現(xiàn)實(shí)世界中使用它。此時(shí)，設(shè)計(jì)師思想的產(chǎn)物不再是一個(gè)概念。在Tubik，我們有很多成功的案例，即使是非常復(fù)雜的動(dòng)畫(huà)也能由第三方開(kāi)發(fā)人員成功編碼實(shí)現(xiàn)。

實(shí)踐表明，在技術(shù)方面，概念動(dòng)畫(huà)的實(shí)現(xiàn)是一個(gè)花時(shí)間的工作，但不是不能實(shí)現(xiàn)。

動(dòng)畫(huà)概念試驗(yàn)更新的材料設(shè)計(jì)

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

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

第一個(gè)示例包含與項(xiàng)目列表的交互：左側(cè)變體只是將所有列表向上移動(dòng)，但是右側(cè)變體模仿拉動(dòng)卡片設(shè)計(jì)的。第二個(gè)變體看起來(lái)很生動(dòng)，為滾動(dòng)過(guò)程增添了一些樂(lè)趣。另一件有趣的事情是，正確的概念會(huì)在卡片之間產(chǎn)生更多空間的視覺(jué)錯(cuò)覺(jué)。

⊕從列表轉(zhuǎn)換到項(xiàng)目

這是另一個(gè)例子：左側(cè)選項(xiàng)顯示從列表或菜單轉(zhuǎn)換到特定項(xiàng)目屏幕的基本方式，而右側(cè)選項(xiàng)的流程更加動(dòng)態(tài)。

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

概念動(dòng)畫(huà)會(huì)讓人覺(jué)得更加生動(dòng)且富有生命力，比如打開(kāi)側(cè)面菜單等基本操作。設(shè)計(jì)師使用漸進(jìn)流來(lái)構(gòu)造物體，使過(guò)程看起來(lái)更優(yōu)雅。

⊕現(xiàn)實(shí)界面中的UI動(dòng)畫(huà)概念

概念動(dòng)畫(huà)是用戶界面設(shè)計(jì)的創(chuàng)造性階段之一，動(dòng)畫(huà)設(shè)計(jì)師可以提供多種選擇與客戶和開(kāi)發(fā)人員討論。以下是Kirill與UI設(shè)計(jì)人員合作設(shè)計(jì)的一些示例。

Finance App動(dòng)畫(huà)

Finance App動(dòng)畫(huà)創(chuàng)建了從餅圖到應(yīng)用顏色標(biāo)記的列表的時(shí)尚過(guò)渡

Music News App動(dòng)畫(huà)

Music News App動(dòng)畫(huà)在從類別屏幕到列表的過(guò)渡中使用形狀和線條

Home Budget app中的UI動(dòng)畫(huà)概念

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

Business Card 中的UI概念

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

Calendar app的動(dòng)畫(huà)概念

Calendar app的動(dòng)畫(huà)概念設(shè)置從日歷屏幕到計(jì)劃屏幕的優(yōu)雅過(guò)渡

側(cè)面菜單的交互

還有一個(gè)動(dòng)畫(huà)為側(cè)面菜單的交互增添樂(lè)趣并支持視覺(jué)層次結(jié)構(gòu)

UI動(dòng)畫(huà)概念的主要好處

事實(shí)上，概念是所有行業(yè)或者創(chuàng)新行業(yè)在創(chuàng)新和研究創(chuàng)新的開(kāi)始?？纯雌囆袠I(yè)或建筑行業(yè)，記住新的藝術(shù)方向如何在歷史中出現(xiàn)和發(fā)展。無(wú)論是什么領(lǐng)域，對(duì)概念的態(tài)度都會(huì)表現(xiàn)出兩種對(duì)立面，即“這只是一種與現(xiàn)實(shí)生活毫無(wú)關(guān)系的幻想”，“為什么不......”兩種變體都是可行的。無(wú)論如何，無(wú)論好壞，來(lái)自力量的概念都有可能取得進(jìn)展。

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