編者按：十年精華輸出，從用戶研究、創(chuàng)意剖析、繪制方法、項目管理等實體案例出發(fā)，《騰訊網(wǎng)UED體驗設(shè)計之旅》將帶你經(jīng)歷一場體驗設(shè)計之旅。本文節(jié)選自該書，重點介紹了基于HTML5技術(shù)的移動Web頁面的設(shè)計原則與設(shè)計過程 >>>

《騰訊網(wǎng)UED體驗設(shè)計之旅》一書集合了騰訊網(wǎng)UED團隊在用戶體驗領(lǐng)域的十年探索經(jīng)驗，展示了大量精彩案例的設(shè)計技巧和過程。下面為該書的節(jié)選內(nèi)容。

為什么要設(shè)計H5頁面

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

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

一提起移動端，大家首先想到的就是手機上安裝的移動應(yīng)用，比如微信、騰訊新聞客戶端、QQ瀏覽器等。我們稱這些應(yīng)用為原生應(yīng)用（Native App），因為它們是需要安裝在用戶設(shè)備上的軟件，它們的代碼和界面都是針對所運行的平臺開發(fā)和設(shè)計的。這些原生應(yīng)用能夠最大程度地發(fā)揮用戶設(shè)備的性能，例如使用存儲空間實現(xiàn)離線閱讀，利用圖形加速實現(xiàn)界面動效，以及利用攝像頭來上傳圖片，等等。但跟Web專題相比，移動應(yīng)用的開發(fā)周期長，開發(fā)者需要將產(chǎn)品提交到應(yīng)用商店供用戶下載使用。以蘋果的iOS應(yīng)用開發(fā)為例，開發(fā)者在應(yīng)用商店要發(fā)布應(yīng)用，需要通過約耗時8天的人工審核。因此，把PC端的Web專題做成一個個移動應(yīng)用是不現(xiàn)實的。

除了原生應(yīng)用之外，在移動端還有一種產(chǎn)品形態(tài)——移動Web頁面。它源自于移動互聯(lián)網(wǎng)誕生初期的WAP頁面，有著和PC網(wǎng)頁同樣的優(yōu)點：開發(fā)周期短、發(fā)布和更新方便。此外，用戶只需要借助手機瀏覽器或者內(nèi)嵌手機瀏覽器的應(yīng)用就可以訪問，比原生應(yīng)用要方便得多。但在2014年前，因用戶渠道和設(shè)備性能的原因，移動Web頁面的形態(tài)通常都非常簡單，也很少有用戶互動。2014年，HTML5技術(shù)的普及、智能手機的更新?lián)Q代和新聞客戶端、微信等渠道用戶的增長徹底改變了這一點。

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

通過HTML5實現(xiàn)交互效果時，通常比原生應(yīng)用要更消耗設(shè)備資源，因此設(shè)備性能就成為H5頁面效果的一大瓶頸。現(xiàn)在，這個瓶頸正在消除：2014年7月的一項調(diào)查表明，中國手機用戶換機周期已由2011年的29個月縮短到18個月。而近兩年上市的智能手機，大都運行著較新的操作系統(tǒng)和瀏覽器，性能上也能基本達到展示H5頁面的要求。

好的產(chǎn)品需要恰當?shù)那纴碜層脩舭l(fā)現(xiàn)和傳播，如果把一個個H5專題比作“箭矢”，那新聞客戶端、微信和微博等傳播渠道就是射出這些箭矢的“弓”。利用新聞客戶端、微信和微博內(nèi)嵌的網(wǎng)頁瀏覽器（見圖1），H5頁面可以與新聞文章、朋友圈狀態(tài)和好友微博一起觸達用戶，再通過用戶的分享形成傳播。此外， H5交互頁面憑借著精美的設(shè)計風格、新鮮的交互體驗以及強烈的社交屬性，對于用戶來說有著極強的分享驅(qū)動力，很容易在移動社交環(huán)境中形成病毒式傳播。微信紅包和滴滴紅包就是通過微信朋友圈廣泛傳播的H5案例。

圖1 騰訊新聞客戶端內(nèi)的H5專題

綜上所述，與原生應(yīng)用相比，H5頁面的傳播性和靈活性使它更加符合媒體產(chǎn)品對時效性和差異化的要求，成為2014年移動媒體產(chǎn)品最重要的形態(tài)之一。

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

賽程魔方3D旋轉(zhuǎn)界面設(shè)計

在2014巴西世界杯期間，我們與騰訊體育推出了一款世界杯賽程H5頁面。在項目之初，我們就希望這一款小產(chǎn)品在內(nèi)容定位+視覺設(shè)計+交互設(shè)計三個維度上可以高度統(tǒng)一，三位一體，圍繞世界杯賽程賽事賽時這一中心，內(nèi)容、交互、視覺密不可分；即設(shè)計與交互體現(xiàn)內(nèi)容，內(nèi)容反方向印證視覺與交互，將常規(guī)的體育賽程表通過多屏展現(xiàn)，時間軸表現(xiàn)等與H5交互特性緊密結(jié)合起來，創(chuàng)造出一種大家喜聞樂見的界面展示方式。隨后小產(chǎn)品一經(jīng)推出，賽程魔方（見圖2）即引爆朋友圈，前后被復制抄襲幾十次，從另一方面也印證團隊定位的準確，形式與內(nèi)容高度統(tǒng)一是項目成功的一大法寶。

圖2 賽程魔方的視覺案例

交互形式與項目名稱和內(nèi)容高度統(tǒng)一：3D智能旋轉(zhuǎn)交互方案（見圖3）。

圖3 3D旋轉(zhuǎn)的交互模擬步驟

因團隊負責媒體界面設(shè)計，所以從本源上我們十分強調(diào)內(nèi)容與設(shè)計形式的高度結(jié)合，我們希望設(shè)計形式就可以強烈傳達出我們要表現(xiàn)的內(nèi)容與態(tài)度。項目名稱為“賽程魔方”，體育賽事如同魔方一樣復雜多變，結(jié)果未知，所以在交互設(shè)計上，希望能夠利用HTML5的CSS 3D智能旋轉(zhuǎn)方案完成多個頁面的切換方式，以達到貼合“魔方”的項目概念。大家知道H5可以有3D旋轉(zhuǎn)等形式，所以頁面的交互方式將充分利用這一特性，當用戶觸控屏幕，手指上劃，頁面整體呼之欲出，以整體3D翻轉(zhuǎn)的形式完成頁面切換，交互形式新穎震撼并貼合內(nèi)容。這一交互形式在隨后多個項目中得到推廣應(yīng)用。

動態(tài)卡片抽出交互設(shè)計方案如圖4所示。

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

如圖4所示，考慮到不同用戶的不同需求，我們希望從封面起，即可以快速定位至相應(yīng)頁面，交互形式上補充了動態(tài)卡片抽出的交互設(shè)計方案，三排縱向并列式按鈕以單擊或滑動均可觸發(fā)卡片抽出，繼而快速定位至相應(yīng)頁面，滿足相關(guān)用戶的個性化需求。

如圖5所示，封面主圖構(gòu)思思路來自桌面微景觀，源于現(xiàn)實環(huán)境，設(shè)計師進行藝術(shù)加工，并與世界杯內(nèi)容相互貼合，整體以線框式魔方包裹球場為出發(fā)點，將大力神杯底座與魔方設(shè)計融為一體，以半透明淺切面和不同粗窄線框相互結(jié)合，以表現(xiàn)藝術(shù)化的玻璃質(zhì)感，從而模擬出整體空間感與立體感。

圖5 場景化設(shè)計還原內(nèi)容：抽象場景模擬現(xiàn)實環(huán)境

內(nèi)容區(qū)重展示輕設(shè)計：突出內(nèi)容主體，如圖6、圖7所示。

圖6 小組賽賽程入口頁　 ? ?　　 ? ? ? ? ? ? 　圖7 完全賽程頁

對字母或數(shù)字序號類易識別元素強化設(shè)計，賦予歸類指引的功能，放大字母可以將文字信息分類與定位，并增加版式節(jié)奏感。從小細節(jié)上將信息進行歸類，方便閱讀。整個賽程以時間軸的方式完全展現(xiàn)。

手機掃描二維碼即可體驗“賽程魔方”：

2014年多款H5小游戲一度刷屏，引發(fā)熱議。眾多H5小游戲都有一個共同的設(shè)定，即分享到移動端最具人氣的微信朋友圈中，和小伙伴們比比高下。利用社交圈的攀比心理，是該類游戲成功的一大關(guān)鍵。基于社交圈的好友關(guān)系及信息分享鏈，重點挖掘了用戶分享和攀比的模塊，促使玩家為獲得更好的成績?nèi)滩蛔∫淮未卧谂笥讶乓Ｍ瑫r，在用戶使用朋友圈的高峰時段去推動，更容易形成熱點和話題。最有效地手段是利用玩家的慵懶心理。

相對于傳統(tǒng)游戲，H5互動游戲除同時具備迅速傳播的優(yōu)勢之外，還具有快速設(shè)計、快速開發(fā)的特點。在網(wǎng)絡(luò)媒體行業(yè)，面對媒體資訊的高速爆發(fā)，H5互動小游戲可以做到快速貼合媒體事件的時間周期，并在一定程度上承載資訊，通過揣摩用戶攀比心理，達到廣泛傳播的目的，成為通過資訊拉動網(wǎng)友參與熱情與氣氛的一道利器。

【h5教程及經(jīng)驗好文合集】

騰訊同學精選的h5熱門案例：
《看完轉(zhuǎn)系列！聊聊年度最熱門的那些HTML 5案例》

給前端工程師的實用干貨！
《全是干貨！移動HTML 5前端性能優(yōu)化指南》

京東出品的H5頁面設(shè)計心得！
《5媚娘傳奇！H5移動端頁面設(shè)計心得分享（附案例解析）》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量94萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：