騰訊網移動端H5頁面設計實戰分享

分享 《關於我》

分享  [中文紀錄片]互聯網時代                 http://pan.baidu.com/s/1qWkJfcS

分享 《HTML開發MacOSApp教程》      http://pan.baidu.com/s/1jG1Q58M 

 

爲何要設計H5頁面

移動設備的普及給媒體和娛樂帶來了一場革命。根據中國互聯網信息中心（CNNIC）2014年7月的報告顯示，中國網民中，手機使用率達83.4%，已經超過傳統PC總體80.9％的使用率。其中，手機網絡新聞的使用率爲74.2%，僅次於即時通訊和搜索，遠超其餘手機網絡應用。在資訊移動化的趨勢下，觀察近期各大門戶在重大事件報道中的表現，會發現移動優先、產品社會化、交互趣味化是三個重要的趨勢。其中，基於HTML5技術的移動Web頁面（如下簡稱H5頁面），較完美地融合了上述三種屬性，成爲當下最受關注的內容報道形態，也引爆了社交平臺上的大規模分享行爲。

就像CD取代磁帶成爲一種更高效的音樂播放方式同樣，數字文件也將取代CD，依此類推，智能手機也將會替代PC的一部分重要功能。儘管仍有爭議，但不能否認的是，移動互聯網時代已經到來，隨着用戶從PC向移動端的遷移，從大屏到小屏，從鼠標鍵盤到多點觸控，移動端逐漸成爲媒體報道的前沿陣地。

一提起移動端，你們首先想到的就是手機上安裝的移動應用，好比微信、騰訊新聞客戶端、QQ瀏覽器等。咱們稱這些應用爲原生應用（Native App），由於它們是須要安裝在用戶設備上的軟件，它們的代碼和界面都是針對所運行的平臺開發和設計的。這些原生應用可以最大程度地發揮用戶設備的性能，例如使用存儲空間實現離線閱讀，利用圖形加速實現界面動效，以及利用攝像頭來上傳圖片，等等。但跟Web專題相比，移動應用的開發週期長，開發者須要將產品提交到應用商店供用戶下載使用。以蘋果的iOS應用開發爲例，開發者在應用商店要發佈應用，須要經過約耗時8天的人工審覈。所以，把PC端的Web專題作成一個個移動應用是不現實的。

除了原生應用以外，在移動端還有一種產品形態——移動Web頁面。它源自於移動互聯網誕生初期的WAP頁面，有着和PC網頁一樣的優勢：開發週期短、發佈和更新方便。此外，用戶只須要藉助手機瀏覽器或者內嵌手機瀏覽器的應用就能夠訪問，比原生應用要方便得多。但在2014年前，因用戶渠道和設備性能的緣由，移動Web頁面的形態一般都很是簡單，也不多有用戶互動。2014年，HTML5技術的普及、智能手機的更新換代和新聞客戶端、微信等渠道用戶的增加完全改變了這一點。

在移動端，要在網頁上實現交互和動效須要藉助HTML5技術（例如CSS3媒體查詢、CSS3動畫、Canvas等）。如今的手機瀏覽器大都支持HTML5的核心技術，例如對觸摸事件和手勢的響應、播放聲音和視頻、渲染CSS變換，以及獲取設備的加速度傳感器數據等。這些技術衍生了諸如互動小遊戲、交互型動畫頁面、可視化新聞等，爲市場營銷、媒體報道等提供了大量不一樣形式的載體，同時爲產品策劃與視覺設計帶來了更多的想象空間。

經過HTML5實現交互效果時，一般比原生應用要更消耗設備資源，所以設備性能就成爲H5頁面效果的一大瓶頸。如今，這個瓶頸正在消除：2014年7月的一項調查代表，中國手機用戶換機週期已由2011年的29個月縮短到18個月。而近兩年上市的智能手機，大都運行着較新的操做系統和瀏覽器，性能上也能基本達到展現H5頁面的要求。

好的產品須要恰當的渠道來讓用戶發現和傳播，若是把一個個H5專題比做「箭矢」，那新聞客戶端、微信和微博等傳播渠道就是射出這些箭矢的「弓」。利用新聞客戶端、微信和微博內嵌的網頁瀏覽器（見圖1），H5頁面能夠與新聞文章、朋友圈狀態和好友微博一塊兒觸達用戶，再經過用戶的分享造成傳播。此外， H5交互頁面憑藉着精美的設計風格、新鮮的交互體驗以及強烈的社交屬性，對於用戶來講有着極強的分享驅動力，很容易在移動社交環境中造成病毒式傳播。微信紅包和滴滴紅包就是經過微信朋友圈普遍傳播的H5案例。

圖1 騰訊新聞客戶端內的H5專題

綜上所述，與原生應用相比，H5頁面的傳播性和靈活性使它更加符合媒體產品對時效性和差別化的要求，成爲2014年移動媒體產品最重要的形態之一。

H5資訊專題主要基於H5技術，將圖、文、動畫、視頻、音頻等媒體形式進行合理組合，突破了傳統新聞專題的內容、形式界限，讓新聞資訊變得更加直觀、生動。人性化的交互設計更好地將內容與人機互動結合，強化了用戶的參與感。同時，這種多媒體形式創新帶來的趣味性和新鮮感，也使用戶分享專題的意願獲得提升，促進了新聞資訊專題的二次傳播。

賽程魔方3D旋轉界面設計

在2014巴西世界盃期間，咱們與騰訊體育推出了一款世界盃賽程H5頁面。在項目之初，咱們就但願這一款小產品在內容定位+視覺設計+交互設計三個維度上能夠高度統一，三位一體，圍繞世界盃賽程賽事賽時這一中心，內容、交互、視覺密不可分；即設計與交互體現內容，內容反方向印證視覺與交互，將常規的體育賽程表經過多屏展示，時間軸表現等與H5交互特性緊密結合起來，創造出一種你們喜聞樂見的界面展現方式。隨後小產品一經推出，賽程魔方（見圖2）即引爆朋友圈，先後被複制抄襲幾十次，從另外一方面也印證團隊定位的準確，形式與內容高度統一是項目成功的一大法寶。

圖2 賽程魔方的視覺案例

交互形式與項目名稱和內容高度統一：3D智能旋轉交互方案（見圖3）。

圖3 3D旋轉的交互模擬步驟

因團隊負責媒體界面設計，因此從本源上咱們十分強調內容與設計形式的高度結合，咱們但願設計形式就能夠強烈傳達出咱們要表現的內容與態度。項目名稱爲「賽程魔方」，體育賽事如同魔方同樣複雜多變，結果未知，因此在交互設計上，但願可以利用HTML5的CSS 3D智能旋轉方案完成多個頁面的切換方式，以達到貼合「魔方」的項目概念。你們知道H5能夠有3D旋轉等形式，因此頁面的交互方式將充分利用這一特性，當用戶觸控屏幕，手指上劃，頁面總體呼之欲出，以總體3D翻轉的形式完成頁面切換，交互形式新穎震撼並貼合內容。這一交互形式在隨後多個項目中獲得推廣應用。

動態卡片抽出交互設計方案如圖4所示。

圖4 賽程魔方動態頁卡抽出的交互虛擬步驟：從大屏到小屏

如圖4所示，考慮到不一樣用戶的不一樣需求，咱們但願從封面起，便可以快速定位至相應頁面，交互形式上補充了動態卡片抽出的交互設計方案，三排縱向並列式按鈕以單擊或滑動都可觸發卡片抽出，繼而快速定位至相應頁面，知足相關用戶的個性化需求。

如圖5所示，封面主圖構思思路來自桌面微景觀，源於現實環境，設計師進行藝術加工，並與世界盃內容相互貼合，總體以線框式魔方包裹球場爲出發點，將大力神杯底座與魔方設計融爲一體，以半透明淺切面和不一樣粗窄線框相互結合，以表現藝術化的玻璃質感，從而模擬出總體空間感與立體感。

圖5 場景化設計還原內容：抽象場景模擬現實環境

內容區重展現輕設計：突出內容主體，如圖六、圖7所示。

圖6 小組賽賽程入口頁                 圖7 徹底賽程頁

對字母或數字序號類易識別元素強化設計，賦予歸類指引的功能，放大字母能夠將文字信息分類與定位，並增長版式節奏感。從小細節上將信息進行歸類，方便閱讀。整個賽程以時間軸的方式徹底展示。

手機掃描二維碼便可體驗「賽程魔方」：

2014年多款H5小遊戲一度刷屏，引起熱議。衆多H5小遊戲都有一個共同的設定，即分享到移動端最具人氣的微信朋友圈中，和小夥伴們比比高下。利用社交圈的攀比心理，是該類遊戲成功的一大關鍵。基於社交圈的好友關係及信息分享鏈，重點挖掘了用戶分享和攀比的模塊，促使玩家爲得到更好的成績忍不住一次次在朋友圈炫耀。同時，在用戶使用朋友圈的高峯時段去推進，更容易造成熱點和話題。最有效地手段是利用玩家的慵懶心理。

相對於傳統遊戲，H5互動遊戲除同時具有迅速傳播的優點以外，還具備快速設計、快速開發的特色。在網絡媒體行業，面對媒體資訊的高速爆發，H5互動小遊戲能夠作到快速貼合媒體事件的時間週期，並在必定程度上承載資訊，經過揣摩用戶攀比心理，達到普遍傳播的目的，成爲經過資訊拉動網友參與熱情與氣氛的一道利器。