很開(kāi)心與大家分享一些設(shè)計(jì)經(jīng)驗(yàn)，今天我們主要來(lái)說(shuō)說(shuō)界面動(dòng)效的幾大點(diǎn)。動(dòng)效制作給人感官的必要點(diǎn)是愉悅性。講到愉悅性很多設(shè)計(jì)師第一反應(yīng)是，那我作品是不是應(yīng)該一味炫。加入各種粒子、各種特效、各種彈彈彈。然后各種變形，像窗簾那種。其實(shí)這種設(shè)計(jì)理念是大錯(cuò)特錯(cuò)的，在我個(gè)人的動(dòng)效設(shè)計(jì)觀里，我認(rèn)為好的動(dòng)效，它的基調(diào)應(yīng)該是非常穩(wěn)的，也就是說(shuō)在它的大處是非常穩(wěn)的而細(xì)節(jié)處應(yīng)該追求一些“風(fēng)騷”感的，當(dāng)然這只是我的設(shè)計(jì)觀念。很多時(shí)候你設(shè)計(jì)動(dòng)效，應(yīng)該考慮我的動(dòng)效有沒(méi)有用？作為動(dòng)效設(shè)計(jì)師最尷尬的時(shí)候就是，你做了很多東西在動(dòng)畫(huà)效果上，你設(shè)計(jì)的會(huì)很炫，但是你會(huì)發(fā)現(xiàn)你的動(dòng)畫(huà)效果并沒(méi)有任何實(shí)際意義。在這種時(shí)候，個(gè)人建議你應(yīng)該理性大于感性，如果你的動(dòng)畫(huà)效果沒(méi)有任何的交互意義，反而會(huì)阻礙用戶的效率，那你就該毫不猶豫的刪除你的動(dòng)效。所以，每一個(gè)動(dòng)效設(shè)計(jì)的背后，都有它的深層含義。你要考慮你的動(dòng)效設(shè)計(jì)是否有交互意義。如下圖：是一個(gè)搜索欄的動(dòng)效展現(xiàn)，出現(xiàn)在引導(dǎo)頁(yè)面上帶給用戶的直觀感是“聚焦、提示”，那么我們可以說(shuō)這個(gè)動(dòng)效是有意義的——聚焦用戶、提示用戶。

要有原型：

我個(gè)人的設(shè)計(jì)總結(jié)是，一定要有原型即prototype，我們可以管靜態(tài)設(shè)計(jì)師設(shè)計(jì)的東西叫做靜態(tài)原型，我們可以管線框圖叫低保質(zhì)原型，這是交互設(shè)計(jì)師負(fù)責(zé)干的事。而我們動(dòng)效設(shè)計(jì)師同樣也要出自己的原型。我們應(yīng)該出的是什么呢？——可交互原型。例如下圖，google界面動(dòng)效的一個(gè)展示。我們可以看到google動(dòng)效設(shè)計(jì)師在聯(lián)系原型系列交互事件中的強(qiáng)悍之處，google動(dòng)效設(shè)計(jì)團(tuán)隊(duì)在對(duì)原型方面是進(jìn)行了很多探索的，比如說(shuō)FRAMER JS比如說(shuō)Quartz Composer.他們會(huì)在原型里面加入更多的技巧。言歸正傳，為什么要有原型呢？因?yàn)榫臀覀€(gè)人而言在實(shí)際工作經(jīng)驗(yàn)中發(fā)現(xiàn)，當(dāng)我們用AE或者FLASH（當(dāng)然FLASH也可以做原型）我們用時(shí)間軸類軟件去在設(shè)計(jì)層面上就是無(wú)拘束的，不考慮系統(tǒng)的限制、不考慮交互的限制、去無(wú)拘束的進(jìn)行動(dòng)效設(shè)計(jì)，沒(méi)錯(cuò)，我們可以做出很炫的動(dòng)畫(huà)效果，我們可以做出來(lái)這個(gè)節(jié)奏非常完美，讓人感覺(jué)很爽的效果，但是！當(dāng)你的效果上了手機(jī)上的時(shí)候，你卻不知道它是怎樣一種效果。它是否會(huì)卡頓？它是否會(huì)出現(xiàn)你意料不到的手勢(shì)沖突？某些效果無(wú)法實(shí)現(xiàn)等等，你用AE做出來(lái)的效果只能是看起來(lái)爽，喬布斯也說(shuō)過(guò)不是LOOKS LIKE是HOW IT WORKS。原型在這里起到的作用就是你要去檢測(cè)你的設(shè)計(jì)，當(dāng)它真正被實(shí)施在移動(dòng)端或者網(wǎng)頁(yè)界面，你必須檢測(cè)使用后是一種怎樣的感覺(jué)。

了解開(kāi)發(fā)：

1、一個(gè)是AE或者其它軟件設(shè)計(jì)出來(lái)的很炫的展示稿

2、建議，可以給開(kāi)發(fā)一份原型，讓他去操作一下感受這個(gè)動(dòng)畫(huà)的交互度和操作起來(lái)是什么感覺(jué)。

   目前業(yè)界環(huán)境是這樣的一種情況，因?yàn)槲覀兊韧谝恢闭驹诰奕说募绨蛏蠈W(xué)習(xí)。我們的審美、設(shè)計(jì)、品味都在極力學(xué)習(xí)國(guó)外。在UI方面我們的能力可能不像國(guó)外的開(kāi)發(fā)那么容易，語(yǔ)言在編程方面是我們的短板。但是我們整個(gè)行業(yè)無(wú)論是設(shè)計(jì)還是開(kāi)發(fā)，我們的起點(diǎn)都是很低的，中國(guó)UI設(shè)計(jì)師的能力也都處于在很低的一個(gè)階段。

   我們?cè)诠ぷ鞣椒?、工作流程以及本?yīng)該去緊密銜接的設(shè)計(jì)開(kāi)發(fā)這兩個(gè)行業(yè)之間缺乏某種溝通。重點(diǎn)就是溝通，我們可以看到設(shè)計(jì)師了解開(kāi)發(fā)，站在設(shè)計(jì)和開(kāi)發(fā)的交叉路口上，能看到更遠(yuǎn)的東西。

   多與開(kāi)發(fā)溝通，他可以知道我在設(shè)計(jì)軟件里做的這個(gè)動(dòng)畫(huà)能否被實(shí)現(xiàn)？我在開(kāi)發(fā)里面是否支持粒子的系統(tǒng)？那我是應(yīng)該放手去做還是我應(yīng)該去找開(kāi)發(fā)者溝通？當(dāng)你了解開(kāi)發(fā)之后，你會(huì)發(fā)現(xiàn)這條路忽然變得寬大起來(lái)。那么，了解開(kāi)發(fā)要了解什么呢？IOS、你需要了解得并不多，因?yàn)槟闶且栽O(shè)計(jì)者的角度去了解開(kāi)發(fā)。如果你是靜態(tài)設(shè)計(jì)師，你要了解切圖storyboard\或者怎么去進(jìn)行自動(dòng)布局、怎么去適配這些事情是靜態(tài)設(shè)計(jì)師該關(guān)心的問(wèn)題。作為動(dòng)態(tài)設(shè)計(jì)師我們應(yīng)該關(guān)心什么呢？應(yīng)該關(guān)心：動(dòng)畫(huà)鏈的制作，完成第一個(gè)段落后，完成第二個(gè)，做第三個(gè)，第四個(gè)。。。這個(gè)時(shí)候語(yǔ)法怎么寫(xiě)？所以你需要大致了解一點(diǎn)，比如IOS它自帶的哪些動(dòng)畫(huà)的一些語(yǔ)法，比如IOS自帶的彈性動(dòng)畫(huà)、緩動(dòng)動(dòng)畫(huà)、關(guān)鍵幀動(dòng)畫(huà)、路徑動(dòng)畫(huà)、粒子動(dòng)畫(huà)、再包括IOS自帶的逐幀動(dòng)畫(huà)等等。

   當(dāng)你在設(shè)計(jì)時(shí)你可能并不了解太多，你隨便做，各種炫酷各種來(lái)，但是當(dāng)你遞給開(kāi)發(fā)的時(shí)候，你會(huì)發(fā)現(xiàn)很多東西無(wú)法實(shí)現(xiàn)。這個(gè)時(shí)候你再去改，你的設(shè)計(jì)已經(jīng)背離了你的初衷了。所以這樣的情況對(duì)產(chǎn)品或你的設(shè)計(jì)的最終成果來(lái)說(shuō)都是不理想的。

   首先，你得知道你的設(shè)計(jì)限制在什么地方，在這個(gè)圈之內(nèi)去進(jìn)行設(shè)計(jì)，盡量把這個(gè)圈畫(huà)滿，而不是先畫(huà)的很滿，最后你發(fā)現(xiàn)你的圈只是很小的一部，你會(huì)發(fā)現(xiàn)你開(kāi)發(fā)的這個(gè)只有很小一部分和你交集。這時(shí)候你再去調(diào)整你的路線，你會(huì)發(fā)現(xiàn)無(wú)論時(shí)間成本還是學(xué)習(xí)成本你會(huì)花費(fèi)非常多，代價(jià)非常大。這些就是我對(duì)于UI界面動(dòng)效的理解和看法，也歡迎想踏入U(xiǎn)I行業(yè)的設(shè)計(jì)師們多多交流。