淺談高大上的動(dòng)態(tài)設計方法及流程總結發(fā)布者：本站     時(shí)間：2021-12-23 11:12:23

在設計開(kāi)發(fā)的過(guò)程中，當設計師做好了一套靜態(tài)頁(yè)面而且設想出N種有趣的交互動(dòng)畫(huà)，再交付重構還原頁(yè)面的時(shí)候，由于無(wú)法提供精確的動(dòng)態(tài)參數，導致溝通和制作的成本增加，而且最終的測試demo也差強人意。因此，我們通過(guò)研究當下的動(dòng)態(tài)設計趨勢以及PC端的交互特征，在QQ空間V8新版中做了動(dòng)態(tài)創(chuàng )新探索，同時(shí)總結歸納出一套適于設計師表達設計概念的設計方法和流程。

這是QQ空間團隊開(kāi)發(fā)V8新版后總結的文章，對動(dòng)態(tài)設計的總結詳實(shí)且條理性強，配圖也很形象，是一篇難得的好文，相信設計師們閱讀完會(huì )相當受益 : )

一、流動(dòng)的趨勢

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

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

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

動(dòng)態(tài)表現對傳達產(chǎn)品功能、拓展用戶(hù)的感官體驗等方面起著(zhù)舉足輕重的作用。如：進(jìn)程類(lèi)演示類(lèi)動(dòng)畫(huà)，內容不再是從0到1的跳轉，加入了動(dòng)畫(huà)過(guò)渡，讓復雜的程序語(yǔ)言轉化為動(dòng)態(tài)視覺(jué)語(yǔ)言“我正在處理你的內容，請稍等”。一方面可以帶給用戶(hù)安全感，另外也緩解了因等待而產(chǎn)生的焦躁感。

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

動(dòng)畫(huà)不只是依賴(lài)于沉重的flash效果，或是裝備精良的終端設備，我們通過(guò)探索瀏覽器性能和用戶(hù)對PC的使用習慣去探索動(dòng)畫(huà)的可拓展性，讓用戶(hù)體驗更加順暢。 首先我們對鼠標不同行為狀態(tài)進(jìn)行分解，以拓展在網(wǎng)頁(yè)中可能產(chǎn)生的交互行為。

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

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

A、可視化你的操作

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

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

同時(shí)，我們將動(dòng)畫(huà)內容做了數據轉化，用于解釋不同屬性在對應時(shí)間內的參數變化。便于重構和開(kāi)發(fā)理解動(dòng)畫(huà)內容，以保證動(dòng)畫(huà)效果可以完美還原。

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

B、訪(fǎng)客與主人間的動(dòng)態(tài)互動(dòng)方式

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

B-1 訪(fǎng)客與主人的趣味互動(dòng)“捏耳朵”

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

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

B-2 親子類(lèi)圖片的趣味互動(dòng)

當用戶(hù)打開(kāi)親子類(lèi)圖片時(shí)，識別出兒童的臉部位置或之前用戶(hù)標識出的臉部位置。

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

三、如何實(shí)現你的創(chuàng )意

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

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

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

01、 準備階段：在PS中分好圖層,將需要做動(dòng)畫(huà)的圖層進(jìn)行分解，梳理好圖層間的前后關(guān)系。

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

02、邏輯整理階段：在開(kāi)始著(zhù)手制作前，這一步至關(guān)重要!它可以幫你梳理動(dòng)畫(huà)間的流動(dòng)層 次,估算制作的難度成本，是否需要插件來(lái)輔助完成等。

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

03、動(dòng)態(tài)設計階段：使用基本工具實(shí)現動(dòng)態(tài)效果。對于這個(gè)動(dòng)畫(huà)案例，我們需用到AE中最基礎的 功能：position、scale、opacity(下圖左)，具體的制作步驟這里不做贅述。大家可以去百度一下相關(guān)的AE基礎教程。

淺談高大上的動(dòng)態(tài)設計方法及流程總結,PS教程,

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

05、 發(fā)布階段，這里為大家介紹兩種輸出方案。

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

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

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

四、小結

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