設計 Windows 應用程式的工具組和範例Design toolkits and samples for Windows apps

設計基本知識

Fluent 設計/Windows 應用程式的設計與 UI 相關下載。Design and UI-related downloads for Fluent Design/Windows apps. 如需其他工具 (例如 Visual Studio),請參閱我們的主要下載頁面For additional tools, such as Visual Studio, see our main downloads page.

設計工具組Design toolkits

這些工具組提供控制項與版面配置範本,可用於設計 Windows 應用程式。These toolkits provide controls and layout templates for designing Windows apps.

Figma 工具組Figma toolkit
WinUI 2.4,2020 年 5 月WinUI 2.4, May 2020
下載Download

Sketch 工具組Sketch toolkit
1810 版,2018 年 10 月v1810, October 2018
下載Download

Adobe XD 工具組Adobe XD toolkit
1901 版,2019 年 1 月v1901, January 2019
下載Download

開發人員工具組和程式庫Developer toolkits and libraries

WinUI 程式庫縮圖 Windows UI 程式庫WinUI library thumbnail Windows UI Library
用於 Windows 應用程式的控制項和其他 UI 元素。Controls and other UI elements for Windows apps.
安裝指示Installation instructions

Windows 社群縮圖 Windows 社群工具組Windows community thumbnail Windows Community Toolkit
Helper 函式、自訂控制項和應用程式服務。Helper functions, custom controls, and app services.
安裝指示Installation instructions

Windows Template Studio 縮圖 Windows Template StudioWindows Template Studio thumbnail Windows Template Studio
使用以精靈為基礎的 UI 快速為 UWP 應用程式建立結構。Quickly scaffold a UWP app using a wizard-based UI.
下載Download

字型Fonts

工具Tools

Download the tile and icon generator

適用於 Adobe Photoshop 的磚與圖示產生器:這組適用於 Adobe Photoshop 的巨集指令,只需 7 個檔案就能夠產生 68 個建議的磚和圖示資產。Tile and icon generator for Adobe Photoshop This set of actions for Adobe Photoshop generates the 68 recommended tile and icon assets from just 7 files.
下載磚與圖示產生器Download the tile and icon generator

範例Samples

Fluent XAML 佈景主題編輯器影像 Fluent XAML 佈景主題編輯器Fluent XAML Theme Editor image Fluent XAML Theme Editor
Fluent XAML 佈景主題編輯器這項工具可為 Windows 應用程式中使用的 ResourceDictionary 架構產生 XAML 標記,而協助您展現 Fluent Design 系統的彈性及支援應用程式開發程序。The Fluent XAML Theme Editor is a tool that helps demonstrate the flexibility of the Fluent Design System as well as supports the app development process by generating XAML markup for our ResourceDictionary framework used in Windows applications. 下載工具範例Download the tool sample
查看 Github 上的工具Check out the tool on GitHub

VanArsdel 影像 VanArsdelVanArsdel image VanArsdel
Van Arsdel, Ltd. 端對端 Windows 範例應用程式可用來展示新一代的 Microsoft Fluent Design 系統。The Van Arsdel, Ltd. end-to-end Windows sample app was built to showcase the next wave of the Microsoft Fluent Design System. 它大量使用了 Windows UI 程式庫中經過改良的密度和新控制項,以及 UX 架構和組合強大的基礎功能。It makes extensive use of the improved density and new controls in the Windows UI Library as well as powerful underlying features of the ux framework and composition. 此範例會示範如何建置豐富、具生產力的體驗來管理及購買 IoT 裝置 (在此範例中為燈光)。The sample shows how you can build a rich, productive experience for managing and purchasing IoT devices (in this case, lamps).
下載 VanArsdel 範例Download the VanArsdel sample
查看 GitHub 上的 VanArsdel 範例Check out the VanArsdel sample on GitHub

BuildCast 影像 BuildCastbuild cast image BuildCast
BuildCast 是一個用來展示 Fluent Design 系統和 Windows 的端對端範例。BuildCast is an end-to-end sample built to showcase the Fluent Design System and Windows. 它可讓您瀏覽、下載和播放特選影片播客,包括 Channel 9 上最受歡迎的取樣,以及一些 Windows 科技愛好者摘要。It permits browsing, downloading, and playback of select video podcasts, including a sampling of the most popular ones from Channel 9 and some Windows tech enthusiast feeds. 它也具備 Ink Notes、書籤和遠端播放。It also features ink notes, bookmarks, and remote playback. 此範例最初呈現於 Build 2017 會議的運用 Fluent 設計建置令人驚豔的應用程式討論中。This sample was initially shown at the 2017 Build conference during the Build Amazing Apps with Fluent Design talk.
下載 BuildCast 範例Download the BuildCast sample
查看 GitHub 上的 BuildCast 範例Check out the BuildCast sample on GitHub

午餐排程器 午餐排程器Lunch Scheduler Lunch Scheduler
排程與朋友和同事共用午餐的 Windows 範例。A Windows app sample that schedules lunches with your friends and coworkers. 您建立午餐約會、邀請朋友前往感興趣的餐廳,接下來應用程式會負責所有受邀對象的午餐管理。You create a lunch, invite friends to a restaurant of interest, and the app takes care of the lunch management for all involved parties. 此應用程式在 Windows 應用程式中納入 Fluent 設計系統元素,包括壓克力風格、顯色和連接動畫。This app incorporates elements of the Fluent Design System in a Windows app, including acrylic, reveal, and connected animations.
下載午餐排程器範例Download the Lunch Scheduler sample
查看 GitHub 上的午餐排程器範例Check out the Lunch Scheduler sample on GitHub

Xaml 控制項庫 XAML 控制項庫Xaml controls gallery XAML Controls Gallery
這個範例提供所有 XAML 控制項的互動示範。This sample provides an interactive demo of all of the XAML controls. 它顯示從基本到調適型的各種不同版面配置,並顯示您可以複製到您自己專案中的標記。It shows a variety of layouts from basic to adaptive, and displays markup that you can copy into your own project. 注意:下載檔案和 GitHub 存放庫目前將此範例應用程式稱為 "UI Basics (XAML)"。Note: The download file and the GitHub repository currently refer to this sample app as "UI Basics (XAML)."
下載 XAML 控制項庫範例Download the XAML Controls Gallery sample
查看 GitHub 上的 XAML 控制項庫範例Check out the XAML Controls Gallery sample on GitHub
從 Store 下載 XAML 控制項庫應用程式Download the XAML Controls Gallery app from the Store

想要更多程式碼嗎?Want more code?

瀏覽 Windows 範本頁面取得所有我們的 Windows 應用程式範本的清單。Check out the Windows sample page for complete list of all our Windows app samples. 移至範本入口網站Go to the samples portal