騰訊互娛新官網(wǎng)品牌站-復(fù)雜而強(qiáng)大的重構(gòu)技術(shù)

2014年4月16日，由中國(guó)領(lǐng)先的互聯(lián)網(wǎng)綜合服務(wù)商騰訊公司舉辦的“UP2014騰訊互動(dòng)娛樂(lè)年度發(fā)布會(huì)”在北京國(guó)家會(huì)議中心舉行，互娛官網(wǎng)的品牌站 http://ieg.tencent.com/ 也同一時(shí)間發(fā)布。TGideas 對(duì)這一次的官方網(wǎng)改版進(jìn)行了包裝，在本次改版中，頁(yè)面重構(gòu)上（小李刀刀 & 索尼克）運(yùn)用了不少嘗試，整合了不少團(tuán)隊(duì)先前積累的知識(shí)，今天給大家做一下分享。

技術(shù)點(diǎn)：

【頁(yè)面元素響應(yīng)式+3D視差效果】

功能背景：近兩年來(lái)，隨著移動(dòng)端流量的提升，高端瀏覽器逐步普及，IE6的占有率逐漸萎縮，我們可以對(duì)以前用Flash做視差效果做法進(jìn)行大膽的改進(jìn)嘗試，通過(guò)JS操作DOM節(jié)點(diǎn)并配合CSS3來(lái)實(shí)現(xiàn)視差效果。

實(shí)現(xiàn)方法：為每一屏的包裹層div綁定一個(gè)mouseMove事件，鼠標(biāo)移動(dòng)時(shí)，對(duì)頁(yè)面上需要移動(dòng)的元素進(jìn)行CSS3的translate位移處理。位移的幅度根據(jù)元素標(biāo)簽上聲明的 data-z 屬性值來(lái)控制，上層元素位移幅度大，下層元素位移幅度小，從而形成一種視差的感覺(jué)。

【CSS3動(dòng)畫】

功能背景：游戲官網(wǎng)在CSS3動(dòng)畫方面已有非常多的案例及實(shí)踐，CSS3動(dòng)畫能讓單調(diào)的頁(yè)面增加動(dòng)感，提升用戶體驗(yàn)，做好CSS3動(dòng)畫，個(gè)人覺(jué)得兩個(gè)關(guān)鍵點(diǎn)：

實(shí)現(xiàn)方法：增加 css3-amination.css CSS文件 將所有CSS3動(dòng)畫樣式寫于此文件，方便后面的動(dòng)畫調(diào)節(jié)。

【SVG】

實(shí)現(xiàn)方法：簡(jiǎn)單的元素直接新建.svg文件，在文本編輯器里手寫代碼，復(fù)雜的元素通過(guò)AI導(dǎo)出SVG文件。

【IconFont】

功能背景：主要用在頁(yè)面右側(cè)懸浮導(dǎo)航上面的ICON，由于右側(cè)導(dǎo)航顏色要適應(yīng)頁(yè)面所在屏的顏色，總共有6組顏色導(dǎo)航，對(duì)應(yīng)6組ICON，如果用傳統(tǒng)的Css Spriter雖然也能做，但手工拼圖過(guò)程繁瑣，且1張雪碧圖大小相比3種字體還要大20K. 用IconFont還是比較有意義的。

實(shí)現(xiàn)方法：PS 復(fù)制icon => AI貼入 => SVG 導(dǎo)出 =>icomoon生成字段庫(kù)及代碼

【jQuery 翻頁(yè)/滾動(dòng) 插件】

【圖文列表寬度自適應(yīng)】

功能背景：由于于設(shè)計(jì)師出稿是1920PX寬度的Demo。在1920px以下的寬度，頁(yè)面需要有良好的自適應(yīng)，保證在不同PC分辯率下，每行的顯示的圖片數(shù)量都一致

實(shí)現(xiàn)方法：列寬度用百分比，圖片寬度100%，圖片高度自適應(yīng)

【Grunt自動(dòng)化構(gòu)建】

功能背景：圖片壓縮，頁(yè)面CSS、JS文件合并壓縮，構(gòu)建項(xiàng)目打包文件，這些繁瑣的手工操作全部交由Grunt自動(dòng)化來(lái)完成，讓重構(gòu)能更專注代碼的編寫，頁(yè)面交互功能的實(shí)現(xiàn)，前期花點(diǎn)時(shí)間配置一下，后續(xù)還是節(jié)省了大量不必要的重復(fù)工作。

實(shí)現(xiàn)方法：Node.js + Grunt  + Grunt插件

參考文章

• Javascript的3D視覺(jué)
• 非Flash動(dòng)畫的簡(jiǎn)單嘗試
• W3school SVG
• 字體圖標(biāo)的制作方式
• Turn.js: The page flip effect in HTML5
• jquery.scrollTo
• Grunt打造前端自動(dòng)化工作流

項(xiàng)目結(jié)語(yǔ)

      品牌站的建設(shè)前期講究視覺(jué)包裝，設(shè)計(jì)師可以在項(xiàng)目設(shè)計(jì)中有較大的發(fā)揮空間，頁(yè)面運(yùn)用視差及動(dòng)畫效果可以把設(shè)計(jì)風(fēng)格更有力度地進(jìn)行傳達(dá)，重構(gòu)在前期需要跟設(shè)計(jì)師深入溝通，了解設(shè)計(jì)需要傳達(dá)的氛圍，盡量通過(guò)各種技術(shù)手段還原創(chuàng)意。項(xiàng)目上線以后，還需要跟進(jìn)優(yōu)化，如SEO優(yōu)化引流，增加移動(dòng)版頁(yè)面，定期關(guān)注數(shù)據(jù)反饋?lái)?yè)面點(diǎn)擊情況及流量，適當(dāng)時(shí)間反饋給項(xiàng)目人員，讓大家了解項(xiàng)目效果，為以后的改進(jìn)沉淀數(shù)據(jù)。