設(shè)計(jì)H5頁(yè)面的原因

2016年01月26日 59 分類：開(kāi)發(fā)資訊

?

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

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

就像CD取代磁帶成為一種更高效的音樂(lè)播放方式一樣，數(shù)字文件也將取代CD，依此類推，智能手機(jī)也將會(huì)替代PC的一部分重要功能。盡管仍有爭(zhēng)議，但不可否認(rèn)的是，移動(dòng)互聯(lián)網(wǎng)時(shí)代已經(jīng)到來(lái)，隨著用戶從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è)備上的軟件，它們的代碼和界面都是針對(duì)所運(yùn)行的平臺(tái)開(kāi)發(fā)和設(shè)計(jì)的。這些原生應(yīng)用能夠最大程度地發(fā)揮用戶設(shè)備的性能，例如使用存儲(chǔ)空間實(shí)現(xiàn)離線閱讀，利用圖形加速實(shí)現(xiàn)界面動(dòng)效，以及利用攝像頭來(lái)上傳圖片，等等。但跟Web專題相比，移動(dòng)應(yīng)用的開(kāi)發(fā)周期長(zhǎng)，開(kāi)發(fā)者需要將產(chǎn)品提交到應(yīng)用商店供用戶下載使用。以蘋果的iOS應(yīng)用開(kāi)發(fā)為例，開(kāi)發(fā)者在應(yīng)用商店要發(fā)布應(yīng)用，需要通過(guò)約耗時(shí)8天的人工審核。因此，把PC端的Web專題做成一個(gè)個(gè)移動(dòng)應(yīng)用是不現(xiàn)實(shí)的。

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

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

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

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

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

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

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

在2014巴西世界杯期間，我們與騰訊體育推出了一款世界杯賽程H5頁(yè)面。在項(xiàng)目之初，我們就希望這一款小產(chǎn)品在內(nèi)容定位+視覺(jué)設(shè)計(jì)+交互設(shè)計(jì)三個(gè)維度上可以高度統(tǒng)一，三位一體，圍繞世界杯賽程賽事賽時(shí)這一中心，內(nèi)容、交互、視覺(jué)密不可分；即設(shè)計(jì)與交互體現(xiàn)內(nèi)容，內(nèi)容反方向印證視覺(jué)與交互，將常規(guī)的體育賽程表通過(guò)多屏展現(xiàn)，時(shí)間軸表現(xiàn)等與H5交互特性緊密結(jié)合起來(lái)，創(chuàng)造出一種大家喜聞樂(lè)見(jiàn)的界面展示方式。隨后小產(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è)頁(yè)面的切換方式，以達(dá)到貼合“魔方”的項(xiàng)目概念。大家知道H5可以有3D旋轉(zhuǎn)等形式，所以頁(yè)面的交互方式將充分利用這一特性，當(dāng)用戶觸控屏幕，手指上劃，頁(yè)面整體呼之欲出，以整體3D翻轉(zhuǎn)的形式完成頁(yè)面切換，交互形式新穎震撼并貼合內(nèi)容。這一交互形式在隨后多個(gè)項(xiàng)目中得到推廣應(yīng)用。

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

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

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

內(nèi)容區(qū)重展示輕設(shè)計(jì)：突出內(nèi)容主體

?

對(duì)字母或數(shù)字序號(hào)類易識(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)挖掘了用戶分享和攀比的模塊，促使玩家為獲得更好的成績(jī)?nèi)滩蛔∫淮未卧谂笥讶乓?。同時(shí)，在用戶使用朋友圈的高峰時(shí)段去推動(dòng)，更容易形成熱點(diǎn)和話題。最有效地手段是利用玩家的慵懶心理。

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