產(chǎn)品宣傳頁往往會向用戶介紹產(chǎn)品的功能特點，傳達(dá)產(chǎn)品的理念，也是用戶初次對新產(chǎn)品或產(chǎn)品新功能新特性的感觀認(rèn)知，對此，視覺設(shè)計師在設(shè)計產(chǎn)品宣傳頁的時候，往往會特別注重頁面的精致度，而最終的設(shè)計稿出來后，往往只是一個靜態(tài)的頁面。從視覺設(shè)計的角度看，也許靜態(tài)頁視覺效果已經(jīng)很好，但始終缺少給人視覺沖擊的動感效果，相信不少設(shè)計師都希望給頁面多增加一些動畫元素，但又不希望太過依賴flash動畫。
其實可以針對高端瀏覽器，利用CSS3為頁面實現(xiàn)一些動畫效果，而對比較低端的瀏覽器，可以優(yōu)雅降級做成靜態(tài)頁面，為不一樣的用戶群帶來不一樣的體驗。要做好這種差異化體驗的頁面，需要各個線的人員積極配合，大家一起合力協(xié)作才能完成的
最近有幸接到迅雷7.9宣傳下載頁面的重構(gòu)，在產(chǎn)品、設(shè)計師和開發(fā)給力配合幫助下，針對高富帥Chrome、Firefox、Opera和正在努力變高富帥的IE10，完成了輪播圖的CSS3動畫效果，為高級用戶群帶來不一樣的高級體驗。
線上頁面：http://dl.xunlei.com/xl7.9/intro.html (請使用Chrome\Firefox\Opera\IE10)
以下是做這個頁面的一些心得
前期溝通，團(tuán)隊合作
有時候，重構(gòu)拿到設(shè)計稿后，會嘗試去做CSS3動畫，在征求產(chǎn)品同意后，再回到設(shè)計稿，可能會發(fā)現(xiàn)自己想要動畫元素設(shè)計師并沒有在設(shè)計稿上單獨(dú)分出來;做出來的最終效果產(chǎn)品又覺得不符合頁面主題風(fēng)格;想找設(shè)計師幫忙P圖，但設(shè)計師又排滿期抽不出時間等等問題，顯然，這是重構(gòu)和產(chǎn)品、設(shè)計師前期溝通不夠充分而產(chǎn)生的問題。因此，做好充分的前期溝通，是完成動畫效果的第一步，也是最重要的一步。
若決心要做CSS3動畫的高級體驗，絕不建議重構(gòu)在最終設(shè)計稿出來后才開始著手考慮，建議在設(shè)計師給出原型初稿甚至在設(shè)計開始前就和產(chǎn)品和設(shè)計提前溝通打好招呼，一起討論動畫的方案。
動畫討論的內(nèi)容大致要確認(rèn)：
1、動畫怎么動
2、動畫元素有哪些
3、不支持動畫的瀏覽器如何表現(xiàn)
大致分工如下：
產(chǎn)品(設(shè)計)：根據(jù)產(chǎn)品的特點，決定動畫的展現(xiàn)方式，大致的動畫過程;非高端瀏覽器頁面展現(xiàn)方式
重構(gòu)：根據(jù)產(chǎn)品(設(shè)計)提出的要求，評估動畫的可實現(xiàn)性，并和設(shè)計師確認(rèn)動畫元素有哪些
設(shè)計：提供重構(gòu)需要的動畫元素，在設(shè)計稿中做好分離
拿這次迅雷7.9宣傳頁其中一張輪播圖的動畫方案為例，原型稿如下圖：
簡要討論實錄如下：
產(chǎn)品：
做動畫并不能為了動畫而動畫，動畫更應(yīng)該根據(jù)產(chǎn)品的特點去考慮。
這個輪播圖要介紹的功能特點是“極速體驗，快如閃電”，“速度”是主要表達(dá)的元素。
可以考慮閃電從天而降劈下，閃電到一定位置后停止下降，由于閃電的“極速”而產(chǎn)生強(qiáng)勁威力，底部會出現(xiàn)光圈，小圖標(biāo)被炸開，同時描述文字從左向右飛出，然后趨向靜止，最后閃電停留一定時間，讓用戶的視覺焦點聚在功能點介紹，最后閃電，文字，小圖標(biāo)，光圈同時消失，用炸飛小圖標(biāo)的威力去襯托“速度”之快威力之大。
整個動畫過程持續(xù)時間為5秒，低端瀏覽器以靜態(tài)圖片顯示。
視覺：
閃電從天劈下來的時候，最好不要垂直下來，可以考慮從一定的傾斜角劈下，更顯力量;
小圖標(biāo)被炸開的過程通過縮放圖標(biāo)達(dá)到小圖標(biāo)被炸散的效果，
閃電、小圖標(biāo)、光圈、文字控制透明度顯得更平緩
其實還可以考慮讓背景的數(shù)字動起來，更具下載過程的動感
重構(gòu)：
動畫實現(xiàn)需要的動畫元素是：閃電、飛出文字、小圖標(biāo)、光圈、數(shù)字背景圖，遮擋蒙層，如下圖
考慮到動畫過程有縮放，會出現(xiàn)圖片精度問題，設(shè)計師提供小圖標(biāo)的時候，應(yīng)該提供放大到閃電停留時圖標(biāo)大小清晰圖，以免圖標(biāo)在放大拉伸過程過度失真變模糊;
數(shù)字背景圖要求可Y軸平鋪的圖片，動畫過程，要不斷不斷重復(fù)
到此，動畫的前期討論結(jié)束，可以進(jìn)入重構(gòu)階段
DEMO1是在我還沒和產(chǎn)品、設(shè)計進(jìn)行充分的前期溝通前利用周末時間做的動畫
DEMO1
DEMO2是周一回到公司進(jìn)一步和產(chǎn)品、設(shè)計討論的動畫
DEMO2
DEMO3是最終討論出來的動畫
DEMO3
從三個DEMO我們可以看到個人的力量永遠(yuǎn)是有限的，團(tuán)隊合作爆發(fā)出來的力量才是最強(qiáng)的
討論過程中我們嘗試過不同效果的對比，然后選取好的，當(dāng)中產(chǎn)品、設(shè)計師、重構(gòu)師各種意見的碰撞，設(shè)計師積極的配合給出優(yōu)化好的圖片，如果產(chǎn)品、設(shè)計或重構(gòu)都以各自想法為主，或單憑重構(gòu)編寫CSS3的能力去想像完成動畫，那么優(yōu)秀的頁面是永遠(yuǎn)不會誕生的
用心
做好本分，用心做出來的東西，別人總會看到的
我們看一下這次合作設(shè)計師志成的設(shè)計稿截圖：
重構(gòu)看到層次如此簡明的圖層目錄，怎能不動容，動畫元素都以單一圖層合并好，圖層文件夾命名都一目了然，拿到這樣的設(shè)計稿，心情能不好嗎?
再看一下大家在討論第二張輪播圖動畫的時候，8哥提出了很多想法
想讓蜂鳥發(fā)亮，想在蜂鳥旁邊出現(xiàn)閃閃發(fā)光的星星，想讓蜂鳥經(jīng)過中心的時候，下面的圓圈以水紋的動畫形式散開等等，但最終考慮到頁面成本，這些想法都沒用上，盡管如此，從這些想法可以看出8哥真的很用心想把這個頁做好!沒錯，閃電這張輪播圖數(shù)字背景的滑動效果就是8哥想出來的!有對自己有高要求、做事這么用心的設(shè)計師在把關(guān)，作為重構(gòu)沒有理由不賣力把頁面做好哇~~~
用戶好才是真的好
我在寫頁面的時候時刻會提醒自己，最終的頁面是面向用戶的，要將最好的頁面效果和體驗帶給用戶!
因此，重構(gòu)工程師在高精度還原設(shè)計稿的同時，更要去關(guān)心用戶體驗。
1、加載體驗
這次頁面用到了不少動畫元素，動畫元素?zé)o可避免會用到一些比較大的圖片，圖片加載時間和動畫啟動時間有很大機(jī)率出現(xiàn)沖突，非常有必要去處理一下首屏的加載體驗!
常用的方法就是有針對性去延遲加載比較大的動畫圖片。
首屏的動畫元素只有兩個，文字的圖片比較小，移動方塊圖片卻有57.2K
在外網(wǎng)環(huán)境測試可以看到，拉取這張圖片大概需要1.1-1.4秒之間
而動畫可接受的延遲啟動時間只有0.68s，
當(dāng)用戶首次打開頁面的時候有非常大的機(jī)會碰上這種情況：圖片剛加載到一半，動畫已經(jīng)開始了一段時間，如下圖
請教了一下國興兄，給了下面的解決方法：
至此，完成預(yù)加載效果;
2、視覺體驗
輪播圖自動切換的時間是5秒，并伴隨一個600ms漸隱漸退的過程，因此，動畫時間應(yīng)該等于5.6s，但整個動畫應(yīng)該在5.6s前完成，避免在5.6s瞬間出閃爍現(xiàn)象，視覺體驗不佳
DEMO
3、節(jié)省帶寬
這是數(shù)字滑動的原型設(shè)計圖，由于四周有投影，不規(guī)則，因此不能直接用來當(dāng)作Y軸平鋪圖處理，需要到了兩張圖：
可平鋪的背景圖：
蒙層投影：
兩背景圖的大小分別只有：480×235和192×94,大小分別是：24.9KB和15.9KB
如果用實際尺寸：960×470的話，兩張圖片的大小分別是：48.4Kb和78.9KB
在可接受的失真范圍內(nèi)，這里用了CSS3的transform:scale(2,2)和transform-origin:0 0，將它拉大了兩倍，同樣實現(xiàn)了效果，總共省了86.5KB的大小，約原來的2倍。
4、低端瀏覽器
對CSS3動畫不支持的瀏覽器IE6-IE9，由于動畫元素的背景圖都是PNG24透明圖，而且數(shù)量多，如果在IE6-IE9也加載同樣的PNG24圖，請求數(shù)多，瀏覽器負(fù)擔(dān)重，而且IE6對PNG24半透明支持不好，因此對IE6-IE9用單獨(dú)的樣式處理：
把動畫元素背景去掉，減少不必要的請求，然后單獨(dú)用三張大的baner背景圖顯示
這樣，在IE6-IE9，只會加載三張大的banner背景圖，而不會加載多余笨重的PNG24動畫元素，下圖是IE7瀏覽器圖片加載截圖：
優(yōu)化前banner背景圖有11張圖，平均大小46K，請求數(shù)11個;
優(yōu)化后banner背景圖只有三張，平均大小為50KB，請求數(shù)只有3個;
優(yōu)化后，背景圖的總K數(shù)少了3倍，請求數(shù)少了4倍，何樂而不為
產(chǎn)品宣傳頁雖然只是一個單頁，但如果只把設(shè)計稿高精度還原，只能說是把頁面做完，要把頁面做好還是得用心下一番功夫的。
在此要感謝志成同學(xué)的積極配合，還有8哥、王宸提出的寶貴意見，還有JS達(dá)人，國興同學(xué)。
