移動端H5傳播形式的交互設(shè)計(jì)研究

2014年被譽(yù)為H5元年，由一則《圍住神經(jīng)貓》的微信小頁面火爆微信圈之后，H5就以一發(fā)不可收拾之勢席卷了整個移動端。各種H5小游戲、H5專題頁（邀請函、招聘公告以及新聞頁面），借助微信這個移動社交平臺，以最迅速的方式、新穎的視覺效果，走進(jìn)人們的視野。H5在移動端的營銷特性非常突出，成為這個時代最具感染力的傳播形式之一。它的傳播特點(diǎn)不僅是速度快、視覺效果好，還有覆蓋面積大；不僅在移動端微信平臺可以打開，也可以通過任何平臺任何終端的瀏覽器打開。

一、H5媒介形式概述

現(xiàn)在只要提及移動互聯(lián)網(wǎng)的傳播形式，人們必然會提及H5。但大多數(shù)人理解的H5是微信里打開、轉(zhuǎn)發(fā)的頁面，還有些人簡單的把H5和HTML5劃等號。那H5到底是什么呢？H5不是HTML5，不是微信網(wǎng)頁，不是移動PPT，它是這些東西的集合，它大于和包含這些概念。它是移動網(wǎng)頁本身，即通過瀏覽器可以讀取的網(wǎng)頁，并且可以使任何瀏覽器跨平臺、跨終端的無障礙地打開。正是因?yàn)闉g覽器的高度適配性，H5成為了這個時代最具感染力和最通用的傳播形式之一。

而當(dāng)我們正確認(rèn)識H5是移動網(wǎng)頁本身時，最大的意義是使開發(fā)者想象力得到解脫，創(chuàng)作空間大大開闊。H5不再是別人口中說的朋友圈里能打電話的小頁面，開發(fā)者的參考對象再不是其他人的案例，而是移動網(wǎng)頁技術(shù)本身。我們要做的不僅是更好地發(fā)揮移動端多媒體元素的展現(xiàn)，還應(yīng)該回歸網(wǎng)頁本身，開發(fā)更高效、用戶體驗(yàn)良好的作品。

二、H5傳播過程中的交互設(shè)計(jì)

對于數(shù)字作品本身來說，最核心的功能就是交互設(shè)計(jì)，但并不是每部H5作品都有內(nèi)容上的交互設(shè)計(jì)，很多H5作品其實(shí)就是一段按照手機(jī)屏幕大小制作的動畫或視頻（視頻指拍攝制作的視頻，動畫指應(yīng)用二維或三維軟件制作的動畫，但都是視頻格式）。這類作品無需行為觸發(fā)，是頁面打開時自動播放。H5可以直接在網(wǎng)頁中嵌入視頻，這一點(diǎn)使其極具優(yōu)勢。如果去掉H5屬性，它就和看視頻是一樣的，只不過這樣的視頻發(fā)布尺寸是按照手機(jī)屏幕設(shè)計(jì)的。2016年風(fēng)靡一時的H5作品《穿越故宮來看你》，就是典型的無交互類H5作品。這類作品的優(yōu)點(diǎn)是視頻畫面的豐富性，從而使作品具有良好的視覺體驗(yàn)，缺點(diǎn)是在體驗(yàn)過程中不可交互。毫無疑問，沒有參與性的作品瀏覽過程，一旦作品內(nèi)容過長，用戶很容易產(chǎn)生不耐煩的情緒。對于這樣的線性視頻，連快進(jìn)、跳過的交互操作都沒有，很容易讓用戶棄“劇”不看。而導(dǎo)致的結(jié)果就是沒有看到作品定格在最后的信息，無論是它的宣傳內(nèi)容還是作品的設(shè)計(jì)目的，用戶都無法體會到。但對于營銷類H5作品，它就是想起到如同電視廣告的效果，無需在內(nèi)容上進(jìn)行交互，那么這類無交互的視頻H5就一定要控制時長，并且有一個抓人眼球的視覺效果。

H5作品都是力求交互性的。當(dāng)然，不同作品的交互程度是有所不同的。有些作品沒有內(nèi)容上的交互設(shè)計(jì)，僅是推動作品內(nèi)容持續(xù)展現(xiàn)的瀏覽方式的交互動作，例如上下滑動。或者有內(nèi)容的交互設(shè)計(jì)，也僅只有簡單的一兩個動作。對于H5作品來說，交互動作的多少不是判斷作品體驗(yàn)的好壞，而是是否符合作品的設(shè)計(jì)目的，交互行為與作品內(nèi)容的配合度。H5作品不同于原生APP或者一個游戲，H5作品就因其短小精悍的體量和易傳播性，使各大公司利用其完成營銷、宣傳等商業(yè)目的，但是，其時效性也是短暫而有限的。所以在“短、平、快”的節(jié)奏下，H5作品應(yīng)該借助移動設(shè)備本身的硬件功能，設(shè)計(jì)與作品內(nèi)容符合的交互行為，快速有效的為用戶帶來視覺效果極佳的、交互體驗(yàn)良好的移動端數(shù)字作品。

三、H5交互體驗(yàn)要素

1.瀏覽方式契合交互操作

具有交互性的H5作品至少都有推進(jìn)作品內(nèi)容展現(xiàn)的瀏覽方式的交互行為。移動端和PC端在交互行為上有許多根本上的區(qū)別。比如PC端與作品的接口是鍵盤、鼠標(biāo)，用戶通過鼠標(biāo)、鍵盤來執(zhí)行點(diǎn)擊、拖拽、下拉等交互動作來瀏覽作品；而移動端設(shè)備從智能手機(jī)開始，主要是以multitouch技術(shù)為基礎(chǔ)的手勢交互，例如放大縮小、滑動、旋轉(zhuǎn)、搖晃等。作品的瀏覽方式或者說閱讀方式根據(jù)頁面的呈現(xiàn)方式不同，手勢的交互行為有所不同。例如通常超長頁面滾動的交互方式為上下滑動，橫屏觀看的作品為左右滑動，空間式界面呈現(xiàn)方式是根據(jù)位移進(jìn)行手勢滑動，還有點(diǎn)擊屏幕跳轉(zhuǎn)頁面等?？此七@個動作已經(jīng)被程式化，但其實(shí)應(yīng)該巧妙地利用這個交互動作，使它不單單是一個“翻頁”的行為，而把它與作品要呈現(xiàn)的內(nèi)容緊密結(jié)合，成為作品感官體驗(yàn)的一部分。

H5作品《20年，有多長》（圖1）是一部紀(jì)念籃球明星科比正式退役的作品，講述了這位傳奇球星20年的職業(yè)歷程。作品是超長頁面滾動形式，但作品的瀏覽形式卻不是簡單的上下滑動，它巧妙的將作品主題“籃球”作為了界面滑動熱區(qū)，當(dāng)用戶長按這個籃球圖形時，籃球開始轉(zhuǎn)動，界面開始向下滑動，作品內(nèi)容開始展現(xiàn)，當(dāng)手指松開時界面停止滑動。再如2017年騰訊出品的《地球上最美的H5》(圖2)，以3D實(shí)景空間為界面表現(xiàn)，整部作品基本就是兩個交互行為，轉(zhuǎn)動主畫面地球?qū)ふ椅恢?，然后“長按”界面熱區(qū)，文字提示“體驗(yàn)聲音來自何方”，畫面以急速推鏡頭進(jìn)入目標(biāo)定位，展現(xiàn)目標(biāo)位置的實(shí)景畫面，手指松開界面時停止空間環(huán)繞返回主界面。作品配合畫面內(nèi)容搭配了美妙的環(huán)境音效，一種瞭望、深遠(yuǎn)、幽靜的感受油然升起，藝術(shù)的美感是通過觸覺、視覺和聽覺一起營造出來的。

這兩部作品都極好地設(shè)計(jì)了作品的瀏覽方式，不是簡單的上下、左右的滑動交互，而是巧妙與作品主題相關(guān)聯(lián)，使視覺與行為體驗(yàn)相契合。對于很多體量小的H5作品，交互設(shè)計(jì)可能也就僅是作品的瀏覽方式，那么這個行為就是用戶體驗(yàn)作品的第一觸覺感官，當(dāng)它與作品視覺畫面、作品內(nèi)容良好配合的時候，才能使用戶在打開作品的第一刻就感覺其小而美，簡單而不失精巧，用戶體驗(yàn)良好。

圖1 H5作品《20年，有多長》

圖2 《地球上最美的H5》

圖3 H5作品《AKQA Winterlands》

圖4 由騰訊推出的體驗(yàn)射擊的H5作品

2.借助移動設(shè)備本身的硬件功能

移動端數(shù)字作品本身的優(yōu)勢就是移動設(shè)備的硬件功能。隨著移動端智能設(shè)備的技術(shù)發(fā)展，硬件設(shè)備體積越來越小，集成性和兼容性不斷提升，使交互行為在硬件設(shè)備的幫助下更加豐富多樣，交互過程體驗(yàn)性更加貼近生活，也就是向智能化的方向發(fā)展。硬件設(shè)備有各種傳感器，包括方向傳感器、重力感應(yīng)器、震動感應(yīng)器、光線感應(yīng)器、距離感應(yīng)器、加速感應(yīng)器、角度感應(yīng)器、溫度感應(yīng)器等等，還有攝像頭、GPS、話筒、VR/AR、投影儀等等。而硬件帶來的交互新體驗(yàn)有重力感應(yīng)、指紋識別、圖像識別、語音識別、虛擬空間環(huán)繞、位置定位、全息投影、動作捕捉等等。

目前H5作品中三維空間結(jié)合重力感應(yīng)的交互方式是應(yīng)用最成熟的。三維空間的搭建有以下幾種方式，一種是最簡單的偽三維場景，即由二維圖片搭建的。二是由三維軟件創(chuàng)建的三維空間，但置入H5中的方式又可分為三維渲染的動畫方式，或者用幀動畫的圖片形式導(dǎo)入H5。三是由H5代碼完成，例如CSS完成的偽3D空間效果，還有Web GL是H5內(nèi)專門表現(xiàn)3D的語言，H5的很多3D場景都是由web GL來實(shí)現(xiàn)的，但這方面的技術(shù)比較有難度，對于前端工程師來說也是新穎和深奧的。上述的這些方式都可以在三維空間中完成交互設(shè)置和與重力感應(yīng)技術(shù)的結(jié)合。

首先介紹2014年由AKQA創(chuàng)意營銷公司借勢圣誕節(jié)制作的H5作品《AKQA Winterlands》（圖3）。這是一部極為優(yōu)秀的H5作品，精致而夢幻的3D場景界面，應(yīng)用重力感應(yīng)的交互方式，晃動手機(jī)界面開始推進(jìn)，進(jìn)入界面中的夢幻水晶球，繼續(xù)晃動手機(jī)可以在這個360°全景的水晶球內(nèi)部環(huán)繞，搖晃手機(jī)還能揚(yáng)起漫天雪花，根據(jù)搖晃的速度和角度而揚(yáng)起不同數(shù)量的雪花。作品運(yùn)用移動設(shè)備的重力感應(yīng)技術(shù)進(jìn)行交互設(shè)計(jì)，從視覺、聽覺到觸覺，全方面渲染了作品的氣氛，為用戶提供了一個極具視覺美感和交互體驗(yàn)的優(yōu)秀作品。再如2016年奧運(yùn)會期間由騰訊推出的體驗(yàn)射擊H5作品（圖4）。通過重力感應(yīng)技術(shù)進(jìn)行交互設(shè)計(jì)，轉(zhuǎn)動手機(jī)調(diào)整瞄準(zhǔn)靶心的位置，對準(zhǔn)后點(diǎn)擊按鈕開始射擊。

重力感應(yīng)技術(shù)和3D技術(shù)結(jié)合的交互方式是目前應(yīng)用最廣和最成熟的。而移動端的圖像識別、語音識別、全息投影等這些交互體驗(yàn)還未在H5作品中應(yīng)用。這些技術(shù)在原生APP中都已有很好的應(yīng)用，比如圖像識別技術(shù)，“掃一掃”功能背后的技術(shù)支持就是圖像識別。而市場上的兒童AR卡片是應(yīng)用了全息投影技術(shù)，還有語音識別技術(shù)，例如iPhone手機(jī)自帶的Siri功能。2015年推出的H5作品《手機(jī)有話對你說》（圖5）是一個很好的嘗試。H5剛剛興起時，偽接電話的形式被廣泛應(yīng)用，這支H5沒有直接套用偽接電話形式，而模擬了Siri手機(jī)自身說話的功能，很巧妙地表現(xiàn)了作品主題。這支公益公告的主題是想勸“低頭族”們，放下手機(jī)關(guān)心生活。雖說并不是真正的應(yīng)用語音識別技術(shù)進(jìn)行交互，可以說也是一個偽Siri的形式，這對于語音識別的應(yīng)用，包括其他技術(shù)，在H5作品中呈現(xiàn)都是一個很好的開端。

3.設(shè)計(jì)與作品內(nèi)容符合的交互行為

對于數(shù)字媒體交互作品來說，設(shè)計(jì)與作品內(nèi)容符合的交互行為是一個設(shè)計(jì)準(zhǔn)則，是必須遵循的基本而又重要的原則。首先對作品表現(xiàn)的主題內(nèi)容進(jìn)行正確、充分地分析，再考慮作品界面的環(huán)境、界面元素的形態(tài)，設(shè)計(jì)與作品內(nèi)容和表現(xiàn)形式相適配的交互方式，創(chuàng)造出恰到好處的感官體驗(yàn)。

例如上文提到的H5作品《手機(jī)有話對你說》，作品模擬了蘋果手機(jī)的界面和Siri的操作界面，還原了真實(shí)的手機(jī)使用界面。作品的交互行為除了點(diǎn)擊、滑動外，最出彩的是最后擦涂屏幕的交互行為。交互行為與畫面內(nèi)容相統(tǒng)一，自然的交互行為真摯地傳達(dá)了作品的深意：請大家放下手機(jī)感受真實(shí)世界的美好吧。

再如H5作品《看到盜墓筆記就著魔了》（圖6），作品設(shè)計(jì)了點(diǎn)擊、長按、滑動、重力感應(yīng)、模擬吹氣等交互行為。重力感應(yīng)交互方式完成向前前進(jìn)的動作；向下滑動的交互方式完成關(guān)燈的動作，隨機(jī)界面光線變暗；還有模擬吹氣的交互方式，雖然此動作只是一個偽裝，真正觸發(fā)界面反應(yīng)的是長按圖標(biāo)的交互行為，但這聰明的安排都使內(nèi)容與交互行為完美結(jié)合，界面動效表達(dá)與交互動作很好配合。這部作品不僅闡述了交互行為設(shè)計(jì)要與作品內(nèi)容相符合，也很好地發(fā)揮了移動設(shè)備的交互優(yōu)勢，雖然“模擬吹起”的交互方式不是真正意義上的自然交互行為完成的，但這些都成為將來更好地融合技術(shù)與藝術(shù)表現(xiàn)的基礎(chǔ)。

四、結(jié)論

H5是移動網(wǎng)頁本身，偽裝接電話、偽裝朋友圈、植入視頻、3D交互、虛擬現(xiàn)實(shí)環(huán)游等等都是H5可以實(shí)現(xiàn)的效果。設(shè)計(jì)者要做的不僅是更好地發(fā)揮移動端多媒體元素的展現(xiàn)，還應(yīng)該回歸移動網(wǎng)頁本身，開發(fā)更高效、用戶體驗(yàn)良好的作品。數(shù)字媒體作品的核心功能是交互設(shè)計(jì)，H5作品要合理地加強(qiáng)它的交互性，借助移動設(shè)備本身的硬件優(yōu)勢，設(shè)計(jì)與作品內(nèi)容、表現(xiàn)形式相符的交互行為。H5是一個嶄新的領(lǐng)域，可考慮的還有很多，例如Web APPS，“小程序”下的“小應(yīng)用”，交互視頻的開發(fā)，離線狀態(tài)下的交互體驗(yàn)等等，正確地認(rèn)識它是有效設(shè)計(jì)的開始。作為設(shè)計(jì)師，正確的設(shè)計(jì)意識才能開闊設(shè)計(jì)視野，大膽地想象。移動網(wǎng)頁本身這個領(lǐng)域很大，在不久的將來，跨平臺已不是問題，高速的網(wǎng)絡(luò)環(huán)境，云存儲的共享空間，互聯(lián)網(wǎng)的接口就是網(wǎng)頁本身，一切都在網(wǎng)頁端展現(xiàn)、操作和存儲。網(wǎng)頁就是一切的一切，所以設(shè)計(jì)師們回歸最初的原點(diǎn)，站上本質(zhì)的高度，開辟新的設(shè)計(jì)思路吧。

圖5 H5作品《手機(jī)有話對你說》

圖6 H5作品《看到盜墓筆記就著魔了》