寫這篇文章的起因是前段時間在 Meidum 上讀到的一篇駁斥 Dribbble 發(fā)展現(xiàn)狀的文章。文章發(fā)表在 16 年，其中提到：「我不認(rèn)為 Dribbble 解決了什么問題，你期望在 400*300px 的矩形中解決多少現(xiàn)實中的問題？Dribbble 一直沒有變化，但你可以有所變化，如果你更關(guān)心其他事情而不是新的 UI 趨勢」。當(dāng)然，他也提到，如果正在從事創(chuàng)意設(shè)計等領(lǐng)域的工作，他會很認(rèn)可 Dribbble 能為他帶來的靈感的價值。

我來解釋下，作者 Tobias van Schneider 是以一名（UI/UX）體驗設(shè)計師的從業(yè)者身份發(fā)表的觀點，即 Dribbble 流行的 UI 趨勢實則并不能解決用戶體驗相關(guān)的一些問題。我們回顧歷史以來比較重要的體驗交互領(lǐng)域的重大革新，實際上都是跟隨硬件革新，由平臺級團隊研究并普及開來，而不是 Dribbble 之類的設(shè)計分享交流平臺。

作為體驗向 UI 設(shè)計師，我們應(yīng)當(dāng)花費更多精力在交互體驗相關(guān)的技能構(gòu)建上，而不是對于流行趨勢的盲目跟隨崇拜。趨勢不能解決問題，用心研究探索解決方案才能解決你產(chǎn)品面臨的問題，甚至很多人都不明白自己產(chǎn)品所面臨的問題，更別提解決了。

確保自己有主見，能獨立思考，然后再去看待目前的趨勢及自身的職業(yè)生涯與當(dāng)下的行業(yè)現(xiàn)狀。

這個思考同時讓我想起了近年流行起來的產(chǎn)品設(shè)計師、全鏈路設(shè)計師的概念。在阿里BBC UED總監(jiān)汪方進(jìn)口中的 UED 轉(zhuǎn) UXD，目的是解決阿里及各個公司內(nèi)部存在的職能分工問題，實現(xiàn)設(shè)計師從產(chǎn)品修飾者到產(chǎn)品區(qū)分者乃至產(chǎn)品驅(qū)動者的轉(zhuǎn)變，放大設(shè)計師的價值，且使設(shè)計工作成果可驗證。

其愿景是好的，在阿里內(nèi)部實施的成果應(yīng)該也不錯，但無數(shù)人趨之若鶩，跟隨這股潮流卻是錯的，更多的人只看到了它的好，就像股票，聽說能賺錢，就瘋狂投入。殊不知，阿里 UXD 是從 P7 開始培養(yǎng)的。于是一批本該集中精力鍛煉與沉淀自己核心競爭力的設(shè)計師，拖慢了自己的成長步伐，無形中反而削弱了個人競爭力。

問題在哪里？問題在于，你不是在 BAT 工作，你的產(chǎn)品主導(dǎo)者仍然是老板是產(chǎn)品經(jīng)理，你認(rèn)為你的戰(zhàn)略思想拼得過老板？交互能力拼得過交互設(shè)計師？不存在的，職能并沒有下放，你還是僅僅在做 UI 設(shè)計，你沒有能力主導(dǎo)產(chǎn)品線，驅(qū)動產(chǎn)品也難。因此，趨勢的產(chǎn)生有其生長的土壤，并不適合移植到所有地方。這一點所有人都應(yīng)該謹(jǐn)記，在跟隨潮流趨勢時，反省一下這樣做對我日常工作真的會起到幫助嗎？

它使我開始辯證地看待我們當(dāng)下的各種流行趨勢，及這些新潮和看似繁榮的設(shè)計發(fā)展背后所呈現(xiàn)的一些較隱晦的問題。人類總是在繁榮中沉溺而自我滿足，無法意識到甚至抗拒可能會出現(xiàn)的問題，職業(yè)也一樣，設(shè)計師這種個人風(fēng)格濃郁，個性支配力強的職業(yè)更是如此，我們沉迷、從眾、自嗨、盲目，自以為是，投身于潮流浪潮，卻不自知在裸泳。

這次我要講的是關(guān)于流行動效的問題，就是我們每天在 Dribbble 瀏覽的精致動效。文章包括：

• 對當(dāng)前動效趨勢的思考，存在什么問題？
• 我們應(yīng)當(dāng)如何正確認(rèn)識當(dāng)下的流行動效？
• 如何做出更實用優(yōu)質(zhì)的動效？

關(guān)于當(dāng)下流行動效的問題

你是否會經(jīng)常驚嘆那些復(fù)雜炫酷的 UI 動效，優(yōu)雅的轉(zhuǎn)場，精致的交互細(xì)節(jié)，動感的節(jié)奏。很正常，我也會，以前我甚至?xí)@樣瀏覽一個小時，下載下來仔細(xì)研究臨摹，當(dāng)復(fù)原了這樣一個高復(fù)雜度的動效，我也會有成就感。甚至到后來，當(dāng)我上傳自己產(chǎn)出的一些 UI 作品時，我會刻意使用一些 Dribbble 上流行的動效樣式，并自得其樂。我相信很多人和我一樣，但我們做出來美觀的、酷炫的動效設(shè)計，它們真的是好設(shè)計嗎？還是單純的設(shè)計師自嗨型設(shè)計？

我們來看下面這兩個案例，作為創(chuàng)意設(shè)計，或者說單純看視覺效果，這兩個作品無疑極為優(yōu)秀。但他們其實應(yīng)當(dāng)歸屬于 UI/UX 體驗設(shè)計，從這個角度來看，問題就有點多了。

下面我將指出目前以 Dribbble 平臺為主的作品分享中曝露出的較典型的問題。

1. 太過強調(diào)展示，而忽略了核心內(nèi)容

以 UI 為主的作品其重點展示的在于用戶界面的視覺、交互等細(xì)節(jié)，但當(dāng)下流行出一種通過過度豐富乃至復(fù)雜的背景、裝飾元素，來提高整個作品圖的設(shè)計感，參考上面第一個作品。因此，在本質(zhì)上將一個體驗類產(chǎn)品設(shè)計呈現(xiàn)出了平面創(chuàng)意類設(shè)計。所以，設(shè)計師想要傳達(dá)什么呢？平面還是UI？瀏覽者從中學(xué)習(xí)了什么？對行業(yè)有什么影響有什么推動作用？

作為 UI/UX 的我們總是在強調(diào)體驗，但我們并沒有真正將其融入所有的設(shè)計產(chǎn)出，在做出這樣一個重視覺呈現(xiàn)，而忽略了體驗設(shè)計本質(zhì)的作品時，設(shè)計師對自我的職能是一個自我否定的狀態(tài)，只有同為設(shè)計師的我們沉迷其中，自嗨而不自知。這個設(shè)計是服務(wù)誰的？解決了一個什么關(guān)鍵問題？這才是我們應(yīng)當(dāng)思考，且呈現(xiàn)出來有利于同行進(jìn)步的關(guān)鍵點。

2. 為了展示而展示，違背基礎(chǔ)原則

我們遇到的很多酷炫的動效，為什么酷炫，為什么有那么多細(xì)節(jié)可以被感知到？因為設(shè)計者想要被你看到。而事實上，動效不應(yīng)被清晰感知到，它只應(yīng)該起到過渡作用，而不應(yīng)該干擾用戶的注意力。然而在 Dribbble 上百分之八十的作品都在刻意減緩轉(zhuǎn)場動畫的速度，延長動效的整體時長，以展示更多的設(shè)計細(xì)節(jié)，那么設(shè)計師需要問問自己，這些細(xì)節(jié)的展示，是否有必要，是否有意義？答案顯而易見，如果你熟讀谷歌動效規(guī)范，你會記得開篇第一句話是，動效使 UI 富有表現(xiàn)力且易于使用，表現(xiàn)力是錦上添花，而易于使用，體驗度才是核心。

3. 發(fā)表作品的錯誤出發(fā)點

最后一點，也是最典型的一點，那就是設(shè)計師盲目沉迷于圈子內(nèi)的消極心態(tài)，這一點真的相當(dāng)?shù)湫颓矣泻τ谛袠I(yè)和個人的發(fā)展。

我們都在講用戶，用戶體驗，以用戶為中心。然而事實上呢？我們上傳的作品，是為了呈現(xiàn)給誰？沒錯，是為了給同行看的。然而產(chǎn)品的使用者是誰？是用戶而不是設(shè)計師，設(shè)計師自嗨、從眾、盲目信奉趨勢，群體無意識的沉溺于這個狀態(tài)，這真的是很恐怖的現(xiàn)狀。我們發(fā)表的 UX/UI 類作品是為了取悅設(shè)計師群體，而不是為用戶解決問題，這就是起點的錯誤。

而如果一個設(shè)計師在作品中呈現(xiàn)他用一種獨特的交互方式解決了一個什么問題，那社區(qū)氛圍就是另一個樣子。我們不否認(rèn)通過更豐富的視覺效果來博眼球，但是一切都應(yīng)當(dāng)圍繞著設(shè)計性質(zhì)的核心來進(jìn)行，而不是將一個體驗設(shè)計豐富成一個平面設(shè)計。

我們應(yīng)該意識到一些問題，對自己對行業(yè)有清晰的認(rèn)知是未來能夠變得更好的前提，但我們也應(yīng)該理智的應(yīng)對現(xiàn)狀。設(shè)計師已經(jīng)習(xí)慣了發(fā)表更加博眼球的作品來吸引關(guān)注，或者是為了創(chuàng)造更多私單和升職機會，這無可厚非。視覺上創(chuàng)造與升華明顯易于一套優(yōu)秀的用戶體驗的構(gòu)建，然而構(gòu)建體驗解決問題卻是我們職業(yè)生涯中更關(guān)鍵的部分，也是職能價值得以體現(xiàn)的部分。

因此，我的看法是，我們應(yīng)當(dāng)認(rèn)清現(xiàn)狀，盡量去選擇正確的方向去提升成長，不要盲目被潮流趨勢帶偏。

正確認(rèn)識當(dāng)下的動效設(shè)計

UI 動畫通常被認(rèn)為能提升用戶體驗愉悅度，但事實上并沒有增加太大價值，設(shè)計師應(yīng)當(dāng)避免代入職能偏好，而導(dǎo)致做出錯誤的判斷。

設(shè)計師習(xí)慣于自動代入設(shè)計這一個崗位的特殊性，對動效有更敏感的感知，因過分關(guān)注從而產(chǎn)生動效有利于用戶體驗這樣的錯覺，但事實上用戶處于非實時交互時核心訴求在于迅速完成界面的切換與過度，而不是欣賞你的動效細(xì)節(jié)。而當(dāng)用戶處于實時交互時，用戶關(guān)注的也不是反饋的美觀度，而是反饋的速度。這都是從用戶使用產(chǎn)品的本質(zhì)訴求為出發(fā)點的判斷。

1. 動效的不同階段

動效大致可以按照實時交互和非實時交互劃分不同階段。實時交互階段即正在執(zhí)行的交互操作與動效同時進(jìn)行，如按下按鈕時的狀態(tài)變化，此類動效是與操作同時完成的。

非實時動效則是用戶完成操作后緊跟著的轉(zhuǎn)場或狀態(tài)變化，如點擊新的 tab 后的跳轉(zhuǎn)轉(zhuǎn)場，是由右側(cè)進(jìn)入或者底部劃出。再例如一些加載效果，都是非實時進(jìn)行的，它們與操作并不同時完成。

2. 動效的目的及意義

動效設(shè)計的目的和意義是什么？大致可以概括為以下幾個方面。

反應(yīng)元素界面的層級關(guān)系

通過動效，用戶更易于理解界面的轉(zhuǎn)場，能更輕松地定位到當(dāng)前正在進(jìn)行的工作，此類動效給用戶傳達(dá)出任務(wù)層級，及界面中各相關(guān)元素的關(guān)系，減少困擾從而提升體驗。

提供交互反饋和狀態(tài)

動效能夠提供及時的反饋和交互狀態(tài)。當(dāng)用戶完成具體的操作行為時，產(chǎn)品應(yīng)當(dāng)且必須給予用戶反饋，以告知該操作是否生效，若無任何反饋則會導(dǎo)致用戶對自己和產(chǎn)品產(chǎn)生懷疑，甚至產(chǎn)生挫敗感。沒有反饋用戶也無法清楚產(chǎn)品是否還在工作。除此之外，動效也是表達(dá)狀態(tài)的主要語言，如加載狀態(tài)、選中狀態(tài)等等。

引導(dǎo)用戶

動效是進(jìn)行用戶教育的有力工具，大家最熟悉的莫過于蘋果解鎖屏幕的滑動手勢引導(dǎo)。我們也會在一些需要新用戶引導(dǎo)的場景下見到各種手勢引導(dǎo)操作。使用動畫進(jìn)行引導(dǎo)的形式具有高效真實，易于交互的特性，用戶可以瞬間心領(lǐng)神會，大大降低學(xué)習(xí)成本。如下圖的 Material Design 官方案例，手勢解鎖引導(dǎo)（左圖）及加入購物車的便捷操作引導(dǎo)（右圖）。

個性化與情感化因素

個性化與情感化動效設(shè)計并不適用于所有場景，因為其動效復(fù)雜度和豐富度實際上與動效追求簡潔的基本原則相違背，但在某些特殊場景，卻往往能發(fā)揮奇效。例如加載頁面來緩解用戶疲勞感與等待焦慮（右圖），強化品牌logo相關(guān)內(nèi)容來達(dá)到占領(lǐng)用戶心智的目的（左圖）由此也可以看出，規(guī)則是嚴(yán)謹(jǐn)?shù)牡皇峭昝溃碚摯嬖诿^(qū)，可以適當(dāng)打破。

當(dāng)然，在做與情感化相關(guān)的動效設(shè)計時（UI設(shè)計領(lǐng)域而不是品牌設(shè)計領(lǐng)域），設(shè)計師最先要考慮的還是設(shè)計的目的、出發(fā)點。即我為什么要做這個設(shè)計，從體驗角度還是從戰(zhàn)略角度？為了提升等待期間的體驗或者為了深化品牌影響力占領(lǐng)用戶心智，又或者單純?yōu)榱丝犰牛?/p>

3. 動效應(yīng)該遵循的通用原則

動效應(yīng)當(dāng)具有闡釋性

動效應(yīng)當(dāng)具有解釋交互的能力，如元素的空間層次關(guān)系，傳達(dá)操作的可用性和預(yù)期結(jié)果。

動效應(yīng)當(dāng)聚焦重點

動效在產(chǎn)品界面中位于層級的最高點，因為移動的事物天然更加聚焦注意力，我們應(yīng)當(dāng)正確的理解這一點及利用這一點，而不能濫用。動效只應(yīng)當(dāng)發(fā)生在用戶發(fā)生交互，或用戶視線聚焦的地點。即動效的展示應(yīng)當(dāng)與用戶注意力關(guān)聯(lián)，不應(yīng)當(dāng)產(chǎn)生干擾用戶完成任務(wù)的情況，更不應(yīng)該出現(xiàn)無意義的轉(zhuǎn)移注意力性質(zhì)的設(shè)計。但如果是商業(yè)化驅(qū)動的產(chǎn)品，這一規(guī)則可以無視，此類產(chǎn)品通常犧牲體驗換取商業(yè)上的成功。

動效簡潔程度與產(chǎn)品易用性成正相關(guān)

真正優(yōu)秀的動效是不易被感知的，因其自然而簡單。我們可以在一些重量級產(chǎn)品上驗證這一點，微信、QQ、支付寶等等。最短的時間，最簡單的過渡，快速響應(yīng)，直達(dá)用戶的目的地。近期 QQ 體驗設(shè)計團隊發(fā)表的一篇設(shè)計總結(jié)中對于動效的把握我認(rèn)為可以作為一個典型案例，在后文會有展示。

動效應(yīng)該有細(xì)節(jié)從而使過渡自然

我們追求簡短簡潔的動效是為了追求響應(yīng)速度，提高用戶使用效率及避免干擾，但這并不意味著動效應(yīng)當(dāng)簡陋。恰當(dāng)?shù)氖褂镁弰忧€，關(guān)注不同場景下的動效過渡時間、空間變化、透明度和大小比例等細(xì)節(jié)元素。

從設(shè)計和開發(fā)實現(xiàn)的角度，動效應(yīng)當(dāng)是復(fù)雜的，因為要綜合各種變化，考慮各種細(xì)節(jié)。從用戶使用和感知的角度，動效應(yīng)該是簡單的，用戶不會發(fā)覺的動效才是過渡自然的動效。

動效的選取應(yīng)當(dāng)遵循一致性原則

同一個產(chǎn)品中相同性質(zhì)的操作應(yīng)當(dāng)呈現(xiàn)出一致的視覺體驗，如跳轉(zhuǎn)下一層級為從右往左淡入頁面，返回上一級從左往右淡入界面。遵循一致性原則能使 UI 作品中的視覺呈現(xiàn)更統(tǒng)一，而那些太過花哨的動效作品往往并不遵循這一原則。具有一致性的動效設(shè)計也是商業(yè)產(chǎn)品（上線產(chǎn)品）的基礎(chǔ)要求。由于不同平臺的差異，及一些產(chǎn)品追求個性化的需要，目前各平臺各產(chǎn)品的轉(zhuǎn)場動效并沒有實現(xiàn)真正的一致性，但相信隨著時間的推進(jìn)，就像移動端的交互手勢一樣，最終會完成真正的統(tǒng)一。保留那些高效易用的，舍棄那些復(fù)雜低效率的。

4. 設(shè)計師產(chǎn)出的動效設(shè)計包括應(yīng)用型和展示型

根據(jù)當(dāng)下設(shè)計師的動效產(chǎn)出，我將動效設(shè)計分為應(yīng)用型和展示型。

展示型動效

我們平時在設(shè)計分享網(wǎng)站瀏覽的酷炫或精致，乃至復(fù)雜的動效都屬于展示型動效，或者是將應(yīng)用型動效延長了幾倍展示時間，或者刻意放慢動效速度以展示更多設(shè)計細(xì)節(jié)。該類動效設(shè)計的演示目標(biāo)人群是設(shè)計師。

其設(shè)計目的從好的方面來說是演示設(shè)計細(xì)節(jié)，傳道授業(yè)或者展示個人設(shè)計能力以獲取一些工作或外包機會，經(jīng)營個人設(shè)計品牌。從壞的角度講就是炫技，博眼球。也正因此，總是有人調(diào)侃敢不敢拿真正上線的作品出來看看。當(dāng)然這種諷刺也過分偏激，總要有人仰望星空，只是要謹(jǐn)記設(shè)計目的出發(fā)點，如果是處于同行交流的目的來設(shè)計一些展示類動效，傳達(dá)一下設(shè)計技巧也是蠻不錯的。唯一擔(dān)心的是給新人錯誤的引導(dǎo)，使得失去體驗設(shè)計的本真，一度沉溺于花哨的表面。

應(yīng)用型動效

應(yīng)用動效即應(yīng)用在真實商業(yè)產(chǎn)品中的動效設(shè)計，其演示目標(biāo)人群是開發(fā)人員和用戶。首先動效設(shè)計作為產(chǎn)品設(shè)計中的一部分，服務(wù)目標(biāo)肯定是用戶，以輔助用戶理解產(chǎn)品界面，理解交互流程為目的進(jìn)行動效設(shè)計，才是真正為用戶著想。另外考慮到動效的還原度，動效設(shè)計需要專門提供一個開發(fā)人員參考版本，涉及到預(yù)期效果演示、數(shù)值曲線演示等。

應(yīng)用型動效是我們工作中的真實產(chǎn)出，和職能掛鉤，更應(yīng)該遵循動效設(shè)計的簡潔易用的核心原則，進(jìn)行相關(guān)設(shè)計時，應(yīng)當(dāng)查閱動效規(guī)范，多多參考成熟的上線產(chǎn)品。

很多人抱怨一些產(chǎn)品設(shè)計風(fēng)格陳舊，不時尚不跟隨潮流，那都是為了滿足大體量用戶的審美偏好及體驗偏好，如果一直代入設(shè)計師的審美偏好及對流行趨勢的推崇，那產(chǎn)品將很難取得成功。動效設(shè)計也一樣，摒棄個人偏好，考慮真實用戶。

應(yīng)用型動效應(yīng)該是不易被感知到的，當(dāng)我們?yōu)g覽到一些 UI 動效，能清晰地分辨出其過渡的細(xì)節(jié)，變化的手段，那它是無法被應(yīng)用于真實的線上產(chǎn)品中的。

• 動效過渡時間有要求（查看谷歌文檔）
• 較長的動畫過渡產(chǎn)生加載緩慢假象
• 能被感知的動效說明對用戶視覺構(gòu)成了干擾

5. 真實產(chǎn)品中UI動效是什么樣的？遵循哪些規(guī)則？

以 qq 近期的一次改版為例子，避免復(fù)雜，避免亢長，對應(yīng)上下文的簡單映射（如右入左出）。

使用橫向切換來表明層級間的變化

縱向滑動與彈出，開啟一個分支任務(wù)

全屏縮放強調(diào)內(nèi)容的來源

所以最理想的動效是不容易被感知的，這證明你的產(chǎn)品流暢度達(dá)標(biāo)，能迅速做出反應(yīng)，而用戶能迅速抵達(dá)目的地。

打造優(yōu)秀動效必不可少的細(xì)節(jié)

1. 時間與速度的設(shè)定

動效轉(zhuǎn)換速度的設(shè)定應(yīng)該恰當(dāng)合理

動效應(yīng)該能幫助用戶跟蹤 UI 的更改，即使用戶易于理解從哪里來到哪里去或者執(zhí)行了什么操作。過快會導(dǎo)致用戶無法理解其操作導(dǎo)致的結(jié)果，過慢則顯得冗余及加載緩慢等問題。因此轉(zhuǎn)化的速度應(yīng)該設(shè)定在能夠輔助用戶理解其執(zhí)行的操作的最快速度。這能保證動效產(chǎn)生高效的引導(dǎo)作用，同時不會顯得多余冗長。右側(cè)為正常速度，左側(cè)為過快與過慢的情況。

動效的持續(xù)時間根據(jù)動效復(fù)雜度而變化

簡單的動畫需要更短的時間就能完成，因為其變化較少，可以快速完成。而復(fù)雜的動畫強制使用較短的時間，則會產(chǎn)生卡頓和模糊的情況。一般涉及到簡單控件元素的動效都可以在 100ms 到 200ms 完成，特殊情況可以提高到 500ms。

一般一個完整的過渡動效可以在 300ms 內(nèi)完成，如果你使用 Principle 來制作 UI 動效你會發(fā)現(xiàn)它默認(rèn)的時間設(shè)定就是 0.3s，即300ms。而在一些過于花哨或為展示細(xì)節(jié)而設(shè)計的動效中你會發(fā)現(xiàn)轉(zhuǎn)場時間要遠(yuǎn)遠(yuǎn)長于 300ms，這實際上并不合理。

退出操作的過渡動畫可以在更短的時間來完成

關(guān)閉元素即傳出元素所用時間應(yīng)當(dāng)更少，其原因是它們比用戶的下一個任務(wù)要次要的多，因此并不需要轉(zhuǎn)移用戶過多注意力。

因此在我們?yōu)樽约耶a(chǎn)品設(shè)計動效轉(zhuǎn)場時，針對關(guān)閉和返回性質(zhì)的轉(zhuǎn)場，可以使用更短的過渡時間，如 200ms、250ms 等等。

大面積元素的變化應(yīng)當(dāng)花費更多的時間來完成

小面積元素的變化所花費的時間應(yīng)該小于較大面積元素的變化。這一點與費茨定律保持一致，大面積的元素要更加吸引用戶注意力，因此需要花費更多的時間來完成過渡。

合理利用easing曲線

說曲線是動效的靈魂都不為過，選擇恰當(dāng)?shù)那€可以使動效過渡更自然，有節(jié)奏從而產(chǎn)生美感。曲線主要分為緩入緩出和緩動三類，較常用的是緩動曲線，即中間快兩頭慢，更符合現(xiàn)實中的物理原則。

2. 為過渡動效「編舞」

首先我們應(yīng)該理解，動效概括下來就是位移、透明度、比例的變化，萬變不離其宗。而我們最主要研究的動效是過渡動效，它涵蓋了產(chǎn)品設(shè)計中最主要的動效應(yīng)用場景，即反應(yīng)界面層級元素關(guān)系。我們希望過渡動效能實現(xiàn)這樣的效果：使用戶高效地完成界面跳轉(zhuǎn)，同時輕松地理解跳轉(zhuǎn)關(guān)系，期間沒有卡頓，體驗流暢。

而想要打造流暢的過渡動效，我們要為需要變化的所有元素進(jìn)行「編舞」，使其符合邏輯且不會出現(xiàn)視覺混亂。如下圖，是 Material Design 動效的編舞規(guī)則，它將我們動效過渡期間的不同元素分為三大類：傳出元素、傳入元素、持續(xù)性元素。

傳入元素指即將進(jìn)入新的結(jié)果頁面的元素，傳出元素則是要消失為后面的元素騰出位置的元素，持續(xù)性元素則是始終存在的容器類元素，如 bg（background）。

整體過渡順序遵循此原則：首先傳出元素消失，然后傳入元素出現(xiàn)，在這期間持續(xù)性元素始終保持變化，且持續(xù)性元素的變化時長是此過渡動效的總時長。

下圖中的橙色線框是傳入和傳出元素，紫色線框是持續(xù)性元素。

另外一個比較細(xì)節(jié)的設(shè)計點是峰值的連接點作用。持續(xù)性元素曲線的峰值應(yīng)當(dāng)在整個動效的 30% 節(jié)點處，即下圖中的紫色曲線的峰值，以此時間點（X軸）為分界，銜接傳入和傳出元素，完成整個過渡。

如果不明白也沒關(guān)系，我們學(xué)會怎么使用就可以了。我們需要確定整個過渡動效的總時長，然后乘以 30%，以此為節(jié)點，銜接傳入元素和傳出元素。

例如一個過渡動效總時長為 300ms，300*30%是 90ms，我們需要在 0~90ms 時讓傳出元素消失，在 90~300ms 時讓傳入動效出現(xiàn)。

上面這個案例是針對較復(fù)雜的動效，而對于一些簡單動效的轉(zhuǎn)場則無需太過復(fù)雜的編舞，各元素變化可以同步進(jìn)行，如下圖：

3. 使用組或容器的形式完成過渡

在復(fù)雜的布局中，存在元素過多的情況，我們不可能讓每個元素都進(jìn)行自己的動畫，那樣會使動效冗長復(fù)雜乃至混亂，應(yīng)當(dāng)避免過多元素爭搶用戶注意力的情況。因此我們需要將元素組合為單元組，以單元組的變化來呈現(xiàn)主要動效的視覺效果，針對更小的單位采用淡入淡出的處理手法，從而避免過多元素頻繁變化爭搶注意力的情況。如下圖中，元素以組的形式進(jìn)行變化，使動效過渡自然的同時，減少了單個元素的動畫頻率，其中所有小元素，如圖片都采用了淡入淡出的處理手法。

再來看一下反面案例，為了追求所有元素的動畫效果而導(dǎo)致整體臃腫復(fù)雜，適得其反。

除了成組的形式來解決這一問題，我們還可以使用容器來承載較復(fù)雜的一系列元素。我們通過主動定義一個明確的邊界，例如一張卡片，使內(nèi)部元素保持縱橫比例，縮放以適應(yīng)界面的大小，從而構(gòu)成縮放容器的效果，與 iphone 打開 APP 的動效體驗一致。

參考內(nèi)容：

• Material Design 設(shè)計規(guī)范
• 《大廠案例復(fù)盤！騰訊頂尖設(shè)計團隊如何做 QQ 8.0 新版設(shè)計？》

歡迎關(guān)注「EasonZhang」公眾號：