起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識小屏，你好！——手機互動網(wǎng)頁11大技術點突破總結【創(chuàng)意篇】
TGideas與所有互聯(lián)網(wǎng)從業(yè)人員一樣正在更深層次的擁抱移動互聯(lián)網(wǎng)，針對移動端的互動網(wǎng)頁嘗試正在各個產(chǎn)品的營銷方案中鋪開，我們一直致力于在保證優(yōu)秀的用戶體驗基礎上為移動頁面尋找一些新意，這篇文章總結了我們在技術研究領域的一些突破和沉淀，希望你能喜歡~！
一、硬件背景（重要）
易觀智庫的一個報告指出，2013年中國移動互聯(lián)網(wǎng)網(wǎng)民規(guī)模達6.52億，其中70.1%的用戶使用安卓手機，26.1%的用戶使用蘋果手機。
高收入網(wǎng)民中，有一半以上都是用IOS系統(tǒng)，這個比重在低收入群體中只占17.71%。中低收入網(wǎng)民多使用安卓系統(tǒng)的手機，占比分別為66.67%和76.09%。
先提出中國移動互聯(lián)網(wǎng)網(wǎng)民結構是為了讓大家在開始項目構思的時候，就要清楚面對的群體是什么，在項目的進展中遇到問題時，結合時間和效果，能夠有所抉擇。
這個問題很重要，就像我們在PC網(wǎng)頁提出并且已經(jīng)被廣泛接受的“優(yōu)雅降級”原則：在Google Chrome、Firefox、Safari、QQ瀏覽器極速模式等瀏覽器下，利用新技術（HTML5、CSS3、Javas cript等）給用戶創(chuàng)造更多新鮮的體驗。但是IE6、IE7、老系統(tǒng)下的QQ瀏覽器兼容模式等瀏覽器，就只能查看到普通的沒特效的網(wǎng)頁。
這個問題在移動端的展現(xiàn)只有過之而無不及。如果說IE6是PC瀏覽器的蛀蟲，那安卓低端機就是手機瀏覽器的蛀蟲。
安卓手機配置和系統(tǒng)可謂千千萬種，CPU跟網(wǎng)頁展示效果卡不卡息息相關，安卓系統(tǒng)版本跟網(wǎng)頁基礎呈現(xiàn)也息息相關（例如安卓2.0不兼容CSS3的圓角屬性border-radius等）。（CPU中文意思是處理器，手機反應快慢，卡不卡，都跟CPU息息相關?，F(xiàn)在市面上低端機定義是CPU頻率800M以下，800M至1.5G屬于中端機，高端機就是雙核1G以上的手機。）
在理解這個問題的前提下，進行手機移動網(wǎng)頁構思及重構的時候，就會有針對性的進行取舍，使得項目得到最大化的效率。
下面將會以我們近期制作的比較出色的手機專題網(wǎng)頁作為案例，來告訴親愛的大家，我們前端能做什么，希望可以對今后的創(chuàng)意參考有所幫助。
二、項目欣賞
1、TGA移動游戲官網(wǎng)
TGA城市拉力賽
2、UP+邀請函
3、天天酷跑里約進擊版
三、技術創(chuàng)意點
一般在制作強交互、多動畫效果的網(wǎng)頁前，建議產(chǎn)品、設計、前端一起開會探討實現(xiàn)細節(jié)。同時要求設計師有很良好的手機網(wǎng)頁設計習慣和一定思路的展現(xiàn)效果，以及要求產(chǎn)品有很大的包容心、懂得取舍。
1、技術點：CSS3動畫
適用范圍：相互聯(lián)系又相互獨立的元素
設備要求：中高端手機
會發(fā)現(xiàn)UP+邀請函里用的最多的就是動畫效果了，其實都是用CSS3寫成的。
CSS3動畫可以理解為一個元素的a狀態(tài)，讓它以逐幀展示的方式變成b狀態(tài)?；镜淖冃斡衧cale（縮放）、translate（位移）、rotate（旋轉(zhuǎn)）、skew（傾斜）等，再加上color（顏色）、opacity（透明度）等，利用transition（轉(zhuǎn)換）和animation（動畫）加上延時效果，動畫就出來了。聽著暈吧？看看下面的例子。
① 獨立元素間的互動
這塊動畫并不是前期就想好的。在制作過程中，發(fā)現(xiàn)每頁的元素進入動畫都差不多，這樣用戶容易感覺無聊而沒有興趣往下翻頁。
為了增加末頁的觸達率，需要每翻一頁都給用戶帶來一個信息：下面的內(nèi)容會不一樣的哦，請繼續(xù)往下翻。
“我是玩家”這一屏的小元素都跟游戲有關系，英雄聯(lián)盟的Q版蓋倫，游戲玩家必備手柄，讓他們互動起來。
手柄按常規(guī)方式進場（旋轉(zhuǎn)+縮放+透明度），蓋倫也按照常規(guī)方式進場（位移+透明度），但是讓蓋倫的位移軌跡跟手柄有少許重疊，就造成兩者相撞的效果。手柄被撞需要有反饋，就被彈開了一下（位移）。
② 單元素自我呈現(xiàn)
看到這一屏設計稿的時候，真的不知道從何下手，常規(guī)動畫效果上面的頁面都使用了，這屏的元素還不多，如何不無聊？初期的想法是讓小三角從圓里蹦出來（縮放+位移+透明度），跟首屏呼應?？墒侵挥幸粋€小元素蹦出來，略顯單薄。換了個方向思考，小三角可以自我呈現(xiàn)啊。
利用它的形狀和方向，模仿風箏或者飛機的動效，給予一個非直線運動軌跡，最終呈現(xiàn)效果就出來了（縮放+位移+旋轉(zhuǎn)+透明度）。
③ 3D變換
這個在最開始討論的時候產(chǎn)品就說了需要有門被打開的動效。實現(xiàn)方法很多，最常規(guī)的是利用圖片幀的方式，多張不同狀態(tài)的門的圖片進行切換，造成門在逐漸打開的效果。
優(yōu)點是能制作各種動效，缺點是增加圖片的數(shù)量，對頁面加載速度造成壓力（更多可以查看下面的sprite動畫介紹）。好在這扇門是一個純色矩形色塊，可以利用CSS3的3D變換（旋轉(zhuǎn)3D），做成門往里面打開的效果。
如下圖右一的rotateY，把旋轉(zhuǎn)的中心線定為門的左側(cè)即可。
CSS3的變換屬性不算多，但是把不一樣的參數(shù)結合起來，就成了不一樣的展現(xiàn)效果。如果大家在開始項目前都有這么些概念和認識，也許不需要前端參與前期討論都可以很順的把流程走下來，提升效率。
2、技術點：Sprite動畫
適用范圍：單獨形象有多幀動畫
設備要求：無
Sprite動畫的想法來自傳統(tǒng)的動畫行業(yè)，多張圖在一定時間內(nèi)切換，形成視覺上的動態(tài)效果。Sprite動畫特別適合多細節(jié)的逐幀動畫展示，但是對圖片的要求很高，需要先生成每幀的圖片，如下圖。這張圖片壓縮之后都還有119K大小，成本是很高的。
本來酷跑里約版幾乎每頁的小角色都有sprite動畫的，文件加起來有1.5M。在PC網(wǎng)頁里，幾M都是可理解的，但在手機，幾百K都已經(jīng)是致命的了（在中國國情下）。
所以在上線第二天，緊急處理網(wǎng)頁，只留下審判女王的動畫，訪問延時從16秒直線下降到6秒。所以如果想在項目里應用sprite動畫，需要仔細斟酌。
3、技術點：重力感應視差
適用范圍：相互獨立的元素
設備要求：中高端手機
PC端的網(wǎng)頁視差展現(xiàn)靠鼠標動作（鼠標移動或者滾輪），手機端的網(wǎng)頁視差展現(xiàn)可以依靠設備特性——重力感應。
當手機的水平方向改變時，網(wǎng)頁內(nèi)給予重力感應的元素就會跟著改變位置，并且依據(jù)賦值的深度的不一樣，位移速度也不一樣，這樣就能造成視差的效果。
在用戶發(fā)現(xiàn)網(wǎng)頁跟自己有互動時，好感度會立增。
除了在展示性網(wǎng)頁使用重力感應做成視差效果之外，還可以利用它來制作小游戲，增強互動。例如最出名的重力感應球游戲。
4、技術點：字體圖標
適用范圍：純色矢量圖
設備要求：中高端手機
字體有一個非常好的特性，可以容易設置顏色大小或者變形，而CSS3的@font-face就是為了結合字體和圖標而生的。以邀請函為例，把頁面上所有純色矢量圖轉(zhuǎn)化為字體文件之后，節(jié)省97.37%的帶寬（約370k），這對手機網(wǎng)頁加載是非常大的一個幫助。但是對生成字體的圖標的要求是，只能包含一個顏色，且為矢量圖。
所以在呈現(xiàn)風格和文件大小之間的取舍，根據(jù)項目而定。
5、技術點：自適應SVG圖形
適用范圍：基礎圖形
設備要求：中高端手機
邀請函那條貫穿8個頁面的折線是使用SVG畫出來的，優(yōu)點是可以根據(jù)屏幕進行自適應匹配，且大小能比切成png24的圖片節(jié)省98%的帶寬（約65k）。缺點是自適應的圖形之間比較難定位。例如iPhone4s豎屏的情況下折線的角度為60°，橫屏的情況下折線的角度為25°，貫穿的位置可見不一致。
但是線條上面還放著其他元素，或者還有其他文字依據(jù)它來定位，這樣就出現(xiàn)問題了。
所以我們的處理是選擇一定的屏幕大小進行細微優(yōu)化，但是從概念上就放棄“線條必須從元素正中間貫穿過去”的想法，這只是一種硬解決辦法。
手機上SVG可以制作出很多圖形、線條的組合體，但是也需要產(chǎn)品階段就清晰哪些能做，哪些能舍棄，然后找出一個最適合的解決辦法。
就像邀請函，選擇做折線，就放棄一定設備的元素定位問題。如果選擇元素定位第一，則需要更換貫穿線條的設計。（其實我不是很建議用貫穿線條的想法，難實現(xiàn)。）
6、技術點：Loading進度條
適用范圍：比較大的頁面
設備要求：無
據(jù) Compuware 的調(diào)查，用戶在使用手機時，如果遇到加載超過5秒的手機網(wǎng)站，74%的用戶會選擇離開。即便用戶對手機應用相對有耐心，也只有50%的用戶會容忍加載超過5秒。
之前內(nèi)部的一項網(wǎng)速測試算出訪問我們專題的手機平均網(wǎng)速只有70K/s，如果容忍時間是5秒的話，我們的網(wǎng)頁加起來需要控制在350K以內(nèi)，但有時候內(nèi)容多了圖片大了加載時間想控制都沒辦法。
有一個可以稱呼為時間小偷的辦法，就是給網(wǎng)頁增加loading進度條。loading需要有動畫來分散用戶注意力，簡單的動畫可以為網(wǎng)頁爭取多5秒的時間，復雜的動畫則可以爭取更多時間。在loading的時候就先把前幾屏的圖片加載上，跳轉(zhuǎn)到網(wǎng)頁后就可以直接呈現(xiàn)出來了。這種方式比讓用戶在空白首頁干等體驗更好。
美國研究生項目資訊網(wǎng)站上有五分之一的人承認曾經(jīng)對“怠慢”自己的人發(fā)火，loading就是告訴我們的用戶，我們在為他們著想，希望給他們更好的體驗。
7、技術點：單屏滑動顯示
適用范圍：內(nèi)容或者色塊有明顯區(qū)分的
設備要求：無
PC網(wǎng)頁一般是直接垂直平鋪內(nèi)容的，取決于鼠標和鍵盤的操作方式。不推薦內(nèi)容橫向平鋪，不方便查看，也不符合用戶使用習慣，除非有對鼠標、鍵盤操作進行相應的設置修改，制作成本比較高。手機網(wǎng)頁的出現(xiàn)卻打破了這種僵局，豎向滑動橫向滑動，對手機用戶來說都是非常習慣的操作了。
但是必須引入單屏滑動的概念，一滑一屏。豎向的可測試UP邀請函，橫向的可測試TGA官網(wǎng)。單屏滑動要求每屏內(nèi)容不可過多，有合理的布局安排，如果內(nèi)容多且要求連貫性，則不適合。
像邀請函這樣內(nèi)容不多，每塊的顏色也有明顯區(qū)分的設計，用單屏滑動更能凸顯品質(zhì)。
8、技術點：游戲
適用范圍：結合產(chǎn)品特性給用戶帶來強交互體驗
設備要求：中高端手機
手機網(wǎng)頁因為設備特性可以創(chuàng)造出很多特別的小游戲，如刮刮樂（canvas）、吹蠟燭（麥克風api）、跟手3D圖像（sprite動畫+手勢）、接金幣（CSS3動畫+Javas cript+手勢）等。
這些小游戲不僅可以增強產(chǎn)品和用戶間的互動，還可以展示大公司的技術研究，帶來好的市場口碑，可謂一箭多雕。但也有缺點：開發(fā)時間長，對設備要求也比較高。例如TGA官網(wǎng)前的接金幣小游戲，搭框架需要10天左右的時間。
對于游戲這一塊，也是我們TGideas網(wǎng)站重構三組在努力探索的方向，相信以后可以給大家?guī)砀酶斓男∮螒?，請關注后期的手機網(wǎng)頁小游戲探索。
9、技術點：地理定位
適用范圍：需要結合地理位置不同展現(xiàn)的網(wǎng)頁
設備要求：無
功能跟地理位置息息相關的應用例如大眾點評、地圖、滴滴打車等，都會先獲取用戶的位置再進行匹配性內(nèi)容展示，網(wǎng)頁里有時候也可以利用這個功能。例如TGA的城市拉力賽里就應用了地理定位，幫用戶快速定位到所在城市，而不需要進行手動選擇，立即給自己的城市加油。
10、技術點：音頻使用
適用范圍：有特殊體驗要求的
設備要求：中高端手機
聲音可以給用戶帶來更多新鮮體驗。PC網(wǎng)頁對于聲音的應用比較局限是因為臺式機需要有耳機或者音響的輔助，手機網(wǎng)頁則很容易用聲音來吸引用戶注意。但是音頻壓縮大小和質(zhì)量還有待研究。TGA城市拉力賽里應用了音頻作為用戶的驚喜體驗，期待得到的反饋。
11、手機強互動形式新官網(wǎng)（上述多個技術點的綜合應用）
適用范圍：每屏內(nèi)容適中，增加少許動效提升品質(zhì)
設備要求：無
官網(wǎng)并不是只能規(guī)矩羅列平鋪直敘的。模塊和模塊之間可以使用單屏滑動來銜接，模塊內(nèi)容比較多的情況可以橫向滑動延伸。初次進入官網(wǎng)，首屏內(nèi)的元素利用CSS3動畫制作酷炫效果，官網(wǎng)不再單調(diào)！
上面介紹的都只是手機互動網(wǎng)頁的冰山一角，更多的還需要產(chǎn)品+設計+前端一起去探索和研究，掌握了基礎的知識點之后，相互組合迸發(fā)出的新事物，就是我們用心創(chuàng)造快樂的結果了。
本文版權：騰訊游戲TGideas 原創(chuàng)，如需商業(yè)用途或轉(zhuǎn)載請與 騰訊游戲TGideas 聯(lián)系，謝謝
ceshihyongli