多屏互動(dòng) —— 手機(jī)端與PC端網(wǎng)頁(yè)互動(dòng)的現(xiàn)有嘗試及設(shè)想

原創(chuàng) 贊3 收藏12 評(píng)論

舉報(bào) 2014-03-23

掃描,分享朋友圈

不可否認(rèn)，多屏?xí)r代已經(jīng)到來(lái)。

手機(jī)/平板/筆記本/PC/TV等，多個(gè)顯示平臺(tái)的逐步構(gòu)建，為信息傳播及交互提供了多重平臺(tái)及體驗(yàn)選擇。

素材：多屏自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)/多屏延生設(shè)計(jì)

在此篇文章，取手機(jī)端與PC端網(wǎng)頁(yè)的互動(dòng)案例來(lái)探討：

案例一： Chrome 超級(jí)體育游戲 (Super Sync Sports)譯：“超同步運(yùn)動(dòng)”

此互動(dòng)案例為谷歌推出的多屏同步游戲，通過(guò)WebSockets功能，讓手機(jī)端與PC網(wǎng)頁(yè)端代碼匹配并綁定，手機(jī)端將變?yōu)槭直?。之后就可以通過(guò)操作手機(jī)端界面來(lái)控制網(wǎng)頁(yè)端的人物進(jìn)行相應(yīng)的動(dòng)作。

#通過(guò)手機(jī)端可以選擇人物形象

#通過(guò)手機(jī)端觸摸，網(wǎng)頁(yè)端做出相應(yīng)回饋

#最多支持4人同屏對(duì)戰(zhàn)互動(dòng)，有興趣的朋友可以去嘗試一下，體驗(yàn)還是不錯(cuò)的。

互動(dòng)地址：http://www.chrome.com/supersyncsports/

案例二：QQ手機(jī)瀏覽器，誰(shuí)能比我快/雙屏互動(dòng)案例

案例原地址：http://www.damndigital.com/archives/108543

此案例，與Chrome的游戲互動(dòng)方式類似，同樣是運(yùn)用了WebSockets功能，通過(guò)手機(jī)端與網(wǎng)頁(yè)端綁定，通過(guò)手機(jī)端控制網(wǎng)頁(yè)端做相應(yīng)動(dòng)作。QQ瀏覽器這個(gè)案例，將品牌訴求結(jié)合的更好，技術(shù)與創(chuàng)意點(diǎn)結(jié)合的相當(dāng)不錯(cuò)。

有興趣的朋友也可以參與玩一下：

互動(dòng)地址：http://x5.mb.qq.com/

案例三：UNICEF: “MOON”——一個(gè)孩子，兩種命運(yùn)

原案例地址：http://m.hygysj.cn/projects/12257.html

感謝編輯:Viking @DIGITALING

這則互動(dòng)案例，無(wú)論從內(nèi)容還是交互方式上，我都很喜歡。我覺得技術(shù)的魅力就應(yīng)該通過(guò)這種方式呈現(xiàn)。

本互動(dòng)案例是由Ogilvy Spain和Ogilvy One Madrid為ING集團(tuán)支援UNICEF聯(lián)合國(guó)兒童基金會(huì)的慈善活動(dòng)而打造的網(wǎng)站，網(wǎng)站用動(dòng)畫的形式講述了一個(gè)孩子的兩種命運(yùn)。

用戶需要同時(shí)登陸PC端網(wǎng)站及手機(jī)端網(wǎng)頁(yè)，將手機(jī)端與網(wǎng)頁(yè)端通過(guò)驗(yàn)證碼匹配后，即可觀看短片。有趣的事，你可以通過(guò)翻轉(zhuǎn)手機(jī)同時(shí)觀看到這兩個(gè)小故事。該網(wǎng)站的用意在于，你的每一次捐款可以改變失學(xué)兒童的命運(yùn)。

有興趣的朋友也可以直接登入網(wǎng)站感受一下：

互動(dòng)地址：http://unahistoriaquedalavuelta.com/en/

體驗(yàn)了這些案例，想必對(duì)手機(jī)端與PC端互動(dòng)的方式有了了解，那接下來(lái)更多的就是我們?cè)撊绾稳ダ矛F(xiàn)有的技術(shù)來(lái)結(jié)合品牌的特色，呈現(xiàn)出更多的交互方式，最終達(dá)到傳播品牌訴求的目的。

正如案例中所描述的手機(jī)端與PC網(wǎng)頁(yè)端的狀態(tài)，手機(jī)端由于體積小巧，靈活性高的特色，能夠直接與我們產(chǎn)生交互的，多扮演控制端的角色，網(wǎng)頁(yè)端則更多的是以內(nèi)容呈現(xiàn)的載體角色存在。所以，在結(jié)合品牌特色的同時(shí)，我們更應(yīng)該把握其不同的功能定位來(lái)做交互方式。

例如“果粒橙”，他們的品牌訴求之一，就是體現(xiàn)飲品中的果粒豐富，喝前搖一搖。那結(jié)合這樣的特點(diǎn)，我們就可以在做互動(dòng)站的同時(shí)，結(jié)合手機(jī)端做相應(yīng)交互，類似搖一搖手機(jī)，網(wǎng)頁(yè)端呈現(xiàn)豐富果粒的效果，來(lái)傳遞這一品牌訴求。

再例如“保時(shí)捷”跑車等品牌，為了傳遞跑車的聲效及引擎體驗(yàn)，那我們也可以結(jié)合手機(jī)端，類似油門踏板等按鈕，觸摸，網(wǎng)頁(yè)端結(jié)合時(shí)速表加速，聲效互動(dòng)等，都能提供更加豐富的交互體驗(yàn)。

諸如此類的案例設(shè)想，都是在互動(dòng)網(wǎng)站的基礎(chǔ)上給予參與者更多的用戶體驗(yàn)，將品牌傳播以“被動(dòng)”傳遞的方式轉(zhuǎn)為“主動(dòng)”索取。當(dāng)然，這也需要市場(chǎng)給予更多的空間。

本文系作者授權(quán)數(shù)英發(fā)表，內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。