本文為PMCAFF專欄作者南可出品

前言

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

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

作為體驗向UI設計師，我們應當花費更多精力在交互體驗相關的技能構建上，而不是對于流行趨勢的盲目跟隨崇拜，趨勢不能解決問題，用心研究探索解決方案才能解決你產品面臨的問題，甚至很多人都不明白自己產品所面臨的問題，更別提解決。確保自己有主見，能獨立思考，然后再去看待目前的趨勢及自身的職業生涯與當下的行業現狀。

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

其愿景是好的，在阿里內部實施的成果應該也不錯，但無數人趨之若鶩，跟隨這股潮流卻是錯的，更多的人只看到了它的好，就像股票，聽說能賺錢，就瘋狂投入。殊不知，阿里UXD是從P7開始培養的。于是一批本該集中精力鍛煉與沉淀自己核心競爭力的設計師，拖慢了自己的成長步伐，無形中反而削弱了個人競爭力。另一方面，這一觀點的提出又給各大培訓機構切入點，又是一波割韭菜。

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

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

這次我要講的是關于流行動效的問題，對就是我們每天在dribbble瀏覽的精致動效。這會是一篇純干貨，包括：

• 對當前動效趨勢的思考，存在什么問題？

• 我們應當如何正確認識當下的流行動效？

• 如何做出更實用優質的動效？

關于當下流行動效的問題

你是否會經常驚嘆那些復雜炫酷的UI動效，優雅的轉場，精致的交互細節，動感的節奏。很正常，我也會，以前我甚至會這樣瀏覽一個小時，下載下來仔細研究臨摹，當復原了這樣一個高復雜度的動效，我也會有成就感。甚至到后面，當我上傳自己產出的一些UI作品時，我會刻意使用一些dribbble上流行的動效樣式，并自得其樂。我相信很多人和我一樣，但我們做出來美觀的，酷炫的動效設計，它們真的是好設計嗎？還是單純的設計師自嗨型設計。

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

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

1.太過強調展示，而忽略了核心內容

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

作為UI/UX的我們總是在強調體驗，但我們并沒有真正將其融入所有的設計產出，在做出這樣一個重視覺呈現而忽略了體驗設計的本質的作品時，設計師對自我的職能是一個自我否定的狀態，只有同為設計師的我們沉迷其中，自嗨而不自知。這個設計是服務誰的？解決了一個什么關鍵問題？這才是我們應當思考，且呈現出來有利于同行進步的關鍵點。

2.為了展示而展示，違背基礎原則

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

3.發表作品的錯誤出發點

最后一點，但是最典型的一點，那就是設計師盲目沉迷于圈子內的消極心態，這一點真的相當典型且有害于行業和個人的發展。

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

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

問題大概就說這么多，我們應該意識到一些問題，對自己對行業有清晰的認知是未來能夠變得更好的前提，但我們也應該理智的應對現狀，即很多事情已經無法改變的現狀。設計師已經習慣了發表更加博眼球的作品來吸引關注，或者是為了創造更多私單和升職機會，這無可厚非。視覺上創造與升華明顯易于一套優秀的用戶體驗的構建，然而構建體驗解決問題卻是我們職業生涯中更關鍵部分，也是職能價值得以體現的部分。

因此，我的看法是，我們應當認清現狀，盡量去選擇正確的方向去提升成長，不要盲目被潮流趨勢帶偏。

正確認識當下的動效設計

UI動畫通常被認為能提升用戶體驗愉悅度，但事實上并沒有增加太大價值，設計師應當避免代入職能偏好而導致做出錯誤的判斷

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

1.動效的不同階段

動效大致可以按照實時交互和非實時交互劃分不同階段。

實時交互階段即正在執行的交互操作與動效同時進行，如按下按鈕時的狀態變化，此類動效是與操作同時完成的。

非實時交互階段則是用戶完成操作后緊跟著的轉場或狀態變化，如點擊新的tab后的跳轉轉場，是由右側進入或者底部劃出。再例如一些加載效果，都是非實時進行的，它們與操作并不同時完成。

2.動效的目的及意義

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

• 反應元素界面的層級關系

通過動效，用戶更易于理解界面的轉場，能更輕松的定位到當前正在進行的工作，此類動效給用戶傳達出任務層級，及界面中各相關元素的關系，減少困擾從而提升體驗。下面看一組案例：

• 提供交互反饋和狀態

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

• 引導用戶

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

• 個性化與情感化因素

個性化與情感化動效設計并不適用于所有場景，因為其動效復雜度和豐富度實際上與動效追求簡潔的基本原則相違背，但在某些特殊場景，卻往往能發揮奇效。例如加載頁面來緩解用戶疲勞感與等待焦慮(右圖)，強化品牌logo相關內容來達到占領用戶心智的目的(左圖)由此也可以看出，規則是嚴謹的但不是完美，理論存在盲區，可以適當打破。

當然，在做與情感化相關的動效設計時(UI體驗設計領域而不是品牌設計領域) ，設計師最先要考慮的還是設計的目的、出發點，即我為什么要做這個設計，從體驗角度還是從戰略角度？為了提升等待期間的體驗或者為了深化品牌影響力占領用戶心智，又或者單純為了酷炫？

3.動效應該遵循的通用原則

• 動效應當具有闡釋性

動效應當具有解釋交互的能力，如元素的空間層次關系，傳達操作的可用性和預期結果。

• 動效應當聚焦重點

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

• 動效簡潔程度與產品易用性成正相關

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

• 動效應該有細節從而使過度自然

我們追求簡短簡潔的動效是為了追求響應速度，提高用戶使用效率及避免干擾，但這并不意味著動效應當簡陋。恰當的使用緩動曲線，關注不同場景下的動效過度時間、空間變化、及透明度和大小比例等細節元素。

從設計和開發實現的角度，動效應當是復雜的，因為要綜合各種變化，考慮各種細節。從用戶使用和感知的角度，動效應該是簡單的，用戶不會發覺的動效才是過渡自然的動效。

• 動效的選取應當遵循一致性原則

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

4.設計師產出的動效設計包括應用型和展示型

根據當下設計師的動效產出，我將動效設計分為應用型和展示型。

• 展示型動效

我們平時在設計分享網站瀏覽的酷炫或精致乃至復雜的動效都屬于展示型動效，或者是將應用型動效延長了幾倍展示時間，或者刻意放慢動效速度以展示更多設計細節。該類動效設計的演示目標人群是設計師，是的，你覺得這些動效轉場細節能給其他行業普通用戶帶來什么審美意義？

其設計目的從好的方面講是演示設計細節，傳道受業或者展示個人設計能力以獲取一些工作或外包機會，經營個人設計品牌。從壞的角度講就是炫技，博眼球。也正因此，總是有人調侃敢不敢拿真正上線的作品出來看看。當然這種諷刺也過分偏激，總要有人仰望星空，只是要謹記設計目的出發點，如果是處于同行交流的目的來設計一些展示類動效，傳達一下設計技巧也是蠻不錯的。唯一怕的是給新人錯誤的引導，而失去體驗設計的本真，一度沉溺于花哨。

• 應用型動效

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

應用型動效是我們工作中的真實產出，和職能掛鉤，更應該遵循動效設計的簡潔易用的核心原則，進行相關設計時，應當查閱動效規范、多多參考成熟上線產品，以不低于商業產品的標準為底線。

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

應用型動效應該是不易被感知到的，當我們瀏覽到一些UI動效，能清晰的分辨出其過度的細節，變化的手段，那它是無法被應用于真實的線上產品中的。

• 動效過度時間有要求(查看谷歌文檔)

• 較長的動畫過度產生加載緩慢假象

• 能被感知的動效說明對用戶視覺構成了干擾

5.真實產品中UI動效是什么樣的？遵循哪些規則？

以qq近期的一次改版為例子：

避免復雜 ；避免亢長；對應上下文的簡單映射(如右入左出)

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

橫向切換即右入左出，是目前線上產品主流的動效設定，主要用來闡釋界面層級關系，屬過渡動畫。右入下一層級內容，左出回到上一層級。此動效適用所有移動端產品，作為跳轉過渡動畫使用。過渡期間可以加入透明度變化，以提高過渡流暢性。

• 縱向滑動與彈出，開啟一個分支任務

即由底部出現的彈出窗口，表明一個分支的任務操作。需要注意的是，新增分支任務這類操作也可以使用右入左出的規則，即點擊該操作按鈕后右入一個新頁面，此操作與開啟下一層級內容的規則相一致，因此可以通用。

而當你同時使用了這兩種規則時，要保證兩種動效形式與其承載語義的一致性。即右入左出僅用于界面跳轉的場景，縱向彈出僅用于開啟新任務的場景，而不應當混用而給用戶造成困擾。

另外值得一提的是，最近IOS已經將縱向彈出的全屏模態卡片列入設計規范，作為開啟新任務的一種形式，有平臺級規范作為參照，我們可以在產品設計中放心使用這一新形式尤其是在IOS端。

• 全屏縮放強調內容的來源

OK，Iphone用戶是不是很熟悉，沒錯正是IOS端開啟新應用的過度動畫，一個能被吹爆的動效設計，它非常恰當合理的傳達了內容來源，符合用戶的心理預期是一個經典易用的過渡動畫。且這一動效形式在IOS和MD中都有體現，MD中的Motion章節中有焦點規則這一部分，也是強調內容來源對視線的引導有非同尋常的意義，該意義就是讓界面反應的結果自然而然，符合用戶預計，用戶會感覺，沒錯，它本該如此。

打造優秀動效必不可少的細節

1.時間與速度的設定

• 動效轉換速度的設定應該恰當合理

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

• 動效的持續時間根據動效復雜度而變化

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

一般一個完整的過渡動效可以在300ms內完成，如果你使用principle來制作UI動效你會發現它默認的時間設定就是0.3s即300ms。而在一些過于花哨或為展示細節而設計的動效中你會發現轉場時間要遠遠長于300ms，這實際上并不合理。

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

關閉元素即傳出元素所用時間應當更少，其原因是它們比用戶的下一個任務要次要的多，因此并不需要轉移用戶過多注意力。

因此在我們為自家產品設計動效轉場時，針對關閉和返回性質的轉場，可以使用更短的過度時間，如200ms、250ms等等。

• 大面積元素的變化應當花費更多的時間來完成

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

• 合理利用easing曲線

說曲線是動效的靈魂都不為過，選擇恰當的曲線可以使動效過度更自然，有節奏從而產生美感。曲線主要分為緩入緩出和緩動三類，較常用的是緩動曲線，即中間快兩頭慢，更符合現實中的物理原則。

2.為過渡動效“編舞”

首先我們應該理解，動效概括下來就是位移、透明度、比例的變化，萬變不離其宗。而我們最主要研究的動效是過渡動效，它涵蓋了產品設計中最主要的動效應用場景，即我們在動效的目的和意義那一部分中提到的第一點，反應界面層級元素關系。我們希望過渡動效能實現這樣的效果：使用戶高效的完成界面跳轉過渡，同時輕松地理解跳轉關系，期間沒有卡頓體驗流暢。

而想要打造流暢的過渡動效，需要我們為需要變化的所有元素進行“編舞”，使其符合邏輯且不會出現視覺混亂。如下圖，是MD動效的編舞規則，它將我們動效過渡期間的不同元素分為三大類：傳出元素、傳入元素、持續性元素。

傳入元素指即將進入新的結果頁面的元素，傳出元素則是要消失為后面的元素騰出位置的元素，持續性元素則是始終存在的容器類元素，如bg。

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

下圖中的橙色線框是傳入和傳出元素，紫色線框是持續性元素:

另外一個比較細節的設計點是峰值的連接點作用。持續性元素的曲線的峰值應當在整個動效的30%節點處，即下圖中的紫色曲線的峰值，以此時間點(X軸)為分界，銜接傳入和傳出元素,完成整個過渡。?

如果聽不懂也沒關系，我們學會怎么使用就可以。我們需要確定整個過渡動效的總時長，然后乘以百分之30，以此為節點，銜接傳入元素和傳出元素。

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

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

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

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

再來看一下反面案例，為了追求所有元素的動畫效果而導致整體臃腫復雜，適得其反：

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

總結

以上是生活随笔為你收集整理的行业思考 | 酷炫动效是否利于你的产品设计？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。