手勢、操作以及互動 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]
您的應用程式可以透過觸控互動,以轉譯和使用實際手勢模擬 UI 元素的直接操作。
觸控互動會在使用者與畫面上的元素互動時,提供自然的真實世界體驗。相對地,透過物件的屬性視窗或其他對話方塊來與物件互動,則視為間接操作。 Windows 也支援跨輸入模式和裝置 (包括觸控、滑鼠及手寫筆) 的觸控互動。
Windows 執行階段平台 API 透過以下三種類型的互動事件支援使用者互動:指標、手勢以及操作。
- 指標事件是用來取得基本接觸點資訊 (例如位置和裝置類型) 和延伸資訊 (例如壓力和接觸點幾何),以及支援更複雜的互動。
- 手勢事件是用來處理靜態單指互動,例如點選和按住不放 (點兩下和右鍵點選均衍生自這些基本手勢)。
- 操作事件是用於動態多點觸控互動 (例如捏合和伸展) 和使用慣性和速度資料的互動 (例如移動瀏覽/捲動、縮放以及旋轉)。注意 操作事件所提供的資訊並不會識別互動。它會指定像位置、平移量以及速度等輸入資料。接著這個資料就可以用來判斷操作並執行互動。
如需詳細資訊,請參閱以下快速入門:
接下來,我們會說明手勢、操作及互動之間的關係。
手勢
手勢是在輸入裝置上或由輸入裝置 (手指、畫筆/手寫筆及滑鼠等) 所執行的實際動作。例如,若要在觸控或觸控板裝置上啟動、啟用或叫用命令,您會使用單指點選 (相當於按滑鼠左鍵、用手寫筆點選或按鍵盤上的 Enter 鍵)。
以下是用來操作 UI 及執行互動的一組基本觸控手勢。
名稱 | 類型 | 說明 |
---|---|---|
點選 | 靜態手勢 | 一根手指觸碰螢幕後提起手指。 |
長按 | 靜態手勢 | 一根手指觸碰螢幕後停在原地。 |
滑動 | 操作手勢 | 一或多根手指觸碰螢幕後,再往同一個方向移動。 |
撥動 | 操作手勢 | 一或多根手指觸碰螢幕後,再往同一個方向短距離移動。 |
轉動 | 操作手勢 | 二或多根手指輕觸螢幕後,往順時鐘或逆時鐘方向弧形移動。 |
捏合 | 操作手勢 | 二或多根手指觸碰螢幕後,再朝靠攏的方向移動。 |
伸展 | 操作手勢 | 二或多根手指觸碰螢幕後,再朝分開的方向移動。 |
操作
操作是物件或 UI 對手勢的立即、進行中反應或回應。例如,滑動和撥動手勢通常會造成元素或 UI 以某種方式移動。
操作的最終結果 (由畫面上的物件和 UI 來表現) 就是互動。
互動
互動取決於解譯操作的方式,以及操作所造成的命令或動作。例如,物件可以透過滑動和撥動手勢移動,但其結果會因是否超過距離閾值而不同。滑動可用來拖曳物件或移動瀏覽檢視,而撥動則可用來選取項目或顯示 AppBar。
本節將描述一些常見的互動方式。
學習
按住不放手勢會顯示詳細資訊或教學視覺效果 (例如工具提示或操作功能表),但不會導致認可動作或命令。在顯示視覺效果時開始滑動手勢,仍然可以進行移動瀏覽。如需詳細資訊,請參閱視覺化回饋的指導方針。
命令
點選手勢會叫用主要動作,例如啟動應用程式或執行命令。
移動瀏覽
滑動手勢主要用於移動瀏覽互動,但也可以用於移動、繪圖以及書寫。 移動瀏覽是一項觸控最佳化技術,可以在單一檢視內 (例如電腦的資料夾結構、文件庫或相簿) 的一些小型內容集合進行短距離的瀏覽。移動瀏覽相當於使用滑鼠或鍵盤進行捲動,只有當檢視中的內容量造成內容區域超出可檢視區域才有必要使用。如需詳細資訊,請參閱移動瀏覽的指導方針。
縮放
捏合和伸展手勢可用來進行三種互動:視覺化縮放、調整大小以及語意式縮放。
視覺化縮放和調整大小
視覺化縮放會調整整個內容區域的放大比例,以取得較詳細的內容檢視。相對地,調整大小則是會調整內容區域內一或多個物件的相對大小,但卻不會變更內容區域的檢視。這裡上方的兩個影像顯示視覺化縮放,下方的兩個影像則顯示,在不變更任何其他物件大小的情況下調整畫面上的矩形大小。如需詳細資訊,請參閱視覺化縮放和調整大小的指導方針。
語意式縮放
語意式縮放是一項觸控最佳化技術,可以在單一檢視內 (例如電腦的資料夾結構、文件庫或相簿) 呈現和瀏覽結構化資料或內容,而不需要移動瀏覽、捲動或是樹狀檢視控制項。語意式縮放可以為相同內容提供兩種不同的檢視:透過放大以查看較多的詳細資料,透過縮小以查看較少的詳細資料。如需詳細資訊,請參閱語意式縮放的指導方針。
旋轉
旋轉手勢會模擬在平面上旋轉一張紙的經驗。這個互動的執行方式是將兩根手指放在物件上,然後一根手指以另一根手指為中心,或是兩根手指圍繞某個中心點,然後將手朝想要的方向旋轉。您可以使用同一隻手的兩根手指,或是每隻手各一根手指。如需詳細資訊,請參閱旋轉的指導方針。
選取和移動
滑動和撥動手勢是用在交叉滑動操作中,這是一種與內容區域的移動瀏覽方向成垂直的移動。這種操作可解譯為選取,但如果超出距離閾值,就會解譯為移動 (拖曳) 互動。這張圖描述的就是這些程序。如需詳細資訊,請參閱交叉滑動的指導方針。
顯示命令列
撥動手勢可顯示各種命令列或登入畫面。
從螢幕的下邊緣或上邊緣撥動,即可顯示應用程式命令。請使用 AppBar 來顯示應用程式命令。
從右邊緣撥動,可以顯示系統命令,從左邊緣撥動,可以顯示最近使用過的應用程式,而從上邊緣向下邊緣撥動,則可以顯示停駐或關閉命令。
相關主題
概念
參考
範例 (DOM)
範例 (Windows 市集應用程式 API)
輸入:使用 GestureRecognizer 處理手勢與操作
範例 (DirectX)