資源描述：
《頁面動效能否拯救扁平設(shè)計？(附工具推薦)》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、頁面動效能否拯救扁平設(shè)計？（附工具推薦）作為一個網(wǎng)頁設(shè)計師，我們需要努力讓我們的技術(shù)與技巧與時俱進。我們不用追隨每一個時代潮流（比如長投影），但是我們的確需要隨著網(wǎng)絡(luò)的發(fā)展與成熟，不斷學(xué)習(xí)并提高我們的技巧。網(wǎng)頁設(shè)計產(chǎn)業(yè)最近開始火熱的新發(fā)展之一便是動效，越來越多的公司在他們的應(yīng)用和網(wǎng)站中放入動效以取悅用戶，從競爭對手中脫穎而出以及提升產(chǎn)品的可用性。動效需求如此之高的另一個原因在于網(wǎng)頁扁平化的潮流。扁平化設(shè)計整體來說是挺不錯的，而且使得人們尋求新的方式來改善它為數(shù)不多的問題。扁平化設(shè)計的一些小問題現(xiàn)如今，越來越多的公司接受最小化的“扁平設(shè)計”美學(xué)。網(wǎng)站之間開始缺乏品牌化差異，看
2、起來都差不多了。這使得設(shè)計師開始尋求其它方式讓網(wǎng)站變得引人入勝，或令用戶感到興奮。此時動效閃亮登場。動效如同鹽之于薯條；沒有它，它們有點冷漠、缺乏風(fēng)味。讓你設(shè)計中的不同元素動起來，你就可以添加一點令人興奮的要素，也可以通過具有創(chuàng)意且有幫助性的動效來取悅用戶。扁平化設(shè)計中的另外一個問題就是用戶與網(wǎng)站或應(yīng)用交互的時候，有可能會失去他們所處位置的概念。當(dāng)按鈕看起來不再像是個按鈕，其他東西也看起來逐漸趨同，用戶會開始搞不清楚在他們點擊那些元素之后，到底會發(fā)生什么。我們可以通過為不同狀態(tài)（如懸?；螯c擊）的按鈕設(shè)計不同的動畫效果，來解決這個問題，比如ColinGarven的提交按鈕：最
3、后，我想闡述的一個問題是如何告知用戶發(fā)生了變化?，F(xiàn)在，很多現(xiàn)代網(wǎng)絡(luò)應(yīng)用都會使用諸如AngularJs以及Node.js這樣強大的工具來建立“單頁面、實時更新”的應(yīng)用。想想Gmail：不用刷新頁面就可以獲取新郵件，當(dāng)有人給你發(fā)新郵件的時候，它自己就會彈出來了。如果頁面發(fā)生了改變或加載了新內(nèi)容，而用戶沒有獲得那些通知或者明確的提醒，這可就成問題了。如果頁面已經(jīng)保存了，那么我們就需要看到什么，以告訴我們這個應(yīng)用正在工作，它在后臺保存了我們的工作。動效就是當(dāng)不同事件發(fā)生時，用來提醒用戶的絕佳方式。比如說，你有一張登記了下一次聚會或者會議的名單。每當(dāng)有新人登記，你就使用node.js
4、實時將其添加到名單上，這樣他們就不用刷新頁面。很好，這對用戶來說很有幫助。然而人們要怎么知道有新人登記了呢？我們需要的只是一個小小的動效，讓人們看到有個人，登記了。從頁面頂端拋下來一個小小的通知信封如何？或者讓這個新人的名字淡入進名單，并把他的名字高亮以區(qū)別出他是新登記的？所有這些都是微妙的效果，但是這確實就是說得過去的產(chǎn)品和那些真正令用戶喜悅的產(chǎn)品之間的區(qū)別。網(wǎng)絡(luò)正在走向成熟還記得IE6和網(wǎng)景（Netscape）嗎？還記得我們要擔(dān)心是否每個人都開啟了JavaScript，以及要用表格來為網(wǎng)頁布局的日子嗎？我們已經(jīng)走過了漫長的道路，我們有了強大的HTML5支持、CSS3還有
5、響應(yīng)式設(shè)計，它們的組合可以為動起來的網(wǎng)頁提供驚人的選擇。CSS3動效現(xiàn)在，所有的主流瀏覽器都支持大部分乃至全部的W3C建議的標準CSS3特性。作為設(shè)計師，這給了我們巨大的潛力去創(chuàng)建簡單而引人注目的動效，讓生活氣息進入靜態(tài)頁面。TransitionsCSS過渡給你在兩種不同狀態(tài)之間創(chuàng)建簡單過渡的能力。比如說你有一個簡單的按鈕，你想要在鼠標懸停于其上的時候，改變顏色并讓它稍稍向下一點，此時使用css過渡就是絕佳選擇。Keyframe動效關(guān)鍵幀是CSS3特性中的強大功能，可以讓你創(chuàng)建自定義動效序列。它允許你控制開始時間、過渡方式、持續(xù)時間、延遲、在持續(xù)時間中重復(fù)多少次、動效方向等
6、等等等。你甚至可以在同一個頁面元素中使用多個動效。SVG圖像“成熟網(wǎng)絡(luò)”的超贊新功能之一就是SVG圖像。我們終于有能在不同尺寸和分辨率的屏幕上高質(zhì)量自由縮放的圖像了。不僅如此，SVG比PNG圖像更為強大，因為你可以使用CSS和JS使之產(chǎn)生交互性。這使得我們可以創(chuàng)建令人印象深刻的動效，而以前我們只能用GIF或者Flash來完成這些事情?？纯催@個動畫gif，已經(jīng)使用CSS和SVG重建了：動效地址：http://codepen.io/bleepbloop/pen/KkdzqSVG動效真正有用的一點是創(chuàng)建可動的表格和圖表，并可以縮放到任意尺寸?？纯催@個使用JSFiddle的簡單例子
7、：觀看地址：http://jsfiddle.net/roemer/rgMYP/SVG的可能性幾乎是無止境的！HTML5畫布（Canvas）另外一項令人激動的技術(shù)，是所有瀏覽器已經(jīng)支持許久的HTML5畫布。畫布元素用于繪制頁面上的圖形。它和SVG相似，但是有幾點不同。首先，它是一個位圖而非矢量圖。這意味著它在執(zhí)行復(fù)雜繪圖及動畫的時候表現(xiàn)更好，但是在高分辨率屏幕上的縮放性不太好。畫布的另外一大缺點就是，它沒有可供操作的DOM元素。這意味著當(dāng)你想要改變或者為其添加動效的時候，你需要重繪整個畫面。盡管有著這樣或那樣的缺陷，
