本文重點(diǎn)介紹動(dòng)力學(xué)的原因，良好動(dòng)態(tài)設(shè)計(jì)的標(biāo)準(zhǔn)是什么，如何進(jìn)行動(dòng)態(tài)設(shè)計(jì)，以及如何使設(shè)計(jì)的動(dòng)態(tài)變得完美。

閱讀本文后，您將學(xué)習(xí)：

1.為什么需要?jiǎng)討B(tài)設(shè)計(jì)？

什么是動(dòng)作設(shè)計(jì)？

動(dòng)態(tài)效應(yīng)在產(chǎn)品設(shè)計(jì)中的作用

動(dòng)態(tài)設(shè)計(jì)的良好標(biāo)準(zhǔn)

2.如何設(shè)計(jì)動(dòng)態(tài)效果？

6種概念化效果的方法

6種實(shí)現(xiàn)動(dòng)態(tài)效果的方法

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

4.常用的動(dòng)畫軟件

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

你為什么需要設(shè)計(jì)動(dòng)畫？

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

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

1.什么是動(dòng)態(tài)設(shè)計(jì)？

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

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

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

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

2.動(dòng)態(tài)設(shè)計(jì)對(duì)產(chǎn)品設(shè)計(jì)有何影響？

動(dòng)態(tài)設(shè)計(jì)的作用

如上所示，運(yùn)動(dòng)對(duì)產(chǎn)品設(shè)計(jì)的影響包括：

通過級(jí)別信息;

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

提示隱藏信息功能;

傳遞情感信息。

了解這一點(diǎn)，那么為什么我們需要?jiǎng)討B(tài)設(shè)計(jì)？

通過以上結(jié)合自身產(chǎn)品設(shè)計(jì)的特點(diǎn)，我們可以總結(jié)出動(dòng)態(tài)設(shè)計(jì)的動(dòng)機(jī)如下：

等待而不是無聊;

做出改變并不難;

反饋不是單調(diào)的;

讓體驗(yàn)變得情緒化;

讓用戶更愉快。

什么是好動(dòng)力？

知道動(dòng)態(tài)設(shè)計(jì)的原因，我們應(yīng)該做什么樣的動(dòng)態(tài)設(shè)計(jì)？或者什么是好的動(dòng)態(tài)設(shè)計(jì)？它很酷，翻滾，旋轉(zhuǎn)，爆炸嗎？判斷復(fù)雜性很好。標(biāo)準(zhǔn)不好？

一位著名的外國一線設(shè)計(jì)師曾在分享會(huì)上做出了這樣一個(gè)良好效果的定義：

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

事實(shí)上，良好的動(dòng)態(tài)設(shè)計(jì)適合用戶體驗(yàn)，最終服務(wù)是體驗(yàn)而不是動(dòng)畫設(shè)計(jì)的顯示。

在這種情況下，讓我們總結(jié)一下良好動(dòng)態(tài)設(shè)計(jì)的標(biāo)準(zhǔn)。

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

快速而順利;

恰到好處的反饋;

改善運(yùn)營經(jīng)驗(yàn);

提供良好的視覺效果。

動(dòng)態(tài)設(shè)計(jì)標(biāo)準(zhǔn)

其次，良好的動(dòng)態(tài)設(shè)計(jì)應(yīng)該是第一個(gè)服務(wù)體驗(yàn)，其次是適當(dāng)?shù)脑O(shè)計(jì)（考慮綜合性，如性能，實(shí)施成本，是否干擾用戶等），再次是讓用戶感受到情感互動(dòng)你的輸出，最后是最基本的它是具有視覺美感。

如何設(shè)計(jì)動(dòng)畫？

知道什么是好的動(dòng)態(tài)設(shè)計(jì)，然后擴(kuò)展下一個(gè)問題，我們?nèi)绾卧O(shè)計(jì)運(yùn)動(dòng)效果？或者，如何開始使用動(dòng)態(tài)設(shè)計(jì)，尤其是初學(xué)者？

很簡(jiǎn)單，只需兩步：

首先要有一個(gè)概念，想法;

根據(jù)想法全面實(shí)施。

不知道？你是如何提出想法的？你覺得怎么樣？根據(jù)我自己的結(jié)論，我可以從這六個(gè)方面構(gòu)思：

鼓舞人心的消息來源

1.將產(chǎn)品與設(shè)計(jì)相結(jié)合

要結(jié)合產(chǎn)品思考，創(chuàng)意的設(shè)計(jì)必須符合改進(jìn)的產(chǎn)品體驗(yàn)，并且必須注意不要盲目。

2.理解基本常識(shí)

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

3.觀察生活

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

4.看，想想

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

5.學(xué)會(huì)反匯編

大多數(shù)網(wǎng)絡(luò)和應(yīng)用程序的動(dòng)態(tài)設(shè)計(jì)都是由基本的變化組成的。我們必須學(xué)習(xí)如何拆除其他人的復(fù)雜動(dòng)態(tài)設(shè)計(jì)，并通過觀察更多觀察來學(xué)習(xí)它們。然后，通過合理的安排設(shè)計(jì)自己的動(dòng)態(tài)設(shè)計(jì)，你就是這個(gè)動(dòng)態(tài)設(shè)計(jì)的導(dǎo)演。

6.專注于流行的

這很簡(jiǎn)單，就是每個(gè)人都應(yīng)該關(guān)注設(shè)計(jì)行業(yè)，或者網(wǎng)絡(luò)應(yīng)用動(dòng)態(tài)設(shè)計(jì)領(lǐng)域。了解新的設(shè)計(jì)技術(shù)，設(shè)計(jì)趨勢(shì)和設(shè)計(jì)方法。不要落后，不要永遠(yuǎn)把自己定義為追隨者。

之前我們說過，我們?cè)趙eb& app中看到的大多數(shù)動(dòng)態(tài)設(shè)計(jì)都是由一些基本的變化組成的。這些基本變化是什么？ （見下圖）

動(dòng)畫的基本變化

基本變化主要包括：移動(dòng)，旋轉(zhuǎn)，縮放和屬性變化。之前的觀點(diǎn)已經(jīng)很好理解，這里不再詳細(xì)解釋。解釋最后一個(gè)屬性更改，它指的是屬性的更改，例如透明度，形狀和顏色。所有這些變化，經(jīng)過合理的安排，與適當(dāng)?shù)倪\(yùn)動(dòng)節(jié)奏協(xié)調(diào)，是一個(gè)完整的動(dòng)態(tài)設(shè)計(jì)。

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

改變節(jié)奏

上圖是一些常見的Bezier曲線，右側(cè)是AE設(shè)計(jì)過程中的運(yùn)動(dòng)曲線調(diào)整界面。

為什么運(yùn)動(dòng)需要匹配正確的節(jié)奏？

因?yàn)樽匀唤缰械倪\(yùn)動(dòng)不是線性均勻運(yùn)動(dòng)，而是根據(jù)物理定律的曲線移動(dòng)運(yùn)動(dòng)。這是我之前說過的基本常識(shí)和基本法。人們對(duì)一種運(yùn)動(dòng)形式產(chǎn)生的大部分情緒反饋來自于生活中看到的類似形式的運(yùn)動(dòng)。因此，我們必須遵守物理定律，以便我們能夠準(zhǔn)確地傳達(dá)我們動(dòng)態(tài)設(shè)計(jì)的情感。當(dāng)然，它可以根據(jù)需要進(jìn)行夸大和簡(jiǎn)化。規(guī)則是死人還活著。隨時(shí)隨地學(xué)習(xí)。

http://easings.net這個(gè)網(wǎng)站歸結(jié)為Bezier曲線的基本全動(dòng)態(tài)形式，并有預(yù)覽。也可以直接使用js代碼，非常方便，非常直觀。

說出如何構(gòu)思，然后考慮如何實(shí)現(xiàn)你的想法：

實(shí)現(xiàn)動(dòng)態(tài)設(shè)計(jì)

如上所示：

實(shí)現(xiàn)想法基本上是技術(shù)和技能的問題。這需要學(xué)習(xí)和積累。你是如何學(xué)會(huì)積累的？

1.動(dòng)手實(shí)驗(yàn)，練習(xí)完美。

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

2.臨沂作品

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

3.注意細(xì)節(jié)

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

4.有節(jié)奏感

之前已經(jīng)說過了。為了使您的工作充滿活力而不是僵化，您可以為產(chǎn)品賦予新的活力。

5.先添加然后減少

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

6.搜索引擎

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

效果的類別是什么？

我們可以將當(dāng)前的運(yùn)動(dòng)設(shè)計(jì)大致分為兩大類：

1.功能效果（如下所示）

這種動(dòng)態(tài)設(shè)計(jì)更適合產(chǎn)品設(shè)計(jì)，也是本文的主要內(nèi)容。

功能活力（此圖片來自網(wǎng)絡(luò)集非作者原創(chuàng)）

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

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

顯示類型效果（此圖片來自網(wǎng)絡(luò)集非作者原創(chuàng)）

什么軟件用于動(dòng)態(tài)設(shè)計(jì)？

運(yùn)動(dòng)設(shè)計(jì)軟件

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

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

原理：操作簡(jiǎn)單，效率高。適合制作快速顯示或簡(jiǎn)單動(dòng)畫設(shè)計(jì)的演示。

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

您可以根據(jù)工作中的實(shí)際情況適當(dāng)使用它。

動(dòng)態(tài)設(shè)計(jì)如何落地？

我談到了為什么我這樣做，什么是好的，以及如何做到這一點(diǎn)。下一步是談?wù)勎覀內(nèi)绾尾拍苁刮覀兊那趭^設(shè)計(jì)變得完美。

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

我們需要基本上告別溝通，我們?cè)鯓硬拍苁归_發(fā)愛上動(dòng)態(tài)設(shè)計(jì)？

我簡(jiǎn)要總結(jié)了幾個(gè)要點(diǎn)：

動(dòng)態(tài)著陸

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

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

2.良好的早期溝通

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

3.了解基本實(shí)施原則

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

4.代表性動(dòng)態(tài)設(shè)計(jì)

只需讓開發(fā)圖像知道您將要做什么。此時(shí)，您需要正確設(shè)計(jì)動(dòng)畫設(shè)計(jì)——

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

所以問題是，所有動(dòng)態(tài)設(shè)計(jì)都被描述為可數(shù)據(jù)化嗎？

確切地說，可以描述我們大多數(shù)常用的web和APP設(shè)計(jì)。

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

顯示型運(yùn)動(dòng)設(shè)計(jì)：

顯示類型效果（此圖片來自網(wǎng)絡(luò)集非作者原創(chuàng)）

因?yàn)樗鼈兓旧蠜]有復(fù)雜的相互作用，特別是在運(yùn)動(dòng)效果原始本身，它基本上是滿足某些條件觸發(fā)回放的邏輯，并滿足觸發(fā)停止的某些條件。

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

輸出視頻將涉及壓縮音量。我來談?wù)勅绾螇嚎s這些文件的數(shù)量：

AE文件壓縮

AE壓縮設(shè)置

如果使用AE，則在渲染輸出時(shí)，如圖所示。基本上，動(dòng)態(tài)設(shè)計(jì)的一半可以控制在幾百KB以內(nèi)，復(fù)雜的運(yùn)動(dòng)可以控制在幾M之內(nèi)。

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

視頻壓縮軟件

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

功能動(dòng)態(tài)設(shè)計(jì)：

功能性動(dòng)作（此圖像來自網(wǎng)絡(luò)集非作者原創(chuàng)）

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

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

如何編寫動(dòng)畫設(shè)計(jì)文檔？

你怎么寫動(dòng)態(tài)描述文件？或者我們?nèi)绾螌?dòng)態(tài)設(shè)計(jì)報(bào)告給發(fā)展代表？我創(chuàng)建了一個(gè)表格，簡(jiǎn)要描述了運(yùn)動(dòng)描述文檔輸出的基本流程（參見下圖）。/P>

編寫動(dòng)作描述文檔流程圖

例如：

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

過渡效應(yīng)

運(yùn)動(dòng)效果的基本參數(shù)：

動(dòng)畫大小: 750 * 1334（px）

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

動(dòng)畫時(shí)間: 1.0s（秒）

行動(dòng)的詳細(xì)描述：

（1）0f– 6f拾取器的頂部條從屏幕的頂部邊緣移動(dòng)到其相應(yīng)的位置; Y軸移位為: 128px;動(dòng)畫速率:越來越快。

速度曲線:（屏幕截圖中的時(shí)間范圍不供參考）

（2）3f– 8f背景色edeff0，做淡入動(dòng)畫;透明度: 0％-100％;動(dòng)畫率:均勻運(yùn)動(dòng)。

（3）0f– 6f“呼叫按鈕”的背景圖像逐漸出現(xiàn)在表格中;透明度：0％-100％;動(dòng)畫率:均勻運(yùn)動(dòng)。

（4）2f– 8f表單下方的“Car按鈕”由底部到頂部和淡入動(dòng)畫制作; Y軸位移：20px;透明度：0％-100％;動(dòng)畫率:首先進(jìn)行短暫加速練習(xí)，然后慢慢進(jìn)行動(dòng)作。

速度曲線:（屏幕截圖中的時(shí)間范圍不供參考）

（5）15f– 23f從屏幕頂部邊緣268px位置取出卡片;從屏幕的上邊緣移動(dòng)到148px（設(shè)計(jì)中的最終位置）;透明度：0％-100％;動(dòng)畫速率:首先做一個(gè)短暫的加速練習(xí)，然后做一個(gè)減速練習(xí)。

速度曲線:（屏幕截圖中的時(shí)間范圍不供參考）

（6）17f– 25f型號(hào)從852px到屏幕上邊緣選擇卡片;從屏幕的上邊緣移動(dòng)到732px（設(shè)計(jì)中的最終位置）;透明度：0％-100％;動(dòng)畫率:先做一個(gè)簡(jiǎn)短的加速練習(xí)然后做一個(gè)減速練習(xí)。

速度曲線:（屏幕截圖中的時(shí)間范圍不供參考）

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

寫在最后

話雖如此，我真的想盡可能地告訴每個(gè)人，我想如何做好設(shè)計(jì)。我不認(rèn)為現(xiàn)在我們需要進(jìn)行動(dòng)態(tài)設(shè)計(jì)，現(xiàn)在是時(shí)候?qū)⒃冀缑嬖O(shè)計(jì)師分成動(dòng)態(tài)設(shè)計(jì)師的位置了。真正獨(dú)立的動(dòng)態(tài)設(shè)計(jì)師需要做的事情絕對(duì)不僅僅是我們產(chǎn)品設(shè)計(jì)中需要的東西。因?yàn)槲艺J(rèn)為這是界面設(shè)計(jì)師輸出體驗(yàn)的一部分，但是現(xiàn)在我們可以使用另一種表達(dá)形式。設(shè)計(jì)師應(yīng)負(fù)責(zé)最終的輸出體驗(yàn)，用戶使用產(chǎn)品的體驗(yàn)，而不是一些漂亮的設(shè)計(jì)。說到這么多動(dòng)態(tài)設(shè)計(jì)，難以設(shè)計(jì)出動(dòng)態(tài)效果嗎？我之前親自告訴過我一句話，我覺得這很有道理。

充滿對(duì)設(shè)計(jì)或產(chǎn)品的熱愛。我想用愛做設(shè)計(jì)。這樣，您輸出的輸出將使用戶感受到情感。

作者：Aogon-UED，AaronCui，公共號(hào)碼：舊圖形設(shè)計(jì)聊天

本文最初由@AaronCui出版。未經(jīng)許可，禁止復(fù)制。

地圖來自u(píng)nsplash

« U-Mail：解釋交易電子郵件營銷的作用和優(yōu)勢(shì) | 互聯(lián)網(wǎng)金融歡迎發(fā)展海洋世界專業(yè)創(chuàng)建值得信賴的投資平臺(tái) »