動效設計的探索及制作流程

時間：2022-05-29 12:57:01 | 來源：網(wǎng)絡營銷

時間：2022-05-29 12:57:01 來源：網(wǎng)絡營銷

動效化顯然已成為移動互聯(lián)網(wǎng)產(chǎn)品的新趨勢，如何設計出有趣且吸引人的動效已成為設計師們的新課題，不同的產(chǎn)品適合不同類型的動效，有些產(chǎn)品適合炫酷的動效，有些則不適合。

一般情況下，在設計開發(fā)的過程中，當設計師做好了一套靜態(tài)頁面，而且設想出N種有趣的交互動畫，再交付重構(gòu)還原頁面的時候，由于無法提供精確的動態(tài)參數(shù)，導致溝通和制作的成本增加，而且最終的測試demo也差強人意。

因此，我們通過研究當下的動態(tài)設計趨勢以及PC端的交互特征，在QQ空間V8新版中做了動態(tài)創(chuàng)新探索，同時總結(jié)歸納出一套適于設計師表達設計概念的設計方法和流程。

一、流動的趨勢

眾所周知，早些年流行的flash主頁因其酷炫的效果風靡一時，如今隨著html5和css3的發(fā)展，在配合高端瀏覽器的使用環(huán)境下，用戶可以體驗到更流暢順滑的動畫效果。

同時，手機端的動態(tài)設計效果也提升了用戶感知度、提高了產(chǎn)品的易用性，考慮到體驗設計的一致性，動態(tài)設計還應兼顧跨平臺和終端的拓展效果。

動態(tài)表現(xiàn)對傳達產(chǎn)品功能、拓展用戶的感官體驗等方面起著舉足輕重的作用。

如：進程類演示類動畫，內(nèi)容不再是從0到1的跳轉(zhuǎn)，加入了動畫過渡，讓復雜的程序語言轉(zhuǎn)化為動態(tài)視覺語言“我正在處理你的內(nèi)容，請稍等”；一方面可以帶給用戶安全感，另外也緩解了因等待而產(chǎn)生的焦躁感（具體可查看億企邦《基于交互體驗的防呆設計應用與策略》的相關(guān)介紹）。

二、動態(tài)設計探索

動畫不只是依賴于沉重的flash效果，或是裝備精良的終端設備，我們通過探索瀏覽器性能和用戶對PC的使用習慣去探索動畫的可拓展性，讓用戶體驗更加順暢。

首先我們對鼠標不同行為狀態(tài)進行分解，以拓展在網(wǎng)頁中可能產(chǎn)生的交互行為。

通過對比分析我們發(fā)現(xiàn)，在PC端用戶通過鼠標的經(jīng)過、單擊、拖動等交互方式來觸發(fā)事件，與目標對象產(chǎn)生互動（具體可查看億企邦《基于滑動維度的交互設計變化》的相關(guān)介紹）。

移動端自身的硬件可以支持包括手勢操作、重力、光線、距離感應器等功能，人機互動的形式也變得更加有趣，拓展了用戶的操作維度。

我們將交互過程拆分為：交互對象+交互行為+交互反饋。在結(jié)合PC端的自身特點的基礎(chǔ)上，對QQ空間做了如下動態(tài)創(chuàng)新探索：

1、可視化你的操作

將操作行為與頁面反饋結(jié)合在一起，以增強用戶對操作行為的感知度，以feed中點“贊”的操作為例。

同時，我們將動畫內(nèi)容做了數(shù)據(jù)轉(zhuǎn)化，用于解釋不同屬性在對應時間內(nèi)的參數(shù)變化。便于重構(gòu)和開發(fā)理解動畫內(nèi)容，以保證動畫效果可以完美還原。

點“贊”速度變化：啟動時有一定的初始速度，陡升曲線表明迅速到達最高峰，在到達結(jié)束點的過程中，速度逐漸放緩。不透明度變化：初始時為0，目標不可見，隨著速度到達頂峰時變?yōu)?00，此時目標完整可見，恰到好處的動態(tài)效果可以給用戶帶來更平滑、柔和的體驗，我們應洞察用戶心理的細微變化，讓切換效果更符合用戶預期。

2、訪客與主人間的動態(tài)互動方式

訪客登陸好友主頁后，通常只能通過留言或回復好友動態(tài)的形式互動。簡單的文字或表情類的交流過于乏味，缺少貼近生活化的肢體性的互動方式。我們的設計方案旨在豐富用戶間的交流方式，促使用戶產(chǎn)生更生活化的話題。

（1）、訪客與主人的趣味互動“捏耳朵”

當用戶進入主人頁面時，可以看到頭像上有一個耳朵形態(tài)的帽子，用戶可以將鼠標滑到帽子上進行拉伸耳朵的操作。

主人會看到一條信息：XXX捏了我的耳朵。

此設計內(nèi)容包括并不限于可以拉伸、轉(zhuǎn)動等操作，具有很強的拓展性。互動內(nèi)容包括并不限于捏耳朵，我們還拓展了波流蘇、轉(zhuǎn)動足球等的互動方式，與帽子互動后可生成信息，如XXX捏了你的耳朵，XXX轉(zhuǎn)動了你的足球等，互動后以動態(tài)或通知類的信息反饋給用戶。

（2）、親子類圖片的趣味互動

當用戶打開親子類圖片時，識別出兒童的臉部位置或之前用戶標識出的臉部位置。

當鼠標hovering到兒童臉部時，鼠標變成手形或者心形，用戶可以對兒童的臉做互動操作，如手形的話，可以撫摸和捏兒童的臉部；如果是嘴形的話，可以親兒童的臉部。

以上操作行為結(jié)束后，也會生成一條評論，如：某用戶捏了一下孩子的臉，某用戶親了一下孩子的臉。

三、如何實現(xiàn)你的創(chuàng)意

這些概念設計在初期需要通過“動態(tài)轉(zhuǎn)化”生成可預覽文件便于后期程序開發(fā)，接下來為大家介紹一款提升動態(tài)設計表達能力的軟件Adobe After Effects，可以把它理解為動態(tài)的PS，它是一個表達你“流動”概念的設計工具，它不需要編程，可以自由設置尺寸，操作界面直觀通用。

在這里，我們以下面動畫為例，從素材準備、邏輯整理、動態(tài)設計及優(yōu)化、發(fā)布設置來講解關(guān)鍵的制作流程。

1、準備階段

在PS中分好圖層,將需要做動畫的圖層進行分解，梳理好圖層間的前后關(guān)系。

2、邏輯整理階段

在開始著手制作前，這一步至關(guān)重要！它可以幫你梳理動畫間的流動層次，估算制作的難度成本，是否需要插件來輔助完成等。

3、動態(tài)設計階段

使用基本工具實現(xiàn)動態(tài)效果，對于這個動畫案例，我們需用到AE中最基礎(chǔ)的功能：position、scale、opacity（下圖左），具體的制作步驟這里不做贅述，大家可以去百度一下相關(guān)的AE基礎(chǔ)教程。

4、體驗優(yōu)化階段

為達到最優(yōu)化的體驗效果，動態(tài)體驗設計需要不斷打磨推敲，必要時需要重新回歸到PS中，對素材進行調(diào)整，以便更好的配合動態(tài)設計（具體可查看億企邦《動效設計的物理法則及應用》的相關(guān)介紹）。

在AE中為了使動畫更順滑、有層次感，軟件提供了參數(shù)化的控制工具，在這里可以對動畫速率和加速度等進行調(diào)整。（上圖右）

5、發(fā)布階段

這里為大家介紹兩種輸出方案：

（1）、在file – export中輸出swf格式。首先在composition settings中設置輸出文件大小，幀率建議保持在15-20幀，這樣的文件相對較小且保證了畫面流暢度。然后在swf settings中設置jpg品質(zhì)，圖像品質(zhì)決定了你的文件大小，這里億企邦建議設為5。在下方的options勾loop continuously，可以讓你的swf文件一直循環(huán)播放，最后點擊OK輸出即可。

（2）、輸出gif圖片。首先在composition – make movie中輸出avi格式。然后在PS中的文件-導入視頻幀到圖層，最后在PS中輸出gif圖。

gif與swf的區(qū)別在于前者文件較小，但是畫面會有很多噪點；后者文件較大，畫面基本沒有損失，因此大家可以根據(jù)畫面內(nèi)容選擇輸出的格式，如：灰度圖做動態(tài)演示時可以輸出gif格式；如果畫面色彩比較豐富，億企邦建議輸出swf格式，然后通過swf品質(zhì)設置，調(diào)整swf品質(zhì)設計以達到最優(yōu)效果。

最后，億企邦要提醒大家一點：切記不要把動效設計成華而不實的花架子，而應該將其視為提升用戶體驗的新方法。

億企邦點評：

我們似乎已經(jīng)習慣了“動態(tài)的世界”，動畫以其獨特的魅力愉悅了我們的感官體驗，但是目前還沒有相對科學完整的動態(tài)設計規(guī)范，因此在保持“流動”思維的同時，要思考為什么需要它、何時需要出現(xiàn)它，如何保證它的一致性與可拓展性等，動畫是為了解決某種功能需求而存在的，最重要的是它一定要服從用戶體驗。