在觸控技術(shù)和Windows 8的帶動下,越來越多的PC開始配備觸控屏,給傳統(tǒng)PC領(lǐng)域帶來了全新的交互體驗——觸控操作。然而,除了專門針對觸控操作優(yōu)化的Windows 8應(yīng)用外,大量傳統(tǒng)操作都是基于鍵盤和鼠標(biāo),比如我們最常進(jìn)行的上網(wǎng)。現(xiàn)在的網(wǎng)站幾乎都只考慮了鼠標(biāo)和鍵盤操作,這就導(dǎo)致在使用觸控方式訪問網(wǎng)站時會遇到操作障礙。從網(wǎng)站入手,重新制作兼容觸控操作的網(wǎng)頁是最徹底的解決方法,但實現(xiàn)難度比較大,因為網(wǎng)站數(shù)量是如此的多,而另一個解決方案則是從瀏覽器入手,通過改進(jìn)瀏覽器來解決上網(wǎng)過程中的觸控操作問題。作為目前全球市場占有率最高的瀏覽器,IE11針對觸控操作進(jìn)行了進(jìn)一步優(yōu)化,為其他瀏覽器廠商做出了很好的示范
在Modern風(fēng)格下IE11的觸控體驗
在Modern風(fēng)格界面下,微軟針對IE11瀏覽器做了很多觸控相關(guān)的優(yōu)化。針對最常見的“懸停展開”操作,IE11設(shè)計了懸停菜單,和現(xiàn)在一些鼠標(biāo)懸停顯示下級菜單的功能類似,當(dāng)訪問網(wǎng)頁時,用戶只需將手指按住菜單即可自動打開網(wǎng)站的下級菜單。同時, IE11上還改進(jìn)了頁面前進(jìn)和后退的方式。從IE10起,用戶在瀏覽網(wǎng)頁時可以直接通過手指在屏幕上向左/右掃動完成前進(jìn)或后退的操作。IE11繼承了這一手勢操作,并進(jìn)一步改善了用戶體驗和操作效率。當(dāng)用戶在不同頁面之間切換時,通過預(yù)渲染技術(shù),IE會將前一個頁面掛起并緩存到內(nèi)存中。一旦用戶輕掃回前一個頁面時,該頁面會從內(nèi)存中恢復(fù),而不是重新加載,使前一個頁面瞬間加載完成。此外,在后退或前進(jìn)時,IE11會在加載頁面時向用戶顯示一張網(wǎng)頁截圖,以便用戶在到達(dá)頁面時能夠快速找到所需內(nèi)容
而作為首個支持HTML5拖放和觸摸的瀏覽器,IE11還允許用戶直接在HTML5網(wǎng)頁上使用手指拖動頁面中的素材
IE推動觸控類休閑游戲的發(fā)展
除了瀏覽網(wǎng)頁,針對觸控進(jìn)行優(yōu)化的IE瀏覽器也成為了網(wǎng)頁游戲玩家們的福音。有了觸控的支持,用戶可以拋棄鍵盤和鼠標(biāo),享受更加自然流暢的游戲體驗。
作為去年的精品游戲之一,美輪美奐的視覺風(fēng)格令Contre Jour獨樹一幟。Contre Jour 由 Maksym (Max) Hryniv推出,首先在 iOS 上大獲追捧,因其創(chuàng)新的游戲設(shè)置、奇幻的藝術(shù)風(fēng)格以及動人的背景音樂而享譽世界。由于需要多點觸控的支持,在很長一段時間內(nèi)用戶只能通過應(yīng)用端進(jìn)行體驗。不過在支持多點觸控體驗的IE10推出之后,Contre Jour被開發(fā)人員從客戶端被搬到了瀏覽器上,而這個游戲也被認(rèn)為是IE瀏覽器與觸控操作的最佳結(jié)合
通過與Max以及網(wǎng)站開發(fā)機構(gòu)Clarity Consulting的合作,IE僅使用HTML5和JavaScript便將Contre Jour導(dǎo)入了瀏覽器。將Contre Jour成功導(dǎo)入網(wǎng)頁并實現(xiàn)觸控體驗的成功之舉,拓展了我們以往所認(rèn)知的可能性極限,它證明了瀏覽器作為一種可行平臺,已經(jīng)為促進(jìn)觸控網(wǎng)頁休閑游戲的發(fā)展做好了準(zhǔn)備。
多點觸控支持的實施是該游戲中為數(shù)不多的使用到特定于瀏覽器的代碼的地方之一。得益于IE10 對觸控事件監(jiān)聽器的內(nèi)置支持,遷移過程中對多點觸控的開發(fā)并不復(fù)雜。Contre Jour團隊表示:“IE對多點觸控的良好支持,對于開發(fā)人員而言是一件好事,你能夠簡單、高效的完成對于多點觸控的支持。因為這使得我們可以集中精力應(yīng)對項目中那些更具有挑戰(zhàn)性的部分。”
以下是與觸控事件監(jiān)聽器相關(guān)的代碼示例:
function inferInputModel() {
if (window.navigator.msPointerEnabled) {
return 'pointer';
} else if (window.ontouchstart !== undefined) {
return 'touch';
} else {
return 'unknown';
}
}
switch (inferInputModel()) {
case 'pointer':
element.addEventListener('MSPointerDown', msStart);
element.addEventListener('MSPointerOut', msStop);
document.addEventListener('MSPointerUp', msStop);
document.addEventListener('MSPointerCancel', msStop);
document.addEventListener('MSHoldVisual', preventDefault);
break;
case 'touch':
element.addEventListener('touchstart', touchStart);
document.addEventListener('touchend', touchStop);
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
default:
element.addEventListener('mousedown', mouseStart);
element.addEventListener('mouseout', mouseStop);
document.addEventListener('mouseup', mouseStop);
break;
}
從編碼的角度看,在遷移的過程中Contre Jour團隊花費了一些時間編寫主觸控模塊,該模塊包含特定于瀏覽器的觸控支持和觸控事件處理。該模塊跟蹤觸控事件(無論何種瀏覽器平臺)并將其送入游戲引擎進(jìn)行處理。此外,游戲元素可“訂閱”特定的觸控實例以通過觸控的“開始觸控”來接收通知,并且移動和結(jié)束觸控事件生命周期。這使得游戲中場景等元素能夠輕松地跨瀏覽器平臺對觸控事件作出響應(yīng)
Contre Jour其實可以看作是移動端休閑游戲遷移到網(wǎng)頁上的典型例子。在遷移的過程中能夠看出,對于開發(fā)者來說,利用IE的觸控特性,至少在觸控部分,并沒為開發(fā)者造成多大的麻煩。但達(dá)到的效果顯而易見,利用HTML5、JavaScript,再結(jié)合IE對于觸控的支持,現(xiàn)在用戶就能夠直接在IE瀏覽器上玩Contre Jour,而在過去,這可不是一件容易的事
無處不在的觸控
除了Contre Jour,IE瀏覽器還為觸控的應(yīng)用提供了大量的開發(fā)實例。由微軟IE團隊與育碧共同開發(fā)的網(wǎng)頁版《刺客信條:海盜傳奇》就很好地詮釋了IE11對于觸控的支持。在全3D的網(wǎng)頁體驗中,用戶可以通過觸控操作控制海盜船的舵輪,調(diào)整海盜船的方向,讓整個游戲體驗更加逼真和流暢。同時,游戲會自動檢測玩家的設(shè)備種類及輸入方式進(jìn)行調(diào)整以適應(yīng)屏幕,達(dá)到最佳的顯示效果
隨著觸控設(shè)備市場滲透率的不斷提升,開發(fā)者們在進(jìn)行網(wǎng)站開發(fā)的時候就需要考慮到對觸控的支持,所有的開發(fā)者都希望能夠創(chuàng)造一個交互、設(shè)計與內(nèi)容完美結(jié)合的網(wǎng)站,為用戶帶來更好的數(shù)字內(nèi)容呈現(xiàn)方式。而這其中對觸控體驗的支持就尤為重要。IE瀏覽器對于觸控的優(yōu)化,給開發(fā)者們提供了一個良好的平臺,幫助他們?yōu)橛脩魟?chuàng)造更加豐富和流暢的使用體驗。
關(guān)注我們
公眾號:china_tp
微信名稱:亞威資訊
顯示行業(yè)頂級新媒體
掃一掃即可關(guān)注我們