UI設計中提高網頁設計感的幾個小動效
儘管我們在實際運用的過程中，經常需要測試和試驗效果，但是依然有一些經過驗證的、可行性較高的動效，可以直接拿來使用。今天我們所探討的四種動效，都貼合趨勢，且頗為實用。接下來，我們一起探索吧！
彈性動效
有趣而優雅的彈性動效每天都能看到。通常，彈性動效是短暫而優雅的，它常常能夠吸引用戶的注意力。成功的動效通常不僅依賴於設計師的設計，還需要代碼實現，以及貼合物理規律的微積分函數作為支撐。在很多時候，這種看起來涉及物理學的動效，很難創新。不過事實上，關鍵還是要看你如何實現，以及在哪裡實現這些動效。如果你對於
Velocity.js 和 WebGL 這些工具一無所知，也能用CSS實現它。最受歡迎的彈跳動效包括：- 類似彈簧一樣，快速拉伸變大，然後迅速壓縮成所需的形狀，在打開某個組件的時候強化視覺，通常，這個過程都很短暫。
- 平滑的充滿流體動感的動效，伸展，浮動，然後收縮為初始狀態。一般而言，它會持續地彈跳，營造氛圍。
在具體的實施的過程中，設計師通常會合理地選擇兩種動效作為支撐。比如 LatinoMedios 和 Oprette 都使用彈性動效來增強控制項的打開體驗。前者採用了圓潤流暢的彈性動效，而後者則採用了彈簧式的動效，更加搶眼。
LatinMedios
Oprette
Taika Strom 這個網站中則採用了更加先進的技術，背景使用 WebGL 來驅動彈性動效，讓用戶在瀏覽的時候全程都能感受到動效，豐富了整體的體驗。
變化的LOGO
花上幾秒鐘看著LOGO逐漸變化，似乎是一件頗為浪費時間和資源的事情，但是在很多時候，它是非常有效的設計。作為品牌標識的一部分，LOGO
承載著品牌信息（特徵、風格、元素、色彩等），也關乎審美。雖然LOGO在網頁中佔據的位置並不大，但是它非常吸引眼球，在用戶心目中也會被視作為重要的組件，並不會被那麼輕易被忽略。在LOGO上施加動效有幾種不同的趨勢。
1、讓LOGO變得有趣
看看 HTMLBuger 這個網站的LOGO，它在動畫的加持下不僅僅頗為有趣，而且達成了兩個目標：
- 作為吉祥物，用來支撐品牌形象，展示品牌氣質和特徵
- 作為一種有意思的動態效果，它為項目增加額外的樂趣，營造歡脫的氛圍
HTML Burger
2、讓LOGO顯得嚴肅和保守
和前一個網站不同的地方在於， Muriel Guillaumon 同樣運用了動效，但是它們是為了營造網站嚴肅的氛圍。這裡的動畫並不複雜，只是顏色和大小有微小的變化，但是它很好地匹配了網站的整體主題和審美趨勢。
Muriel Guillaumon
3、讓LOGO顯得極簡而優雅
Funktional 這個網站就很好地利用了簡約的設計。當你在著陸頁打開網頁的時候，LOGO和文本內容結合起來，顯得完整而正式，隨著瀏覽的深入，進入子界面之後，文本會隱去，僅有品牌LOGO優雅地展示出來。
Funktional
有意義的載入動效
是時候和無聊的等待載入的沙漏說再見了。優秀的載入動效已經越來越智慧和複雜了。
講真，現如今的載入動畫已經是聚光燈下的重要設計元素了。從最初簡單的設計，到如今載入動效成為了承載著重要作用的小動畫，它不僅告知用戶這個等待過程進度，而且通過愉悅用戶，增強了整個用戶體驗。它的功能並不單一：
- 作為品牌形象的支撐
- 提供額外的信息
- 說明當前情況
- 提醒用戶注意
- 創造愉悅感
- 給用戶留下好印象
- 強化第一印象
- 創造用戶預期
這個列表並不完整，因為它的功能還能更多。
現在實際的情況是，可以用來製作載入動效的方法和工具有很多。你可以選用CSS來實現，也能用 JavaScript 和 Three.js 等相對更重的工具。
看看 Open Continents 和 Do you speak human 兩個網站載入動效的設計吧。雖然具體的設計不盡相同，但是他們都有一個共同點，就是它們會照顧訪客的情緒和心理。
Open Continents 這個網站的載入動效讓人覺得興奮，設計師通過 WebGL 技術創造出貼合用戶預期的感覺，用戶能夠用游標同載入動效進行交互。
Open Continents
置於第二個網站，它的載入動效更加簡單有趣，一個會舞蹈的機器人，是不是很有意思？
Do you speak human
一般而言，創意團隊為網站搭建了有趣的細節和功能，並且希望用戶能夠等待載入之後能享受到這些設計。而載入動效就是招徠訪客的重要環節，它們讓用戶留下來，通過和網站本身統一一致的設計，給予用戶預期，讓他們期待後面會展現的內容。
動畫化的漢堡圖標
儘管這個由三條橫杠組成的小圖標在很久之前就已經失去其魅力了，但是它如今依然無處不在。所以，不少設計師還是盡量想為這個圖標註入更多的的魅力。你無需重新造輪子，不用進行複雜的重設計，你只需要為漢堡圖標添加一個有趣的動效就能產生為它注入生命力。讓它與周遭的設計融合起來，對於用戶更加友好即可。
看看 Aristophane 和 Brussels Airport In Numbers 這兩個網站是怎麼做的。
前者採用了微妙的懸停動效，當游標懸停在上方的時候會觸發，點擊之後，動畫驅動漢堡圖標變化成為一個關閉按鈕。第二個網站情況不一樣，設計師專註於結合背景圖片來構造不同色彩主題的設計方案，而漢堡圖標的背景小方塊則成了這些主題的視覺線索。
Aristophane
Brussels Airport in Numbers
結語
並不是每個人都會注意到動效，但是動效的加入讓體驗更加優秀了卻是不爭的事實。這也是為什麼它會成為時下流行的趨勢。通過審視熟慮的設計和實現，界面在動效的驅動下卻是會更上一層樓。許多東西看起來是不言自明的，但是在動畫效果的加持下，邏輯和關係會更加順暢，重要的還是易於理解和更優質的體驗。
—— AAA教育澤雨老師；QQ74706608
AAA教育-UI設計培訓/平面設計培訓/大數據分析培訓/產品經理培訓-互聯網金領生產基地
推薦閱讀：