對于動效，我個人是蠻喜歡的，但是起初學(xué)動效只是希望界面能動，做一些簡單的交互效果可以展示，并沒有很好掌握動效的一些原則和技巧，也沒有形成自己做動效的方法，很迷茫，經(jīng)常不知道做什么。所以后續(xù)很開心的認(rèn)識了@北北jiang和團(tuán)隊(duì)的小伙伴們，通過不斷的開眼和練習(xí)，目前自己對于動效找到了屬于自己的一套方法，回首2018年掌握的一些動效的基本方法，在最后一天做一個總結(jié)～

一、多看動效相關(guān)素材，尋找靈感。

每天都空閑時間就瀏覽一些我喜歡的動效相關(guān)的網(wǎng)站，回去搜集一些別人的動效，我個人比較喜歡的搜集到Eagle和花瓣，作為自己后續(xù)做動效的靈感庫。

經(jīng)常瀏覽的網(wǎng)站有：

Dribbble：https://dribbble.com/

Behance：https://www.behance.net

Ins：https://www.instagram.com/

muz.li每周推薦：https://medium.muz.li/search?q=UI%20Interactions

uimovement：https://uimovement.com/

微博：博主：UI設(shè)計(jì)-直接搜索動效

花瓣：直接搜索界面動效

二、畫交互原型，確定跳轉(zhuǎn)邏輯

確定主題后，根據(jù)自己以往搜集的動效素材給予的靈感確定跳轉(zhuǎn)邏輯，比如說本次想

做一個閱讀APP的進(jìn)入詳情頁的一個動效，我會先去構(gòu)思這個動效大概需要多少個頁面可以完成，可以有哪些交互可以用在里面，界面有哪些元素，哪些元素有交互效果。畫出一個交互原型圖。這個步驟是我比較耗時的，也是比較重要的一個步驟，包括一些我想實(shí)現(xiàn)的交互細(xì)節(jié)我也會直接列示在交互原型圖里面，比如概覽頁面點(diǎn)擊進(jìn)入詳情頁，點(diǎn)擊元素不消失引導(dǎo)用戶視覺直接進(jìn)入詳情頁等等小細(xì)節(jié)（這個步驟基本上就已經(jīng)把我們動效的整個步驟已經(jīng)定下來了）

三、Sketch畫界面

根據(jù)我們上一步完成的交互原型圖去完成Sketch的界面視覺稿，需要注意的是這個步驟里，畫好界面后，需要把動效中不需要變化的元素打組加*直接在Principle中變?yōu)橐粚?，每個頁面之中需要變化的相同元素，圖層名稱改為一致。（新版的sk文件后面加*可能導(dǎo)到principle里已經(jīng)不能合層了，可以直接在sk里合成位圖后再導(dǎo)出，選中文件夾然后按照下圖操作即可，如果覺得像素不夠可以先command+k放大200% 再合層 再縮小50% 就可以高清位圖了）

四、導(dǎo)入Principle完成界面間的跳轉(zhuǎn)（這個時候不考慮細(xì)節(jié)）

導(dǎo)入Principle中，先按照交互原型圖將界面一點(diǎn)擊某元素跳轉(zhuǎn)到界面二，界面二點(diǎn)擊某個元素回到界面一，點(diǎn)擊某個元素跳轉(zhuǎn)到頁面三，完全不需要考慮細(xì)節(jié)，比如界面元素消失以及錯幀等細(xì)節(jié)。

五、調(diào)整動效細(xì)節(jié)

在第四步完成了界面間的跳轉(zhuǎn)，第五步主要完善細(xì)節(jié)，比如界面元素的消失，新界面元素的進(jìn)入，調(diào)整錯幀。

六、調(diào)整動效曲線

動效曲線的調(diào)整是可以代表每個人不同風(fēng)格的，所以也是非常重要的，根據(jù)我們自身的喜好，逐漸可以形成屬于自己的參數(shù)，每次根據(jù)自己的參數(shù)去調(diào)整緩動曲線的參數(shù)值，動效的緩動就是你的風(fēng)格啦。當(dāng)然這個動效曲線的設(shè)定也在遵循一定的規(guī)律，也要我們仔細(xì)去分析大神們的各種作品去總結(jié)，滿滿的形成屬于自己的風(fēng)格。團(tuán)隊(duì)的二萍小姐姐也有一篇關(guān)于如何通過緩動曲線形成自己的風(fēng)格的相關(guān)經(jīng)驗(yàn)分享，喜歡的小伙伴可以去看看

七、導(dǎo)出視頻到PS內(nèi)進(jìn)行包裝

在所有動效完成后，導(dǎo)出視頻到ps內(nèi)進(jìn)行包裝，包裝也是很重要的一項(xiàng)內(nèi)容，逐漸也可以形成自己的包裝風(fēng)格，并且可以復(fù)用，提成效率（我目前都采用的純色系列的包裝風(fēng)格，2019年會嘗試多一些的包裝方式）

近期作品

目前僅僅掌握了一些方法，動效還在摸索中，希望大佬們多多提建議。

閱讀APP界面動效：由首頁Tabbar切換到圖書發(fā)現(xiàn)界面，點(diǎn)擊編輯精選圖書進(jìn)入詳情頁面，采用了雙卡片引導(dǎo)用戶視覺到詳情頁面，詳情頁面向上滑動圖書名字和收藏按鈕到頂部欄，最后點(diǎn)擊收藏出現(xiàn)一個簡單的情感化的愛心動效。

購物APP：使用原型圖做交互靈感來源于Dribbble設(shè)計(jì)師Yaroslav Zubko，使用原型圖展現(xiàn)了一套購物流程，可以很清晰的展現(xiàn)出用戶流程的購買邏輯。

交友APP：通過左右緩動卡片的交互方式選擇喜歡還是不喜歡，向右拖拽卡片為喜歡松手卡片向右飛，并且有愛心+1的反饋給到用戶

美食APP：主要利用視差效果展現(xiàn)了界面之間的切換，增加用戶使用過程中的趣味性

金融APP：主要利用蒙版作出金額的增長折線圖，點(diǎn)擊卡片進(jìn)入卡片詳情頁

購物網(wǎng)頁：主要利用視差切換效果，點(diǎn)擊喜歡的物品會出現(xiàn)物品提示窗，點(diǎn)擊進(jìn)入詳情頁。

總結(jié)：

想做好動效，首先要明白為什么要做動效。

首先，動效一定要保證過程的流暢，不要為了展示動效時間過久，動效是為了提升用戶體驗(yàn)的，不要為了做動效而做動效，不要讓用戶感覺反應(yīng)遲鈍緩慢。其次，動效可以提升整體界面的趣味性，設(shè)計(jì)是為了解決問題的，動效同樣也是。以上是目前做到現(xiàn)在我做動效的一些方法，歡迎喜歡動效的小伙伴們一起多多交流～～

2018再見，2019你好！