設(shè)計(jì)師需要學(xué)會(huì)設(shè)計(jì)有意義的動(dòng)效(3)

在Google I/O的設(shè)計(jì)交流環(huán)節(jié)中，最常被問(wèn)到的問(wèn)題就是設(shè)計(jì)師如何將動(dòng)效設(shè)計(jì)納入到設(shè)計(jì)流程中。Googler們提到，雖然他們推薦使用AE，但是即便是他們自己也通常只是用它來(lái)完成小過(guò)度效果、加載過(guò)程以及圖標(biāo)轉(zhuǎn)變效果。不過(guò)，他們還提到，他們最新的Polymer網(wǎng)絡(luò)框架已經(jīng)將Material Design的UI組件納入其中。

簡(jiǎn)而言之，就是目前沒(méi)有完美的答案。這也意味著，對(duì)于動(dòng)效設(shè)計(jì)工具的開(kāi)發(fā)者而言，這是一個(gè)絕佳的機(jī)會(huì)。

Polymer 能幫你編排出一些沿著特定路徑運(yùn)動(dòng)的組件，或者一系列自由運(yùn)動(dòng)的動(dòng)效。不過(guò)只有當(dāng)你使用Material Design風(fēng)格的組件的時(shí)候，效果會(huì)非常不錯(cuò)，但是如果想自己定制的話，就很難說(shuō)了。

我曾經(jīng)每天都使用 Framer.js 來(lái)打造我的交互設(shè)計(jì)原型。它基本上是一個(gè)JavaScript動(dòng)畫框架，所以你如果你對(duì)JS不熟悉的話還需要一段時(shí)間來(lái)了解它。不過(guò)，不同于其他的JS工具，對(duì)于網(wǎng)頁(yè)開(kāi)發(fā)者而言，F(xiàn)ramer.js 非常容易上手。

Framer 在測(cè)試小交互或?qū)讉�(gè)不同頁(yè)連接到一起上有杰出的表現(xiàn)，但是作為新一代的工具，它在管理編排、跟蹤狀態(tài)、控制拖拽和滾動(dòng)元素上有這更多的需求。

同類型的工具還有Pixate，借助它，你可以使用簡(jiǎn)單的拖拽來(lái)制作原型，之后還可以在你的設(shè)備上瀏覽。不過(guò)這款工具沒(méi)有網(wǎng)頁(yè)端實(shí)時(shí)預(yù)覽，目前開(kāi)發(fā)進(jìn)度也并不快。

我仍然在等待更加完美的動(dòng)效設(shè)計(jì)和可交互原型設(shè)計(jì)工具。構(gòu)建屬于你自己的設(shè)計(jì)的過(guò)程中，你會(huì)仔細(xì)思考如何構(gòu)建以及設(shè)計(jì)的界限；許多問(wèn)題只有當(dāng)你遇到了才會(huì)被意識(shí)到。當(dāng)然，有一點(diǎn)是肯定的，只有當(dāng)你把一個(gè)真實(shí)的原型擺在團(tuán)隊(duì)面前的時(shí)候，溝通才會(huì)更加有效。當(dāng)你把一個(gè)可交互的高保真原型擺在眼前的時(shí)候，你就不用解釋點(diǎn)擊什么按鈕出現(xiàn)什么效果了。

越多設(shè)計(jì)師深入思考動(dòng)效設(shè)計(jì)，才能更快地促進(jìn)真正靠譜的軟件誕生，也更加有助于我們傳達(dá)設(shè)計(jì)的意圖。也只有這樣才能促進(jìn)更加優(yōu)秀產(chǎn)品的誕生，解決更多棘手的問(wèn)題。動(dòng)效設(shè)計(jì)正在成熟，你需要掌控它。

“設(shè)計(jì)就是用你所掌控的一切，來(lái)盡可能清晰的與人溝通。”—— Milton Glaser