使用者互動自訂，從開始到完成 (HTML)

發行項
12/11/2015

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

Windows 市集應用程式支援的輸入裝置

您可以建立自訂使用者互動，使其不但簡單易懂又吸引人，同時還兼顧效率並在所有輸入裝置都保持一致。請依循這裡所述的指導方針、最佳做法以及範例，為您的 Windows 市集應用程式定義這些使用者經驗。

注意建議您盡可能使用平台控制項程式庫 (HTML 和 XAML)。這些程式庫中的控制項提供完整的 Windows 8.1 使用者互動體驗，包含標準互動、動畫物理效果、視覺化回饋及協助工具。如果您不需要自訂的互動支援，請使用這些內建控制項。

Windows 市集應用程式可以處理並回應來自各種來源 (包括觸控、觸控板、滑鼠、畫筆/手寫筆以及鍵盤) 的輸入。它們也可以處理來自各種輸入裝置模式 (例如觸控式鍵盤、滑鼠滾輪以及畫筆橡皮擦) 的輸入。當其他平台都將焦點放在觸控輸入時，您可以不受限制地建立所想要的 Windows 市集應用程式：在電腦、膝上型電腦、Tablet PC 以及幾乎現有任何尺寸規格之裝置 (還有尚未開發出來的) 上使用的消費性應用程式、生產力應用程式、創新的混合式應用程式。

如果您正在尋找有關平台控制項及其互動行為的詳細資訊，請參閱使用者互動，從開始到完成 (HTML)。

先決條件

這裡的指導方針、工作以及範例程式碼是專門針對使用 JavaScript 開發 Windows 市集應用程式。如果是使用 C++、C# 或 Visual Basic 的 Windows 市集應用程式版本，請參閱使用者互動自訂 (XAML)。

如果您是使用 JavaScript 開發 Windows 市集應用程式的新手，請仔細閱讀這些主題以熟悉這裡討論的技術。

使用 JavaScript 開發 Windows 市集應用程式

熟悉在使用 JavaScript 的 Windows 市集應用程式中，從 [開始] 畫面到 UI 配置及控制項的各項知識。
使用 JavaScript 建立您的第一個 Windows 市集應用程式

使用 JavaScript 搭配 HTML5 和階層式樣式表 (CSS) 來建置基本的 Windows 市集應用程式。

使用者互動範例

除了我們在下方參考的主題中所含的範例和程式碼片段之外，我們還會使用自訂使用者互動範例。這個範例示範如何在您的 Windows 市集應用程式中使用或調整各種互動功能和概念。這個範例包含自訂控制項、UI 協助工具及自訂互動適用的原則、建議以及實作詳細資料。看看我們如何將指導方針付諸實行！

以下是範例的簡短描述。

在這個範例中，我們會製作一個色彩混合器。它位於一個方形物件的表單中，這個物件接受來自觸控式螢幕、觸控板、滑鼠、畫筆/手寫筆或鍵盤的直接輸入。它會使用這項資料來指定 RGB 色彩和旋轉角度，也就是將這項資料轉譯成對應的紅色、綠色或藍色色階。

這個範例示範下列功能：

自訂控制項
使用者互動行為的基本自訂支援 (HTML 和 XAML)
自訂的手勢偵測、辨識以及處理

以下是一個線框圖，可讓您了解這個範例如何運作，以及範例所實作的使用者互動功能。

這個範例包含三個頁面 (從左到右)：首頁、第二頁 (包含支援 DOM 型旋轉的自訂控制項) 以及第三頁 (包含透過 Windows.UI.Input GestureRecognizer API 實作額外功能的自訂控制項)。

目前，這裡有一個概略的工作大綱，可協助您建置一個依循 Windows 市集應用程式中使用者互動最佳做法的應用程式。每個工作皆連結到 Windows 市集應用程式開發人員中心中對應的資訊。

如果您是 Windows 市集應用程式開發新手，或是不熟悉使用者互動、可用性以及協助工具，最好是檢閱每個步驟。您將會發現使用者互動開發的相關方面都聚集在一起。

規劃您的應用程式

在您開始設計和開發應用程式之前，請先規劃您的應用程式。花一些時間思考您的對象是誰，以及您的應用程式要支援什麼功能和活動。

請主要針對觸控互動來設計您 Windows 市集應用程式的 UI。觸控輸入與其他一般具像素精確性的輸入類型相比原本就不精確 (需要有一個輸入區)。使用觸控最佳化控制項連同一組指標型事件處理適用的平台互動 API，即可以少許的額外程式碼在各個裝置提供相同的功能。

	選擇最適合您應用程式及其內容的瀏覽模式。如需詳細資訊，請參閱瀏覽模式。在支援這個教學課程的使用者互動範例中，我們將從單層瀏覽範本開始著手。請下載範本並依照這裡的步驟進行試驗，或是直接進入主題並使用這個範本來開始設計和開發您自己的應用程式。
	Windows 市集應用程式 UI，從開始到完成 (HTML)。設計和配置 UI 元素與內容，例如應用程式視窗、飛出視窗、對話方塊以及應用程式列。我們使用指導方針、最佳做法及範例來協助您充分利用 Windows 8.1 的 UI 功能，以及建立直接易懂並與其他 Windows 市集應用程式一致的 UI。
	回應使用者互動。了解 Windows 市集應用程式支援的使用者互動平台、輸入來源 (包括觸控、觸控板、滑鼠、畫筆/手寫筆以及鍵盤)、模式 (觸控式鍵盤、滑鼠滾輪、畫筆橡皮擦等等) 以及互動。
	使用者如何與輸入裝置互動。比較一般互動以及它們如何與觸控、觸控板、滑鼠及鍵盤的手勢對應。

輸入裝置

雖然是針對觸控輸入進行最佳化，但是平台也完全支援這裡所列的其他輸入裝置。

	回應滑鼠互動。針對在指向與點選上要求精確的應用程式，請使用滑鼠互動。
	回應鍵盤互動。對於某些行動不便的人或認為使用鍵盤與應用程式互動較有效率的使用者來說，鍵盤是不可或缺的。
	回應畫筆和手寫筆互動。畫筆或手寫筆可以做為指標裝置，也可以做為繪圖裝置。它通常會與數位筆跡功能關聯。
	回應觸控板互動。觸控板結合了多點觸控輸入與指標裝置 (例如滑鼠) 的精確輸入。這樣的結合讓觸控板適用於 Windows 8.1 觸控最佳化 UI 以及較小目標的生產力應用程式和桌面環境兩者。

設計您的互動

遵循使用者互動的 Windows UX 指導時，請發揮您的創意。選擇您應用程式支援的輸入裝置，以及應用程式的回應方式。增強各種裝置上的使用者經驗、支援最廣泛的功能和喜好設定，以及吸引 Windows 市集中最龐大的潛在對象。這會讓您的應用程式盡可能成為可用、可攜及無障礙的應用程式。

這些使用者互動指導方針可協助您提供引人注目且在各種輸入模式下都保持一致的沈浸式互動體驗：

一般使用者互動的指導方針

建立在所有裝置都具有一致功能的使用者互動體驗。
交叉滑動的指導方針

支援透過撥動手勢進行選取，以及透過滑動手勢進行拖曳 (移動) 互動。
視覺化縮放和調整大小的指導方針

視覺化縮放可以讓使用者將內容區域內的內容檢視放大 (您是在內容區域本身使用它)，而調整大小則可以讓使用者變更一或多個物件的相對大小，卻不變更對該內容區域的檢視 (您是在內容區域內的物件上使用它)。
移動瀏覽的指導方針

請考量移動瀏覽和捲動如何協助使用者在單一檢視 (例如電腦的資料夾結構、文件庫或相簿) 內瀏覽。另外，也請查看使用者要如何才能瀏覽檢視區內水平或垂直方向容納不下的內容。
旋轉的指導方針

使用觸控或透過其他適用於滑鼠、畫筆/手寫筆或鍵盤的 UI 控制項，以圓形方向 (順時針或逆時針) 轉動來旋轉物件。
語意式縮放的指導方針

呈現和瀏覽單一檢視 (例如相簿、應用程式清單或通訊錄) 內的大量相關資料集或內容。
選取文字和影像的指導方針

提供內容選取 UI 和功能。
目標預測的指導方針

改善觸控準確度和信賴度來提升使用者對您應用程式的滿意度。
視覺化回饋的指導方針

協助使用者了解、學習及適應您的應用程式、系統和輸入裝置。透過指示互動成功、改善使用者的控制感受、激發使用者互動意願、轉送系統狀態以及減少錯誤，即可達到這個目的。視覺化回饋 (也稱為接觸點視覺效果或回饋 UI) 會顯示是否如預期偵測、解譯及處理某個互動。

處理使用者互動

在這裡，我們將探索您用來處理和回應使用者與應用程式之互動的選項。我們也會涵蓋使用者互動範例中所含 UI 和功能的一些詳細資料。

	快速入門：指標透過指標事件自訂使用者互動。
	快速入門：DOM 手勢與操作透過文件物件模型 (DOM) 事件自訂使用者互動。
	快速入門：靜態手勢快速入門：操作手勢透過 GestureRecognizer 自訂使用者互動。
	讓 UI 產生動畫效果使用平台動畫庫的動畫套件 (適用於指標事件或撥動手勢) 將 Windows 8 外觀及操作整合到您的 Windows 市集應用程式中，或使用階層式樣式表層級 3 (CSS3) 轉場、動畫及轉換來自訂動畫。
	實作鍵盤協助工具。許多視障或行動不便的使用者都是依賴鍵盤做為瀏覽應用程式 UI 及使用其功能的唯一方式。如果應用程式未能提供體貼的鍵盤功能操作，這些使用者將難以使用應用程式，或者根本無法使用。
	設計無障礙觸控事件。將指標事件連接到滑鼠按一下事件來設計無障礙觸控輸入。
	測試應用程式協助工具。使用 Windows 8 適用之 Windows 軟體開發套件 (SDK) 隨附的協助工具測試工具、Inspect 以及 UI 協助工具檢查程式 (AccChecker) 來協助您檢查應用程式的協助工具。如果想要在 Windows 市集中將您的應用程式宣告為無障礙應用程式，請先解決已啟用無障礙豐富網際網路應用程式 (Accessible Rich Internet Applications，ARIA) 網頁驗證功能之 AccChecker 回報的所有優先順序 1 錯誤。請記住：: 朗讀程式支援一組可瀏覽和閱讀應用程式內容的自訂觸控手勢 (本主題中有描述)。

總結

使用 Windows 應用程式認證套件來認證您的應用程式。

執行 Windows 應用程式認證套件來協助確保應用程式符合 Windows 市集需求。請在每次為應用程式新增主要功能之後執行這個動作。

大功告成！您的實作應該與使用者互動範例類似。

請坐下休息並享受您的成果。

想要更深入了解嗎？

規劃 Windows 市集應用程式

您想要為使用者提供哪種經驗？

協助工具設計

處理您使用者在各方面的能力、障礙以及喜好。

不同尺寸規格的設計

深入了解如何處理不同的裝置、輸入法以及螢幕方向。

UX 指導方針的索引

瀏覽完整的使用者經驗指導方針清單。

範例

DOM

Windows 市集應用程式 API

	選擇最適合您應用程式及其內容的瀏覽模式。如需詳細資訊，請參閱瀏覽模式。在支援這個教學課程的使用者互動範例中，我們將從單層瀏覽範本開始著手。請下載範本並依照這裡的步驟進行試驗，或是直接進入主題並使用這個範本來開始設計和開發您自己的應用程式。
	Windows 市集應用程式 UI，從開始到完成 (HTML)。設計和配置 UI 元素與內容，例如應用程式視窗、飛出視窗、對話方塊以及應用程式列。我們使用指導方針、最佳做法及範例來協助您充分利用 Windows 8.1 的 UI 功能，以及建立直接易懂並與其他 Windows 市集應用程式一致的 UI。
	回應使用者互動。了解 Windows 市集應用程式支援的使用者互動平台、輸入來源 (包括觸控、觸控板、滑鼠、畫筆/手寫筆以及鍵盤)、模式 (觸控式鍵盤、滑鼠滾輪、畫筆橡皮擦等等) 以及互動。
	使用者如何與輸入裝置互動。比較一般互動以及它們如何與觸控、觸控板、滑鼠及鍵盤的手勢對應。

	回應滑鼠互動。針對在指向與點選上要求精確的應用程式，請使用滑鼠互動。
	回應鍵盤互動。對於某些行動不便的人或認為使用鍵盤與應用程式互動較有效率的使用者來說，鍵盤是不可或缺的。
	回應畫筆和手寫筆互動。畫筆或手寫筆可以做為指標裝置，也可以做為繪圖裝置。它通常會與數位筆跡功能關聯。
	回應觸控板互動。觸控板結合了多點觸控輸入與指標裝置 (例如滑鼠) 的精確輸入。這樣的結合讓觸控板適用於 Windows 8.1 觸控最佳化 UI 以及較小目標的生產力應用程式和桌面環境兩者。

	快速入門：指標透過指標事件自訂使用者互動。
	快速入門：DOM 手勢與操作透過文件物件模型 (DOM) 事件自訂使用者互動。
	快速入門：靜態手勢快速入門：操作手勢透過 GestureRecognizer 自訂使用者互動。
	讓 UI 產生動畫效果使用平台動畫庫的動畫套件 (適用於指標事件或撥動手勢) 將 Windows 8 外觀及操作整合到您的 Windows 市集應用程式中，或使用階層式樣式表層級 3 (CSS3) 轉場、動畫及轉換來自訂動畫。
	實作鍵盤協助工具。許多視障或行動不便的使用者都是依賴鍵盤做為瀏覽應用程式 UI 及使用其功能的唯一方式。如果應用程式未能提供體貼的鍵盤功能操作，這些使用者將難以使用應用程式，或者根本無法使用。
	設計無障礙觸控事件。將指標事件連接到滑鼠按一下事件來設計無障礙觸控輸入。
	測試應用程式協助工具。使用 Windows 8 適用之 Windows 軟體開發套件 (SDK) 隨附的協助工具測試工具、Inspect 以及 UI 協助工具檢查程式 (AccChecker) 來協助您檢查應用程式的協助工具。如果想要在 Windows 市集中將您的應用程式宣告為無障礙應用程式，請先解決已啟用無障礙豐富網際網路應用程式 (Accessible Rich Internet Applications，ARIA) 網頁驗證功能之 AccChecker 回報的所有優先順序 1 錯誤。請記住：: 朗讀程式支援一組可瀏覽和閱讀應用程式內容的自訂觸控手勢 (本主題中有描述)。