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

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

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

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

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

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

【CSS3動畫】

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

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

【SVG】

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

【IconFont】

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

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

【jQuery 翻頁/滾動 插件】

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

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

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

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

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

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

參考文章

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

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

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