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

  • 發行項

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

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

使用 Windows 市集應用程式平台控制項的內建互動行為來提供直接易懂又吸引人的使用者經驗，這些使用者經驗同時還能兼顧效率並在所有輸入裝置都保持一致。 請依循這裡所述的指導方針、最佳做法以及範例，為您的 Windows 市集應用程式定義這些使用者經驗。

平台控制項可以處理並回應來自各種來源 (包括觸控、觸控板、滑鼠、畫筆/手寫筆以及鍵盤) 的輸入。它們也可以處理來自各種輸入裝置模式 (例如觸控式鍵盤、滑鼠滾輪以及畫筆橡皮擦) 的輸入。

當其他作業系統都將焦點放在觸控輸入時，Windows 則是讓您無論使用哪一種輸入裝置，都可以建立所想要的應用程式：在電腦、膝上型電腦、Tablet PC 以及幾乎現有任何尺寸規格之裝置 (還有尚未開發出來的) 上使用的消費性應用程式、生產力應用程式、創新的混合式應用程式。

使用平台控制項，您將可支援最大範圍的功能和喜好設定，讓您的應用程式盡可能成為可用、可攜及無障礙的應用程式，並可吸引 Windows 市集中最大量的潛在用戶。

如果您正在尋找有關自訂互動行為的詳細資訊，請參閱使用者互動自訂，從開始到完成 (HTML)。

先決條件

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

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

使用者互動範例

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

以下是範例的簡短描述。

在這個範例中，我們會製作一個色彩混合器。它位於一個方形物件的表單中，這個物件透過該表單接受間接輸入，然後使用這項資料指定 RGB 色彩和旋轉角度，也就是將這項資料轉譯成對應的紅色、綠色或藍色色階。

這個範例示範下列功能：

  • 表單周遊
  • 內嵌的移動瀏覽/捲動行為
  • 觸控式鍵盤行為
  • 平台控制項和內建的使用者互動支援

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

範例應用程式的線框圖
這個範例包含兩個頁面 (從上到下)：首頁和第二頁，第二頁包含一個含有各種平台控制項和色彩混合器的表單。

 

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

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

規劃您的應用程式

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

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

開始圖示

選擇最適合您應用程式及其內容的瀏覽模式。如需詳細資訊，請參閱瀏覽模式。

在支援這個教學課程的使用者互動範例中，我們將從基本單層瀏覽範本開始著手。請下載範本並依照這裡的步驟進行試驗，或是直接進入主題並使用這個範本來開始設計和開發您自己的應用程式。
步驟圖示

Windows 市集應用程式 UI，從開始到完成 (HTML)。

設計和配置 UI 元素與內容，例如應用程式視窗、飛出視窗、對話方塊以及應用程式列。

我們使用指導方針、最佳做法及範例來協助您充分利用 Windows 8.1 的 UI 功能，以及建立直接易懂並與其他 Windows 市集應用程式一致的 UI。
步驟圖示

回應使用者互動。

了解 Windows 市集應用程式和 Windows 8 支援的使用者互動平台、輸入來源 (包括觸控、觸控板、滑鼠、畫筆/手寫筆以及鍵盤)、模式 (觸控式鍵盤、滑鼠滾輪、畫筆橡皮擦等等) 以及互動。
步驟圖示

使用者如何與輸入裝置互動。

比較一般互動以及它們如何與觸控、觸控板、滑鼠及鍵盤的手勢對應。

 

輸入裝置

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

步驟圖示

回應滑鼠互動。

滑鼠互動最適合要求精確指向與點選的應用程式。
步驟圖示

回應鍵盤互動。

對於某些行動不便的人或認為使用鍵盤與應用程式互動較有效率的使用者來說，鍵盤是不可或缺的。
步驟圖示

回應畫筆和手寫筆互動。

畫筆或手寫筆可以做為指標裝置，也可以做為繪圖裝置。它通常會與數位筆跡功能關聯。
步驟圖示

回應觸控板互動。

觸控板結合了多點觸控輸入與指標裝置 (例如滑鼠) 的精確輸入。這樣的結合讓觸控板適用於 Windows 8.1 觸控最佳化 UI 以及較小目標的生產力應用程式和桌面環境兩者。

 

設計您的互動

在這裡，我們將檢閱使用者互動範例中所含 UI 和功能的一些詳細資料。

這些詳細資料當中有些可能並不適用於您的應用程式。請視需要挑選。

步驟圖示

表單配置的指導方針。

設計可提供絕佳互動體驗且使用最少捲動的表單。 請考量在可能需要捲動的情況下使用者將如何填寫表單，以及要如何處理觸控式鍵盤與內置錯誤通知的外觀。
步驟圖示

文字輸入的指導方針

選擇正確的控制項：使用單行或多行文字輸入控制項的時機 (並提供所有您不知道的可行與禁止事項)。
步驟圖示

觸控式鍵盤和手寫面板的指導方針。

針對沒有硬體鍵盤或其他周邊鍵盤裝置的各種尺寸規格裝置，提供文字輸入支援。

當使用者點選可以編輯的輸入欄位時，會叫用觸控式鍵盤，並在輸入欄位失去焦點時關閉鍵盤。
步驟圖示 移動瀏覽的指導方針

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

測試應用程式協助工具。

使用 Windows 8 適用之 Windows 軟體開發套件 (SDK) 隨附的協助工具測試工具、Inspect 以及 UI 協助工具檢查程式 (AccChecker) 來協助您檢查應用程式的協助工具。

如果想要在 Windows 市集中將您的應用程式宣告為無障礙應用程式，您必須先解決已啟用無障礙豐富網際網路應用程式 (Accessible Rich Internet Applications，ARIA) 網頁驗證功能之 AccChecker 回報的所有優先順序 1 錯誤。

請記住：:  朗讀程式支援一組可瀏覽和閱讀應用程式內容的自訂觸控手勢 (本主題中有描述)。

 

處理使用者互動

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

步驟圖示

快速入門：新增 HTML 控制項和處理事件

大多數應用程式都需要控制項，例如按鈕、核取方塊以及下拉式清單。這個範例包含一個表單，該表單含有可設定靜態色彩混合器相關屬性的各種控制項。
步驟圖示

顯示和編輯文字

將文字輸入控制項新增到您的 Windows 市集應用程式。
步驟圖示

觸控式鍵盤

叫用和關閉觸控式鍵盤。
步驟圖示

實作鍵盤協助工具。

許多視障或行動不便的使用者都是依賴鍵盤做為瀏覽應用程式 UI 及使用其功能的唯一方式。如果應用程式未能提供體貼的鍵盤功能操作，這些使用者將難以使用應用程式，或者根本無法使用。

 

總結

市集需求圖示

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

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

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

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

 

想要更深入了解嗎？

規劃 Windows 市集應用程式

深入了解您想要提供給使用者的體驗。

協助工具設計

深入了解使用者在各方面的能力、障礙以及喜好。

不同尺寸規格的設計

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

UX 指導方針的索引

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

範例