設計 Windows 應用程式的工具組和範例

Fluent 設計/Windows 應用程式的設計與 UI 相關下載。 如需其他工具 (例如 Visual Studio)，請參閱我們的主要下載頁面。

工具組和程式庫

Figma 工具組
WinAppSDK 1.1 中的 WinUI 3，2022 年 10 月
下載

Windows UI 程式庫
用於 Windows 應用程式的控制項和其他 UI 元素。
安裝指示

Windows 社群工具組
Helper 函式、自訂控制項和應用程式服務。
安裝指示

Template Studio
使用以精靈為基礎的 UI 快速為應用程式建立結構。
安裝指示

WinUI 資源庫

從 Microsoft Store 取得 WinUI 程式庫應用程式，以查看 XAML 控制項與 Fluent Design 系統的運作情形。 WinUI 3 資源庫和 WinUI 2 資源庫應用程式包含大部分 WinUI 3 和 WinUI 2 控制項、特性和功能的互動式範例。 此應用程式是此網站的互動小幫手。 安裝過後，您就可以使用個別控制頁面上的連結，啟動此應用程式並查看控制項的運作情形。

• 從 Microsoft Store 取得 WinUI 3 資源庫 和 WinUI 2 資源庫。
• 從 GitHub 取得這兩者的原始程式碼 (使用 WinUI 3 的主要 分支和 WinUI 2 的 winui2 分支)。

字型

• Segoe UI 變數
• Segoe Fluent 圖示
• Segoe UI
• Segoe MDL2
• Hololens 圖示字型 (僅限 Windows)

工具

適用於 Adobe Photoshop 的磚與圖示產生器：這組適用於 Adobe Photoshop 的巨集指令，只需 7 個檔案就能夠產生 68 個建議的磚和圖示資產。
下載磚與圖示產生器

範例

Fluent XAML 主題編輯器
Fluent XAML 佈景主題編輯器這項工具可為 Windows 應用程式中使用的 ResourceDictionary 架構產生 XAML 標記，而協助您展現 Fluent Design 系統的彈性及支援應用程式開發程序。 下載工具範例
查看 Github 上的工具

VanArsdel
Van Arsdel, Ltd. 端對端 Windows 範例應用程式可用來展示新一代的 Microsoft Fluent Design 系統。 它大量使用了 Windows UI 程式庫中經過改良的密度和新控制項，以及 UX 架構和組合強大的基礎功能。 此範例會示範如何建置豐富、具生產力的體驗來管理及購買 IoT 裝置 (在此範例中為燈光)。
下載 VanArsdel 範例
查看 GitHub 上的 VanArsdel 範例

BuildCast
BuildCast 是一個用來展示 Fluent Design 系統和 Windows 的端對端範例。 它可讓您瀏覽、下載和播放特選影片播客，包括一些 Windows 科技愛好者摘要。 它也具備 Ink Notes、書籤和遠端播放。 此範例最初呈現於 Build 2017 會議的運用 Fluent 設計建置令人驚豔的應用程式討論中。
下載 BuildCast 範例
查看 GitHub 上的 BuildCast 範例

午餐排程器
排程與朋友和同事共用午餐的 Windows 範例。 您建立午餐約會、邀請朋友前往感興趣的餐廳，接下來應用程式會負責所有受邀對象的午餐管理。 此應用程式在 Windows 應用程式中納入 Fluent 設計系統元素，包括壓克力風格、顯色和連接動畫。
下載午餐排程器範例
查看 GitHub 上的午餐排程器範例

想要更多程式碼嗎？

瀏覽 Windows 範本頁面取得所有我們的 Windows 應用程式範本的清單。 移至範本入口網站