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

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

內(nèi)蒙古網(wǎng)站制作，內(nèi)蒙古網(wǎng)站設(shè)計(jì)，內(nèi)蒙古網(wǎng)站建設(shè)，呼和浩特網(wǎng)站建設(shè)，呼和浩特網(wǎng)站制作、呼和浩特網(wǎng)站設(shè)計(jì)首選內(nèi)蒙古呼和浩特先誠網(wǎng)絡(luò)科技公司。先誠官網(wǎng)：http://www.schuylerstatebank.com/

注：本文均來自百度搜索，如涉及版權(quán)問題，請聯(lián)系我們，我們會(huì)第一時(shí)間解決。

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

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

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

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

通過HTML5實(shí)現(xiàn)交互效果時(shí)，通常比原生應(yīng)用要更消耗設(shè)備資源，因此設(shè)備性能就成為H5頁面效果的一大瓶頸?，F(xiàn)在，這個(gè)瓶頸正在消除：2014年7月的一項(xiàng)調(diào)查表明，中國手機(jī)用戶換機(jī)周期已由2011年的29個(gè)月縮短到18個(gè)月。而近兩年上市的智能手機(jī)，大都運(yùn)行著較新的操作系統(tǒng)和瀏覽器，性能上也能基本達(dá)到展示H5頁面的要求。好的產(chǎn)品需要恰當(dāng)?shù)那纴碜層脩舭l(fā)現(xiàn)和傳播，如果把一個(gè)個(gè)H5專題比作“箭矢”，那新聞客戶端、微信和微博等傳播渠道就是射出這些箭矢的“弓”。利用新聞客戶端、微信和微博內(nèi)嵌的網(wǎng)頁瀏覽器，H5頁面可以與新聞文章、朋友圈狀態(tài)和好友微博一起觸達(dá)用戶，再通過用戶的分享形成傳播。此外， H5交互頁面憑借著精美的設(shè)計(jì)風(fēng)格、新鮮的交互體驗(yàn)以及強(qiáng)烈的社交屬性，對于用戶來說有著極強(qiáng)的分享驅(qū)動(dòng)力，很容易在移動(dòng)社交環(huán)境中形成病毒式傳播。微信紅包和滴滴紅包就是通過微信朋友圈廣泛傳播的H5案例。

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

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

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

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

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

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

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

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

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