動(dòng)效是這個(gè)扁平化時(shí)代，交互設(shè)計(jì)必然的一個(gè)出口。UI動(dòng)效設(shè)計(jì)能讓用戶體驗(yàn)更加舒適順暢，一直都非常受設(shè)計(jì)師歡迎。

現(xiàn)在扁平化來臨的這幾年我們不難發(fā)現(xiàn)，動(dòng)效越來越深入人心，那些深受用戶喜愛的產(chǎn)品都在把動(dòng)效作為APP的表現(xiàn)形式之一。

動(dòng)效設(shè)計(jì)并不只是為了修飾，他的重要性是在用戶在遇到問題時(shí)候，動(dòng)效能夠用易于用戶接受的方式幫助用戶解決。能站在解決問題的立場(chǎng)上給我們提供一種新的方式。

動(dòng)效可以表現(xiàn)APP的質(zhì)量，并且可以提供和完善信息的關(guān)聯(lián)形式，還可以與用戶互動(dòng)，產(chǎn)生共鳴

那我們聊聊關(guān)于動(dòng)效設(shè)計(jì)這點(diǎn)事，圖片較多，建議先馬后看。

首先動(dòng)效設(shè)計(jì)分為兩種類型

1，MG動(dòng)效類

MG動(dòng)效類

MG動(dòng)效在大多數(shù)交互設(shè)計(jì)里，都是充當(dāng)了增加產(chǎn)品魅力值，增加趣味性的作用。

這類的小動(dòng)效還可以幫助品牌在細(xì)節(jié)中流露出它的特性，還能表達(dá)應(yīng)用的情緒和氣質(zhì)，在產(chǎn)品內(nèi)部以及產(chǎn)品之間形成完整并且統(tǒng)一的操作體驗(yàn)。

2，交互動(dòng)效

交互動(dòng)效

我們可以看到動(dòng)效在瀏覽器里面，非常有效的去引導(dǎo)用戶進(jìn)入下一個(gè)頁(yè)面，并且把層次結(jié)構(gòu)和空間關(guān)系在屏幕內(nèi)外之間進(jìn)行一個(gè)傳達(dá)。

在觸發(fā)一個(gè)動(dòng)作之前，用戶可以提前預(yù)知到接下來的反饋，并且可以從好的方面去分散用戶的注意力。

動(dòng)效設(shè)計(jì)的原則

我們先看一個(gè)在交互設(shè)計(jì)里面第一個(gè)明確動(dòng)效表意的官方設(shè)計(jì)規(guī)范。

在谷歌的基礎(chǔ)上進(jìn)行了延伸和概括，可以總結(jié)出一個(gè)好的動(dòng)效設(shè)計(jì)，需要具備四個(gè)條件：

快速反饋符合自然規(guī)律洞察其他元素明確視覺引導(dǎo)

1，快速反饋

天下武功，唯快不破。

快速反饋的指動(dòng)效需要對(duì)操作快速做出反饋和響應(yīng)。

快速反饋里，時(shí)間很重要，慢了用戶會(huì)感到拖沓，快了用戶又會(huì)感到不適。這里，推薦動(dòng)效的持續(xù)時(shí)間在300到350毫秒之間，這個(gè)時(shí)間是比較舒服的。

超出這個(gè)時(shí)間就會(huì)給人的感受非常的慢，非常的遲鈍。雖然慢狀態(tài)下的用戶能看到更多的細(xì)節(jié)和更細(xì)膩的過渡，但是這只是交互設(shè)計(jì)師的一廂情愿，用戶只想以最快的速度完成自己在APP里面的任務(wù)。

正確案例：

反面案例：

2，符合自然規(guī)律

人們總會(huì)習(xí)慣把大自然里面看到的東西帶入到電子屏幕世界，這就需要我們?cè)谧鰟?dòng)效時(shí)候一定要符合自然運(yùn)動(dòng)規(guī)律。

自然界中的運(yùn)動(dòng)一般都會(huì)受到各種各樣外界力量的影響，比如空氣阻力，慣性，摩擦力等等。

沒有任何物體會(huì)突然動(dòng)起來或者突然停下來，通常都會(huì)有一段從動(dòng)態(tài)到靜止或者靜止到動(dòng)態(tài)的過渡過程，那么身為交互設(shè)計(jì)師為了遵循這個(gè)自然運(yùn)動(dòng)規(guī)律，就需要我們對(duì)動(dòng)效加上一定的緩動(dòng)。

緩動(dòng)分為以下幾種情況：

（1）緩入緩出

案例：

（2）緩入

一個(gè)元素從屏幕外進(jìn)入屏幕，他一瞬間的加速發(fā)生在屏幕外邊，你看不到他，他給人的感覺就是它從屏幕外邊特別快速的進(jìn)入。

用戶也不在乎他從哪兒來，只會(huì)留意它最后去了哪里，像這樣的曲線我們就稱之為緩入曲線。

案例：

（3）緩出

相反的，緩出曲線用在元素退出屏幕的時(shí)候，他的加速是遞增的，但是他的減速是一瞬間的，相同的，減速的一瞬間發(fā)生在屏幕外邊我們也就不會(huì)再去留意。

案例：

（4）弧形運(yùn)動(dòng)

動(dòng)效除了基本的緩動(dòng)之外，還需要另一個(gè)概念：弧形運(yùn)動(dòng)。

為什么是弧線？流星劃過是一條弧線，人揮手是一條弧線，風(fēng)吹樹枝的搖擺也是弧線，純直線運(yùn)動(dòng)的物體是沒有的，它或多或少都會(huì)受到這個(gè)力那個(gè)力的影響，所以我們?cè)谧鰟?dòng)效的時(shí)候要加一些曲線運(yùn)動(dòng)。

案例：

總結(jié)：

當(dāng)你做的動(dòng)效符合自然規(guī)律后，界面里每一個(gè)元素在轉(zhuǎn)場(chǎng)過渡中都考慮了不同重量會(huì)對(duì)外力做出的反饋后，你的動(dòng)效才會(huì)看起來無比的順滑又恰到好處。

3，洞察其他元素

下面這張圖片表現(xiàn)了動(dòng)效在轉(zhuǎn)場(chǎng)過程中的元素變換。

當(dāng)元素切換界面的時(shí)候，它會(huì)考慮與周圍其他元素的關(guān)系，按照層次結(jié)構(gòu)進(jìn)行變化，解釋這些元素從哪里來，到哪里去。

元素或者模塊表面可以互相推開，在相同高度下的元素，一個(gè)元素展開就需要推開另一個(gè)元素或者模塊來展現(xiàn)層級(jí)。

當(dāng)元素上升到了不同的高度，就不需要再去推開周圍的元素了。

4，明確視覺引導(dǎo)

（1）共享元素

在動(dòng)效設(shè)計(jì)里有一個(gè)比較關(guān)鍵概念叫做共享元素。共享元素就是共同出現(xiàn)在相關(guān)聯(lián)的兩個(gè)頁(yè)面中，上個(gè)界面到下個(gè)界面的切換過中，共享元素內(nèi)容不發(fā)生變化。

如下如的App Store：

但是注意，共享元素一般在界面中有一到兩個(gè)就足夠了，太多會(huì)導(dǎo)致用戶無法辨別哪個(gè)才是共享元素，不知道該跟著哪個(gè)。會(huì)產(chǎn)生干擾，得不償失。

（2）交錯(cuò)元素

還有一種視覺引導(dǎo)的方式叫做交錯(cuò)元素，利用每一個(gè)元素出現(xiàn)的先后順序來引導(dǎo)視線，核心理念是把視覺引導(dǎo)到一條直線上，單列的交錯(cuò)一般情況下從上往下最為合適，會(huì)比不自然的出現(xiàn)和同時(shí)出現(xiàn)更容易引導(dǎo)用戶去做一些操作。

（3）交錯(cuò)網(wǎng)格

交錯(cuò)網(wǎng)格會(huì)復(fù)雜一些，適合場(chǎng)景有限，一般我們把網(wǎng)格當(dāng)做一個(gè)整體，再把他們沿一個(gè)對(duì)角線依次展現(xiàn)出來，會(huì)比逐行處理更容易引導(dǎo)用戶去做一些操作，單列交錯(cuò)或者網(wǎng)格交錯(cuò)的錯(cuò)幀時(shí)間一般建議是在20-25毫秒之間。

（4）提前預(yù)知

除了轉(zhuǎn)場(chǎng)動(dòng)畫中的視覺引導(dǎo)之外，在轉(zhuǎn)場(chǎng)之前也可以通過一定的反饋提前預(yù)知操作的結(jié)果，比如這里一個(gè)簡(jiǎn)單的卡片右滑，在不能滑動(dòng)的情況下加上一定的阻力，表現(xiàn)他的不可滑動(dòng)，相反當(dāng)我們遇到可以滑動(dòng)的項(xiàng)的時(shí)候可以讓他顯得更容易滑動(dòng)。

插件分享

1，sketch 2 ae

這款插件是谷歌最近推出的一款插件，只需要簡(jiǎn)單的對(duì) sketch 中的圖層用插件做一個(gè)復(fù)制粘貼就能完成從 sketch 到 ae 的導(dǎo)入，并且支持 “組” 和 “組件” 的導(dǎo)入，以及對(duì)矢量圖層的導(dǎo)入。

2，Trapcode

我們?cè)?dribbble 上經(jīng)常都能看到這樣一些令人眼花繚亂的動(dòng)效，像這樣的動(dòng)效大多數(shù)都是使用 Trapcode 插件制作的。功能及其強(qiáng)大，合理利用能做出非常炫酷和順滑的效果。

3，Motion2

它主要用在 MG 動(dòng)效領(lǐng)域，功能全面且十分實(shí)用。

重點(diǎn)推薦三個(gè)功能：

1，調(diào)節(jié)緩動(dòng)

2，快速定位中心點(diǎn)

3，批量復(fù)制關(guān)鍵幀

AE 的操作雖然相當(dāng)復(fù)雜，但是有了這款插件之后，就能大大提高我們的效率。

4，F(xiàn)low

我們?cè)?AE 里調(diào)好的緩動(dòng)，在和開發(fā)哥哥對(duì)接的時(shí)候他們是很頭大的，因?yàn)殚_發(fā)程序里讀取的是貝塞爾曲線，而非速度圖表。那么針對(duì)這種情況，flow這款插件，提供了25種可以直接給到開發(fā)的曲線類型。還可以導(dǎo)出css緩動(dòng)代碼，幫助團(tuán)隊(duì)完成緩動(dòng)復(fù)用。

以上的分享就到這里。

關(guān)于交互設(shè)計(jì)入門書籍，樓上有很多答主的推薦都不錯(cuò)，不過交互設(shè)計(jì)作為國(guó)內(nèi)的一個(gè)新興專業(yè)，未接觸過的人在學(xué)習(xí)初期容易混淆很多專業(yè)概念，在自學(xué)過程中還要花費(fèi)時(shí)間整理知識(shí)點(diǎn)。下面小編就簡(jiǎn)單梳理一下交互“入門”階段的一些基本定義與常見的項(xiàng)目表現(xiàn)形式，希望能幫助題主更快的進(jìn)入學(xué)習(xí)狀態(tài)：

一、交互設(shè)計(jì)是什么?

各個(gè)百科上對(duì)交互設(shè)計(jì)都有非常明確的定義，但對(duì)于沒有專業(yè)基礎(chǔ)的同學(xué)們來說，這些定義還是略顯彎彎繞繞，小編簡(jiǎn)單解釋一下：交互設(shè)計(jì)，其實(shí)就像人與人之間的日常交流一樣，人與系統(tǒng)之間也是“有問有答”，具有互動(dòng)性的，而交互設(shè)計(jì)就是協(xié)調(diào)人與系統(tǒng)之間的“交流”方式。凡是可以通過五感來達(dá)成的信息傳遞、觀念傳遞、情感傳遞的互動(dòng)行為都在“交流”的范圍之內(nèi)。

從具體表現(xiàn)形式上來說，包括但不限于手機(jī)APP、傳統(tǒng)網(wǎng)站、可穿戴設(shè)備以及新興的VR，各種與非電子類產(chǎn)品的交互關(guān)系也屬于交互設(shè)計(jì)的范圍。

這樣一講，交互設(shè)計(jì)的范圍似乎太過寬泛，但其實(shí)簡(jiǎn)單來說，交互設(shè)計(jì)大致可以分為三個(gè)基礎(chǔ)模塊：

1. 美學(xué)——用戶界面設(shè)計(jì)(User Interface Design)

2. 心理學(xué)——用戶體驗(yàn)設(shè)計(jì)(User Experience Design)

3. 計(jì)算機(jī)&工程學(xué)——人機(jī)交互設(shè)計(jì)(Human-Computer Interaction)

在這里我們先說UI設(shè)計(jì)(用戶界面設(shè)計(jì))，大多人似乎都知道UI設(shè)計(jì)是什么。但其實(shí)，UI放在交互系統(tǒng)內(nèi)，比如眾所周知的app、網(wǎng)站，它可以成為交互設(shè)計(jì)展現(xiàn)的一種媒介，是交互設(shè)計(jì)中一個(gè)難以或缺的組成部分。嚴(yán)格來說，UI設(shè)計(jì)并不屬于交互設(shè)計(jì)，它實(shí)則應(yīng)該歸類于Graphic Design--平面設(shè)計(jì)。

而HCI(人機(jī)交互設(shè)計(jì))，與VR、AR，以及大數(shù)據(jù)等次時(shí)代的前沿科技相關(guān)，未來發(fā)展前景光明。但需要強(qiáng)調(diào)的是，HCI絕大部分學(xué)校是按理工科教授，因?yàn)樗饕芯康氖侨藱C(jī)如何交互，而不是人機(jī)為什么交互，為誰交互，以及交互究竟有何意義。簡(jiǎn)言之，就是HCI研究人機(jī)交互的技術(shù)，更簡(jiǎn)言之，多數(shù)是在搞程序、編代碼。

最后，重點(diǎn)說一下涉及到心理學(xué)的UX設(shè)計(jì)(用戶體驗(yàn)設(shè)計(jì))。在交互作品集的創(chuàng)作中，UX是尤為關(guān)鍵和重要的，主要原因在于，相較國(guó)內(nèi)對(duì)于學(xué)術(shù)研究和視覺審美的培養(yǎng)，國(guó)外院校更看重的是設(shè)計(jì)出來的物品是否真正解決了用戶的需求。

這一點(diǎn)就要求了設(shè)計(jì)者必須換位思考，設(shè)身處地的站在用戶的角度上去考慮設(shè)計(jì)的每一步。這也應(yīng)證了交互設(shè)計(jì)的本質(zhì)——交互設(shè)計(jì)師設(shè)計(jì)出來的是用戶想要的東西，而不是設(shè)計(jì)師要做用戶想要的東西。

二、交互項(xiàng)目常見表現(xiàn)形式

1. APP、網(wǎng)頁(yè)

交互設(shè)計(jì)中，最簡(jiǎn)單的就是單一化的APP或網(wǎng)頁(yè)項(xiàng)目，幾乎每一個(gè)同學(xué)在學(xué)習(xí)中都會(huì)涉及到。而且APP與網(wǎng)頁(yè)項(xiàng)目的制作過程與方法相似程度高達(dá)90%，同學(xué)們?cè)趧?chuàng)作項(xiàng)目初期可以先嘗試這類項(xiàng)目練手，盡快熟悉作品集的創(chuàng)作流程。

2. 復(fù)合APP制作

比上述提到的APP和網(wǎng)頁(yè)稍復(fù)雜的是復(fù)合APP，比如產(chǎn)品+APP、傳感+APP、裝置+APP、手表+APP 、網(wǎng)頁(yè)+APP等等，簡(jiǎn)單說，不僅僅是以APP為載體類型的應(yīng)用都可以稱之為復(fù)合App。主要也是為了解決形式單一化，以及豐富項(xiàng)目?jī)?nèi)容創(chuàng)造更多設(shè)計(jì)點(diǎn)。如果思考維度多元化，專業(yè)領(lǐng)域深入探究，也可以發(fā)展為一個(gè)服務(wù)設(shè)計(jì)項(xiàng)目。

3. 交互裝置制作

裝置在交互設(shè)計(jì)中屬于較為復(fù)雜的項(xiàng)目，因?yàn)榧夹g(shù)方面涉及到了電子化編程和電路板連接傳感器等內(nèi)容，呈現(xiàn)效果體現(xiàn)了交互意識(shí)、審美意識(shí)以及代碼意識(shí)。內(nèi)容方面，交互裝置更多是從產(chǎn)品原型開發(fā)去研究。由于涉及到代碼問題，在創(chuàng)作這類項(xiàng)目之前，專業(yè)技能及代碼知識(shí)都需要系統(tǒng)的了解。

4. 游戲制作(普通→AR→VR)

在交互游戲制作過程當(dāng)中，很多同學(xué)會(huì)遇到不知道制作流程，不明晰VR和AR是什么概念，或許也會(huì)困惑為何我們把AR、VR列入游戲制作等種種問題。事實(shí)上，VR、AR也都需要通過游戲引擎搭建，所以從本質(zhì)上來看，它們都是游戲。

動(dòng)效是這個(gè)扁平化時(shí)代，交互設(shè)計(jì)必然的一個(gè)出口。UI動(dòng)效設(shè)計(jì)能讓用戶體驗(yàn)更加舒適順暢，一直都非常受設(shè)計(jì)師歡迎。

現(xiàn)在扁平化來臨的這幾年我們不難發(fā)現(xiàn)，動(dòng)效越來越深入人心，那些深受用戶喜愛的產(chǎn)品都在把動(dòng)效作為APP的表現(xiàn)形式之一。

動(dòng)效設(shè)計(jì)并不只是為了修飾，他的重要性是在用戶在遇到問題時(shí)候，動(dòng)效能夠用易于用戶接受的方式幫助用戶解決。能站在解決問題的立場(chǎng)上給我們提供一種新的方式。

動(dòng)效可以表現(xiàn)APP的質(zhì)量，并且可以提供和完善信息的關(guān)聯(lián)形式，還可以與用戶互動(dòng)，產(chǎn)生共鳴

那我們聊聊關(guān)于動(dòng)效設(shè)計(jì)這點(diǎn)事，圖片較多，建議先馬后看。

首先動(dòng)效設(shè)計(jì)分為兩種類型

1，MG動(dòng)效類

MG動(dòng)效類

MG動(dòng)效在大多數(shù)交互設(shè)計(jì)里，都是充當(dāng)了增加產(chǎn)品魅力值，增加趣味性的作用。

這類的小動(dòng)效還可以幫助品牌在細(xì)節(jié)中流露出它的特性，還能表達(dá)應(yīng)用的情緒和氣質(zhì)，在產(chǎn)品內(nèi)部以及產(chǎn)品之間形成完整并且統(tǒng)一的操作體驗(yàn)。

2，交互動(dòng)效

交互動(dòng)效

我們可以看到動(dòng)效在瀏覽器里面，非常有效的去引導(dǎo)用戶進(jìn)入下一個(gè)頁(yè)面，并且把層次結(jié)構(gòu)和空間關(guān)系在屏幕內(nèi)外之間進(jìn)行一個(gè)傳達(dá)。

在觸發(fā)一個(gè)動(dòng)作之前，用戶可以提前預(yù)知到接下來的反饋，并且可以從好的方面去分散用戶的注意力。

動(dòng)效設(shè)計(jì)的原則

我們先看一個(gè)在交互設(shè)計(jì)里面第一個(gè)明確動(dòng)效表意的官方設(shè)計(jì)規(guī)范。

在谷歌的基礎(chǔ)上進(jìn)行了延伸和概括，可以總結(jié)出一個(gè)好的動(dòng)效設(shè)計(jì)，需要具備四個(gè)條件：

快速反饋符合自然規(guī)律洞察其他元素明確視覺引導(dǎo)

1，快速反饋

天下武功，唯快不破。

快速反饋的指動(dòng)效需要對(duì)操作快速做出反饋和響應(yīng)。

快速反饋里，時(shí)間很重要，慢了用戶會(huì)感到拖沓，快了用戶又會(huì)感到不適。這里，推薦動(dòng)效的持續(xù)時(shí)間在300到350毫秒之間，這個(gè)時(shí)間是比較舒服的。

超出這個(gè)時(shí)間就會(huì)給人的感受非常的慢，非常的遲鈍。雖然慢狀態(tài)下的用戶能看到更多的細(xì)節(jié)和更細(xì)膩的過渡，但是這只是交互設(shè)計(jì)師的一廂情愿，用戶只想以最快的速度完成自己在APP里面的任務(wù)。

正確案例：

反面案例：

2，符合自然規(guī)律

人們總會(huì)習(xí)慣把大自然里面看到的東西帶入到電子屏幕世界，這就需要我們?cè)谧鰟?dòng)效時(shí)候一定要符合自然運(yùn)動(dòng)規(guī)律。

自然界中的運(yùn)動(dòng)一般都會(huì)受到各種各樣外界力量的影響，比如空氣阻力，慣性，摩擦力等等。

沒有任何物體會(huì)突然動(dòng)起來或者突然停下來，通常都會(huì)有一段從動(dòng)態(tài)到靜止或者靜止到動(dòng)態(tài)的過渡過程，那么身為交互設(shè)計(jì)師為了遵循這個(gè)自然運(yùn)動(dòng)規(guī)律，就需要我們對(duì)動(dòng)效加上一定的緩動(dòng)。

緩動(dòng)分為以下幾種情況：

（1）緩入緩出

案例：

（2）緩入

一個(gè)元素從屏幕外進(jìn)入屏幕，他一瞬間的加速發(fā)生在屏幕外邊，你看不到他，他給人的感覺就是它從屏幕外邊特別快速的進(jìn)入。

用戶也不在乎他從哪兒來，只會(huì)留意它最后去了哪里，像這樣的曲線我們就稱之為緩入曲線。

案例：

（3）緩出

相反的，緩出曲線用在元素退出屏幕的時(shí)候，他的加速是遞增的，但是他的減速是一瞬間的，相同的，減速的一瞬間發(fā)生在屏幕外邊我們也就不會(huì)再去留意。

案例：

（4）弧形運(yùn)動(dòng)

動(dòng)效除了基本的緩動(dòng)之外，還需要另一個(gè)概念：弧形運(yùn)動(dòng)。

為什么是弧線？流星劃過是一條弧線，人揮手是一條弧線，風(fēng)吹樹枝的搖擺也是弧線，純直線運(yùn)動(dòng)的物體是沒有的，它或多或少都會(huì)受到這個(gè)力那個(gè)力的影響，所以我們?cè)谧鰟?dòng)效的時(shí)候要加一些曲線運(yùn)動(dòng)。

案例：

總結(jié)：

當(dāng)你做的動(dòng)效符合自然規(guī)律后，界面里每一個(gè)元素在轉(zhuǎn)場(chǎng)過渡中都考慮了不同重量會(huì)對(duì)外力做出的反饋后，你的動(dòng)效才會(huì)看起來無比的順滑又恰到好處。

3，洞察其他元素

下面這張圖片表現(xiàn)了動(dòng)效在轉(zhuǎn)場(chǎng)過程中的元素變換。

當(dāng)元素切換界面的時(shí)候，它會(huì)考慮與周圍其他元素的關(guān)系，按照層次結(jié)構(gòu)進(jìn)行變化，解釋這些元素從哪里來，到哪里去。

元素或者模塊表面可以互相推開，在相同高度下的元素，一個(gè)元素展開就需要推開另一個(gè)元素或者模塊來展現(xiàn)層級(jí)。

當(dāng)元素上升到了不同的高度，就不需要再去推開周圍的元素了。

4，明確視覺引導(dǎo)

（1）共享元素

在動(dòng)效設(shè)計(jì)里有一個(gè)比較關(guān)鍵概念叫做共享元素。共享元素就是共同出現(xiàn)在相關(guān)聯(lián)的兩個(gè)頁(yè)面中，上個(gè)界面到下個(gè)界面的切換過中，共享元素內(nèi)容不發(fā)生變化。

如下如的App Store：

但是注意，共享元素一般在界面中有一到兩個(gè)就足夠了，太多會(huì)導(dǎo)致用戶無法辨別哪個(gè)才是共享元素，不知道該跟著哪個(gè)。會(huì)產(chǎn)生干擾，得不償失。

（2）交錯(cuò)元素

還有一種視覺引導(dǎo)的方式叫做交錯(cuò)元素，利用每一個(gè)元素出現(xiàn)的先后順序來引導(dǎo)視線，核心理念是把視覺引導(dǎo)到一條直線上，單列的交錯(cuò)一般情況下從上往下最為合適，會(huì)比不自然的出現(xiàn)和同時(shí)出現(xiàn)更容易引導(dǎo)用戶去做一些操作。

（3）交錯(cuò)網(wǎng)格

交錯(cuò)網(wǎng)格會(huì)復(fù)雜一些，適合場(chǎng)景有限，一般我們把網(wǎng)格當(dāng)做一個(gè)整體，再把他們沿一個(gè)對(duì)角線依次展現(xiàn)出來，會(huì)比逐行處理更容易引導(dǎo)用戶去做一些操作，單列交錯(cuò)或者網(wǎng)格交錯(cuò)的錯(cuò)幀時(shí)間一般建議是在20-25毫秒之間。

（4）提前預(yù)知

除了轉(zhuǎn)場(chǎng)動(dòng)畫中的視覺引導(dǎo)之外，在轉(zhuǎn)場(chǎng)之前也可以通過一定的反饋提前預(yù)知操作的結(jié)果，比如這里一個(gè)簡(jiǎn)單的卡片右滑，在不能滑動(dòng)的情況下加上一定的阻力，表現(xiàn)他的不可滑動(dòng)，相反當(dāng)我們遇到可以滑動(dòng)的項(xiàng)的時(shí)候可以讓他顯得更容易滑動(dòng)。

插件分享

1，sketch 2 ae

這款插件是谷歌最近推出的一款插件，只需要簡(jiǎn)單的對(duì) sketch 中的圖層用插件做一個(gè)復(fù)制粘貼就能完成從 sketch 到 ae 的導(dǎo)入，并且支持 “組” 和 “組件” 的導(dǎo)入，以及對(duì)矢量圖層的導(dǎo)入。

2，Trapcode

我們?cè)?dribbble 上經(jīng)常都能看到這樣一些令人眼花繚亂的動(dòng)效，像這樣的動(dòng)效大多數(shù)都是使用 Trapcode 插件制作的。功能及其強(qiáng)大，合理利用能做出非常炫酷和順滑的效果。

3，Motion2

它主要用在 MG 動(dòng)效領(lǐng)域，功能全面且十分實(shí)用。

重點(diǎn)推薦三個(gè)功能：

1，調(diào)節(jié)緩動(dòng)

2，快速定位中心點(diǎn)

3，批量復(fù)制關(guān)鍵幀

AE 的操作雖然相當(dāng)復(fù)雜，但是有了這款插件之后，就能大大提高我們的效率。

4，F(xiàn)low

我們?cè)?AE 里調(diào)好的緩動(dòng)，在和開發(fā)哥哥對(duì)接的時(shí)候他們是很頭大的，因?yàn)殚_發(fā)程序里讀取的是貝塞爾曲線，而非速度圖表。那么針對(duì)這種情況，flow這款插件，提供了25種可以直接給到開發(fā)的曲線類型。還可以導(dǎo)出css緩動(dòng)代碼，幫助團(tuán)隊(duì)完成緩動(dòng)復(fù)用。

以上的分享就到這里。

關(guān)于交互設(shè)計(jì)入門書籍，樓上有很多答主的推薦都不錯(cuò)，不過交互設(shè)計(jì)作為國(guó)內(nèi)的一個(gè)新興專業(yè)，未接觸過的人在學(xué)習(xí)初期容易混淆很多專業(yè)概念，在自學(xué)過程中還要花費(fèi)時(shí)間整理知識(shí)點(diǎn)。下面小編就簡(jiǎn)單梳理一下交互“入門”階段的一些基本定義與常見的項(xiàng)目表現(xiàn)形式，希望能幫助題主更快的進(jìn)入學(xué)習(xí)狀態(tài)：

一、交互設(shè)計(jì)是什么?

各個(gè)百科上對(duì)交互設(shè)計(jì)都有非常明確的定義，但對(duì)于沒有專業(yè)基礎(chǔ)的同學(xué)們來說，這些定義還是略顯彎彎繞繞，小編簡(jiǎn)單解釋一下：交互設(shè)計(jì)，其實(shí)就像人與人之間的日常交流一樣，人與系統(tǒng)之間也是“有問有答”，具有互動(dòng)性的，而交互設(shè)計(jì)就是協(xié)調(diào)人與系統(tǒng)之間的“交流”方式。凡是可以通過五感來達(dá)成的信息傳遞、觀念傳遞、情感傳遞的互動(dòng)行為都在“交流”的范圍之內(nèi)。

從具體表現(xiàn)形式上來說，包括但不限于手機(jī)APP、傳統(tǒng)網(wǎng)站、可穿戴設(shè)備以及新興的VR，各種與非電子類產(chǎn)品的交互關(guān)系也屬于交互設(shè)計(jì)的范圍。

這樣一講，交互設(shè)計(jì)的范圍似乎太過寬泛，但其實(shí)簡(jiǎn)單來說，交互設(shè)計(jì)大致可以分為三個(gè)基礎(chǔ)模塊：

1. 美學(xué)——用戶界面設(shè)計(jì)(User Interface Design)

2. 心理學(xué)——用戶體驗(yàn)設(shè)計(jì)(User Experience Design)

3. 計(jì)算機(jī)&工程學(xué)——人機(jī)交互設(shè)計(jì)(Human-Computer Interaction)

在這里我們先說UI設(shè)計(jì)(用戶界面設(shè)計(jì))，大多人似乎都知道UI設(shè)計(jì)是什么。但其實(shí)，UI放在交互系統(tǒng)內(nèi)，比如眾所周知的app、網(wǎng)站，它可以成為交互設(shè)計(jì)展現(xiàn)的一種媒介，是交互設(shè)計(jì)中一個(gè)難以或缺的組成部分。嚴(yán)格來說，UI設(shè)計(jì)并不屬于交互設(shè)計(jì)，它實(shí)則應(yīng)該歸類于Graphic Design--平面設(shè)計(jì)。

而HCI(人機(jī)交互設(shè)計(jì))，與VR、AR，以及大數(shù)據(jù)等次時(shí)代的前沿科技相關(guān)，未來發(fā)展前景光明。但需要強(qiáng)調(diào)的是，HCI絕大部分學(xué)校是按理工科教授，因?yàn)樗饕芯康氖侨藱C(jī)如何交互，而不是人機(jī)為什么交互，為誰交互，以及交互究竟有何意義。簡(jiǎn)言之，就是HCI研究人機(jī)交互的技術(shù)，更簡(jiǎn)言之，多數(shù)是在搞程序、編代碼。

最后，重點(diǎn)說一下涉及到心理學(xué)的UX設(shè)計(jì)(用戶體驗(yàn)設(shè)計(jì))。在交互作品集的創(chuàng)作中，UX是尤為關(guān)鍵和重要的，主要原因在于，相較國(guó)內(nèi)對(duì)于學(xué)術(shù)研究和視覺審美的培養(yǎng)，國(guó)外院校更看重的是設(shè)計(jì)出來的物品是否真正解決了用戶的需求。

這一點(diǎn)就要求了設(shè)計(jì)者必須換位思考，設(shè)身處地的站在用戶的角度上去考慮設(shè)計(jì)的每一步。這也應(yīng)證了交互設(shè)計(jì)的本質(zhì)——交互設(shè)計(jì)師設(shè)計(jì)出來的是用戶想要的東西，而不是設(shè)計(jì)師要做用戶想要的東西。

二、交互項(xiàng)目常見表現(xiàn)形式

1. APP、網(wǎng)頁(yè)

交互設(shè)計(jì)中，最簡(jiǎn)單的就是單一化的APP或網(wǎng)頁(yè)項(xiàng)目，幾乎每一個(gè)同學(xué)在學(xué)習(xí)中都會(huì)涉及到。而且APP與網(wǎng)頁(yè)項(xiàng)目的制作過程與方法相似程度高達(dá)90%，同學(xué)們?cè)趧?chuàng)作項(xiàng)目初期可以先嘗試這類項(xiàng)目練手，盡快熟悉作品集的創(chuàng)作流程。

2. 復(fù)合APP制作

比上述提到的APP和網(wǎng)頁(yè)稍復(fù)雜的是復(fù)合APP，比如產(chǎn)品+APP、傳感+APP、裝置+APP、手表+APP 、網(wǎng)頁(yè)+APP等等，簡(jiǎn)單說，不僅僅是以APP為載體類型的應(yīng)用都可以稱之為復(fù)合App。主要也是為了解決形式單一化，以及豐富項(xiàng)目?jī)?nèi)容創(chuàng)造更多設(shè)計(jì)點(diǎn)。如果思考維度多元化，專業(yè)領(lǐng)域深入探究，也可以發(fā)展為一個(gè)服務(wù)設(shè)計(jì)項(xiàng)目。

3. 交互裝置制作

裝置在交互設(shè)計(jì)中屬于較為復(fù)雜的項(xiàng)目，因?yàn)榧夹g(shù)方面涉及到了電子化編程和電路板連接傳感器等內(nèi)容，呈現(xiàn)效果體現(xiàn)了交互意識(shí)、審美意識(shí)以及代碼意識(shí)。內(nèi)容方面，交互裝置更多是從產(chǎn)品原型開發(fā)去研究。由于涉及到代碼問題，在創(chuàng)作這類項(xiàng)目之前，專業(yè)技能及代碼知識(shí)都需要系統(tǒng)的了解。

4. 游戲制作(普通→AR→VR)

在交互游戲制作過程當(dāng)中，很多同學(xué)會(huì)遇到不知道制作流程，不明晰VR和AR是什么概念，或許也會(huì)困惑為何我們把AR、VR列入游戲制作等種種問題。事實(shí)上，VR、AR也都需要通過游戲引擎搭建，所以從本質(zhì)上來看，它們都是游戲。