手勢、操作以及互動 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

您的應用程式可以透過觸控互動,以轉譯和使用實際手勢模擬 UI 元素的直接操作。

觸控互動會在使用者與畫面上的元素互動時,提供自然的真實世界體驗。相對地,透過物件的屬性視窗或其他對話方塊來與物件互動,則視為間接操作。 Windows 也支援跨輸入模式和裝置 (包括觸控、滑鼠及手寫筆) 的觸控互動。

Windows 執行階段平台 API 透過以下三種類型的互動事件支援使用者互動:指標、手勢以及操作。

  • 指標事件是用來取得基本接觸點資訊 (例如位置和裝置類型) 和延伸資訊 (例如壓力和接觸點幾何),以及支援更複雜的互動。
  • 手勢事件是用來處理靜態單指互動,例如點選和按住不放 (點兩下和右鍵點選均衍生自這些基本手勢)。
  • 操作事件是用於動態多點觸控互動 (例如捏合和伸展) 和使用慣性和速度資料的互動 (例如移動瀏覽/捲動、縮放以及旋轉)。注意  操作事件所提供的資訊並不會識別互動。它會指定像位置、平移量以及速度等輸入資料。接著這個資料就可以用來判斷操作並執行互動。  

如需詳細資訊,請參閱以下快速入門:

接下來,我們會說明手勢、操作及互動之間的關係。

手勢

手勢是在輸入裝置上或由輸入裝置 (手指、畫筆/手寫筆及滑鼠等) 所執行的實際動作。例如,若要在觸控或觸控板裝置上啟動、啟用或叫用命令,您會使用單指點選 (相當於按滑鼠左鍵、用手寫筆點選或按鍵盤上的 Enter 鍵)。

以下是用來操作 UI 及執行互動的一組基本觸控手勢。

名稱 類型 說明
點選 靜態手勢 一根手指觸碰螢幕後提起手指。
長按 靜態手勢 一根手指觸碰螢幕後停在原地。
滑動 操作手勢 一或多根手指觸碰螢幕後,再往同一個方向移動。
撥動 操作手勢 一或多根手指觸碰螢幕後,再往同一個方向短距離移動。
轉動 操作手勢 二或多根手指輕觸螢幕後,往順時鐘或逆時鐘方向弧形移動。
捏合 操作手勢 二或多根手指觸碰螢幕後,再朝靠攏的方向移動。
伸展 操作手勢 二或多根手指觸碰螢幕後,再朝分開的方向移動。

 

操作

操作是物件或 UI 對手勢的立即、進行中反應或回應。例如,滑動和撥動手勢通常會造成元素或 UI 以某種方式移動。

操作的最終結果 (由畫面上的物件和 UI 來表現) 就是互動。

互動

互動取決於解譯操作的方式,以及操作所造成的命令或動作。例如,物件可以透過滑動和撥動手勢移動,但其結果會因是否超過距離閾值而不同。滑動可用來拖曳物件或移動瀏覽檢視,而撥動則可用來選取項目或顯示 AppBar

本節將描述一些常見的互動方式。

學習

按住不放手勢會顯示詳細資訊或教學視覺效果 (例如工具提示或操作功能表),但不會導致認可動作或命令。在顯示視覺效果時開始滑動手勢,仍然可以進行移動瀏覽。如需詳細資訊,請參閱視覺化回饋的指導方針

學習互動

命令

點選手勢會叫用主要動作,例如啟動應用程式或執行命令。

命令互動

移動瀏覽

滑動手勢主要用於移動瀏覽互動,但也可以用於移動、繪圖以及書寫。 移動瀏覽是一項觸控最佳化技術,可以在單一檢視內 (例如電腦的資料夾結構、文件庫或相簿) 的一些小型內容集合進行短距離的瀏覽。移動瀏覽相當於使用滑鼠或鍵盤進行捲動,只有當檢視中的內容量造成內容區域超出可檢視區域才有必要使用。如需詳細資訊,請參閱移動瀏覽的指導方針

移動瀏覽互動

縮放

捏合和伸展手勢可用來進行三種互動:視覺化縮放、調整大小以及語意式縮放。

視覺化縮放和調整大小

視覺化縮放會調整整個內容區域的放大比例,以取得較詳細的內容檢視。相對地,調整大小則是會調整內容區域內一或多個物件的相對大小,但卻不會變更內容區域的檢視。這裡上方的兩個影像顯示視覺化縮放,下方的兩個影像則顯示,在不變更任何其他物件大小的情況下調整畫面上的矩形大小。如需詳細資訊,請參閱視覺化縮放和調整大小的指導方針

視覺化縮放互動

調整大小互動

語意式縮放

語意式縮放是一項觸控最佳化技術,可以在單一檢視內 (例如電腦的資料夾結構、文件庫或相簿) 呈現和瀏覽結構化資料或內容,而不需要移動瀏覽、捲動或是樹狀檢視控制項。語意式縮放可以為相同內容提供兩種不同的檢視:透過放大以查看較多的詳細資料,透過縮小以查看較少的詳細資料。如需詳細資訊,請參閱語意式縮放的指導方針

語意式縮放互動

旋轉

旋轉手勢會模擬在平面上旋轉一張紙的經驗。這個互動的執行方式是將兩根手指放在物件上,然後一根手指以另一根手指為中心,或是兩根手指圍繞某個中心點,然後將手朝想要的方向旋轉。您可以使用同一隻手的兩根手指,或是每隻手各一根手指。如需詳細資訊,請參閱旋轉的指導方針

旋轉互動

選取和移動

滑動和撥動手勢是用在交叉滑動操作中,這是一種與內容區域的移動瀏覽方向成垂直的移動。這種操作可解譯為選取,但如果超出距離閾值,就會解譯為移動 (拖曳) 互動。這張圖描述的就是這些程序。如需詳細資訊,請參閱交叉滑動的指導方針

選取和拖放互動

顯示命令列

撥動手勢可顯示各種命令列或登入畫面。

從螢幕的下邊緣或上邊緣撥動,即可顯示應用程式命令。請使用 AppBar 來顯示應用程式命令。

顯示應用程式命令

從右邊緣撥動,可以顯示系統命令,從左邊緣撥動,可以顯示最近使用過的應用程式,而從上邊緣向下邊緣撥動,則可以顯示停駐或關閉命令。

顯示系統命令

相關主題

概念

回應使用者互動

觸控互動設計

參考

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input

範例 (DOM)

HTML 捲動、移動瀏覽和縮放範例

輸入:DOM 指標事件處理範例

輸入:可具現化手勢範例

範例 (Windows 市集應用程式 API)

輸入:使用 GestureRecognizer 處理手勢與操作

輸入:XAML 使用者輸入事件範例

XAML 捲動、移動瀏覽和縮放範例

範例 (DirectX)

DirectX 觸控輸入範例

輸入:操作和手勢 (C++) 範例