超贊的高大上的動效設計方法

 　　一、流動的趨勢

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

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

　　動態表現對傳達產品功能、拓展用戶的感官體驗等方面起著舉足輕重的作用。如：進程類演示類動畫，內容不再是從0到1的跳轉，加入了動畫過渡，讓復雜的程序語言轉化為動態視覺語言“我正在處理你的內容，請稍等”。一方面可以帶給用戶安全感，另外也緩解了因等待而產生的焦躁感。

　　二、動態設計探索

　　動畫不只是依賴於沉重的flash效果，或是裝備精良的終端設備，我們通過探索浏覽器性能和用戶對PC的使用習慣去探索動畫的可拓展性，讓用戶體驗更加順暢。 首先我們對鼠標不同行為狀態進行分解，以拓展在網頁中可能產生的交互行為。

　　通過對比分析我們發現，在PC端用戶通過鼠標的經過、單擊、拖動等交互方式來觸發事件，與目標對象產生互動。移動端自身的硬件可以支持包括手勢操作、重力、光線、距離感應器等功能，人機互動的形式也變得更加有趣，拓展了用戶的操作維度。

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

　　A、可視化你的操作

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

　　同時，我們將動畫內容做了數據轉化，用於解釋不同屬性在對應時間內的參數變化。便於重構和開發理解動畫內容，以保證動畫效果可以完美還原。

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

　　B、訪客與主人間的動態互動方式

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

　　B-1 訪客與主人的趣味互動“捏耳朵”

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

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

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

　　B-2 親子類圖片的趣味互動

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

　　當鼠標hovering到兒童臉部時，鼠標變成手形或者心形，用戶可以對兒童的臉做互動操作，如手形的話，可以撫摸和捏兒童的臉部;如果是嘴形的話，可以親兒童的臉部;以上操作行為結束後，也會生成一條評論，如：某用戶捏了一下孩子的臉，某用戶親了一下孩子的臉。

　　三、如何實現你的創意

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

　　在這裡，我們以下面動畫為例，從素材准備、邏輯整理、動態設計及優化、發布設置來講解關鍵的制作流程。

　　01、 准備階段：在PS中分好圖層,將需要做動畫的圖層進行分解，梳理好圖層間的前後關系。

　　02、邏輯整理階段：在開始著手制作前，這一步至關重要!它可以幫你梳理動畫間的流動層 次,估算制作的難度成本，是否需要插件來輔助完成等。

　　03、動態設計階段：使用基本工具實現動態效果。對於這個動畫案例，我們需用到AE中最基礎的 功能：position、scale、opacity(下圖左)，具體的制作步驟這裡不做贅述。大家可以去百度一下相關的AE基礎教程。

　　04、 體驗優化階段：為達到最優化的體驗效果，動態體驗設計需要不斷打磨推敲。必要時需要重 新回歸到PS中，對素材進行調整，以便更好的配合動態設計。在AE中為了使動畫更順滑、有 層次感，軟件提供了參數化的控制工具，在這裡可以對動畫速率和加速度等進行調整。(上圖右)

　　05、 發布階段，這裡為大家介紹兩種輸出方案。

　　A: 在file – export中輸出swf格式。首先在composition settings中設置輸出文件大小，幀率建議保持在15-20幀，這樣的文件相對較小且保證了畫面流暢度。然後在swf settings中設置jpg品質，圖像品質決定了你的文件大小，這裡建議設為5。在下方的options勾loop continuously，可以讓你的swf文件一直循環播放。最後點擊OK輸出即可。

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

　　gif與swf的區別在於前者文件較小，但是畫面會有很多噪點;後者文件較大，畫面基本沒有損失。因此大家可以根據畫面內容選擇輸出的格式，如：灰度圖做動態演示時可以輸出gif格式;如果畫面色彩比較豐富，建議輸出swf格式，然後通過swf品質設置，調整swf品質設計以達到最優效果。

　　四、小結

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