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

《騰訊網UED體驗設計之旅》一書集合了騰訊網UED團隊在用戶體驗領域的十年探索經(jīng)驗，展示了大量精彩案例的設計技巧和過(guò)程。下面(miàn)爲該書的節選内容。

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。

爲什麼(me)要設計H5頁面(miàn)移動設備的普及給媒體和娛樂帶來了一場革命。根據中國(guó)互聯網信息中心（CNNIC）2014年7月的報告顯示，中國(guó)網民中，手機使用率達83.4%，已經(jīng)超過(guò)傳統PC整體80.9％的使用率。其中，手機網絡新聞的使用率爲74.2%，僅次于即時通信和搜索，遠超其他手機網絡應用。在資訊移動化的趨勢下，觀察近期各大門戶在重大事(shì)件報道(dào)中的表現，會發(fā)現移動優先、産品社會化、交互趣味化是三個重要的趨勢。其中，基于HTML5技術的移動Web頁面(miàn)（以下簡稱H5頁面(miàn)），較完美地融合了上述三種(zhǒng)屬性，成(chéng)爲當下最受關注的内容報道(dào)形态，也引爆了社交平台上的大規模分享行爲。就像CD取代磁帶成(chéng)爲一種(zhǒng)更高效的音樂播放方式一樣(yàng)，數字文件也將(jiāng)取代CD，依此類推，智能(néng)手機也將(jiāng)會替代PC的一部分重要功能(néng)。盡管仍有争議，但不可否認的是，移動互聯網時代已經(jīng)到來，随著(zhe)用戶從PC向(xiàng)移動端的遷移，從大屏到小屏，從鼠标鍵盤到多點觸控，移動端逐漸成(chéng)爲媒體報道(dào)的前沿陣地。

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

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

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

通過(guò)HTML5實現交互效果時，通常比原生應用要更消耗設備資源，因此設備性能(néng)就成(chéng)爲H5頁面(miàn)效果的一大瓶頸。現在，這(zhè)個瓶頸正在消除：2014年7月的一項調查表明，中國(guó)手機用戶換機周期已由2011年的29個月縮短到18個月。而近兩(liǎng)年上市的智能(néng)手機，大都(dōu)運行著(zhe)較新的操作系統和浏覽器，性能(néng)上也能(néng)基本達到展示H5頁面(miàn)的要求。好(hǎo)的産品需要恰當的渠道(dào)來讓用戶發(fā)現和傳播，如果把一個個H5專題比作“箭矢”，那新聞客戶端、微信和微博等傳播渠道(dào)就是射出這(zhè)些箭矢的“弓”。利用新聞客戶端、微信和微博内嵌的網頁浏覽器，H5頁面(miàn)可以與新聞文章、朋友圈狀态和好(hǎo)友微博一起(qǐ)觸達用戶，再通過(guò)用戶的分享形成(chéng)傳播。此外， H5交互頁面(miàn)憑借著(zhe)精美的設計風格、新鮮的交互體驗以及強烈的社交屬性，對(duì)于用戶來說有著(zhe)極強的分享驅動力，很容易在移動社交環境中形成(chéng)病毒式傳播。微信紅包和滴滴紅包就是通過(guò)微信朋友圈廣泛傳播的H5案例。

綜上所述，與原生應用相比，H5頁面(miàn)的傳播性和靈活性使它更加符合媒體産品對(duì)時效性和差異化的要求，成(chéng)爲2014年移動媒體産品最重要的形态之一。

H5資訊專題主要基于H5技術，將(jiāng)圖、文、動畫、視頻、音頻等媒體形式進(jìn)行合理組合，突破了傳統新聞專題的内容、形式界限，讓新聞資訊變得更加直觀、生動。人性化的交互設計更好(hǎo)地將(jiāng)内容與人機互動結合，強化了用戶的參與感。同時，這(zhè)種(zhǒng)多媒體形式創新帶來的趣味性和新鮮感，也使用戶分享專題的意願得到提高，促進(jìn)了新聞資訊專題的二次傳播。賽程魔方3D旋轉界面(miàn)設計

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

交互形式與項目名稱和内容高度統一：3D智能(néng)旋轉交互方案。

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

考慮到不同用戶的不同需求，我們希望從封面(miàn)起(qǐ)，即可以快速定位至相應頁面(miàn)，交互形式上補充了動态卡片抽出的交互設計方案，三排縱向(xiàng)并列式按鈕以單擊或滑動均可觸發(fā)卡片抽出，繼而快速定位至相應頁面(miàn)，滿足相關用戶的個性化需求。，封面(miàn)主圖構思思路來自桌面(miàn)微景觀，源于現實環境，設計師進(jìn)行藝術加工，并與世界杯内容相互貼合，整體以線框式魔方包裹球場爲出發(fā)點，將(jiāng)大力神杯底座與魔方設計融爲一體，以半透明淺切面(miàn)和不同粗窄線框相互結合，以表現藝術化的玻璃質感，從而模拟出整體空間感與立體感。

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

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

相對(duì)于傳統遊戲，H5互動遊戲除同時具備迅速傳播的優勢之外，還(hái)具有快速設計、快速開(kāi)發(fā)的特點。在網絡媒體行業，面(miàn)對(duì)媒體資訊的高速爆發(fā)，H5互動小遊戲可以做到快速貼合媒體事(shì)件的時間周期，并在一定程度上承載資訊，通過(guò)揣摩用戶攀比心理，達到廣泛傳播的目的，成(chéng)爲通過(guò)資訊拉動網友參與熱情與氣氛的一道(dào)利器。