很開心與大家分享一些設(shè)計(jì)經(jīng)驗(yàn)，今天我們主要來說說界面動(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)的，也就是說在它的大處是非常穩(wěn)的而細(xì)節(jié)處應(yīng)該追求一些“風(fēng)騷”感的，當(dāng)然這只是我的設(shè)計(jì)觀念。很多時(shí)候你設(shè)計(jì)動(dòng)效，應(yīng)該考慮我的動(dòng)效有沒有用？作為動(dòng)效設(shè)計(jì)師最尷尬的時(shí)候就是，你做了很多東西在動(dòng)畫效果上，你設(shè)計(jì)的會(huì)很炫，但是你會(huì)發(fā)現(xiàn)你的動(dòng)畫效果并沒有任何實(shí)際意義。在這種時(shí)候，個(gè)人建議你應(yīng)該理性大于感性，如果你的動(dòng)畫效果沒有任何的交互意義，反而會(huì)阻礙用戶的效率，那你就該毫不猶豫的刪除你的動(dòng)效。所以，每一個(gè)動(dòng)效設(shè)計(jì)的背后，都有它的深層含義。你要考慮你的動(dòng)效設(shè)計(jì)是否有交互意義。如下圖：是一個(gè)搜索欄的動(dòng)效展現(xiàn)，出現(xiàn)在引導(dǎo)頁面上帶給用戶的直觀感是“聚焦、提示”，那么我們可以說這個(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ì)在對原型方面是進(jìn)行了很多探索的，比如說FRAMER JS比如說Quartz Composer.他們會(huì)在原型里面加入更多的技巧。言歸正傳，為什么要有原型呢？因?yàn)榫臀覀€(gè)人而言在實(shí)際工作經(jīng)驗(yàn)中發(fā)現(xiàn)，當(dāng)我們用AE或者FLASH（當(dāng)然FLASH也可以做原型）我們用時(shí)間軸類軟件去在設(shè)計(jì)層面上就是無拘束的，不考慮系統(tǒng)的限制、不考慮交互的限制、去無拘束的進(jìn)行動(dòng)效設(shè)計(jì)，沒錯(cuò)，我們可以做出很炫的動(dòng)畫效果，我們可以做出來這個(gè)節(jié)奏非常完美，讓人感覺很爽的效果，但是！當(dāng)你的效果上了手機(jī)上的時(shí)候，你卻不知道它是怎樣一種效果。它是否會(huì)卡頓？它是否會(huì)出現(xiàn)你意料不到的手勢沖突？某些效果無法實(shí)現(xiàn)等等，你用AE做出來的效果只能是看起來爽，喬布斯也說過不是LOOKS LIKE是HOW IT WORKS。原型在這里起到的作用就是你要去檢測你的設(shè)計(jì)，當(dāng)它真正被實(shí)施在移動(dòng)端或者網(wǎng)頁界面，你必須檢測使用后是一種怎樣的感覺。

了解開發(fā)：

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

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

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

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

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

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

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