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

要有原型：

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

了解開發(fā)：

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

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

   目前業(yè)界環(huán)境是這樣的一種情況，因為我們等同于一直站在巨人的肩膀上學(xué)習(xí)。我們的審美、設(shè)計、品味都在極力學(xué)習(xí)國外。在UI方面我們的能力可能不像國外的開發(fā)那么容易，語言在編程方面是我們的短板。但是我們整個行業(yè)無論是設(shè)計還是開發(fā)，我們的起點都是很低的，中國UI設(shè)計師的能力也都處于在很低的一個階段。

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

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

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

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