解決觸控實(shí)現(xiàn)懸停操作

隨著觸控技術(shù)和Windows 8的帶動(dòng)下，如今越來(lái)越多的PC開(kāi)始配備觸控屏，給傳統(tǒng)PC領(lǐng)域帶來(lái)了全新的交互體驗(yàn)觸控操作。但是目前有個(gè)略顯尷尬的問(wèn)題：除了專門(mén)針對(duì)觸控操作優(yōu) 化的Windows 8應(yīng)用外，大量傳統(tǒng)操作都是基于鍵盤(pán)和鼠標(biāo)的，比如說(shuō)我們最常進(jìn)行的上網(wǎng)。現(xiàn)在的網(wǎng)站幾乎都只考慮了鼠標(biāo)和鍵盤(pán)操作，這就導(dǎo)致在使用觸控方式訪問(wèn)網(wǎng)站時(shí)會(huì) 遇到操作障礙。從網(wǎng)站入手，重新制作兼容觸控操作的網(wǎng)頁(yè)是最徹底的解決方法，但實(shí)現(xiàn)難度比較大，因?yàn)榫W(wǎng)站數(shù)量是如此的多。另一個(gè)解決途徑就是從瀏覽器入 手，通過(guò)改進(jìn)瀏覽器來(lái)解決上網(wǎng)過(guò)程中的觸控操作問(wèn)題，這種方式相對(duì)容易實(shí)現(xiàn)，只要瀏覽器開(kāi)發(fā)商下功夫即可。

作為即將隨Windows 8.1一同發(fā)布的Internet Explorer 11，進(jìn)一步增強(qiáng)了對(duì)觸控操作的支持，在訪問(wèn)網(wǎng)頁(yè)時(shí)更加得心應(yīng)手。 那么IE11究竟做了哪些改進(jìn)呢？下面就一起來(lái)了解一下吧。。。

模擬鼠標(biāo)懸停操作

目前有很多網(wǎng)站都有懸停展開(kāi)的功能，比如各大電商網(wǎng)站，在商品分類區(qū)塊基本都采用這種形式。這樣商品分類就不會(huì)顯得太亂太臃腫，用戶也容易找到自己需要的商品。

最常見(jiàn)的網(wǎng)頁(yè)懸停展開(kāi)操作

但這種常見(jiàn)的懸停操作，想通過(guò)觸控操作來(lái)實(shí)現(xiàn)會(huì)遭遇識(shí)別問(wèn)題。鼠標(biāo)因?yàn)橛兄羔樀拇嬖冢W(wǎng)頁(yè)只要檢測(cè)到指針即可實(shí)現(xiàn)懸停展開(kāi)的操作，而觸控操作并沒(méi)有指針的 存在，直接把手指放上去的話，網(wǎng)頁(yè)只會(huì)識(shí)別為點(diǎn)擊。也許有人會(huì)想到按住的方式，但現(xiàn)實(shí)情況是：按住操作會(huì)被識(shí)別為打開(kāi)右鍵上下文關(guān)聯(lián)菜 單，而不是懸停。

IE11針對(duì)這個(gè)問(wèn)題做了改進(jìn)，讓按住也可以實(shí)現(xiàn)懸停操作，同時(shí)又保留了原有按住操作的打開(kāi)右鍵菜單功能。在IE11中訪問(wèn)上述網(wǎng)頁(yè)時(shí)，將手指 按住即可展開(kāi)二級(jí)菜單。同時(shí)，如果按住的位置本身含有可點(diǎn)擊操作(比如含超鏈接)，那么在屏幕下方會(huì)額外顯示右鍵上下文菜單命令欄(新窗 口打開(kāi)、復(fù)制鏈接等命令)。

通過(guò)觸控操作在幾個(gè)不同網(wǎng)站上操作懸停菜單

其他觸控操作改進(jìn)

改進(jìn)鏈接突出顯示

當(dāng)網(wǎng)頁(yè)上有較多鏈接存在的時(shí)候，通過(guò)觸控打開(kāi)某個(gè)鏈接需要防止點(diǎn)錯(cuò)。如果在點(diǎn)擊過(guò)程中有個(gè)較明顯的反饋提示，幫助用戶實(shí)時(shí)確認(rèn)所點(diǎn)擊鏈接的話，觸控操作無(wú)疑會(huì)更加準(zhǔn)確。

IE11現(xiàn)在就加入了這樣一個(gè)反饋提示，當(dāng)用戶通過(guò)觸控點(diǎn)擊鏈接的時(shí)候，該鏈接文字周?chē)鷷?huì)短暫顯示灰色背景，突出顯示用戶所點(diǎn)擊的對(duì)象。

鏈接突出顯示效果對(duì)比

左右輕掃實(shí)現(xiàn)后退和前進(jìn)操作

在瀏覽網(wǎng)頁(yè)的過(guò)程中，IE11(包括IE10)都會(huì)主動(dòng)隱藏所有功能欄從而以全屏方式顯示網(wǎng)頁(yè)，這種情況下用戶經(jīng)常會(huì)用到的后退操作就需要花費(fèi)額外的 步驟，先呼出地址欄，再點(diǎn)擊后退按鈕。經(jīng)常使用手機(jī)上網(wǎng)的應(yīng)該知道，很多手機(jī)瀏覽器都支持手勢(shì)操作實(shí)現(xiàn)后退和前進(jìn)，Windows 8也不例外。從IE10起，用戶在瀏覽網(wǎng)頁(yè)的時(shí)候直接手指在屏幕上向右掃動(dòng)即可返回到上一個(gè)頁(yè)面，向左掃動(dòng)則是前進(jìn)。

左右掃動(dòng)手勢(shì)實(shí)現(xiàn)前進(jìn)和后退

IE11繼承了這一手勢(shì)操作，并進(jìn)一步改善了用戶體驗(yàn)和操作效率。當(dāng)用戶在不同頁(yè)面之間切換時(shí)，IE11會(huì)將前一個(gè)頁(yè)面掛起并緩存到內(nèi)存中。一旦用戶輕掃 回前一個(gè)頁(yè)面時(shí)，該頁(yè)面會(huì)從內(nèi)存中恢復(fù)，而不是重新加載，這種方式帶來(lái)的結(jié)果就是前一個(gè)頁(yè)面瞬間加載完成。此外，在后退或前進(jìn)的時(shí)時(shí)候，IE11會(huì)在加載 頁(yè)面時(shí)向用戶顯示一張網(wǎng)頁(yè)截圖，以便用戶在到達(dá)頁(yè)面時(shí)能夠快速找到所需的內(nèi)容。

觸控實(shí)現(xiàn)HTML5拖放操作

也許HTML5距離大規(guī)模應(yīng)用還有不少路要走，但它畢竟是未來(lái)的趨勢(shì)。IE11當(dāng)然是要支持HTML5的，而且它還是支持通過(guò)觸控實(shí)現(xiàn)HTML5拖放功能的首個(gè)瀏覽器。在IE11里，用戶只需長(zhǎng)按即可實(shí)現(xiàn)。

在微軟的Magnetic Poetry測(cè)試演示里，IE10可以通過(guò)鼠標(biāo)來(lái)實(shí)現(xiàn)HTML5拖放操作，現(xiàn)在我們可以用IE11打開(kāi)這個(gè)演示，來(lái)體驗(yàn)觸控實(shí)現(xiàn)HTML5拖放操作。

Magnetic Poetry演示頁(yè)面

訪問(wèn)：Magnetic Poetry

改進(jìn)可實(shí)現(xiàn)指針事件的觸控API

指針事件是由微軟及其他瀏覽器廠商和W3C合作制定的一套標(biāo)準(zhǔn)，這個(gè)標(biāo)準(zhǔn)基于IE10引入的帶有供應(yīng)商前綴的API。這個(gè)API使網(wǎng)站能夠支持包括鼠標(biāo)、 手寫(xiě)筆、多點(diǎn)觸控等不同觸控設(shè)備。IE11會(huì)引入更新后的MSPointer API，最終正式版將支持不帶前綴的指針事件。

備注：文中部分技術(shù)說(shuō)明文字截圖以及視頻引自微軟官方博客。