并不是每個人都會注意到動效，但是動效的加入讓體驗更加優(yōu)秀了卻是不爭的事實。這也是為什么它會成為時下流行的趨勢。

隨著交互設(shè)計重要性的提升，動效也越來越被設(shè)計師所重視。它不僅僅是取悅用戶的工具，而且被視作為改善用戶體驗的重要手段。從為界面營造氛圍的微小動效，到用來溝通用戶的視覺線索，動效解決方案越來越全面。

盡管我們在實際運用的過程中，經(jīng)常需要測試和試驗效果，但是依然有一些經(jīng)過驗證的、可行性較高的動效，可以直接拿來使用。今天我們所探討的四種動效，都貼合趨勢，且頗為實用。接下來，我們一起探索吧！

一、彈性動效

有趣而優(yōu)雅的彈性動效每天都能看到。通常，彈性動效是短暫而優(yōu)雅的，它常常能夠吸引用戶的注意力。成功的動效通常不僅依賴于設(shè)計師的設(shè)計，還需要代碼實現(xiàn)，以及貼合物理規(guī)律的微積分函數(shù)作為支撐。在很多時候，這種看起來涉及物理學(xué)的動效，很難創(chuàng)新。不過事實上，關(guān)鍵還是要看你如何實現(xiàn)，以及在哪里實現(xiàn)這些動效。如果你對于 Velocity.js 和 WebGL 這些工具一無所知，也能用CSS實現(xiàn)它。最受歡迎的彈跳動效包括：

• 類似彈簧一樣，快速拉伸變大，然后迅速壓縮成所需的形狀，在打開某個組件的時候強化視覺，通常，這個過程都很短暫。
• 平滑的充滿流體動感的動效，伸展，浮動，然后收縮為初始狀態(tài)。一般而言，它會持續(xù)地彈跳，營造氛圍。

在具體的實施的過程中，設(shè)計師通常會合理地選擇兩種動效作為支撐。比如 LatinoMedios 和 Oprette 都使用彈性動效來增強控件的打開體驗。前者采用了圓潤流暢的彈性動效，而后者則采用了彈簧式的動效，更加搶眼。

LatinMedios

Oprette

Taika Strom 這個網(wǎng)站中則采用了更加先進的技術(shù)，背景使用 WebGL 來驅(qū)動彈性動效，讓用戶在瀏覽的時候全程都能感受到動效，豐富了整體的體驗。

Taika Strom

二、變化的LOGO

花上幾秒鐘看著LOGO逐漸變化，似乎是一件頗為浪費時間和資源的事情，但是在很多時候，它是非常有效的設(shè)計。作為品牌標(biāo)識的一部分，LOGO 承載著品牌信息（特征、風(fēng)格、元素、色彩等），也關(guān)乎審美。雖然LOGO在網(wǎng)頁中占據(jù)的位置并不大，但是它非常吸引眼球，在用戶心目中也會被視作為重要的組件，并不會被那么輕易被忽略。

在LOGO上施加動效有幾種不同的趨勢。

1、讓LOGO變得有趣

看看 HTMLBuger 這個網(wǎng)站的LOGO，它在動畫的加持下不僅僅頗為有趣，而且達(dá)成了兩個目標(biāo)：

• 作為吉祥物，用來支撐品牌形象，展示品牌氣質(zhì)和特征
• 作為一種有意思的動態(tài)效果，它為項目增加額外的樂趣，營造歡脫的氛圍

HTML Burger

2、讓LOGO顯得嚴(yán)肅和保守

和前一個網(wǎng)站不同的地方在于， Muriel Guillaumon 同樣運用了動效，但是它們是為了營造網(wǎng)站嚴(yán)肅的氛圍。這里的動畫并不復(fù)雜，只是顏色和大小有微小的變化，但是它很好地匹配了網(wǎng)站的整體主題和審美趨勢。

Muriel Guillaumon

3、讓LOGO顯得極簡而優(yōu)雅

Funktional 這個網(wǎng)站就很好地利用了簡約的設(shè)計。當(dāng)你在著陸頁打開網(wǎng)頁的時候，LOGO和文本內(nèi)容結(jié)合起來，顯得完整而正式，隨著瀏覽的深入，進入子界面之后，文本會隱去，僅有品牌LOGO優(yōu)雅地展示出來。

Funktional

三、有意義的加載動效

是時候和無聊的等待加載的沙漏說再見了。優(yōu)秀的加載動效已經(jīng)越來越智慧和復(fù)雜了。

講真，現(xiàn)如今的加載動畫已經(jīng)是聚光燈下的重要設(shè)計元素了。從最初簡單的設(shè)計，到如今加載動效成為了承載著重要作用的小動畫，它不僅告知用戶這個等待過程進度，而且通過愉悅用戶，增強了整個用戶體驗。它的功能并不單一：

• 作為品牌形象的支撐
• 提供額外的信息
• 說明當(dāng)前情況
• 提醒用戶注意
• 創(chuàng)造愉悅感
• 給用戶留下好印象
• 強化第一印象
• 創(chuàng)造用戶預(yù)期

這個列表并不完整，因為它的功能還能更多。

現(xiàn)在實際的情況是，可以用來制作加載動效的方法和工具有很多。你可以選用CSS來實現(xiàn)，也能用 JavaScript 和 Three.js 等相對更重的工具。

看看 Open Continents 和 Do you speak human 兩個網(wǎng)站加載動效的設(shè)計吧。雖然具體的設(shè)計不盡相同，但是他們都有一個共同點，就是它們會照顧訪客的情緒和心理。

Open Continents 這個網(wǎng)站的加載動效讓人覺得興奮，設(shè)計師通過 WebGL 技術(shù)創(chuàng)造出貼合用戶預(yù)期的感覺，用戶能夠用光標(biāo)同加載動效進行交互。

Open Continents

置于第二個網(wǎng)站，它的加載動效更加簡單有趣，一個會舞蹈的機器人，是不是很有意思？

Do you speak human

一般而言，創(chuàng)意團隊為網(wǎng)站搭建了有趣的細(xì)節(jié)和功能，并且希望用戶能夠等待加載之后能享受到這些設(shè)計。而加載動效就是招徠訪客的重要環(huán)節(jié)，它們讓用戶留下來，通過和網(wǎng)站本身統(tǒng)一一致的設(shè)計，給予用戶預(yù)期，讓他們期待后面會展現(xiàn)的內(nèi)容。

四、動畫化的漢堡圖標(biāo)

盡管這個由三條橫杠組成的小圖標(biāo)在很久之前就已經(jīng)失去其魅力了，但是它如今依然無處不在。所以，不少設(shè)計師還是盡量想為這個圖標(biāo)注入更多的的魅力。你無需重新造輪子，不用進行復(fù)雜的重設(shè)計，你只需要為漢堡圖標(biāo)添加一個有趣的動效就能產(chǎn)生為它注入生命力。讓它與周遭的設(shè)計融合起來，對于用戶更加友好即可。

看看 Aristophane 和 Brussels Airport In Numbers 這兩個網(wǎng)站是怎么做的。

前者采用了微妙的懸停動效，當(dāng)光標(biāo)懸停在上方的時候會觸發(fā)，點擊之后，動畫驅(qū)動漢堡圖標(biāo)變化成為一個關(guān)閉按鈕。第二個網(wǎng)站情況不一樣，設(shè)計師專注于結(jié)合背景圖片來構(gòu)造不同色彩主題的設(shè)計方案，而漢堡圖標(biāo)的背景小方塊則成了這些主題的視覺線索。

Aristophane

Brussels Airport in Numbers

結(jié)語

并不是每個人都會注意到動效，但是動效的加入讓體驗更加優(yōu)秀了卻是不爭的事實。這也是為什么它會成為時下流行的趨勢。通過審視熟慮的設(shè)計和實現(xiàn)，界面在動效的驅(qū)動下卻是會更上一層樓。許多東西看起來是不言自明的，但是在動畫效果的加持下，邏輯和關(guān)系會更加順暢，重要的還是易于理解和更優(yōu)質(zhì)的體驗。

原文作者：?Nataly Birch

原文地址：https://designmodo.com/tiny-trends-animations/

譯者：陳子木

譯文地址：優(yōu)設(shè)網(wǎng)

本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議