本文重點介紹動力學的原因，良好動態(tài)設計的標準是什么，如何進行動態(tài)設計，以及如何使設計的動態(tài)變得完美。

閱讀本文后，您將學習：

1.為什么需要動態(tài)設計？

什么是動作設計？

動態(tài)效應在產品設計中的作用

動態(tài)設計的良好標準

2.如何設計動態(tài)效果？

6種概念化效果的方法

6種實現動態(tài)效果的方法

3.動態(tài)效果的類型

4.常用的動畫軟件

5.讓效果發(fā)揮作用的4種方法

你為什么需要設計動畫？

我第一次接觸動態(tài)設計，但我覺得它很酷，很酷，翻滾，旋轉和爆炸。只是感覺新鮮，有趣，并可以炫耀技巧?？梢允乖O計更酷。當我第一次接觸時，也許我的大多數同學會有或多或少相同的想法。這是我們運動設計的目的嗎？它不應該。

為了解決如何設計動態(tài)效果的問題，有必要弄清楚什么是動態(tài)設計。動態(tài)設計的作用是什么？

1.什么是動態(tài)設計？

動態(tài)效果的提升，可能是在平面設計之后，平面設計的優(yōu)勢在于用戶的注意力可以集中在界面的核心信息上，去除了對用戶無效的設計元素，并且設計是不被打擾。這種體驗更加純粹自然。這個想法是正確的，回歸產品設計的本質，就是提供更好的體驗，而不是提供更漂亮的界面設計。然而，過于扁平的設計也帶來了新的問題。如何顯示一些復雜的層次關系？如何引導和吸引用戶？這與用戶在真實3D世界中的自然感受不一致。因此谷歌推出了Material Design設計語言。

在材料設計規(guī)范中，動態(tài)設計章節(jié)被命名為“動畫”，動畫生動。

動詞Animate意為“賦予生命”。效果可以定義為使用類似動畫的技術來賦予界面生命和活力。

之前我們討論過Material設計語言，其中一部分是解決過度扁平化設計的缺點，如何呈現復雜的層次關系，如何引導和替換用戶。為了解決這個問題，材料設計風格，充分利用Z軸，通過分層設計和動態(tài)效果的組合，提供了在扁平化的基礎上更好地理解層次關系，給設計一個用戶使用情緒增加。參與中間。

2.動態(tài)設計對產品設計有何影響？

△動態(tài)設計的作用

如上所示，運動對產品設計的影響包括：

通過級別信息;

傳遞狀態(tài)信息;

提示隱藏信息功能;

傳遞情感信息。

了解這一點，那么為什么我們需要動態(tài)設計？

通過以上結合自身產品設計的特點，我們可以總結出動態(tài)設計的動機如下：

等待而不是無聊;

做出改變并不難;

反饋不是單調的;

讓體驗變得情緒化;

讓用戶更愉快。

什么是好動力？

知道動態(tài)設計的原因，我們應該做什么樣的動態(tài)設計？或者什么是好的動態(tài)設計？它很酷，翻滾，旋轉，爆炸嗎？判斷復雜性很好。標準不好？

一位著名的外國一線設計師曾在分享會上做出了這樣一個良好效果的定義：

良好的活力應該是看不見的，良好的活力應該建立在提高可用性和以一種被認為是自然和隱含的方式提供有效用戶反饋的前提下。

事實上，良好的動態(tài)設計適合用戶體驗，最終服務是體驗而不是動畫設計的顯示。

在這種情況下，讓我們總結一下良好動態(tài)設計的標準。

首先，我們必須具備一些功能：

快速而順利;

恰到好處的反饋;

改善運營經驗;

提供良好的視覺效果。

△動態(tài)設計標準

其次，良好的動態(tài)設計應該是第一個服務體驗，其次是適當的設計（考慮綜合性，如性能，實施成本，是否干擾用戶等），再次是讓用戶感受到情感互動你的輸出，最后是最基本的它是具有視覺美感。

如何設計動畫？

知道什么是好的動態(tài)設計，然后擴展下一個問題，我們如何設計運動效果？或者，如何開始使用動態(tài)設計，尤其是初學者？

很簡單，只需兩步：

首先要有一個概念，想法;

根據想法全面實施。

不知道？你是如何提出想法的？你覺得怎么樣？根據我自己的結論，我可以從這六個方面構思：

△行動的靈感來源

1.將產品與設計相結合

要結合產品思考，創(chuàng)意的設計必須符合改進的產品體驗，并且必須注意不要盲目。

2.理解基本常識

這些常識包括動態(tài)設計的基本常識（例如，基本運動規(guī)則，節(jié)奏，動畫），基本的發(fā)展常識，預期如何實現動態(tài)效果，以及實現成本。確保你能順利降落。

3.觀察生活

大多數人對美的看法來自日常生活經歷。例如，什么樣的運動是溫和，強烈和令人震驚的。當我們對我們需要構思的動態(tài)進行定性定位時，我們可以從生活中這些相同和定性的自然事物中找到靈感并攔截本質。

4.看，想想

除了觀察生活，我們還需要看一些優(yōu)秀的動態(tài)設計，并始終積累。與此同時，有必要仔細考慮“看”的事情。我想想一下他為什么如此設計，如何完成這套動畫設計（通過那些構成這種動態(tài)設計的技巧，整體節(jié)奏就是一種感覺）?？偸菍⒆约号c自己對類似事物的想法進行比較，找出差距，并彌補它們。這是積累經驗和技能的過程。

5.學會反匯編

大多數網絡和應用程序的動態(tài)設計都是由基本的變化組成的。我們必須學習如何拆除其他人的復雜動態(tài)設計，并通過觀察更多觀察來學習它們。然后，通過合理的安排設計自己的動態(tài)設計，你就是這個動態(tài)設計的導演。

6.專注于流行的

這很簡單，就是每個人都應該關注設計行業(yè)，或者網絡應用動態(tài)設計領域。了解新的設計技術，設計趨勢和設計方法。不要落后，不要永遠把自己定義為追隨者。

之前我們說過，我們在web& app中看到的大多數動態(tài)設計都是由一些基本的變化組成的。這些基本變化是什么？ （見下圖）

△動畫的基本變化

基本變化主要包括：移動，旋轉，縮放和屬性變化。之前的觀點已經很好理解，這里不再詳細解釋。解釋最后一個屬性更改，它指的是屬性的更改，例如透明度，形狀和顏色。所有這些變化，經過合理的安排，與適當的運動節(jié)奏協調，是一個完整的動態(tài)設計。

簡單地說：你必須決定你想要發(fā)生什么樣的運動，以及運動應該采取什么樣的節(jié)奏。貝塞爾曲線是速度和時間之間的關系，它以圖形的形式顯示，使其更加直觀。

△改變節(jié)奏

上圖是一些常見的Bezier曲線，右側是AE設計過程中的運動曲線調整界面。

為什么運動需要匹配正確的節(jié)奏？

因為自然界中的運動不是線性均勻運動，而是根據物理定律的曲線移動運動。這是我之前說過的基本常識和基本法。人們對一種運動形式產生的大部分情緒反饋來自于生活中看到的類似形式的運動。因此，我們必須遵守物理定律，以便我們能夠準確地傳達我們動態(tài)設計的情感。當然，它可以根據需要進行夸大和簡化。規(guī)則是死人還活著。隨時隨地學習。

http://easings.net

該網站歸結為所有形式的運動的基本貝塞爾曲線，并具有預覽。也可以直接使用js代碼，非常方便，非常直觀。

說出如何構思，然后考慮如何實現你的想法：

△實現動態(tài)設計

如上所示：

實現想法基本上是技術和技能的問題。這需要學習和積累。你是如何學會積累的？

1.動手實驗，練習完美。

繼續(xù)努力鍛煉你的技術技能。只有嘗試才能真正驗證您的設計。

2.臨沂作品

學習任何東西，尤其是設計這項業(yè)務臨沂是一種非常有效的入門方式。以前的現實圖標現在是相同的。臨沂的過程實際上是與優(yōu)秀設計師溝通的過程。由此，您可以仔細了解和學習他的設計理念，并結合您自己在臨沂的過程中的經驗優(yōu)化和升級原始設計技術。這是一個很好的升級。技巧的方法。

3.注意細節(jié)

這很簡單，就像制作簡單的視覺設計一樣，你必須注意細節(jié)，細節(jié)決定成敗，尤其是動態(tài)設計。要認真，多想想，全面思考。

4.有節(jié)奏感

之前已經說過了。為了使您的工作充滿活力而不是僵化，您可以為產品賦予新的活力。

5.先添加然后減少

在實施過程中，當您不確定如何豐富您的設計，或者您不確定使用什么技能來實現自己的愿景時，您必須不斷豐富您的原始設計理念。試著看看你可以動態(tài)的地方。這樣鍛煉可以創(chuàng)造一種可能性并創(chuàng)造突破。然后，在這些可能性和突破之后，進行減法以去除多余的保留精華。

6.搜索引擎

我有盡可能多地使用搜索引擎的建議。使用搜索引擎可以解決您遇到的95％的問題。重要的是自己找到問題的解決方案，你可以記住更深層次的系統(tǒng)。您還可以掌握問題的解決方案。

效果的類別是什么？

我們可以將當前的運動設計大致分為兩大類：

1.功能動力學（如下所示）

這種動態(tài)設計更適合產品設計，也是本文的主要內容。

△功能動力學（此圖片來自網絡集非作者原創(chuàng)）

2.顯示類型效果（如下所示）

這些動態(tài)設計相對復雜，幾乎沒有實際應用?；旧嫌糜谝恍╋@示動態(tài)設計，我們也不能使用我們的基本運動規(guī)律來嵌套（不嵌套，太復雜），它們的實現一般是通過AE插件實現的，插件不是很難，還有一個特殊的插件-in網站，每個人都有興趣學習，一般的插件都是英文的。

△顯示類型動態(tài)效果（此圖片來自網絡集非作者原創(chuàng)）

什么軟件用于動態(tài)設計？

△動態(tài)設計軟件

只需向您介紹一些常用的生產軟件，并產生動態(tài)效果。頭痛是時間成本問題。這些軟件有自己的特點：

AE：全能玩家可以做出你想要的任何效果，但是操作的成本相對復雜。

原理：操作簡單，效率高。適合制作快速顯示或簡單動畫設計的演示。

炒作3：在AE與原則之間。它是近年來新興的動畫設計軟件，它可以直接生成代碼，并且具有高效的草圖。

您可以根據工作中的實際情況適當使用它。

動態(tài)設計如何落地？

我談到了為什么我這樣做，什么是好的，以及如何做到這一點。下一步是談談我們如何才能使我們的勤奮設計變得完美。

基本上，您和開發(fā)如何設計這片效率，高效合作。通常的做法是聽寫+例子。基本上，我們使用中文與日語進行日語交流。我們只能傳達一般的想法。他們中的大多數都有偏見，而且成本相對較高。很多時候，他們彼此不了解。

我們需要基本上告別溝通，我們怎樣才能使開發(fā)愛上動態(tài)設計？

我簡要總結了幾個要點：

△動態(tài)著陸降落

1.專業(yè)設計輸出

為了讓發(fā)展說服你，首先我們必須在自己的事務上保持專業(yè)。我希望有一個可靠的發(fā)展，首先，要成為一個可靠的設計師。例如，如果我們想要發(fā)展到像素級別，那么我們提供的輸出必須精確到像素級別，同理心和專業(yè)性。

2.良好的早期溝通

在設計開始時，您必須與開發(fā)人員進行溝通，并了解是否允許執(zhí)行此操作的時間成本。目前的技術條件是否有坑。只是為了確保您的計劃基本可行，然后開始開發(fā)設計。總之，讓開發(fā)人員知道你將要做什么，以及如何在他眼中看到這件事的實現成本。畢竟，他們是最終的代碼生產者，避免浪費工作。

3.了解基本實施原則

我必須學會理解一些基本的實現原理和邏輯。通過這種方式，您可以在做到時更加了解，知道該做什么，做什么很難，目前平臺無法達到您的目的。這允許更好地控制動態(tài)設計的節(jié)奏并最終著陸。有時它可以幫助開發(fā)和思考這個動畫設計的邏輯實現，因為你是一個動態(tài)設計師，你更了解這個動畫中的變化和步驟。

4.代表性動態(tài)設計

只需讓開發(fā)圖像知道您將要做什么。此時，您需要正確設計動畫設計——

（如有必要，輸出效果描述文件）

所以問題是，所有動態(tài)設計都被描述為可數據化嗎？

確切地說，可以描述我們大多數常用的web和APP設計。

還有一些不可言說的動態(tài)設計。他們的基礎知識用于品牌展示（例如徽標更改等），或者一些小的驚喜，例如JD的應用程序中的loadinggif，這是一個提供商品的小人物。這種動態(tài)設計歸功于顯示動態(tài)設計。

顯示型運動設計：

△顯示類型動態(tài)效果（此圖片來自網絡集非作者原創(chuàng)）

因為它們基本上沒有復雜的相互作用，特別是在運動效果原始本身，它基本上是滿足某些條件觸發(fā)回放的邏輯，并滿足觸發(fā)停止的某些條件。

它們的基本實現是輸出PNG序列，或視頻或GIF文件格式，因此輸出文檔沒有問題。

輸出視頻將涉及壓縮音量。我來談談如何壓縮這些文件的數量：

AE文件壓縮

△AE壓縮設置

如果使用AE，則在渲染輸出時，如圖所示?；旧?，動態(tài)設計的一半可以控制在幾百KB以內，復雜的運動可以控制在幾M之內。

如果它仍然太大，我該怎么辦？我需要壓縮軟件：

△視頻壓縮軟件

HandBrake是一款功能強大的視頻壓縮軟件，可將數十（MB）視頻文件壓縮到幾十千字節(jié)，幾乎不會丟失。它很動人嗎？更令人感動的是它是免費的。有需要的學生可以下載和學習它。

功能動態(tài)設計：

△功能型效果（此圖片來自網絡集非作者原創(chuàng)）

與上述動態(tài)設計類似，我稱之為功能動態(tài)設計，這是我們在正常工作中最常用的動態(tài)設計。這些運動設計需要涉及我們之前討論過的運動設計數據化和輸出效果設計文檔。因為他們的動作本身涉及頁面中的各種交互式組件，以及交互。您無法輸出單個視頻。有必要使用程序開發(fā)運動設計來控制原件的運動。但是，如果我只想開發(fā)這樣一個動態(tài)的開發(fā)設計，很難理解你想做什么，以及在多大程度上？減少程度通常很低。將被開發(fā)和鄙視。為了使我們的運動對像素精確，我們需要在此時進行數據處理，這根據實際情況是合適的《動效設計文檔》。

這里說，根據實際情況，寫《動效設計文檔》。我們?yōu)槭裁匆鶕嶋H情況及時添加？這是時間成本的問題。寫這篇文章的目的是通過具有精確數字和單詞的具象動態(tài)設計。因此，動態(tài)描述文檔只是將視覺設計轉移到開發(fā)的一種方式。該程序最終登陸的形式不需要是文件，可以根據實際情況使用。

如何編寫動畫設計文檔？

你怎么寫動態(tài)描述文件？或者我們如何將動態(tài)設計報告給發(fā)展代表？我創(chuàng)建了一個表格，簡要描述了運動描述文檔輸出的基本流程（參見下圖）。/P>

△寫作動作說明文件流程圖

例如：

以下示例是先前在下車分部中執(zhí)行的實際項目。

△過渡效應

運動效率的基本參數:

動畫大小: 750 * 1334（px）

幀速率: 25f/s（幀/秒）

動畫時間: 1.0s（秒）

行動的詳細描述：

1. 0f– 6f拾取器的頂部條從屏幕的頂部邊緣移動到其相應的位置; Y軸移位為: 128px;動畫速率:越來越快。

△速度曲線:（截圖中的時間幀不用于參考）

2. 3f– 8f背景色edeff0，做淡入動畫;透明度: 0％-100％;動畫率:均勻運動。

3. 0f– 6f“呼叫按鈕”的背景圖像逐漸出現在表格中;透明度：0％-100％;動畫率:均勻運動。

4. 2f– 8f表格的底部稱為“汽車按鈕”，以進行自下而上的位移和淡入動畫; Y軸位移：20px;透明度：0％-100％;動畫速率:首先進行短加速，然后減慢運動。

△速度曲線:（截圖中的時間幀不用于參考）

5. 15f– 23f從屏幕頂部邊緣268px的接收表格卡;從屏幕的上邊緣移動到148px（設計中的最終位置）;透明度：0％-100％;動畫率:進行簡短的加速練習，然后進行減速練習。

△速度曲線:（截圖中的時間幀不用于參考）

6. 17f– 25f型號從屏幕上邊緣選擇852px的卡片;從屏幕的上邊緣移動到732px（設計中的最終位置）;透明度：0％-100％;動畫速率:慢慢加速運動然后減速。

△速度曲線:（截圖中的時間幀不用于參考）

我們輸出動態(tài)描述文件的原因是：傳輸更加清晰，具體，效果更可控，通信成本降低，默契協議得到改善，設計恢復程度得到保證。

寫在最后：

話雖如此，我真的想盡可能地告訴每個人，我想如何做好設計。我不認為現在我們需要進行動態(tài)設計，現在是時候將原始界面設計師分成動態(tài)設計師的位置了。真正獨立的動態(tài)設計師需要做的事情絕對不僅僅是我們產品設計中需要的東西。因為我認為這是界面設計師輸出體驗的一部分，但是現在我們可以使用另一種表達形式。設計師應負責最終的輸出體驗，用戶使用產品的體驗，而不是一些漂亮的設計。說到這么多動態(tài)設計，難以設計出動態(tài)效果嗎？我之前親自告訴過我一句話，我覺得這很有道理。

充滿對設計或產品的熱愛。我想用愛做設計。這樣，您輸出的輸出將使用戶感受到情感。

« 10分鐘就可以知道中國30年市場營銷的演義 | 出2020雙十一的成績表，各大電子商務平臺創(chuàng)下最新記錄 »