看似花哨的UI概念動效，并不只是為了耍酷而存在。

在 UI 界面當(dāng)中使用動效已經(jīng)成為這幾年一直被討論的熱門話題了。動效要怎么用，什么樣的動效更優(yōu)秀等等，這樣的探討層出不窮。在 UI 所涉及到的各種動畫和動效當(dāng)中，概念動效是被討論的最多的話題。充滿實(shí)驗(yàn)性的概念動效是動效設(shè)計(jì)最前沿的領(lǐng)域，是開發(fā)和實(shí)現(xiàn)上最具有挑戰(zhàn)性的部分，也是新產(chǎn)品上線之后，用戶最容易注意到，也討論得最多的東西。

在 Tubik Studio 的博客上，我們已經(jīng)分享過很多關(guān)于 UI 動效的文章和內(nèi)容了。關(guān)于概念動效/動畫對于 UI 設(shè)計(jì)與開發(fā)的影響，我想 Tubik 的動畫設(shè)計(jì)師 Kirill Yerokhin 是最有發(fā)言權(quán)的。

概念動效是什么？

概念動效應(yīng)該算是概念設(shè)計(jì)領(lǐng)域的一個(gè)分支?？偟膩碚f，概念動效還是在做動效和動畫的設(shè)計(jì)，不過它是為了在真實(shí)的產(chǎn)品上線之前，基于特定的想法、構(gòu)思而進(jìn)行創(chuàng)建的東西。在進(jìn)行用戶界面設(shè)計(jì)的時(shí)候，動效可以存在于交互、轉(zhuǎn)場和具體的控件操作上，動效作為一種狀態(tài)轉(zhuǎn)變、交互反饋和視覺引導(dǎo)的工具而存在。動效設(shè)計(jì)師會使用各種各樣的工具來進(jìn)行動效的設(shè)計(jì)，我們常常提到的工具包括 Adobe After Effects，Principle，F(xiàn)igma 和 InVision。

為什么UI設(shè)計(jì)需要概念動效

這其實(shí)是目前最富有爭議的話題。很多概念動效和現(xiàn)有的、成型的動效/動畫解決方案，在步驟、效果、執(zhí)行和開發(fā)上都不盡相同，超出了通常的限制和常見的規(guī)則。這種動效技術(shù)在剛剛開始接觸的時(shí)候，會覺得不夠真實(shí)，沒有必要，甚至有人會認(rèn)為無法實(shí)現(xiàn)。

重點(diǎn)在于，UI 動效其實(shí)和我們常見的靜態(tài)元素（字體、圖標(biāo)、控件、色彩和形狀）同樣能夠讓產(chǎn)品從激烈的競爭當(dāng)中脫穎而出。

所有開發(fā)者討厭概念動效且不想去實(shí)現(xiàn)的說法其實(shí)是不夠準(zhǔn)確的。實(shí)際上，這樣的事情要依情況來看。在很多創(chuàng)意設(shè)計(jì)領(lǐng)域當(dāng)中，經(jīng)常有人說某種創(chuàng)新或者創(chuàng)意是不可能實(shí)現(xiàn)的，然而實(shí)際上，總會有人竭盡所能發(fā)現(xiàn)新的解決方案，找到新的方法。

需求決定供應(yīng)。如果「市場」看到了一個(gè)全新的設(shè)計(jì)理念，尤其是在動畫和動效領(lǐng)域，就會有人想辦法在實(shí)際的產(chǎn)品當(dāng)中將它實(shí)現(xiàn)出來。而這個(gè)時(shí)候，設(shè)計(jì)師的構(gòu)思就不再停留在概念上。在 Tubik Studio，我們在很多時(shí)候會提出新的概念動效，這些概念動效甚至可能會極其復(fù)雜，但是需求一旦確定，總會有第三方的開發(fā)接手并且將他們實(shí)現(xiàn)出來。

實(shí)踐表明，在技術(shù)上，概念動效的實(shí)現(xiàn)幾乎僅僅就是時(shí)間和花銷上的問題，解決和實(shí)現(xiàn)的可能性其實(shí)非常之高。

UI 概念動效設(shè)計(jì)實(shí)例

列表滾動

第一個(gè)案例展示了和列表交互的動畫，左邊的列表只是單純的滾動，而右邊的則明顯的加入了漸進(jìn)的動效，模擬現(xiàn)實(shí)中拉動卡片的微妙動作。右邊的變體看起來更加生動活潑，為滾動交互體驗(yàn)增加了樂趣。更有趣的地方在于，右邊的變體在運(yùn)動的過程中產(chǎn)生了卡片之間有更多空間的視覺幻象，這讓整個(gè)界面充滿了呼吸感和動感。

列表和詳情頁之間的過渡

上面的案例當(dāng)中，左邊只是簡單的左右切換過渡，而右邊則帶有放大和轉(zhuǎn)變的過渡，不僅讓動效的指向性更為明顯，而且更加富有動態(tài)。

側(cè)邊欄菜單

概念動效往往會力圖讓最常規(guī)的交互效果更加生動，比如側(cè)邊欄展開這樣常見的操作。

概念動效在 UI 中實(shí)現(xiàn)的實(shí)例

概念動效是 UI 設(shè)計(jì)階段最具有創(chuàng)造性的階段之一，動效設(shè)計(jì)師會提供不同的方案和選項(xiàng)來同開發(fā)者和客戶進(jìn)行討論。下面的案例都是 Kinill 和 UI 設(shè)計(jì)師一同實(shí)現(xiàn)的一些實(shí)例。

這是一個(gè)財(cái)務(wù)管理類應(yīng)用動效，采用不同色彩來實(shí)現(xiàn)餅狀圖來進(jìn)行數(shù)據(jù)展示，整個(gè)效果時(shí)髦值很高。

這是音樂新聞應(yīng)用中的過渡動效。

這是為家庭預(yù)算 APP 設(shè)計(jì)的菜單打開概念動效。

這是商務(wù)名片 APP 的 UI 概念動效。

這個(gè)日歷 APP 的概念動效想必大家都見過很多次了，多彩的設(shè)計(jì)和流暢的動效至今令人難忘。

這個(gè)充滿流動性側(cè)邊欄動效非常有意思。

概念動效的主要優(yōu)點(diǎn)

事實(shí)上，從最基本的構(gòu)思和概念開始創(chuàng)新和創(chuàng)造幾乎是每個(gè)行業(yè)都遵循的流程。包括汽車行業(yè)和建筑設(shè)計(jì)，大多都是從基本的概念設(shè)計(jì)著手，才有之后的實(shí)現(xiàn)和發(fā)展。概念設(shè)計(jì)最初常常以「這只是和現(xiàn)實(shí)無關(guān)的幻想」的樣子出現(xiàn)，但是最終實(shí)現(xiàn)出來并且走入日常生活的案例，比比皆是。不管怎樣，無論好壞，它們都在推動我們的生活逐步前進(jìn)。

在 UI 設(shè)計(jì)領(lǐng)域，概念動效的優(yōu)勢和意義也是一樣的。前不久有不少人認(rèn)為我們所設(shè)計(jì)的動效是不真實(shí)的、過于花俏的，但是實(shí)現(xiàn)出來，上手之后，往往和預(yù)期不盡相同。在平面設(shè)計(jì)的年代，靜態(tài)的設(shè)計(jì)追求的是持久的價(jià)值，簡約和清爽讓這種價(jià)值得以維系。但是在這個(gè)用戶注意力資源極其有限的今天，多樣的需求和緊張的競爭使得動效設(shè)計(jì)師需要竭盡全力抓住用戶的每一點(diǎn)注意力，至少，越來越腦洞大開的動效正在證明它們在這件事上無可替代的價(jià)值。

原文作者 :?Tubik Studio

譯者／編輯 :?陳子木

譯文地址：https://www.uisdc.com/conceptual-animation-making-ui

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖由作者提供