lionisready：新手設計師相較于資深設計師，后者技能更豐富且全面，很多人想要進階資深卻苦于培養(yǎng)新技能，筆者在經(jīng)手不少視頻動效項目后，對于技能進階頗有心得，特意分享出來。

通常技能進階的方向有如下兩種：

鉆研型，工作需求和自身特長強結合，原特長在工作中日益強大，影響力不斷提高；

發(fā)散型，工作需求和自身特長有較大偏差，但經(jīng)過努力讓自己掌握了新技能，極大增強了職場的適應力和綜合能力。

兩者各有千秋，筆者則是在發(fā)散型的艱難道路上一路飛奔后，大量積累了視頻剪輯和動效制作的經(jīng)驗，希望給走發(fā)散型道路的設計師助一臂之力。

我們的團隊從“畫報”開始，一個偏Loft感覺的照片分享app，到主打音樂MV的“企鵝MV”，最后到玩轉動效的短視頻app——“閃咖”，一路以來不斷要求設計師的技能變得更加立體：設計能力從平面層次，提升到能穩(wěn)定輸出動效的層次，并且能夠輔導新人去快速入門。

△ ?產(chǎn)品的功能形態(tài)不斷變化

△ 個人的能力值形態(tài)也不斷立體化

然而我會告訴你，剛來的時候我只是個會PS和畫插畫的愣頭青嗎？

目前的閃咖是一款玩法新鮮的視頻app，最初以表演為切入點，一直持續(xù)更新音樂，濾鏡和動效等，為大家能更好的秀出自己而服務，尤其微信推出了10秒短視頻功能后，引爆了一波刷爆朋友圈的短視頻需求，所以，迫切要求閃咖的設計師能在動效設計上扛起重擔。

那就是我們正在研究的手繪特效。

什么是手繪特效？我們簡單看一些案例：

1. 蘋果AppleWatch第一代中已經(jīng)出現(xiàn)了在表屏上手繪圖案傳情的“調(diào)戲功能”，第二代有更多的加強；目前iPhone7之間也完全支持了，還增加了多種表達方式；手機的大尺寸和平板的使用也使得手繪特效在未來有更多的空間。

△ 花樣百出的iPhone短信涂鴉

△ AppleWatch表屏涂鴉特效

2. 國內(nèi)裝扮功能較好的app諸如美拍，小咖秀，Snow等，其特效，濾鏡，貼紙等功能都有先發(fā)優(yōu)勢，而手繪特效則鮮有觸及，國內(nèi)外幾家大家熟悉的，如美圖秀秀目前只支持在圖片上涂鴉，F(xiàn)acebook尚在研究中無明顯動作，F(xiàn)unimate等的視頻涂鴉效果不佳。

△ 美圖秀秀（左）和Facebook（右）

△ Funimate

3. 輕特效的操作方法簡單，玩法多樣，寫字涂畫，雙擊、單擊、滑屏等，未來還可以延伸出更多特別的視覺效果。

在確定了大方向后，應該如何快速構建這一功能呢？經(jīng)過研究發(fā)現(xiàn)，大部分手繪特效，都是由“粒子特效”為核心展開設計的，只要能夠懂“粒子”，一切就迎刃而解。粒子特效乍看之下很復雜，但我有簡單輕松的構建方法，能讓特效零基礎的設計師快速建立起粒子特效的設計能力！

下面我要開始嚴肅的講解了。

設計師從0到1建立起粒子特效模塊，至少需要哪些東西來支持呢？下面我以閃咖項目中，手繪特效功能的構建為案例，講解建立它所需要的三大“齒輪”:

三大“齒輪”

齒輪一：提出設計方案，制作初級demo的能力

AE CC – particular粒子插件

AE可以制作大部分我們常見的特效，而“粒子特效”是里面一個相對來說比較高級的插件，我們可以在“效果”，“trapcode”里找到并打開“particular”進行制作，大部分網(wǎng)上下載的AE沒有這個插件，需要單獨去下載安裝哦。

而使用這個粒子特效插件，可以做出的效果很多，我列舉一個基本款：

△ 流星

△ 動態(tài)展示gif

其運動的軌跡也可自定義，具體的方法有興趣研究可以私聊。不直接用AE和開發(fā)經(jīng)行數(shù)據(jù)對接，是因為其參數(shù)過于龐大且復雜，每次提供相關參數(shù)就已經(jīng)消耗了大部分精力和時間，所以對于設計師來說，僅用于制作特效demo的話就會輕松不少，但和開發(fā)對接參數(shù)可以另辟蹊蹺，接下來就會講到。

齒輪二：批量輸出，并與開發(fā)對接數(shù)據(jù)的能力——

particle design

官方介紹:粒子特效設計是一款功能強大的粒子特效編輯器,目前只支持mac上使用。使用者之間有云端共享功能，可以自定義粒子上傳，自定義背景，和編輯粒子的各種變化的方法。官網(wǎng)下載地址：https://71squared.com/particledesigner （需要花錢購買正版哦）參考下圖可以快速認識到該軟件的基本形態(tài)。

用我的話來說就是一個可以彌補AE過于復雜的數(shù)據(jù)對接，能和開發(fā)輕松對接粒子特效的參數(shù)的軟件，還能超級輕松的做出如下粒子效果：

△ 火花（左）和 下雨（右）

閃咖目前在做的特效有：

△ 雪花（左） 星光涌現(xiàn)（中） 泡泡飛揚（右）

用它制作粒子效果非常便捷，只需要記住幾點就可以融會貫通，我結合雪花飄散這個效果的制作過程來和大家解析：

如何快速設計一個粒子效果

1. 上云端共享尋找案例

設計一個粒子，無從下手的時候，建議你先點這里進入云端，瀏覽并觀看其他用戶已經(jīng)做好并上傳到共享的粒子效果，選擇可借鑒的效果直接拿下來改進；自己設計好的也可以上傳一份分享給他人參考。

△ 點這里進入云端

△ 這些都是使用者共享出來的粒子設計

2.自定義粒子的單位樣式

要原創(chuàng)一個雪花飄散的效果，首先要通過PS設計一個基本單位，導出PNG格式，然后替換particle design里一個粒子特效的源圖像，如圖我在PS上設計了一個雪花放到某個粒子“源圖像”里替換，替換了之后可以得到飄散效果的基本形態(tài)了。

△ 左圖為在源圖像中放入做好的PNG，右圖的基本單位從左邊得來

3.調(diào)整粒子的動態(tài)變化參數(shù)

然后就是調(diào)整參數(shù)，因為調(diào)整參數(shù)時對應的效果會在屏幕預覽中直接呈現(xiàn)，所以大家全部選項都玩一遍后，基本都能掌握，雪花飄散的關鍵參數(shù)大概如下截圖標出的區(qū)域：

4.粒子相互疊加

很多粒子特效都有特別華麗的效果，其本質(zhì)上是多個粒子源疊加在一起散射的結果，其實就是把多個粒子放在一起，如我將粒子1,2疊加在一起就能得到混合的效果:

△ 實心愛心 + 空心愛心 = 結合的愛心

以上就是particle design輸出能力的展示。這個小軟件的遺憾在于不能單獨輸出demo視頻或者PNG序列，僅能輸出粒子項目文件，所以前期才需要AE的支持來先輸出demo視頻提案，接下來講到的部分，既是解決該問題的方法，又是保持該軟件能長期發(fā)力的關鍵。

齒輪三：檢驗粒子效果，還原動效和導出視頻的能力——

“調(diào)試工具”

從設計師的角度來說，檢驗分為兩個步驟，上傳自己設計好的粒子；體驗它的實際效果，如下圖

△ a傳輸粒子效果（左） b手機上調(diào)試 （右）

我一直在強調(diào)團隊，因為構建這一完整的功能，開發(fā)團隊也功不可沒，particle design畢竟是單純配合開發(fā)輸出的工具，設計師無法直接在手機上進行效果檢驗，所以需要開發(fā)團隊為設計師制作一個“調(diào)試工具”。接下來則是開發(fā)哥時間：

△ 開發(fā)負責的流程大綱

制作“調(diào)試工具”：

1.調(diào)試客戶端（即手機上一個可以檢驗特效的app）

2.服務器（用于存放設計提供的粒子文件）

3.上傳工具（方便隨時上傳新設計的粒子文件，刪除舊文件）

也就是說，開發(fā)的第一個任務是編寫出以上三個功能，之后按照圖中的步驟：從“網(wǎng)頁工具”上傳粒子到“服務器”，然后在“調(diào)試客戶端”上下載“服務器”上存放的粒子文件進行效果檢驗，關于“調(diào)試客戶端”如何接受粒子文件的參數(shù)來表現(xiàn)效果，簡單來說有如下步驟：（以下是開發(fā)哥哥的原話）

1. 從視頻中抽出視頻幀，把每幀圖像推入一個濾鏡鏈

2. 濾鏡鏈調(diào)用OpenGL接口處理圖像，疊加光繪效果

3. 實現(xiàn)一套粒子系統(tǒng)解析引擎，計算光繪效果的粒子坐標

4. UI層響應用戶手勢，修正粒子發(fā)射器的位置

5. 濾鏡鏈末端導出處理過的視頻幀，調(diào)用視頻編碼接口寫入視頻文件

以上就是開發(fā)團隊負責的部分，設計師可以據(jù)此思路推動自己的開發(fā)團隊進行開發(fā)，需要更深層次代碼交流的，歡迎各位私聊。接下來繼續(xù)回到設計層面上。

如何對粒子效果進行檢驗：

1.在線傳輸粒子文件到服務器

通過將particle design中導出的pex文件上傳到服務器后，將粒子特效保存到服務器。

△ 點擊導出

△ 選擇文件后，點擊上傳即可

2.手機端下載并測試，生成演示視頻

打開手機上的調(diào)試工具客戶端，在界面上點擊一下“更新”，它會自動下載服務器上已上傳的粒子，再點擊“調(diào)試粒子1”可以切換到其他粒子繼續(xù)看效果，直接在屏幕上涂畫即可，鏡頭翻轉自拍等，結合實際視頻檢驗特效的效果。

△ 點擊下方綠色button可以即時錄制

△ 這是個星星效果的demo

三個部件都齊全的你，就擁有了提出粒子特效設計方案，配合開發(fā)輸出，并能自行調(diào)試還原效果的能力；接下來要討論的是從1到100的這條路上，這個模塊還有哪些地方需要完善呢？我個人總結了如下幾點：

完善調(diào)試工具

1.“調(diào)試工具客戶端”增加導入視頻的能力

在調(diào)試工具客戶端中，加入可以導入本地視頻的能力，這樣一來，在調(diào)試工具客戶端中檢驗效果時，直接導入一個合適的視頻，兩者結合即可輸出一個完整的視頻特效demo，大大提高了做出設計方案的可行性，減少了制作視頻demo的時間，方便結合使用場景去檢驗制作的粒子特效是否合適，一舉三得。

2.“調(diào)試工具客戶端”支持多重粒子的能力

在調(diào)試工具客戶端中，目前我們僅支持一種粒子特效展示效果，而我們前文提到，多重粒子疊在一起可以變得更加華麗，所以在調(diào)試工具客戶端的模擬展示中，如果能支持結合2個以上粒子的檢驗方式，那么粒子特效的制作也有更多發(fā)揮空間，能做出更多更牛逼的效果。

3.particle design深層次的玩法挖掘

目前提到過的自定義粒子源和多重粒子疊加都是particle design的核心用法，那么他的價值還有哪些？這就與他軟件本身的一些參數(shù)有關，現(xiàn)階段能夠解讀到的參數(shù)作用在本文的軟件介紹部分已經(jīng)提過，而在云共享中仍能看到不少老外大神搞出的五花八門的玩法，這些都需要設計師自己來花時間研究。

△ 撒錢幣

△ 環(huán)環(huán)相扣

到這里，整個輕松獲得動效能力的方法已經(jīng)介紹完了，有此神技，只要和團隊一起合作就能構建出粒子特效（當然你自己會寫程序，那你可以一夫當關！），并且優(yōu)化完善后還可以普及給其他的團隊成員，讓粒子特效不再顯得神秘和復雜。

設計師自身則能從曾經(jīng)的平面設計師升級一個檔次，獲得技能提升的同時，在團隊中也會收獲較大的影響力，提升自己在項目運作中不可取代的價值。

如果你的產(chǎn)品也在研究手繪筆觸類的特效，不妨以此為開始走出第一步，在未來獲得更好的方法后，分享給更多的人，感謝您的閱讀。

「動效設計三步走」

1. 先學會分析：《動效丨七何分析法幫你全面分析界面動效》
2. 動效設計方法：《改善你的UX設計！值得參考的四個動效使用方法》
3. 提升用戶體驗：《5個小技巧，用動效提升界面的用戶體驗就這么簡單》

原文地址：ISUX

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com