頁面動效能否拯救扁平設計？

 　　動效現在是扁平化身邊的大紅人，哪裡都有它的身影，動效能否為扁平化增光?設計師有什麼利器可以繪制動效?昨天發現一篇好文，關於這兩方面都有實在的干貨分享，建議同學們當機立斷，先轉後贊，特別要記得看。

　　作為一個網頁設計師，我們需要努力讓我們的技術與技巧與時俱進。我們不用追隨每一個時代潮流(比如長投影)，但是我們的確需要隨著網絡的發展與成熟，不斷學習並提高我們的技巧。

　　網頁設計產業最近開始火熱的新發展之一便是動效，越來越多的公司在他們的應用和網站中放入動效以取悅用戶，從競爭對手中脫穎而出以及提升產品的可用性。

　　動效需求如此之高的另一個原因在於網頁扁平化的潮流。扁平化設計整體來說是挺不錯的，而且使得人們尋求新的方式來改善它為數不多的問題。

　　扁平化設計的一些小問題

　　現如今，越來越多的公司接受最小化的“扁平設計”美學。網站之間開始缺乏品牌化差異，看起來都差不多了。這使得設計師開始尋求其它方式讓網站變得引人入勝，或令用戶感到興奮。

　　此時動效閃亮登場。動效如同鹽之於薯條;沒有它，它們有點冷漠、缺乏風味。讓你設計中的不同元素動起來，你就可以添加一點令人興奮的要素，也可以通過具有創意且有幫助性的動效來取悅用戶。

　　扁平化設計中的另外一個問題就是用戶與網站或應用交互的時候，有可能會失去他們所處位置的概念。當按鈕看起來不再像是個按鈕，其他東西也看起來逐漸趨同，用戶會開始搞不清楚在他們點擊那些元素之後，到底會發生什麼。

　　我們可以通過為不同狀態(如懸停或點擊)的按鈕設計不同的動畫效果，來解決這個問題，比如Colin Garven的提交按鈕：

　　最後，我想闡述的一個問題是如何告知用戶發生了變化。現在，很多現代網絡應用都會使用諸如AngularJs以及Node.js這樣強大的工具來建立“單頁面、實時更新”的應用。想想Gmail：不用刷新頁面就可以獲取新郵件，當有人給你發新郵件的時候，它自己就會彈出來了。

　　如果頁面發生了改變或加載了新內容，而用戶沒有獲得那些通知或者明確的提醒，這可就成問題了。如果頁面已經保存了，那麼我們就需要看到什麼，以告訴我們這個應用正在工作，它在後台保存了我們的工作。

　　動效就是當不同事件發生時，用來提醒用戶的絕佳方式。

　　比如說，你有一張登記了下一次聚會或者會議的名單。每當有新人登記，你就使用node.js實時將其添加到名單上，這樣他們就不用刷新頁面。很好，這對用戶來說很有幫助。然而人們要怎麼知道有新人登記了呢?

　　我們需要的只是一個小小的動效，讓人們看到有個人，登記了。從頁面頂端拋下來一個小小的通知信封如何?或者讓這個新人的名字淡入進名單，並把他的名字高亮以區別出他是新登記的?

　　所有這些都是微妙的效果，但是這確實就是說得過去的產品和那些真正令用戶喜悅的產品之間的區別。

　　網絡正在走向成熟

　　還記得IE6和網景(Netscape)嗎?還記得我們要擔心是否每個人都開啟了JavaScript，以及要用表格來為網頁布局的日子嗎?

　　我們已經走過了漫長的道路，我們有了強大的HTML 5支持、CSS 3還有響應式設計，它們的組合可以為動起來的網頁提供驚人的選擇。

　　CSS3動效

　　現在，所有的主流浏覽器都支持大部分乃至全部的W3C建議的標准CSS 3特性。作為設計師，這給了我們巨大的潛力去創建簡單而引人注目的動效，讓生活氣息進入靜態頁面。

　　Transitions

　　CSS過渡給你在兩種不同狀態之間創建簡單過渡的能力。比如說你有一個簡單的按鈕，你想要在鼠標懸停於其上的時候，改變顏色並讓它稍稍向下一點，此時使用css過渡就是絕佳選擇。

　　Keyframe動效

　　關鍵幀是CSS 3特性中的強大功能，可以讓你創建自定義動效序列。它允許你控制開始時間、過渡方式、持續時間、延遲、在持續時間中重復多少次、動效方向等等等等。你甚至可以在同一個頁面元素中使用多個動效。

　　SVG圖像

　　“成熟網絡”的超贊新功能之一就是SVG圖像。我們終於有能在不同尺寸和分辨率的屏幕上高質量自由縮放的圖像了。不僅如此，SVG比PNG圖像更為強大，因為你可以使用CSS和JS使之產生交互性。這使得我們可以創建令人印象深刻的動效，而以前我們只能用GIF或者Flash來完成這些事情。

　　看看 這個動畫gif，已經使用CSS和SVG重建了：

　　動效地址：http://codepen.io/bleepbloop/pen/Kkdzq

　　SVG動效真正有用的一點是創建可動的表格和圖表，並可以縮放到任意尺寸。看看這個使用JSFiddle的簡單例子：

　　觀看地址：http://jsfiddle.net/roemer/rgMYP/

　　SVG的可能性幾乎是無止境的!

　　HTML 5畫布(Canvas)

　　另外一項令人激動的技術，是所有浏覽器已經支持許久的HTML 5畫布。畫布元素用於繪制頁面上的圖形。

　　它和SVG相似，但是有幾點不同。首先，它是一個位圖而非矢量圖。這意味著它在執行復雜繪圖及動畫的時候表現更好，但是在高分辨率屏幕上的縮放性不太好。

　　畫布的另外一大缺點就是，它沒有可供操作的DOM元素。這意味著當你想要改變或者為其添加動效的時候，你需要重繪整個畫面。

　　盡管有著這樣或那樣的缺陷，畫布仍然是繪制復雜動效和畫面的一大利器。

　　Java script動效庫

　　盡管CSS 3動畫變得愈加強大，但仍有些許情況需要使用Java script動效。

　　時刻都有越來越的庫湧現出來，為我們帶來了驚艷的動效，而使用它們也只是我們以前在Java script動效上所付出資源的萬分之一。

　　Snap.svg

　　snap.svg是一個讓你操作SVG資源如同使用jQuery操作DOM一樣輕松的工具。它有一個超級豐富的動效庫，裡面有很多簡單的事件可以讓你的SVG文件動起來。

　　Greensock GSAP

　　gsap.js是一套專業工具，用於在所有主流浏覽器上工作的腳本化高性能HTML 5動畫。它的動畫效果是jQuery的20倍，某些情況下甚至比CSS3動效還要快。60fps我們來啦!

　　Transit

　　transit.js是一個jQuery庫，使用超平滑CSS過渡及變換效果取代了jQuery中的動畫模塊。其美妙之處在於它也使用jQuery的 $(‘…’).animate語法。

　　Velocity

　　velocity.js類似於Transit，也是使用於jQuery相同的語法，你需要做的就是引入這個庫，然後把jQuery的動畫用.velocity()替換。

　　ScrollReveal

　　scrollReveal是一款開源js庫，當頁面元素進入視口時，它可以幫助你創建並維護這個元素。

　　Bounce.js

　　bounce.js是一個新的工具，用於產生令人興奮的CSS 3關鍵幀動畫。

　　移動設備的硬件改進

　　動畫真正騰飛的最主要原因，其實是現如今的設備越來越強大了。

　　比如說iPhone 5s，擁有一顆超級動力A7芯片。

　　Extreme Tech說：“CPU不僅是它Swift前身的漸進演化，它是一個完全不同的巨獸，更類似於Intel或AMD CPU的“大核心”而非“小核心”CPU。”

　　此外，隨著iOS8的發布，蘋果會發布Metal，它是一個非常強大的3D渲染引擎，可以讓你在移動設備上創建桌面般的游戲。

　　一些安卓手機公司已經在設備裡內置盡可能多的內存，像LG G3內置了高達3GB的內存。我有一台幾年前的筆記本電腦，也差不多只有那麼多內存。

　　所有這一切說明，我們不僅可以在桌面計算機上運行流暢動畫，在手機、平板以及其他移動設備上也可以同樣流暢。

　　動畫對用戶有所幫助

　　動畫可以真正使你的產品、應用或者網站更加便於使用，並易於為用戶所接受。這是因為：

　　它能給出事情發生的環境;

　　它讓人們參與;

　　它讓你的公司脫穎而出;

　　人們喜歡它們。

　　Kickstarter認為，一個好的活動視頻有可能導致你的活動非常成功，也有可能默默無聞。最好的活動使用精心設計的故事以帶來令人激動的感覺，並為自己的產品或活動造勢。動畫在網站或應用上所做的事是一樣的。它可以讓人們熱烈討論你的應用，而讓其他應用沉睡在應用墓園中。