手機互動網頁11大技術點創意篇突破總結

 　　一、硬件背景(重要)

　　易觀智庫的一個報告指出，2013年中國移動互聯網網民規模達6.52億，其中70.1%的用戶使用安卓手機，26.1%的用戶使用蘋果手機。

　　高收入網民中，有一半以上都是用IOS系統，這個比重在低收入群體中只占17.71%。中低收入網民多使用安卓系統的手機，占比分別為66.67%和76.09%。

　　先提出中國移動互聯網網民結構是為了讓大家在開始項目構思的時候，就要清楚面對的群體是什麼，在項目的進展中遇到問題時，結合時間和效果，能夠有所抉擇。

　　這個問題很重要，就像我們在PC網頁提出並且已經被廣泛接受的“優雅降級”原則：在Google Chrome、Firefox、Safari、QQ浏覽器極速模式等浏覽器下，利用新技術(HTML5、CSS3、Javas cript等)給用戶創造更多新鮮的體驗。但是IE6、IE7、老系統下的QQ浏覽器兼容模式等浏覽器，就只能查看到普通的沒特效的網頁。

　　這個問題在移動端的展現只有過之而無不及。如果說IE6是PC浏覽器的蛀蟲，那安卓低端機就是手機浏覽器的蛀蟲。

　　安卓手機配置和系統可謂千千萬種，CPU跟網頁展示效果卡不卡息息相關，安卓系統版本跟網頁基礎呈現也息息相關(例如安卓2.0不兼容CSS3的圓角屬性border-radius等)。(CPU中文意思是處理器，手機反應快慢，卡不卡，都跟CPU息息相關。現在市面上低端機定義是CPU頻率800M以下，800M至1.5G屬於中端機，高端機就是雙核1G以上的手機。)

　　在理解這個問題的前提下，進行手機移動網頁構思及重構的時候，就會有針對性的進行取捨，使得項目得到最大化的效率。

　　下面將會以我們近期制作的比較出色的手機專題網頁作為案例，來告訴親愛的大家，我們前端能做什麼，希望可以對今後的創意參考有所幫助。

　　二、項目欣賞

　　1、TGA移動游戲官網

　　TGA城市拉力賽

　　2、UP+邀請函

　　3、天天酷跑裡約進擊版

　　三、技術創意點

　　一般在制作強交互、多動畫效果的網頁前，建議產品、設計、前端一起開會探討實現細節。同時要求設計師有很良好的頁設計習慣和一定思路的展現效果，以及要求產品有很大的包容心、懂得取捨。

　　1、技術點：CSS3動畫

　　適用范圍：相互聯系又相互獨立的元素

　　設備要求：中高端手機

　　會發現UP+邀請函裡用的最多的就是動畫效果了，其實都是用CSS3寫成的。

　　CSS3動畫可以理解為一個元素的a狀態，讓它以逐幀展示的方式變成b狀態。基本的變形有scale(縮放)、translate(位移)、rotate(旋轉)、skew(傾斜)等，再加上color(顏色)、opacity(透明度)等，利用transition(轉換)和animation(動畫)加上延時效果，動畫就出來了。聽著暈吧?看看下面的例子。

　　① 獨立元素間的互動

　　這塊動畫並不是前期就想好的。在制作過程中，發現每頁的元素進入動畫都差不多，這樣用戶容易感覺無聊而沒有興趣往下翻頁。

　　為了增加末頁的觸達率，需要每翻一頁都給用戶帶來一個信息：下面的內容會不一樣的哦，請繼續往下翻。

　　“我是玩家”這一屏的小元素都跟游戲有關系，英雄聯盟的Q版蓋倫，游戲玩家必備手柄，讓他們互動起來。

　　手柄按常規方式進場(旋轉+縮放+透明度)，蓋倫也按照常規方式進場(位移+透明度)，但是讓蓋倫的位移軌跡跟手柄有少許重疊，就造成兩者相撞的效果。手柄被撞需要有反饋，就被彈開了一下(位移)。

　　② 單元素自我呈現

　　看到這一屏設計稿的時候，真的不知道從何下手，常規動畫效果上面的頁面都使用了，這屏的元素還不多，如何不無聊?初期的想法是讓小三角從圓裡蹦出來(縮放+位移+透明度)，跟首屏呼應。可是只有一個小元素蹦出來，略顯單薄。換了個方向思考，小三角可以自我呈現啊。

　　利用它的形狀和方向，模仿風筝或者飛機的動效，給予一個非直線運動軌跡，最終呈現效果就出來了(縮放+位移+旋轉+透明度)。

　　③ 3D變換

　　這個在最開始討論的時候產品就說了需要有門被打開的動效。實現方法很多，最常規的是利用圖片幀的方式，多張不同狀態的門的圖片進行切換，造成門在逐漸打開的效果。

　　優點是能制作各種動效，缺點是增加圖片的數量，對頁面加載速度造成壓力(更多可以查看下面的sprite動畫介紹)。好在這扇門是一個純色矩形色塊，可以利用CSS3的3D變換(旋轉3D)，做成門往裡面打開的效果。

　　如下圖右一的rotateY，把旋轉的中心線定為門的左側即可。

　　CSS3的變換屬性不算多，但是把不一樣的參數結合起來，就成了不一樣的展現效果。如果大家在開始項目前都有這麼些概念和認識，也許不需要前端參與前期討論都可以很順的把流程走下來，提升效率。

　　2、技術點：Sprite動畫

　　適用范圍：單獨形象有多幀動畫

　　設備要求：無

　　Sprite動畫的想法來自傳統的動畫行業，多張圖在一定時間內切換，形成視覺上的動態效果。Sprite動畫特別適合多細節的逐幀動畫展示，但是對圖片的要求很高，需要先生成每幀的圖片，如下圖。這張圖片壓縮之後都還有119K大小，成本是很高的。

　　本來酷跑裡約版幾乎每頁的小角色都有sprite動畫的，文件加起來有1.5M。在PC網頁裡，幾M都是可理解的，但在手機，幾百K都已經是致命的了(在中國國情下)。

　　所以在上線第二天，緊急處理網頁，只留下審判女王的動畫，訪問延時從16秒直線下降到6秒。所以如果想在項目裡應用sprite動畫，需要仔細斟酌。

　　3、技術點：重力感應視差

　　適用范圍：相互獨立的元素

　　設備要求：中高端手機

　　PC端的網頁視差展現靠鼠標動作(鼠標移動或者滾輪)，手機端的網頁視差展現可以依靠設備特性——重力感應。

　　當手機的水平方向改變時，網頁內給予重力感應的元素就會跟著改變位置，並且依據賦值的深度的不一樣，位移速度也不一樣，這樣就能造成視差的效果。

　　在用戶發現網頁跟自己有互動時，好感度會立增。

　　除了在展示性網頁使用重力感應做成視差效果之外，還可以利用它來制作小游戲，增強互動。例如最出名的重力感應球游戲。

　　4、技術點：字體圖標

　　適用范圍：純色矢量圖

　　設備要求：中高端手機

　　字體有一個非常好的特性，可以容易設置顏色大小或者變形，而CSS3的@font-face就是為了結合字體和圖標而生的。以邀請函為例，把頁面上所有純色矢量圖轉化為字體文件之後，節省97.37%的帶寬(約370k)，這對頁加載是非常大的一個幫助。但是對生成字體的圖標的要求是，只能包含一個顏色，且為矢量圖。

　　所以在呈現風格和文件大小之間的取捨，根據項目而定。

　　5、技術點：自適應SVG圖形

　　適用范圍：基礎圖形

　　設備要求：中高端手機

　　邀請函那條貫穿8個頁面的折線是使用SVG畫出來的，優點是可以