超讚！高大上的動效設計方法及流程總結

http://www.uisdc.com/v8-project-summary-animation    原文 

 

 

 

 

 

Tdstone：在設計開發的過程當中，當設計師作好了一套靜態頁面並且設想出N種有趣的交互動畫，再交付重構還原頁面的時候，因爲沒法提供精確的動態參數，致使溝通和製做的成本增長，並且最終的測試demo也差強人意。所以，咱們經過研究當下的動態設計趨勢以及PC端的交互特徵，在QQ空間V8新版中作了動態創新探索，同時總結概括出一套適於設計師表達設計概念的設計方法和流程。

這是QQ空間團隊開發V8新版後總結的文章，對動態設計的總結詳實且條理性強，配圖也很形象，是一篇可貴的好文，相信設計師們閱讀完會至關受益  : ）
同時，也推薦你們閱讀： 《IOS7視覺/交互設計測試講解》

1、流動的趨勢

衆所周知，早些年流行的flash主頁因其酷炫的效果風靡一時。現在隨着html5和css3的發展，在配合高端瀏覽器的使用環境下，用戶能夠體驗到更流暢順滑的動畫效果。
同時，手機端的動態設計效果也提高了用戶感知度、提升了產品的易用性;考慮到體驗設計的一致性，動態設計還應兼顧跨平臺和終端的拓展效果。

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

2、動態設計探索

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

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

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

 A、可視化你的操做
將操做行爲與頁面反饋結合在一塊兒，以加強用戶對操做行爲的感知度。以feed中點「贊」的操做爲例。

 

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

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

B、訪客與主人間的動態互動方式
訪客登錄好友主頁後，一般只能經過留言或回覆好友動態的形式互動。簡單的文字或表情類的交流過於乏味，缺乏貼近生活化的肢體性的互動方式。咱們的設計方案旨在豐富用戶間的交流方式，促使用戶產生更生活化的話題。

B-1 訪客與主人的趣味互動「捏耳朵」
當用戶進入主人頁面時，能夠看到頭像上有一個耳朵形態的帽子，用戶能夠將鼠標滑到帽子上進行拉伸耳朵的操做。

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

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

B-2 親子類圖片的趣味互動
當用戶打開親子類圖片時，識別齣兒童的臉部位置或以前用戶標識出的臉部位置。

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

3、如何實現你的創意

這些概念設計在初期須要經過「動態轉化」生成可預覽文件便於後期程序開發。接下來爲你們介紹一款提高動態設計表達能力的軟件Adobe After Effects，能夠把它理解爲動態的PS，它是一個表達你「流動」概念的設計工具。它不須要編程，能夠自由設置尺寸，操做界面直觀通用。
在這裏，咱們如下面動畫爲例，從素材準備、邏輯整理、動態設計及優化、發佈設置來說解關鍵的製做流程。

0一、 準備階段：在PS中分好圖層,將須要作動畫的圖層進行分解，梳理好圖層間的先後關係。

0二、邏輯整理階段：在開始着手製做前，這一步相當重要！它能夠幫你梳理動畫間的流動層 次,估算製做的難度成本，是否須要插件來輔助完成等。

0三、動態設計階段：使用基本工具實現動態效果。對於這個動畫案例，咱們需用到AE中最基礎的 功能：position、scale、opacity（下圖左），具體的製做步驟這裏不作贅述。你們能夠去百度一下相關的AE基礎教程。

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

0五、 發佈階段，這裏爲你們介紹兩種輸出方案。

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品質設計以達到最優效果。

4、小結

咱們彷佛已經習慣了「動態的世界」，動畫以其獨特的魅力愉悅了咱們的感官體驗。可是目前尚未相對科學完整的動態設計規範；所以，在保持「流動」思惟的同時，要思考爲何須要它、什麼時候須要出現它，如何保證它的一致性與可拓展性等。動畫是爲了解決某種功能需求而存在的，最重要的是它必定要服從用戶體驗。

原文地址：isux.tencent做者：Tdstone