在 Microsoft 設計團隊中，我們建立應用程式的程序包含五個不同階段：概念、結構、動態、視覺化以及原型。 我們鼓勵您採用類似的程序，享受開發的樂趣，為全球使用者打造前所未有的全新體驗。
注意
建議開發者在創建新專案時，考慮使用 Windows App SDK 和 WinUI 而非 UWP。 詳情請參閱 Migrate from UWP to the Windows App SDK。
概念
聚焦你的應用程式
在規劃你的 Universal Windows Platform （UWP） 應用程式時，你不僅應該確定應用程式的功能和服務對象，還要知道你的應用程式在哪些方面表現優異。 每個出色應用程式的核心，都是一種具有紮實基礎的強大概念。
假設您要建立一個相片應用程式。 仔細思考使用者使用、儲存及分享相片的原因，您會發現他們想要回味記憶、透過相片與他人連繫，以及妥善保存相片。 這些重點將是您希望應用程式具備的強項，而您使用這些經驗目標引導您完成其餘的設計程序。
您的應用程式是做什麼的？ 先從整體的概念開始，然後列出要透過應用程式幫助使用者達成的所有事項。
例如，假設要建立可協助使用者規劃旅行的應用程式。 以下是一些您可能會在餐巾紙上隨意勾勒的創意：
- 準備好旅程中所有地點的地圖，旅行時隨身攜帶。
- 了解在您所在的城市正在舉行的特殊活動。
- 讓同伴自己列出必做活動與必訪景點清單，然後彼此分享。
- 讓同伴整理所有相片，並與親朋好友分享。
- 根據機票價格取得建議的目的地。
- 找出目的地附近的餐廳、商店及活動的綜合優惠方案清單。
應用程式的強項是什麼？ 退一步，看看您的概念清單，看看是否有特定情境特別吸引您。 挑戰自己將清單縮減至僅留一個情境作為重點。 在這個過程中，您可能會捨棄許多不錯的點子，但是對它們說「不」對於打造出一個出色的情境是至關重要的。
在您選定某一個方案之後，接著要決定如何只以一句話，向一般使用者說明應用程式的強項。 例如：
- 我的旅遊應用程式特別適合用來讓朋友們一起規劃團體旅行。
- 我的體能訓練應用程式特別適合用來讓朋友們一起追蹤訓練進度，並分享彼此的成果。
- 我的日常用品應用程式特別適合用來讓家人們協調每週的雜貨購物清單，不會遺漏或重複採買。
這就是應用程式的「強項」說明，而且此說明可在建立應用程式時，引導您做出許多設計決策與權衡決定。 請著重在您想讓應用程式使用者體驗的方案，並小心不要將這方案變成一份功能清單。 這些應該是使用者能夠完成的事項，而不是應用程式能夠提供的功能。
設計漏斗
想到一個喜歡的點子後，就去開發它是很誘人的，您可能甚至會將它推進到相當深入的生產階段。 假設我們這樣做，然後又有另一個有趣的想法浮現。 無論兩個想法的相對優點為何，您還是會很自然的想要堅持採用先前已經著手投入的想法。 如果您能在流程較早的階段就想到那個想法，那該多好！ 設計漏斗就是一個協助您盡早發現最佳想法的技巧。
「漏斗」一詞源自於其形狀。 在漏斗較寬的一端，會有許多想法由此進入，且每個想法都實現為一個低保真設計物，也許是草圖或是一段文字。 當這些想法經過過程朝著漏斗狹窄的一端推進時，想法的數量逐漸減少，而代表這些想法的作品的精確度則不斷提高。 每個成品應僅擷取判斷每個想法所需的資訊，或是回答特定問題，像是「這可行嗎？或是直覺式嗎？」。 請不要在每件事情上花比這更多的時間和精力。 在測試過程中，一些想法會被淘汰，這一點你可以接受，因為你對這些想法的投入不會超過必要的判斷需求。 倖存的想法會往漏斗另一端繼續移動，並依序接受高畫質處理。 最後，您將會獲得一個代表最後勝出想法的設計成品。 這個想法勝出，是因為其優點，而不是因為這個想法是第一個想出來的點子。 您將會設計出最佳的應用程式。
結構
有條理讓一切變得更簡單
一旦您滿意自己的概念後，就可以進行下一個階段 — 建立您的應用程式藍圖。 資訊架構 (IA) 可以提供內容所需的結構完整性。 這會協助您定義應用程式的瀏覽模型，以及應用程式的最終身分識別。 透過規劃內容組織的方式 (以及使用者探索內容的方式)，您可以更了解您的應用程式在使用者眼中的樣子。
良好的資訊架構不僅有助於擬定使用情景，也能協助您想像關鍵的開始畫面。 例如，Audible 應用程式直接啟動一個樞紐，提供使用者的資料庫、商店、新聞和統計資料。體驗聚焦，讓使用者能快速取得並享受有聲書。 較深的應用程式層級著重在更具體的工作上。
相關指引請參見 導航設計基礎。
Dynamics
執行你的概念
如果概念階段是關於定義應用程式的目的，則動態階段就是執行該目的。 這可以透過許多方式完成，像是使用線框來畫出頁面流程的草圖 (從應用程式中的一處移到另一處的方式，以完成其目標)，以及思考應用程式 UI 中使用的語言表達方式和用字。 線框是一個快速且低畫質的工具，可協助您針對應用程式的使用者流程做出關鍵的決策。
您的應用程式流程應與您的「擅長的領域」說明緊密結合，而且應協助使用者達成您所希望突顯的單一情境。 出色的應用程式必須具備容易上手且需要經歷最少的流程。 開始從螢幕到螢幕的角度進行思考，就像您第一次使用這款應用程式時那樣來看待您的應用程式。 當您為您建立的頁面確定使用情景後，就可以為使用者提供他們確切需要的功能，省去許多不必要的螢幕觸控。 Dynamics 也關乎動態。 正確的動作功能可以決定從一個頁面切換到下一個畫面之間的流暢度與簡易度。
在這個步驟中，常用的技術包括：
- 概述說明流程：第一步做什麼，接下來要做什麼？
- 繪製流程分鏡腳本：使用者應如何在您的 UI 中進行操作以完成流程？
- 製作原型：使用快速打造的原型來試驗流程。
使用者應該能做的事？ 例如，旅遊應用程式「在幫助朋友們協作制定團體旅行的行程方面表現優異」。我們來列出我們想實現的流程：
- 利用一般資訊建立旅行計劃。
- 邀請朋友加入旅行。
- 參加朋友的旅行。
- 查看其他旅行者建議的行程。
- 新增旅行的目的地與活動。
- 針對朋友新增的目的地與活動進行編輯和提供意見。
- 與親朋好友分享行程。
視覺效果
無言而語
建立應用程式的動態之後，您可以透過適當的視覺修飾讓應用程式更為出色。 優秀的視覺化不只決定應用程式的外觀，更可以決定其風格，並透過動畫和動作使其栩栩如生。 您選擇的色板、圖示和圖檔只是視覺語言範例的一小部分。
所有應用程式都有其獨特的身分識別，所以請探索您的應用程式可採用的視覺方向。 讓內容引導外觀與風格，切勿讓外觀主宰內容。
原型
精煉你的傑作
原型製作是 設計漏斗中的一個階段——我們之前談過的技術——在此階段，代表你想法的產物會發展成超越草圖、但比完整應用程式簡單的東西。 原型可能是一系列手繪畫面的流程，呈現給使用者觀看。 執行測試的人員會透過放置不同的畫面，或是在頁面上放置或取消放置小型 UI 來回應使用者的提示，以模擬執行中的應用程式。 或者，原型可能是用來模擬一些工作流程的簡易應用程式，操作者必須依照指令操作，按下正確的按鈕。 在這個階段，您的想法開始真正活躍起來，而您的努力將會被認真檢驗。 製作應用程式每個區域的原型時，請多花點時間精雕細琢應用程式中最重要的元件。
對新的開發人員，我們需要再三強調：製作絕佳的應用程式是反覆進行的程序。 建議您及早並經常製作原型。 如同絞盡腦汁發揮創意一樣，最好的應用程式是經過不斷的嘗試與錯誤之後所淬鍊而出的成果。
決定要包含的功能
當您知道使用者的需求以及如何協助他們達成目標後，接著您可以瞧瞧工具箱中的特定工具。 探索 Universal Windows Platform （UWP），並將功能與應用程式需求連結。 務必遵守每個功能的 使用者體驗（UX）指引 。
常用技巧：
- 平台研究：找出該平台提供哪些功能以及能夠如何加以利用。
- 關係圖：連結流程與功能。
- 製作原型：實際應用這些功能，以確定是否符合您的需求。
應用程式合約 你的應用程式可以參與應用程式合約，實現廣泛的跨應用、跨功能使用者流程。
- 分享 讓你的用戶透過其他應用程式分享你應用程式的內容，也能接收來自其他人和應用程式的可分享內容。
- Play To 讓使用者享受從應用程式串流到家中其他裝置的音訊、影片或影像。
- 檔案選擇器及其擴充功能 讓使用者從本地檔案系統、連接的儲存裝置、HomeGroup，甚至其他應用程式載入並儲存檔案。 您也可以提供檔案選擇器延伸模組，讓其他應用程式可以載入您應用程式的內容。
更多資訊請參閱 應用程式合約與延長。
不同的視圖、外形規格與硬體配置 Windows讓使用者主導操作，並讓您的應用程式成為焦點。 您一定希望您的應用程式 UI 無論在使用者決定使用的任何裝置、使用任何輸入模式、任何方向、任何硬體設定，以及任何環境中都能有出色的表現。
Touch first Windows 提供獨特且獨特的觸控體驗，不僅僅是模擬滑鼠的功能。
例如，語意式縮放功能是瀏覽大量內容的最佳觸控方式。 使用者可以移動瀏覽或捲動瀏覽內容類別，然後拉近那些類別，以檢視更多詳細資訊。 您可以使用此功能，以比傳統使用索引標籤的導航和佈局模式更具觸覺、視覺效果更佳，且資訊更加豐富的方式來展示您的內容。
當然，您也可以利用一些觸控互動功能，例如旋轉、移動瀏覽、撥動等等。 了解更多關於 Touch 及其他使用者互動的資訊。
引人入勝且新鮮 確保你的應用程式感覺新鮮，並以以下標準體驗吸引使用者：
- 動畫 利用我們的動畫庫，讓您的應用程式對使用者來說快速且流暢。 協助使用者了解內容變更，並將視覺轉換和使用者經驗緊密結合。 了解更多關於 動畫化你的 UI 資訊。
- 吐司通知 透過吐司通知讓用戶知道有時間敏感或個人相關的內容，即使應用程式關閉，也能邀請他們回來。 了解更多關於 磚、徽章和快閃通知的資訊。
- 應用程式磁貼 提供新鮮且相關的更新，吸引用戶回流使用你的應用程式。 下一節會有更多詳細資訊。 了解更多關於 應用程式磁貼的資訊。
個性化
- 場景設定 讓使用者透過儲存應用程式設定來創造他們想要的體驗。 將所有設定合併在一個畫面，然後讓使用者透過他們已經熟悉的常用機制來設定您的應用程式。 了解更多關於 新增應用程式設定的資訊。
- User tiles 透過載入使用者圖塊圖片，讓你的應用程式對使用者更具個人色彩，或讓使用者在整個Windows中將應用程式內容設為個人圖塊。
裝置功能 務必讓您的應用程式充分發揮現今裝置的功能。
- 接近手勢 讓你的使用者與物理距離很近的其他使用者連接設備（例如，多人遊戲），方法是將設備實體相互碰觸。 了解更多關於 接近與觸控的資訊。
- 攝影機與外部儲存裝置 將使用者連接到內建或插電的攝影機，以便聊天和會議、錄製 vlog、拍攝個人頭像、記錄周遭世界，或是你應用程式擅長的其他活動。 了解更多關於 存取可移除儲存內容的資訊。
- 加速度計與其他感測器 現今的裝置配備了多種感測器。 您的應用程式可以根據環境光線將顯示器變暗或變亮，使用者旋轉顯示器時重新排列 UI，或是回應任何實體的移動。 了解更多關於 感測器的資訊。
- 地理定位 利用標準網路資料或地理定位感測器的地理定位資訊，幫助使用者移動、在地圖上定位，或接收附近人物、活動與目的地的通知。 了解更多關於 地理定位的資訊。
現在讓我們再次考慮旅遊應用程式這個範例。 為了充分發揮讓朋友們一起規劃團體旅行的作用，您可以使用其中的某些功能，以下列出幾項：
- 分享：使用者可在多個社交網路分享即將到來的旅行與規劃的行程，與親朋好友分享行前的興奮心情。
- 搜尋：使用者可從他人分享或公開的旅程中，搜尋後找出能夠納入自己旅行計劃的活動或目的地。
- 通知：當同伴更新旅遊計劃時，使用者會收到通知。
- 設定：使用者根據個人喜好自行設定應用程式，例如哪一個旅行計劃要顯示通知，或是允許哪些社團搜尋使用者的旅遊行程。
- 語意式縮放：使用者可瀏覽旅遊行程的時間表，然後拉近查看一長串活動規劃清單的更詳細資訊。
- 使用者磚：使用者可選擇與好友分享旅行時要顯示的圖片。
決定應用程式的獲利方式
您有許多種方式可從您的應用程式獲利。 如果您決定使用應用程式內廣告或銷售，就需要設計可支援該性能的 UI。 欲了解更多資訊，請參閱「 變現計畫」。
設計應用程式的 UX
這是關於做好基本功。 既然您知道應用程式的強項，也已經找出要支援的流程，您就可以開始思考使用者體驗 (UX) 設計的基本功能。
您應該如何安排 UI 內容？ 大部分的應用程式內容都可以歸類成數種形式的群組或階層。 您選擇的最高層內容分組應該與您擅長的領域說明相符。
舉例來說，使用旅遊應用程式時，有多種方式可將旅遊行程分組。 如果應用程式的特色是發現有趣的目的地，您就可以根據不同的興趣進行分組，例如探險、夏日活動或浪漫假期。 但因為應用程式最大的特點是與朋友一起規劃旅程，所以根據家人、朋友或同事等社交圈來規劃行程會更有意義。
選擇要將內容分組的方式，可協助您決定應用程式中需要哪些頁面或檢視。 如需詳細資訊，請參閱 UI 基本知識。
您應該如何呈現 UI 內容？ 決定如何安排 UI 之後，您可以定義指定 UI 建置方式及向使用者呈現方式的 UX 目標。 無論在任何案例，您都要確保使用者能夠快速地繼續使用和享用您的應用程式。 若要這樣做，請先決定需要最先呈現的 UI 部分，確定這些部分完成後，再花時間建置非關鍵部分。
在旅遊應用程式中，使用者想在應用程式中做的第一件事，可能是尋找特定旅遊行程。 為了盡快呈現這些資訊，你應該先用 ListView 控制項顯示行程清單。
顯示旅遊清單之後，您就可以開始載入其他功能，例如朋友旅遊的新聞摘要。
您需要哪些 UI 表面與命令？ 檢閱您先前指出的流程。 針對每個流程，建立使用者需採取步驟的概略說明。
讓我們看看「與親朋好友分享旅程」這個流程。 假設使用者已經建立旅行計劃。 分享旅遊行程需要下列步驟：
- 使用者開啟應用程式，然後查看已建立的旅行計劃清單。
- 使用者點選想要分享的旅程。
- 螢幕上顯示該旅行計劃的詳細資訊。
- 使用者存取一些 UI 來發起分享。
- 使用者選取或輸入她想要分享旅行計劃的朋友的電子郵件地址或名稱。
- 使用者開啟某個 UI 來完成分享。
- 您的應用程式依據要與其分享旅行計劃的人員清單，更新旅行計劃的詳細資料。
進行此程序時，您可以開始看看需要建立哪些 UI，以及了解還需要哪些其他詳細資料 (例如為尚未使用您應用程式的好友草擬標準電子郵件範本)。 您也可以開始刪除不必要的步驟。 例如，使用者在分享旅行計劃之前，也許不必查看詳細資料。 流動越順暢，使用起來就越方便。
想了解如何使用不同表面，請參考 。
流程的感覺應該怎麼樣？ 當您定義使用者將會採取的步驟時，您可以將該流程轉變效能目標。 欲了解更多資訊，請參閱 績效計畫。
您應該如何安排命令？ 使用流程步驟的概略說明，識別可能需要設計的命令。 然後思考要在應用程式的什麼地方放置那些命令。
請始終盡力使用內容。 盡可能讓使用者在應用程式的畫布上直接操作內容，不要新增用來處理內容的命令。 例如，在旅遊應用程式中，讓使用者在畫布上拖放清單中的活動來重新安排旅遊行程，而不是選取某個活動，然後使用 [上移] 或 [下移] 命令按鈕。
如果您無法使用內容。 如果無法使用內容，請將命令放置在其中一個 UI 表面上：
決定如何在每個檢視中配置您的應用程式。 Windows 支援橫向與直向，並支援將應用程式調整至任意寬度，從全螢幕到最小寬度皆可。 您希望應用程式在任何大小、任何螢幕以及任何方向都能相當美觀且運作順暢。 這表示您需要針對不同大小和檢視規劃 UI 元素的配置。 這樣做可讓您的應用程式 UI 流暢地變更，以符合使用者的需求與喜好。
想了解更多針對不同螢幕尺寸設計的資訊，請參見 響應式設計的螢幕尺寸與斷點。
塑造良好的第一印象
想想您希望使用者在第一次啟動您的應用程式時，會有什麼樣的想法、感受或動作。 請參考您的「擅長項目」說明。 雖然您可能沒有機會親自告訴使用者您的應用程式強項為何，但您可以在塑造第一印象時將訊息傳遞給他們。 善用下列項目：
磁磚與通知 磁貼是你應用程式的介面。 在使用者的 [開始] 畫面上有那麼多應用程式，什麼原因會讓使用者想要啟動您的應用程式？ 您的磚一定要能夠突顯應用程式的品牌，並展現應用程式的強項。 使用動態磚通知可以使您的應用程式保持新鮮感和相關性，吸引使用者不斷回到您的應用程式。
啟動畫面 啟動畫面應該盡快載入，並且只會在你需要初始化應用程式狀態期間才會留在螢幕上。 您的應用程式的啟動畫面應該展現出它的獨特風格。
首次發射 在用戶註冊服務、登入帳號或新增內容之前，他們會看到什麼？ 試著在要求使用者提供資訊之前，主動展現應用程式的價值。 可以考慮顯示範例內容，這樣使用者就可以先熟悉並了解應用程式的用途，再尋求他們的認可。
首頁 首頁是每次用戶啟動應用程式時帶他們來的地方。 這裡的內容應該要有清楚的焦點，且可立即展示應用程式的用途。 讓這個頁面在一個方面表現出色，並相信使用者會探索應用程式的其餘部分。 登陸頁面的重點應該放在排除干擾因素，而非著重可搜尋性。
驗證設計
在開發應用程式之前，請先確認您的設計或原型是否符合指導方針、使用者印象與需求，以免日後必須重做。 每個功能都有一組 UX 指導方針，協助您讓應用程式更臻完美；還有一組 Store 需求，必須符合這些需求才能在 Microsoft Store 中銷售您的應用程式。 你可以使用 Windows App 認證套件來測試技術是否符合商店要求。 你也可以使用 Microsoft Visual Studio 的效能工具，確保在每種情境下都能為使用者提供出色的體驗。
請參考 UWP 應用程式的詳細使用者體驗指引 ，專注於重要功能。 使用 Visual Studio 效能工具來分析你應用程式中每個情境的效能。