觸控
注意
此設計指南是針對 Windows 7 所建立，但尚未針對較新版本的 Windows進行更新。 大部分的指導方針仍適用主體，但簡報和範例不會反映 我們目前的設計指導方針。
所有 Microsoft Windows 應用程式都應該有絕佳的觸控體驗。 建立這類體驗比您想像的簡單。
觸控是指使用一或多個手指，透過裝置顯示器提供輸入，並與Windows和應用程式互動。 觸控優化應用程式具有 UI 和互動模型，其設計目的是要容納較大型、較不精確的觸控區域、觸控裝置的各種尺寸規格，以及使用者在使用觸控裝置時可能會採用的許多狀態和底框。
每個輸入裝置都有其優點。 鍵盤最適合用於文字輸入，並提供最少手部移動的命令。 滑鼠最適合用於有效率、精確的指標。 觸控最適合用於物件操作，並提供簡單的命令。 手寫筆最適合手寫和繪圖的手繪多邊形運算式。
Windows 8.1已針對觸控的回應性、精確度和便於使用進行優化，同時完全支援傳統輸入法 (，例如滑鼠、手寫筆和鍵盤) 。 傳統輸入模式所提供的速度、精確度和觸覺回饋對許多使用者很熟悉且更適合特定互動案例。
您可以在不同的主題中找到與滑鼠、手寫筆和協助工具相關的指導方針。
當您考慮應用程式的互動體驗時：
請勿假設如果 UI 適用于滑鼠，它也適用于觸控。 雖然良好的滑鼠支援是一個起點，但良好的觸控體驗有一些額外的需求。
請假設如果 UI 適用于手指，它也適用于手寫筆。 讓您的 app 可觸碰，也提供良好的手寫筆支援。 主要差異在於手指有模糊小費，因此需要較大的目標。
透過觸控，您可以直接操作物件和 UI，這可讓您更快速、更自然且吸引人的體驗。
提供絕佳的觸控體驗
您應該確保使用者可以使用觸控輸入有效率地執行重要且重要的工作。 不過，特定應用程式功能，例如文字或圖元操作，可能不適合觸控，而且可以保留給最適合的輸入裝置。
如果您沒有開發觸控應用程式的經驗，最好是藉由執行來學習。 取得觸控式電腦、將滑鼠和鍵盤放在一旁，並只使用手指與您的應用程式互動。 如果您有平板電腦，請實驗以不同的位置按住，例如在膝上、在桌上平平，或在您站立時放在您的雙手上。 請嘗試以直向和橫向方式加以使用。
最適合觸控互動的觸控優化應用程式通常是：
- 自然且直覺。 互動的設計目的是要對應使用者與真實世界中物件互動的方式。
- 較不具干擾性。 使用觸控是無訊息的，因此比鍵入或按一下更不分心。
- 可擕式。 觸控裝置較為精簡，因為許多工作都可以完成，而不需要鍵盤、滑鼠、手寫筆或觸控板。 它們也會更有彈性，因為不需要工作介面。
- 直接且吸引人。 觸控可讓您覺得您是直接在畫面上操作物件。
- 較不精確。 相較于滑鼠或手寫筆，使用者無法以觸控方式正確鎖定物件。
觸控提供自然、真實世界的互動風格。 直接操作和動畫可藉由為物件提供逼真的動態動作和意見反應，來完成此印象。 例如，請考慮使用卡片遊戲。 體驗不僅方便且容易使用手指拖曳卡片，體驗也會在您可以打錯、滑動和旋轉卡片時，採用吸引人的真實世界風格。就像您是實體牌組一樣。 當您嘗試移動無法移動的卡片時，最好有卡片抗拒但無法防止移動，並在放開時就地重設，以清楚指出動作已辨識但無法完成。
幸運的是，如果您的應用程式已妥善設計，則提供絕佳的觸控體驗很容易。 為此，設計良好的程式：
- 確保最重要的工作可以使用手指 (至少不涉及大量輸入或詳細的圖元操作) 的工作，有效率地執行。
- 使用大型控制項進行觸控。 一般控制項的大小下限為 23x23 圖元， (13x13 DLL) ，最常用的控制項至少為 40x40 圖元， (23x22 DLL) 。 為了避免沒有回應的行為，UI 元素應該至少有 5 個圖元 (3 個 DLL，) 兩者之間的空間。 對於其他控制項，請確定它們至少有 23x23 圖元 (13x13 DLU) 按一下目標，即使其靜態外觀較小也一樣。 請參閱標準控制項大小調整。
- 支援滑鼠輸入。 互動式控制項具有清楚、可見的能供性。 物件具有標準滑鼠互動的標準行為， (按一下滑鼠左鍵、按一下滑鼠右鍵、拖曳和暫留) 。
- 支援鍵盤輸入。 應用程式提供標準快速鍵指派，特別是針對也可以透過觸控手勢產生的導覽和編輯命令。
- 確保協助工具。 使用消費者介面自動化或 Microsoft Active Accessibility (MSAA) ，為輔助技術提供 UI 的程式設計存取。 應用程式會適當地回應方向、主題、地區設定和系統計量變更。
- 消除不必要的互動。 若要防止資料或系統存取遺失，請使用最安全且最安全的預設值。 如果安全性和安全性不是因素，應用程式會選取最可能或方便的選項。
- 提供滑鼠停留的觸控對等專案。 請勿依賴暫留作為執行動作的唯一方式。
- 確保手勢會立即生效。 在整個手勢中，將接觸點保持在使用者的手指底下，這可提供手勢直接對應至使用者動作的效果。
- 盡可能使用標準手勢。 自訂手勢僅適用于您應用程式唯一的互動。
- 確保不想要或破壞性的命令可以反轉或更正。 使用觸控時，較有可能發生意外的動作。
觸控輸入的指導方針
透過觸控，您的Windows應用程式可以使用實體手勢來模擬 UI 元素的直接操作。
設計已啟用觸控的應用程式時，請考慮下列最佳做法：
回應性對於建立感覺直接且吸引人的觸控體驗至關重要。 若要直接操作，手勢必須立即生效，而且物件的接觸點必須在整個手勢中順暢地停留在使用者的手指下。 觸控輸入的效果應該直接對應到使用者的動作，例如，如果使用者旋轉手指 90 度，物件也應該旋轉 90 度。 任何延隔、中斷回應、連絡人遺失或不正確的結果，都終結了直接操作以及品質的認知。
建立自然且直覺的觸控體驗時，一致性是不可或缺的。 一旦使用者瞭解標準手勢，他們預期該手勢在所有應用程式中都有相同的效果。 若要避免混淆和挫折，請勿將非標準意義指派給標準手勢。 請改用自訂手勢來進行程式特有的互動。
接下來，我們將描述Windows觸控語言，但在繼續進行之前，以下是基本觸控輸入字詞的簡短清單。
手勢
手勢是在輸入裝置上執行的實體動作或動作， (手指、手指、手寫筆、滑鼠等等) 。 例如，若要啟動、啟動或叫用命令，您可以使用單指點選來取得觸控或觸控板裝置， (相當於使用滑鼠按一下滑鼠、使用手寫筆點選，或在鍵盤) 上使用 Enter。
操作
操作是物件或 UI 對手勢的立即、即時反應或回應。 例如，投影片和撥動手勢通常會導致元素或 UI 以某種方式移動。
操作的最後一個結果，其如何由螢幕上的物件和 UI 中的物件顯示，就是互動。
互動
互動取決於操作的解譯方式，以及操作所產生的命令或動作。 例如，物件可以使用投影片和撥動手勢來移動，但結果會根據距離閾值是否交叉而有所不同。 投影片可用來拖曳物件或移動流覽檢視，而撥動可用來選取專案或顯示應用程式行。
Windows觸控語言
Windows提供一組簡潔的觸控互動，用於整個系統。 一致地套用此觸控語言，讓您的 app 對使用者已經知道的內容感到熟悉。 這可藉由讓您的 app 更容易學習和使用，來提升使用者信賴度。 若要深入瞭解觸控語言實作，請參閱手勢、操作和互動。
按住以學習
按住手勢會顯示詳細資訊或教學視覺效果 (，例如工具提示或操作功能表) ，而不認可動作或命令。 如果在顯示視覺效果時啟動滑動手勢，仍可移動流覽。
重要
在啟用水準和垂直移動流覽的情況下，您可以使用按下並按住選取範圍。
進入狀態：一或兩指接觸螢幕。
動作：沒有動作。
結束狀態：最後一個手指結束手勢。
效果：顯示詳細資訊。
按住手勢。
暫留
暫留是有用的互動，因為它可讓使用者在起始動作之前透過秘訣取得其他資訊。 查看這些秘訣可讓使用者感到更有信心，並減少錯誤。
可惜的是，觸控技術不支援暫留，因此使用者在使用手指時無法暫留。 此問題的簡單解決方案是充分利用暫留，但只利用不需要執行動作的方式。 實際上，這通常表示您也可以按一下動作，但不一定以完全相同的方式執行。
在此範例中，使用者可以將滑鼠暫留或按一下來查看今天的日期。
點選主要動作
點選項目會叫用其主要動作，例如啟動應用程式或執行命令。
進入狀態：與螢幕或觸控板接觸的一指，並在按下和按住互動的時間臨界值之前隨即增益。
動作：沒有動作。
結束狀態：手指向上結束手勢。
效果：啟動應用程式或執行命令。
點選手勢。
投影片到移動流覽
投影片主要用於移動流覽互動，但也可用於移動移動 (移動流覽限制為單向) 、繪圖或寫入。 投影片也可以用來以小型、密集的元素為目標，方法是清除 (將手指滑動到相關物件上，例如選項按鈕) 。
進入狀態：一或兩指接觸螢幕。
動作：拖曳，並讓任何其他手指彼此保持相同位置。
結束狀態：最後一個手指結束手勢。
效果：直接移動基礎物件，並在手指移動時立即移動。 請務必讓接觸點在整個手勢中保持手指底下。
移動流覽手勢。
撥動以選取、命令和移動
將手指滑動短距離，垂直于移動流覽方向 (移動流覽限制為單向) ，選取清單或方格中的物件。 選取物件時，顯示具有相關命令的應用程式行。
進入狀態：一或多個手指觸碰螢幕。
動作：在移動互動的距離閾值之前拖曳短距離和增益。
結束狀態：最後一個手指結束手勢。
效果：已選取或移動基礎物件，或顯示應用程式行。 請務必讓接觸點在整個手勢中保持手指底下。
撥動手勢。
捏合和伸展以進行縮放
捏合和延展手勢用於三種類型的互動：光學縮放、調整大小和語意式縮放。
光學縮放會調整整個內容區域的放大層級，以取得更詳細的內容檢視。 相反地，調整大小是調整內容區域內一或多個物件的相對大小，而不會將檢視變更為內容區域的技術。
語意式縮放是一種觸控優化技術，可在單一檢視內呈現和流覽結構化資料或內容， (例如電腦的資料夾結構、文件庫或相片簿) ，而不需要移動流覽、捲動或樹狀檢視控制項。 語意式縮放提供相同內容的兩個不同的檢視，可讓您在放大時看到更多詳細資料，以及縮小時較少詳細資料。
進入狀態：兩指同時與螢幕連絡。
動作：手指沿著軸移動 () 或 (捏合) 。
結束狀態：任何手指都結束手勢。
效果：直接放大或縮小基礎物件，並以手指分隔或接近軸的方式立即放大。 請務必讓接觸點在整個手勢中保持手指底下。
縮放手勢。
旋轉旋轉
使用兩或多個手指旋轉會導致物件旋轉。 旋轉裝置本身即可旋轉整個螢幕。
進入狀態：兩指同時與螢幕連絡。
動作：一或兩指繞著另一指旋轉，並垂直移動至兩者之間的線條。
結束狀態：任何手指都結束手勢。
效果：旋轉基礎物件與手指已旋轉的相同數量。 請務必讓接觸點在整個手勢中保持手指底下。
旋轉手勢。
旋轉僅適用于特定類型的物件，因此不會對應至系統Windows互動。
輪替通常是由不同人員以不同的方式完成。 有些使用者偏好在樞紐手指周圍旋轉一指，而其他人則偏好在迴圈動作中旋轉兩指。 大部分的人都會使用兩者的組合，其中一個手指會移動超過另一個手指。 雖然平滑旋轉到任何角度是最佳互動，但在許多內容中，例如相片檢視，最好在使用者放開之後，就接近 90 度旋轉。 在相片編輯中，您可以使用小型旋轉來使相片變直。
從邊緣撥動應用程式命令
從螢幕底部或頂端邊緣撥動手指，會顯示應用程式行中的應用程式命令。
進入狀態：一或多個手指觸碰邊框。
動作：將短距離拖曳到畫面並增益。
結束狀態：最後一個手指結束手勢。
效果：顯示應用程式行。
從邊緣手勢撥動。
開發人員：如需詳細資訊，請參閱 DIRECTMANIPULATION_CONFIGURATION 列舉。
控制使用方式
在這裡，我們會提供一些指導方針，以優化觸控使用量的控制項。
- 使用一般控制項。 最常見的控制項是設計來支援良好的觸控體驗。
- 選擇設計來支援觸控的自訂控制項。 您可能需要自訂控制項來支援程式的特殊體驗。 選擇下列自訂控制項：
- 大小可以夠大，以便輕鬆設定目標及操作。
- 在操作時，移動和回應真實世界物件移動和回應的方式，例如擁有動動和摩擦。
- 藉由允許使用者輕鬆地更正錯誤，即可提供。
- 按一下並拖曳時，會提供不透明度。 在目的地附近卸載的物件應該落在正確的位置。
- 當手指位於控制項上方時，有清楚的視覺回饋。
- 使用限制控制項。 清單和滑杆等限制控制項在設計以輕鬆觸控目標時，可能會比文字方塊等不受限制的控制項更好，因為它們可減少文字輸入的需求。
- 提供適當的預設值。 選取最安全 (，以防止資料或系統存取) 和預設最安全的選項遺失。 如果安全性和安全性不是因素，請選取最可能或方便的選項，藉此消除不必要的互動。
- 提供文字自動完成。 提供最可能值或最近輸入值的清單，讓文字輸入更容易。
- 對於使用多個選取專案的重要工作，如果標準多重選取清單通常使用，請改為提供使用核取方塊清單的選項。
控制項大小和觸控目標
由於指尖的大型介面區，太接近的小型控制項可能難以精確地鎖定目標。
一般規則是，23x23 圖元的控制項大小 (13x13 DLL) 是任何輸入裝置的良好最小互動式控制大小。 相反地，15x11 圖元的微調控制項太小，無法有效地搭配觸控使用。
請記住，最小大小實際上是以實體區域為基礎，而不是配置計量，例如圖元或 DLL。 研究指出使用手指進行效率、精確互動的最低目的地區域是 6x6 公釐 (公釐) 。 此區域會轉譯為版面配置計量，如下所示：
| 字型 | 公釐 | 相對圖元 | DLU |
|---|---|---|---|
| 9 點 Segoe UI | 6x6 | 23x23 | 13x13 |
| 8 點 Tahoma | 6x6 | 23x23 | 15x14 |
此外，研究顯示最小大小為 10x10 公釐， (大約 40x40 圖元) 可提供更佳的速度和精確度，而且對使用者更熟悉。 實際上，針對用於最重要或常用命令的命令按鈕，請使用這個較大的大小。
目標是沒有大型控制項，只是容易搭配觸控使用的控制項。
在此範例中，Microsoft Word針對最重要的命令使用大於 10x10 公釐的按鈕。
此版本的計算機會針對最常使用的命令使用大於 10x10 公釐的按鈕。
觸控目標沒有完美的大小。 不同大小適用于不同的情況。 發生嚴重後果的動作 (，例如刪除和關閉) 或常用動作，都應該使用大型觸控目標。 不常使用具有次要結果的動作可能會使用小型目標。
自訂控制項的目標大小指導方針
| 大小指導方針 | 描述 |
|---|---|
 |
7x7 公釐：建議的大小下限 如果觸控錯誤的目標可以在一或兩個手勢中或五秒內更正，則 7x7 公釐是良好的最小大小。 目標之間的填補與目標大小一樣重要。 |
 |
當精確度很重要時 關閉、刪除和其他嚴重後果的動作無法承受意外點選。 如果觸碰錯誤的目標需要兩個以上的手勢、五秒或主要內容變更來更正，請使用 9x9 mm 目標。 |
 |
當它不相符時 如果您發現自己想要符合需求，只要觸控錯誤的目標可以透過一個手勢更正，就可以使用 5x5 公釐目標。 在此情況下，在目標之間使用 2 公釐的邊框間距非常重要。 |
通用控制項的目標大小指導方針
針對一般控制項，請使用建議的控制項大小。 建議的控制項調整大小滿足 23x23 圖元 (13x13 DLU) 大小下限，除了核取方塊和選項按鈕之外， (文字寬度的核取方塊和選項按鈕可補償稍微) 、微調控制項 (無法與觸控搭配使用，但是多餘的) 和分隔器。
建議的控制項大小很容易觸碰。
對於用於最重要或常用命令的命令按鈕，請盡可能使用大小下限為 40x40 圖元， (23x22 DLL) 。 這麼做會產生更佳的速度和精確度，也讓使用者感覺更熟悉。
只要可行，請針對重要或常用命令使用較大的命令按鈕。
針對其他控制項：
使用較大的點選目標。 對於小型控制項，讓目標大小大於靜態可見的 UI 元素。 例如，16x16 圖元圖示按鈕可以有 23x23 圖元按一下目標按鈕，而文字元素的選取範圍矩形可以比文字寬 8 圖元，高 23 圖元。
正確：
不正確：
正確：
在正確的範例中，按一下目標大於靜態可見的 UI 元素。
使用備援點選目標。 如果該控制項具有備援功能，則按一下目標可接受小於最小大小。
例如，樹狀檢視控制項所使用的漸進式洩漏三角形只有 6x9 圖元，但其功能會與其相關聯的專案標籤重複。
樹狀檢視三角形太小而無法輕易接觸，但它們在功能上具有較大的關聯標籤是多餘的。
遵守系統計量。 不要硬式編碼大小。 如有必要，使用者可以變更系統計量或 DPI 以符合其需求。 不過，請將這視為最後一個方法，因為使用者通常不需要調整系統設定，才能使用 UI。
在此範例中，功能表高度的系統計量已變更。
編輯文字
編輯文字是使用手指時最具挑戰性的互動之一。 使用限制控制項、適當的預設值和自動完成，可消除或減少輸入文字的需求。 但是，如果您的應用程式牽涉到編輯文字，您可以使用觸控時，自動縮放輸入 UI 最多 150% 來讓使用者更具生產力。
例如，電子郵件程式可以正常觸控大小顯示 UI，但將輸入 UI 縮放為 150%，以撰寫訊息。
在此範例中，輸入 UI 會縮放為 150%。
控制項版面配置和間距
控制項之間的間距是讓控制項輕鬆觸控的重要因素。 使用手指做為指向裝置時，目標更快速但較不精確，導致使用者更頻繁地點選其預定的目標。 當互動式控制項非常接近，但實際上並未觸碰時，使用者可能會按一下控制項之間的非使用中空間。 因為按一下非作用中的空間沒有結果或視覺回饋，所以使用者通常不確定發生什麼問題。
根據所使用的輸入裝置動態調整間距。 這特別適用于暫時性 UI，例如功能表和飛出視窗。
在互動式控制項的目的地區域之間，提供至少 5 個圖元 (3 個 DLL) 空間。 如果小控制項太接近間距，使用者必須以精確度點選，以避免點選錯誤的物件。
使用控制項之間建議的垂直間距，讓群組內的控制項更容易區分。 例如，高 19 圖元的選項按鈕比建議大小下限 23 圖元還短。 當您有可用的垂直空間時，可以將額外的 4 圖元間距新增至標準 7 圖元，以達到與建議調整大小大致相同的效果。
正確：
較佳：
在較佳的範例中，選項按鈕之間的額外間距讓它們更容易區分。
在某些情況下，使用觸控時可能需要額外的間距，但在使用滑鼠或鍵盤時則不行。 在這種情況下，只有在使用觸控起始動作時，才使用更寬鬆的設計。
選擇將控制項放在最可能使用位置的版面配置。 盡可能將工作互動保留在小型區域內，並找出最接近可能使用的控制項位置。 避免長距離手部移動，特別是針對一般工作和拖曳。
請考慮目前的指標位置是最接近的目標，因此要取得。 因此，操作功能表充分利用配適法法，如同Microsoft Office所使用的迷你工具列一樣。
避免將小型控制項放在應用程式邊緣或顯示器附近。 靠近邊緣的小型目標很難觸控， (顯示邊框可能會干擾邊緣手勢) 。 若要確保控制項在視窗最大化時很容易設為目標，請至少將 23x23 圖元設為 23x23 圖元， (13x13 DLL) 或將它們放在視窗邊緣之外。
使用建議的間距。 建議的間距是易觸控的。 不過，如果您的 app 可以受益于較大的大小和間距，請考慮適當時建議的大小調整和間距。
在互動式控制項之間提供至少 5 圖元 (3 個 DLL) 空間。 這麼做可防止使用者在點選其預定目標之外時混淆。
請考慮在控制項群組內新增超過建議的垂直間距，例如命令連結、核取方塊和選項按鈕，以及群組之間的間距。 這麼做可讓它們更容易區分。
請考慮在使用觸控起始動作時，以動態方式新增建議的垂直間距。 這麼做可讓物件更容易區分，但在使用鍵盤或滑鼠時不需要更多空間。 將間距增加為正常大小的第三分之一或至少 8 圖元。
在此範例中，使用觸控顯示時，Windows 7 個工作列跳躍清單會比較寬鬆。
互動
使用正確的控制項只會讓您瞭解觸控優化應用程式的一部分，您也必須考慮這些控制項支援的整體互動模型。 以下是一些可協助您進行這項作業的指導方針。
讓暫留備援。 大部分觸控技術都不支援暫留，因此具有這類觸控螢幕的使用者無法執行任何需要暫留的工作。
對於需要文字輸入的應用程式，請透過下列方式來完全整合觸控式鍵盤功能 ：
- 為使用者輸入提供適當的預設值。
- 適當時提供自動完成建議。
注意
開發人員：如需整合觸控式鍵盤的詳細資訊，請參閱 ITextInputPanel。
如果您的程式有需要編輯文字的工作，允許使用者縮放內容 UI。 使用觸控時，請考慮自動縮放至 150%。
盡可能提供順暢、回應式的移動流覽和縮放。 在移動流覽或縮放之後快速重繪，以保持回應。 這麼做是讓直接操作感覺真正直接的必要動作。
在移動流覽或縮放期間，請確定連絡點會停留在整個手勢的手指下。 否則，移動流覽或縮放很難控制。
由於已記住手勢，因此請指派它們，這表示跨應用程式保持一致。 請勿為具有固定語意的手勢提供不同的意義。 請改用適當的應用程式特定手勢。
寬恕
直接操作可讓觸控自然、表達、有效率且吸引人。 不過，在有直接操作的情況下，可能會發生意外操作，因此需要有意識。
主動性是能夠輕鬆地反轉或更正不想要的動作。 您可以藉由提供復原、提供良好的視覺回饋、在常用命令和破壞性命令之間清楚區分實體，以及讓使用者輕鬆更正錯誤，來提供觸控體驗。 與敏感度相關聯的是防止意外的動作在第一個地方發生，您可以使用限制的控制項和確認來確認有非預期後果的動作或命令。
提供復原命令。 最好提供簡單的方法來復原所有命令，但您的應用程式可能會有一些無法復原其效果的命令。
只要可行，請向下提供良好的意見反應，但在手指向上之前不要採取動作。 這麼做可讓使用者在進行錯誤之前更正錯誤。
只要可行，可讓使用者輕鬆地更正錯誤。 如果動作對手指向上生效，可讓使用者在手指仍然關閉時滑動來更正錯誤。
只要可行，表示無法藉由阻止移動來執行直接操作。 允許移動發生，但是當放開物件以清楚指出動作已辨識，但無法完成時，物件就地重設為原狀。
在常用命令和破壞性命令之間有清楚的實體分隔。 否則，使用者可能會意外觸碰破壞性命令。 如果命令的效果很廣泛，而且無法輕易復原，或效果不會立即明顯，則命令會被視為破壞性。
針對有風險的動作或具有非預期後果的命令，確認命令。 針對此目的，請使用確認對話方塊。
請考慮確認使用者在使用觸控時通常會不小心執行的任何其他動作，以及未注意到或難以復原的動作。 一般而言，這些稱為常式確認，不建議根據使用者不常不小心使用滑鼠或鍵盤發出這類命令的假設。 若要防止不必要的確認，只有在命令是使用觸控起始時，才顯示這些確認。
使用者經常不小心使用觸控的互動，可接受例行確認。
開發人員：您可以使用 INPUT_MESSAGE_SOURCE API 區分滑鼠事件和觸控事件。