萬盛學電腦網

 萬盛學電腦網 >> windows 8技巧 >> Win8.1中IE11的觸控體驗

Win8.1中IE11的觸控體驗

   解決觸控實現懸停操作

  隨著觸控技術和Windows 8的帶動下,如今越來越多的PC開始配備觸控屏,給傳統PC領域帶來了全新的交互體驗——觸控操作。但是目前有個略顯尴尬的問題:除了專門針對觸控操作優 化的Windows 8應用外,大量傳統操作都是基於鍵盤和鼠標的,比如說我們最常進行的上網。現在的網站幾乎都只考慮了鼠標和鍵盤操作,這就導致在使用觸控方式訪問網站時會 遇到操作障礙。從網站入手,重新制作兼容觸控操作的網頁是最徹底的解決方法,但實現難度比較大,因為網站數量是如此的多。另一個解決途徑就是從浏覽器入 手,通過改進浏覽器來解決上網過程中的觸控操作問題,這種方式相對容易實現,只要浏覽器開發商下功夫即可。

  作為即將隨Windows 8.1一同發布的Internet Explorer 11,進一步增強了對觸控操作的支持,在訪問網頁時更加得心應手。 那麼IE11究竟做了哪些改進呢?下面就一起來了解一下吧。。。

  模擬鼠標懸停操作

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

Win8.1中IE11的觸控體驗 三聯

  最常見的網頁懸停展開操作

  但這種常見的懸停操作,想通過觸控操作來實現會遭遇識別問題。鼠標因為有指針的存在,網頁只要檢測到指針即可實現懸停展開的操作,而觸控操作並沒有指針的 存在,直接把手指放上去的話,網頁只會識別為“點擊”。也許有人會想到“按住”的方式,但現實情況是:“按住”操作會被識別為“打開右鍵上下文關聯菜 單”,而不是懸停。

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

  通過觸控操作在幾個不同網站上操作懸停菜單

  其他觸控操作改進

  改進鏈接突出顯示

  當網頁上有較多鏈接存在的時候,通過觸控打開某個鏈接需要防止點錯。如果在“點擊”過程中有個較明顯的反饋提示,幫助用戶實時確認所點擊鏈接的話,觸控操作無疑會更加准確。

  IE11現在就加入了這樣一個反饋提示,當用戶通過觸控點擊鏈接的時候,該鏈接文字周圍會短暫顯示灰色背景,突出顯示用戶所點擊的對象。

更勝一籌?看Win8.1中IE11的觸控體驗

  鏈接突出顯示效果對比

  左右輕掃實現後退和前進操作

  在浏覽網頁的過程中,IE11(包括IE10)都會主動隱藏所有功能欄從而以全屏方式顯示網頁,這種情況下用戶經常會用到的“後退”操作就需要花費額外的 步驟,先呼出地址欄,再點擊後退按鈕。經常使用手機上網的應該知道,很多手機浏覽器都支持手勢操作實現後退和前進,Windows 8也不例外。從IE10起,用戶在浏覽網頁的時候直接手指在屏幕上向右掃動即可返回到上一個頁面,向左掃動則是前進。

更勝一籌?看Win8.1中IE11的觸控體驗

  左右掃動手勢實現前進和後退

  IE11繼承了這一手勢操作,並進一步改善了用戶體驗和操作效率。當用戶在不同頁面之間切換時,IE11會將前一個頁面掛起並緩存到內存中。一旦用戶輕掃 回前一個頁面時,該頁面會從內存中恢復,而不是重新加載,這種方式帶來的結果就是前一個頁面瞬間加載完成。此外,在後退或前進的時時候,IE11會在加載 頁面時向用戶顯示一張網頁截圖,以便用戶在到達頁面時能夠快速找到所需的內容。

  觸控實現HTML5拖放操作

  也許HTML5距離大規模應用還有不少路要走,但它畢竟是未來的趨勢。IE11當然是要支持HTML5的,而且它還是支持通過觸控實現HTML5拖放功能的首個浏覽器。在IE11裡,用戶只需長按即可實現。

  在微軟的Magnetic Poetry測試演示裡,IE10可以通過鼠標來實現HTML5拖放操作,現在我們可以用IE11打開這個演示,來體驗觸控實現HTML5拖放操作。

更勝一籌?看Win8.1中IE11的觸控體驗

  Magnetic Poetry演示頁面

  訪問:Magnetic Poetry

  改進可實現指針事件的觸控API

  指針事件是由微軟及其他浏覽器廠商和W3C合作制定的一套標准,這個標准基於IE10引入的帶有供應商前綴的API。這個API使網站能夠支持包括鼠標、 手寫筆、多點觸控等不同觸控設備。IE11會引入更新後的MSPointer API,最終正式版將支持不帶前綴的指針事件。

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

copyright © 萬盛學電腦網 all rights reserved