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

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

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

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

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

最常見的網(wǎng)頁懸停展開操作

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

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

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

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

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

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

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

鏈接突出顯示效果對比

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

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

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

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

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

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

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

Magnetic Poetry演示頁面

訪問：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)、 手寫筆、多點(diǎn)觸控等不同觸控設(shè)備。IE11會(huì)引入更新后的MSPointer API，最終正式版將支持不帶前綴的指針事件。

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