Windows 市集應用程式 UI，從開始到完成 (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
如何製作絕佳的使用者介面？什麼是您應用程式的最佳配置？讓應用程式易於透過直覺方式瀏覽的因素有哪些？
透過這些問題開始您應用程式開發的設計階段。接著了解如何實作設計。
我們將藉由指導方針、最佳做法以及範例，協助您充分利用 Windows 8.1 的 UI 功能。您可以定義應用程式的 UI，讓 UI 直接易懂、美觀並且與 Windows 市集應用程式保持一致。
.jpg "StumbleUpon 應用程式主頁面")
下列各節是可協助您設計應用程式 UI 的工作大綱。這些工作是依照 UX 指導方針中所述的最佳做法。
如果您是 Windows 市集應用程式開發新手，或是不熟悉應用程式配置、瀏覽、控制項以及命令，您可能會發現檢閱每個步驟相當有幫助。如果已經有一定程度的認識，請隨意瀏覽。我們已經將應用程式 UI 開發的相關層面都聚集在一起。這裡的指導方針、工作以及範例程式碼是專門針對使用 JavaScript 和 HTML 開發 Windows 市集應用程式。針對 C#/VB/C++ 和 XAML 版本，請參閱 Windows 市集應用程式 UI，從開始到完成 (XAML)。
範例
控制項與配置庫範例包含我們在這裡討論的所有 UI 元素。我們將會經常參考這個隨附範例，並為您指出當中實作特定功能的地方。
.png "控制項與配置程式碼庫範例")
範例應用程式是一個 Windows 市集應用程式控制項庫。使用這個範例，您便可以瀏覽控制項，以及瀏覽實作每個控制項的程式碼。您也可以看看我們如何在下列各節中實作每個步驟。
步驟 1：開始設定並思考內容與方向
開始設計和開發您的應用程式之前，務必先進行規劃。花點時間思考您應用程式的優點是什麼、對象是誰、您想要實作什麼樣的案例，以及您將支援哪些功能。如需有關如何規劃應用程式的詳細資訊，請參閱定義版本。
.jpg "開始圖示") |
從決定您應用程式要使用的瀏覽策略開始。在這個教學課程中，我們會從 [中樞] 範本開始。設計和開發應用程式的 UI 時，您可以下載範本，然後依照大綱來進行試驗。 如需詳細資訊，請參閱瀏覽模式和階層式瀏覽 (HTML)。 或者，如果您想要直接進入主題並探索程式碼，請直接跳到控制項與配置庫範例。 |
.jpg "步驟圖示") |
Windows 市集應用程式的內容與方向？了解 UI 配置的指導方針。 在這個範例中，我們將示範如何使用這項指導方針來設計應用程式。
|
步驟 2：選擇要新增的控制項
新增控制項和配置應用程式是同時進行的。您必須知道要新增哪些控制項，還必須在選擇控制項前先設計好配置。了解控制項的運作方式可以幫助您做正確的配置決定。
在這個教學課程中，我們要先看看個別的控制項。在步驟 3 中，您將了解如何在配置中排列這些控制項。如果您想先了解如何設計配置，可以直接跳到下一節，稍後再回來了解控制項。
請檢查範例程式碼，看看我們如何新增控制項庫中的每個控制項。
.jpg "步驟圖示") |
熟悉可用控制項的完整清單，以及每個控制項的用途，然後選擇您應用程式將會需要的控制項。 |
|
使用 HTML 控制項，例如按鈕、核取方塊以及下拉式清單。 |
|
使用 HTML 控制項 (例如 label、div、paragraph 以及 text area) 來顯示文字。 |
|
使用 HTML 控制項 (例如文字方塊、文字區域、密碼輸入方塊，以及 Rich Edit 方塊/RTF 方塊) 來輸入和編輯文字。 |
|
使用適用於 JavaScript 的 Windows Library 中的控制項，例如 ListView 控制項、評等控制項以及飛出視窗控制項。 |
步驟 3：建置配置
|
了解格線系統、標頭、邊界及間距，以及這些項目如何為使用者建立一致的體驗。 |
|
使用者可以將 app 的大小從最小寬度調整成全螢幕，並且能夠以不同的解析度和不同的方向，將 app 顯示在各種不同大小的螢幕上。您可以設計讓應用程式不論在任何大小都能保持美觀。 在這個範例中，我們使用預設的最小寬度 500 像素。 |
|
建立一個不論在任何大小都能保持美觀且運作良好的變動式 UI。 |
|
了解如何將應用程式的最小寬度從 500 像素變更為 320 像素，以及如何變更您的設計，讓應用程式在寬度變窄的情況下也能保持美觀且運作良好。了解如何設計讓水平移動瀏覽的應用程式在應用程式高度大於寬度時，隨時變更為垂直配置。 |
|
當顯示裝置的像素密度增加時，螢幕上物件的實體大小會變小。而當 UI 變得太小而無法觸控，以及文字變得太小而無法閱讀時，Windows 就會將系統與應用程式 UI 調整成某個縮放比例。了解如何確保您的應用程式在縮放後仍保持美觀。 |
步驟 4：選擇命令的放置位置和常用鍵的使用方式
|
了解命令的放置位置 (螢幕上、快顯視窗中、對話方塊中或應用程式列中)，並決定您應用程式的命令應放在哪裡。 |
|
了解群組命令和一致的放置方式、樣式及圖示，以及命令應用程式列和瀏覽應用程式列適用的其他重要指導方針。 在這個範例中，我們在頂端應用程式列實作一個首頁按鈕來協助瀏覽。 |
|
使用操作功能表來立即存取動作，例如 [剪下] 和 [貼上]。請讓操作功能表保持簡短並與選取項目相關。 |
|
了解使用應用程式內搜尋方塊控制項的時機和使用搜尋協定的時機。 |
|
如果您的應用程式有要分享的內容，它就是分享來源。如果您的應用程式可以接收其他應用程式的內容，則它是共用目標。 |
|
聰明規劃設定常用鍵的使用方式。讓設定保持簡單，且數量不要太多。了解 [設定] 窗格的正確設定。 |
|
了解何時及如何在 [設定] 窗格實作應用程式說明，以及了解何時該使用其他方法來提供說明，例如提示、示範或重新設計的 UI。 |
步驟 5：總結
.jpg "市集需求圖示") |
建議使用。執行認證套件可以協助您確保應用程式符合 Windows 市集需求，因此在您為應用程式新增主要功能後，應該執行這個動作。 |
.jpg "停止圖示") |
大功告成！ 您已考量 UX 指導方針並重新設計 UI，因此您的應用程式應該能夠反映出可為使用者提供絕佳體驗的最佳做法。 |
後續步驟
既然您已掌握基本知識，現在可以看看應用程式功能，從開始到完成系列中的一些其他範例。
想要更深入了解嗎？
瀏覽完整的使用者經驗指導方針清單。
依照從開始到完成的敘述，為您的應用程式設計使用者互動經驗。
如果您是 Windows 市集應用程式開發新手，並想要開始建立您的第一個應用程式，請依照這個教學課程系列進行。