騰訊網移動端H5頁面設計實戰分享
《騰訊網 UED 體驗設計之旅》一書集合了騰訊網 UED 團隊在用戶體驗領域的十年探索經驗，展示了大量精彩案例的設計技巧和過程。下面為該書的節選內容。
為什么要設計 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 場景化設計還原內容：抽象場景模擬現實環境
內容區重展示輕設計：突出內容主體，如圖6、圖 7 所示。
圖 6 小組賽賽程入口頁 & 圖 7 完全賽程頁
對字母或數字序號類易識別元素強化設計，賦予歸類指引的功能，放大字母可以將文字信息分類與定位，并增加版式節奏感。從小細節上將信息進行歸類，方便閱讀。整個賽程以時間軸的方式完全展現。
手機掃描二維碼即可體驗“賽程魔方”：
2014 年多款 H5 小游戲一度刷屏，引發熱議。眾多 H5 小游戲都有一個共同的設定，即分享到移動端最具人氣的微信朋友圈中，和小伙伴們比比高下。利用社交圈的攀比心理，是該類游戲成功的一大關鍵。基于社交圈的 好友關系及信息分享鏈，重點挖掘了用戶分享和攀比的模塊，促使玩家為獲得更好的成績忍不住一次次在朋友圈炫耀。同時，在用戶使用朋友圈的高峰時段去推動， 更容易形成熱點和話題。最有效地手段是利用玩家的慵懶心理。
相對于傳統游戲，H5 互動游戲除同時具備迅速傳播的優勢之外，還具有快速設計、快速開發的特點。在網絡媒體行業，面對媒體資訊的高速爆發，H5 互動小游戲可以做到快速貼合媒體事件的時間周期，并在一定程度上承載資訊，通過揣摩用戶攀比心理，達到廣泛傳播的目的，成為通過資訊拉動網友參與熱情與氣 氛的一道利器。
雙屏互動游戲設計
“ola 快跑”雙屏互動游戲是前端開發工程師極具創意的一款產品，是騰訊世界杯報道期間主打的一款基于移動端及 PC 端聯動的雙屏互動跑酷射門類游戲，是世界杯報道期間在 PC 端和移動端同時嵌入的游戲。這款游戲輕松、有趣味，在世界杯這一特殊時期，大家對足球的熱情也點燃了用戶對這款小游戲的喜愛。ola 快跑主要頁面展示如圖 8 所示。
圖 8 ola 快跑主要頁面展示
雙屏互動通俗來講就是通過手機與其他媒介產生交互關系并獲得新鮮娛樂的體驗，它可以是 PC、Pad、電視、戶外屏幕、電影屏幕等多種終端。實際上，雙屏互動并不是什么新鮮事物，前兩年微博火熱的時候，一些發布會上出現的微博墻就是某種意義 上的雙屏互動。再發展到最近的彈幕電影，以及時下一些智能電視的出現，通過手機可以操作電視行為，實際上雙屏互動正在慢慢侵蝕到真實的生活中。在這一大環 境下，項目團隊希望能夠利用手機端和 PC 端聯動的方式開發一款適合世界杯的小游戲。PC 端與移動端聯動的示例如圖 9 所示。
圖 9 PC 端與移動端聯動
由于 PC 與手機有高度重合的使用場景，網絡環境穩定，并且是人們最常使用的兩種設備，無疑是雙屏互動的最佳環境。“ola 快跑”的游戲交互形式分為兩種：第一種方式是在手機端直接操控游戲人物行為，玩家通過手機拖動手勢控制游戲角色，帶球奔跑，途中需要躲避道具或者收集道具 以獲得相應獎勵，最后完成射門，獲得相應獎勵或者榮譽稱號，從而促進用戶轉發分享行為。第二種方式是在 PC 端用手機操控 PC 界面游戲行為，簡單來說，這個時候用戶手中的手機就如同游戲手柄，而 PC 則充當了展示了游戲主界面環境的電視，用戶用手中的手機操控 PC 端的游戲，帶來雙屏聯動的操作樂趣。視覺情景化劇情體驗設計還原了球賽游戲場景，如圖 10 所示。
圖 10 視覺情景化劇情體驗設計還原球賽游戲場景
隨著觸摸技術的發展，我們面對的不僅僅是冰冷的屏幕，而是活生生的情景化世界。可以想象一下，你能體驗到真實的超市購物感覺，你能像看線裝書一樣體會到讀書的樂趣。同樣，游戲界面必定要給玩家展示真實的游戲環境場景設計。
快跑”通過“人球合一”的設計理念，將游戲主角設定為球狀呆萌角色，另外游戲設計為避免操控游戲需要方向按鈕的設計，采用手指直接拖動人物奔跑 進行游戲，因此矮胖的人物形象由于占位面積較大，方便用戶玩游戲的同時可以避免游戲的誤操作。整體游戲場景通過不同道具的下移速度及球體不斷旋轉形成主角 與足球同時快速奔跑的錯覺，這一形象設定在騰訊世界杯項目上成為一大視覺亮點與代表。項目整體視覺風格延續當下流行的扁平化設計，作為一款帶有資訊屬性的 小游戲，我們盡量減視覺干擾元素，并希望視覺整體可以傳達出騰訊世界杯“快跑”的理念。
手機掃描二維碼即可體驗“oal!快跑”：
資訊與游戲的結合設計
2014 年 APEC 會議期間，騰訊新聞推出了 APEC 服裝秀互動小游戲，用戶可以操作和定義人物的服裝，并生成自己拼裝的服裝秀圖片在朋友圈等社交平臺分享，首次成功將嚴肅的資訊話題與互動游戲相結合，以互 動游戲性的新聞形態，以生動的交互方式處理新聞，滿足用戶閱讀新聞的同時場景化深度參與的需求，這個設計嘗試引爆社交分享，在朋友圈形成巨大的傳播效 力，APEC 服裝秀主界面如圖 11 所示。
圖 11 APEC 服裝秀主界面
在整個項目設計工作中，界面背景的設計方案很快被想到，場景化設計概念再一次得到使用，利用模擬的舞臺背景設計，結合由遠及近的動畫效果，簡單 模擬T臺秀的環境場景。同時需要配合真實的人物形象，扁平化的設計概念在背景的設計中就顯得不再適用，漸變式色彩的運用使得畫面背景表現更為豐富，使人物 主體更加突出和鮮明，同時也符合T臺的設計概念，如圖 12 所示。
圖 12 模擬舞臺背景設計帶來的T臺靈感
設計師對色彩的選用也有深入的考慮，項目整體配色各有來源（見圖 13）：紫色代表時尚與娛樂，由于水立方是整個 APEC 會議的重要場所，夜晚的水立方呈現為紫色；藍色代表會議的嚴肅性，抽取 APEC 會議 Logo 中的藍色代表色；黃色代表智慧與思考，峰會特點是精英聚首；白色代表莊重，抽取人物西裝白襯衣的特點。這樣，從紫色、藍色、黃色再漸進到白色，豐富的色彩 構成柔和的畫面。
圖 13 項目色彩來源
在人物形象的界定上，如何在資訊的嚴肅性中表現出一定的游戲娛樂性成為一個難點。考慮到新聞的嚴肅性，同時考慮到可辨別性，我們放棄了手繪卡通 形象的方式，決定采用人物真實頭像的方式來合成圖片；考慮到游戲的趣味性，我們結合了一些近期在在國內互聯網上經常被調侃的服裝造型，比如秋衣秋褲、軍大 衣、清代皇帝龍袍等進行了大量的圖片合成工作，使用人物真實頭像與虛擬服裝造型相互結合的合成方式，真實模擬人物的另類造型，為整個游戲平添一份真實而幽 默的畫面感，如圖 14 所示。
圖 14 項目服裝創意點
手機掃描二維碼即可體驗“APEC 服裝秀”：
刮刮樂在移動端互動游戲中的微創新
“我擦世界杯”（見圖 15）是騰訊體育推出的一款針對 2014 年世界杯的小產品，產品定位為世界杯外圍球迷，即非資深球迷和小白球迷。 所以產品定位上以愉快輕松為主格調，內容上以游戲的方式展示騰訊體育大量精美的足球寶貝照片為方向，如何擺脫傳統圖片集展示圖片的形式是項目的一個難點。
圖 15“我擦世界杯”主界面
我們想到一個頗有趣味的構思，創意來源于彩票刮刮樂（見圖 16），我們希望可以將足球寶貝的展示賦予更多的娛樂性。在交互上，我們觀察到，H5 頁面出現了抽獎刮刮樂的功能，于是我們在這一功能上進行微創新，延展出手指在屏幕上涂抹刮掉球星出現足球寶貝的展示方式，并以涂抹的速度做出成績優劣的判 斷，并進行好友排名。
圖 16 項目交互創意來源
涂抹屏幕交互方式示意圖如圖 17 所示。
圖 17 涂抹屏幕交互方式
在視覺設計上，封面的交互動畫與視覺表現同樣延展于刮刮樂的形式（見圖 18）。初始畫面結合內容本身設計，以手的形象為構圖要素，點擊開始按鈕，繼而雙手上下拉開帷幕，出現完整圖片的動畫，漸進式模糊動畫處理效果十分貼合小 游戲“刮開球星看美女”的內容特點（見圖 19）。
圖 18 封面動態交互創意來源
圖 19 封面動態效果展示
手機掃描二維碼即可體驗“我擦世界杯”
互動調查小游戲的設計創新
賀歲檔電影是年度電影的第一大檔期。每到這時各大網站都會推出賀歲檔片單。內容無外乎新片推薦、上映日期、陣容介紹和片花等。面對如此繁多雷同的榜單，如何讓用戶選擇我們的榜單并分享出去是擺在面前的難題。賀歲檔電影封面頁如圖 20 所示。
圖 20 賀歲檔電影封面頁
設計之初，設想過以下兩種方案。
- 以內容為前提，傳統的賀歲檔片單加上特邀寫手的精彩評論。但顯然這種以精編內容為主的形式在移動端很難輕易地吸引用戶。
- 以分享為前提吸引用戶，這就拓寬了思路，不僅僅局限在內容呈現上，還可以擴展到游戲上。眾所周知，小游戲一向是分享利器，脫離內容文字的束縛，單純以提高分享為前提，打造一款賀歲檔游戲成為了我們的方向。
選擇適合的形式：這款游戲要符合賀歲檔的特點，還要引出片單，最好還能打通其他渠道，增加騰訊娛樂的影響力。
“打造您的私人片單”這一核心目標產生了。最終我們選定設計一款調查式小游戲。
區別于娛樂周報、新聞調查等傳統問卷，這是一款更像心里測試類的游戲。一共有 6 道問題指向 10 個有意思的結果。通過問題 1 先得出A、B兩套指向，再根據問題2、3、4、5、6 每個結果的得分計算最終結果。
簡單來說，設計游戲閉環：目標＋引導＝結果。
- 簡單明確的目標：通過調查問卷，收集用戶資料將用戶進行分類，根據結果推薦不同的賀歲檔電影。
- 恰到好處的引導：達成目標的方式要有趣，但不煩瑣。
- 有意義的核心循環：賀歲檔片單作為最終獎勵結果出現。用戶分享朋友圈z?后，會享受到優惠購票及查看全部賀歲檔片單的權利。
當設定都確定后，才真正的進入到設計環節。
如何通過設計讓調查變得更加有趣？
游戲界面設計：游戲的界面設計涵蓋了色彩、元素、交互（操作）體驗等多方面、全方位的考量。
色彩是游戲界面與用戶之間相互溝通的第一觸發點。選擇契合主題的顏色來烘托場景氛圍，紅色搭配明黃，營造一種傳統的新年氛圍，喜慶、熱鬧、張揚。
界面視覺表達的形式要和游戲主題統一，可以讓用戶在第一時間理解并感受到游戲的內涵。此外統一的功能按鈕顏色也有助于用戶降低學習成本。
元素的運用：結合內容設計元素，為游戲界面帶來靈魂和豐富感染力，給用戶提供更加愉悅的游戲體驗。
角色設定：爆米花小人貫穿了整個游戲的始終，這個萌萌的小角色吸引用戶想看它下一步會帶來怎樣的驚喜（見圖 21）。
結果設定：萌萌的結果設定，成為促使用戶轉發的又一殺招（見圖 22）。
圖 21 座椅及爆米花角色設定
圖 22 結果頁角色設定
細節的把控：這里的細節指視覺和交互兩個方面。頁面視覺保持精致刻畫的同時，要確保界面整體的識別性和可用、易用程度，不刻意、不僵硬、不做作，自然而然恰到好處，提高用戶的參與感。
在答題的過程中始終讓用戶保持愉悅，翻頁時有趣的水珠彈出設計，如圖 23 所示。翻牌子顯示結果如圖 24 所示。
圖 23 翻頁動態展示 & 圖 24 選擇翻牌的狀態頁
選定時的趣味動畫設計如圖 25 所示。拖動式交互的首次應用如圖 26 所示。
圖 25 選擇情景的狀態頁 && 圖 26 拖動物體的狀態頁
游戲設計是對整個策劃核心的提煉。增加美觀和趣味性的同時也要注意游戲的終端性能。抓住游戲的核心，通過視覺與交互的完美結合，讓傳統的調查變得生動有趣。
手機掃描二維碼即可體驗“賀歲檔電影”：
設計小貼士
可以看出，與媒體結合的 H5 互動游戲的玩法通常都很簡單，但這并不意味著它們設計起來很容易。跟純資訊專題相比，游戲需要的用戶互動更多，注意力也更集中，因此在設計中需要注意以下幾點。
明確游戲的媒體屬性：我們設計的 H5 游戲大多數都是和媒體相結合的，它們不但能給用戶帶來愉悅感和成就感，還能借助用戶對于新聞事件的興趣來吸引用戶，通過玩的過程讓用戶了解事件背景，或產 生情感共鳴，或與自身建立聯系等。可以說，這些 H5 游戲的媒體屬性是不可或缺的。例如“ola 快跑”和‘我擦世界杯“都是騰訊網世界杯品牌包裝的部分，充分發揮了媒體跨平臺的優勢。
為觸控設計：用戶使用觸摸屏時習慣通過直接觸摸來控制游戲中的對象。例如，在“ola 快跑”中，我們讓用戶直接拖動人物奔跑，而不是使用方向按鈕或虛擬搖桿。這樣既節省了空間，又提高了可操作性。
通過及時的反饋鼓勵用戶探索：隨著智能手機性能的提升和移動應用的普及，用戶對于移動設備交互的響應期待也越來越高。有專家建議，應該在用戶操 作后的 50 毫秒內給予視覺或聽覺上的反饋，否則可能讓用戶重復點擊甚至產生受挫感。鑒于游戲中交互反饋非常平凡，設計師更應該注意這一點。例如在“APEC 時裝秀”中，衣服素材都是預先加載好的，用戶點擊馬上就能看到效果；在“我擦世界杯”中，用戶涂抹的操作能夠及時“刮”掉遮蓋的涂層。
設計好游戲的閉環：這一點和任何游戲都是一樣的。在“賀歲檔電影”案例中，我們提到要設計好游戲的閉環：要有簡單明確的目標，通過引導讓用戶熟 悉玩法以及讓用戶能獲得成就感的核心循環。H5 的核心循環，簡單來說，就是讓用戶在玩過以后能獲得滿足感，產生再玩或者分享的欲望。
本文摘自《騰訊網 UED 體驗設計之旅》，電子工業出版社出版。