產(chǎn)品宣傳頁(yè)往往會(huì)向用戶介紹產(chǎn)品的功能特點(diǎn)，傳達(dá)產(chǎn)品的理念，也是用戶初次對(duì)新產(chǎn)品或產(chǎn)品新功能新特性的感觀認(rèn)知，對(duì)此，視覺設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品宣傳頁(yè)的時(shí)候，往往會(huì)特別注重頁(yè)面的精致度，而最終的設(shè)計(jì)稿出來(lái)后，往往只是一個(gè)靜態(tài)的頁(yè)面。從視覺設(shè)計(jì)的角度看，也許靜態(tài)頁(yè)視覺效果已經(jīng)很好，但始終缺少給人視覺沖擊的動(dòng)感效果，相信不少設(shè)計(jì)師都希望給頁(yè)面多增加一些動(dòng)畫元素，但又不希望太過(guò)依賴flash動(dòng)畫。

其實(shí)可以針對(duì)高端瀏覽器，利用CSS3為頁(yè)面實(shí)現(xiàn)一些動(dòng)畫效果，而對(duì)比較低端的瀏覽器，可以優(yōu)雅降級(jí)做成靜態(tài)頁(yè)面，為不一樣的用戶群帶來(lái)不一樣的體驗(yàn)。要做好這種差異化體驗(yàn)的頁(yè)面，需要各個(gè)線的人員積極配合，大家一起合力協(xié)作才能完成的

最近有幸接到迅雷7.9宣傳下載頁(yè)面的重構(gòu)，在產(chǎn)品、設(shè)計(jì)師和開發(fā)給力配合幫助下，針對(duì)高富帥Chrome、Firefox、Opera和正在努力變高富帥的IE10，完成了輪播圖的CSS3動(dòng)畫效果，為高級(jí)用戶群帶來(lái)不一樣的高級(jí)體驗(yàn)。

線上頁(yè)面：http://dl.xunlei.com/xl7.9/intro.html ?（請(qǐng)使用Chrome\Firefox\Opera\IE10?）

以下是做這個(gè)頁(yè)面的一些心得

前期溝通，團(tuán)隊(duì)合作

有時(shí)候，重構(gòu)拿到設(shè)計(jì)稿后，會(huì)嘗試去做CSS3動(dòng)畫，在征求產(chǎn)品同意后，再回到設(shè)計(jì)稿，可能會(huì)發(fā)現(xiàn)自己想要?jiǎng)赢嬙卦O(shè)計(jì)師并沒有在設(shè)計(jì)稿上單獨(dú)分出來(lái)；做出來(lái)的最終效果產(chǎn)品又覺得不符合頁(yè)面主題風(fēng)格；想找設(shè)計(jì)師幫忙P圖，但設(shè)計(jì)師又排滿期抽不出時(shí)間等等問(wèn)題，顯然，這是重構(gòu)和產(chǎn)品、設(shè)計(jì)師前期溝通不夠充分而產(chǎn)生的問(wèn)題。因此，做好充分的前期溝通，是完成動(dòng)畫效果的第一步，也是最重要的一步。

若決心要做CSS3動(dòng)畫的高級(jí)體驗(yàn)，絕不建議重構(gòu)在最終設(shè)計(jì)稿出來(lái)后才開始著手考慮，建議在設(shè)計(jì)師給出原型初稿甚至在設(shè)計(jì)開始前就和產(chǎn)品和設(shè)計(jì)提前溝通打好招呼，一起討論動(dòng)畫的方案。

動(dòng)畫討論的內(nèi)容大致要確認(rèn)：

1、動(dòng)畫怎么動(dòng)

2、動(dòng)畫元素有哪些

3、不支持動(dòng)畫的瀏覽器如何表現(xiàn)

大致分工如下：

產(chǎn)品（設(shè)計(jì)）：根據(jù)產(chǎn)品的特點(diǎn)，決定動(dòng)畫的展現(xiàn)方式，大致的動(dòng)畫過(guò)程；非高端瀏覽器頁(yè)面展現(xiàn)方式

重構(gòu)：根據(jù)產(chǎn)品（設(shè)計(jì)）提出的要求，評(píng)估動(dòng)畫的可實(shí)現(xiàn)性，并和設(shè)計(jì)師確認(rèn)動(dòng)畫元素有哪些

設(shè)計(jì)：提供重構(gòu)需要的動(dòng)畫元素，在設(shè)計(jì)稿中做好分離

拿這次迅雷7.9宣傳頁(yè)其中一張輪播圖的動(dòng)畫方案為例，原型稿如下圖：

簡(jiǎn)要討論實(shí)錄如下：

產(chǎn)品：

做動(dòng)畫并不能為了動(dòng)畫而動(dòng)畫，動(dòng)畫更應(yīng)該根據(jù)產(chǎn)品的特點(diǎn)去考慮。

這個(gè)輪播圖要介紹的功能特點(diǎn)是“極速體驗(yàn)，快如閃電”，“速度”是主要表達(dá)的元素。

可以考慮閃電從天而降劈下，閃電到一定位置后停止下降，由于閃電的“極速”而產(chǎn)生強(qiáng)勁威力，底部會(huì)出現(xiàn)光圈，小圖標(biāo)被炸開，同時(shí)描述文字從左向右飛出，然后趨向靜止，最后閃電停留一定時(shí)間，讓用戶的視覺焦點(diǎn)聚在功能點(diǎn)介紹，最后閃電，文字，小圖標(biāo)，光圈同時(shí)消失，用炸飛小圖標(biāo)的威力去襯托“速度”之快威力之大。

整個(gè)動(dòng)畫過(guò)程持續(xù)時(shí)間為5秒，低端瀏覽器以靜態(tài)圖片顯示。

視覺：

閃電從天劈下來(lái)的時(shí)候，最好不要垂直下來(lái)，可以考慮從一定的傾斜角劈下，更顯力量；

小圖標(biāo)被炸開的過(guò)程通過(guò)縮放圖標(biāo)達(dá)到小圖標(biāo)被炸散的效果，

閃電、小圖標(biāo)、光圈、文字控制透明度顯得更平緩

其實(shí)還可以考慮讓背景的數(shù)字動(dòng)起來(lái)，更具下載過(guò)程的動(dòng)感

重構(gòu)：

動(dòng)畫實(shí)現(xiàn)需要的動(dòng)畫元素是：閃電、飛出文字、小圖標(biāo)、光圈、數(shù)字背景圖，遮擋蒙層，如下圖

考慮到動(dòng)畫過(guò)程有縮放，會(huì)出現(xiàn)圖片精度問(wèn)題，設(shè)計(jì)師提供小圖標(biāo)的時(shí)候，應(yīng)該提供放大到閃電停留時(shí)圖標(biāo)大小清晰圖，以免圖標(biāo)在放大拉伸過(guò)程過(guò)度失真變模糊；

數(shù)字背景圖要求可Y軸平鋪的圖片，動(dòng)畫過(guò)程，要不斷不斷重復(fù)

到此，動(dòng)畫的前期討論結(jié)束，可以進(jìn)入重構(gòu)階段

DEMO1是在我還沒和產(chǎn)品、設(shè)計(jì)進(jìn)行充分的前期溝通前利用周末時(shí)間做的動(dòng)畫

DEMO1

DEMO2是周一回到公司進(jìn)一步和產(chǎn)品、設(shè)計(jì)討論的動(dòng)畫

DEMO2

DEMO3是最終討論出來(lái)的動(dòng)畫

DEMO3

從三個(gè)DEMO我們可以看到個(gè)人的力量永遠(yuǎn)是有限的，團(tuán)隊(duì)合作爆發(fā)出來(lái)的力量才是最強(qiáng)的

討論過(guò)程中我們嘗試過(guò)不同效果的對(duì)比，然后選取好的，當(dāng)中產(chǎn)品、設(shè)計(jì)師、重構(gòu)師各種意見的碰撞，設(shè)計(jì)師積極的配合給出優(yōu)化好的圖片，如果產(chǎn)品、設(shè)計(jì)或重構(gòu)都以各自想法為主，或單憑重構(gòu)編寫CSS3的能力去想像完成動(dòng)畫，那么優(yōu)秀的頁(yè)面是永遠(yuǎn)不會(huì)誕生的

用心

做好本分，用心做出來(lái)的東西，別人總會(huì)看到的

我們看一下這次合作設(shè)計(jì)師志成的設(shè)計(jì)稿截圖：

重構(gòu)看到層次如此簡(jiǎn)明的圖層目錄，怎能不動(dòng)容，動(dòng)畫元素都以單一圖層合并好，圖層文件夾命名都一目了然，拿到這樣的設(shè)計(jì)稿，心情能不好嗎？

再看一下大家在討論第二張輪播圖動(dòng)畫的時(shí)候，8哥提出了很多想法

想讓蜂鳥發(fā)亮，想在蜂鳥旁邊出現(xiàn)閃閃發(fā)光的星星，想讓蜂鳥經(jīng)過(guò)中心的時(shí)候，下面的圓圈以水紋的動(dòng)畫形式散開等等，但最終考慮到頁(yè)面成本，這些想法都沒用上，盡管如此，從這些想法可以看出8哥真的很用心想把這個(gè)頁(yè)做好！沒錯(cuò)，閃電這張輪播圖數(shù)字背景的滑動(dòng)效果就是8哥想出來(lái)的！有對(duì)自己有高要求、做事這么用心的設(shè)計(jì)師在把關(guān)，作為重構(gòu)沒有理由不賣力把頁(yè)面做好哇~~~

用戶好才是真的好

我在寫頁(yè)面的時(shí)候時(shí)刻會(huì)提醒自己，最終的頁(yè)面是面向用戶的，要將最好的頁(yè)面效果和體驗(yàn)帶給用戶！

因此，重構(gòu)工程師在高精度還原設(shè)計(jì)稿的同時(shí)，更要去關(guān)心用戶體驗(yàn)。

1、加載體驗(yàn)

這次頁(yè)面用到了不少動(dòng)畫元素，動(dòng)畫元素?zé)o可避免會(huì)用到一些比較大的圖片，圖片加載時(shí)間和動(dòng)畫啟動(dòng)時(shí)間有很大機(jī)率出現(xiàn)沖突，非常有必要去處理一下首屏的加載體驗(yàn)！

常用的方法就是有針對(duì)性去延遲加載比較大的動(dòng)畫圖片。

首屏的動(dòng)畫元素只有兩個(gè)，文字的圖片比較小，移動(dòng)方塊圖片卻有57.2K

在外網(wǎng)環(huán)境測(cè)試可以看到，拉取這張圖片大概需要1.1-1.4秒之間

而動(dòng)畫可接受的延遲啟動(dòng)時(shí)間只有0.68s，

當(dāng)用戶首次打開頁(yè)面的時(shí)候有非常大的機(jī)會(huì)碰上這種情況：圖片剛加載到一半，動(dòng)畫已經(jīng)開始了一段時(shí)間，如下圖

請(qǐng)教了一下國(guó)興兄，給了下面的解決方法：

至此，完成預(yù)加載效果；

2、視覺體驗(yàn)

輪播圖自動(dòng)切換的時(shí)間是5秒，并伴隨一個(gè)600ms漸隱漸退的過(guò)程，因此，動(dòng)畫時(shí)間應(yīng)該等于5.6s，但整個(gè)動(dòng)畫應(yīng)該在5.6s前完成，避免在5.6s瞬間出閃爍現(xiàn)象，視覺體驗(yàn)不佳

DEMO

3、節(jié)省帶寬

這是數(shù)字滑動(dòng)的原型設(shè)計(jì)圖，由于四周有投影，不規(guī)則，因此不能直接用來(lái)當(dāng)作Y軸平鋪圖處理，需要到了兩張圖：

可平鋪的背景圖：

蒙層投影：

兩背景圖的大小分別只有：480×235和192×94,大小分別是：24.9KB和15.9KB

如果用實(shí)際尺寸：960×470的話，兩張圖片的大小分別是：48.4Kb和78.9KB

在可接受的失真范圍內(nèi)，這里用了CSS3的transform:scale(2,2)和transform-origin:0 0，將它拉大了兩倍，同樣實(shí)現(xiàn)了效果，總共省了86.5KB的大小，約原來(lái)的2倍。

4、低端瀏覽器

對(duì)CSS3動(dòng)畫不支持的瀏覽器IE6-IE9，由于動(dòng)畫元素的背景圖都是PNG24透明圖，而且數(shù)量多，如果在IE6-IE9也加載同樣的PNG24圖，請(qǐng)求數(shù)多，瀏覽器負(fù)擔(dān)重，而且IE6對(duì)PNG24半透明支持不好，因此對(duì)IE6-IE9用單獨(dú)的樣式處理：

<!–[if ie]><link rel=”stylesheet” type=”text/css” href=”css/index_ie.css” media=”all” /><![endif]–>

把動(dòng)畫元素背景去掉，減少不必要的請(qǐng)求，然后單獨(dú)用三張大的baner背景圖顯示

這樣，在IE6-IE9，只會(huì)加載三張大的banner背景圖，而不會(huì)加載多余笨重的PNG24動(dòng)畫元素，下圖是IE7瀏覽器圖片加載截圖：

優(yōu)化前banner背景圖有11張圖，平均大小46K，請(qǐng)求數(shù)11個(gè)；

優(yōu)化后banner背景圖只有三張，平均大小為50KB，請(qǐng)求數(shù)只有3個(gè)；

優(yōu)化后，背景圖的總K數(shù)少了3倍，請(qǐng)求數(shù)少了4倍，何樂而不為

產(chǎn)品宣傳頁(yè)雖然只是一個(gè)單頁(yè)，但如果只把設(shè)計(jì)稿高精度還原，只能說(shuō)是把頁(yè)面做完，要把頁(yè)面做好還是得用心下一番功夫的。

在此要感謝志成同學(xué)的積極配合，還有8哥、王宸提出的寶貴意見，還有JS達(dá)人，國(guó)興同學(xué)。

via:迅雷CUED