适用于 Windows 应用的设计工具包和示例

本主题提供了各种设计和 UI 相关资源,用于创建视觉吸引力和用户友好的 Windows 应用程序。 有关更多下载(包括 Visual Studio 等开发工具),请参阅 下载和 Windows 开发工具

工具包和库

Figma 工具包图标

WinUI 图标

Windows 社区缩略图

Template Studio 缩略图

Figma 工具包
Windows 设计工具包,2024 年 11 月
打开工具包

WinUI
适用于 Windows 应用的控件和其他 UI 元素。
安装说明

Windows 社区工具包
帮助程序函数、自定义控件和应用服务。
安装说明

Template Studio
使用基于向导的体验加速创建新的 WinUI、WPF 和 UWP 应用。
安装说明

从 Microsoft Store 获取 WinUI 库应用,了解 XAML 控件和 Fluent Design System 的实际应用。 WinUI 3 库和 WinUI 2 库应用包括大多数 WinUI 3 和 WinUI 2 控件、特性和功能的交互式示例。 这些应用是该网站的交互式助手。 安装它们后,你可以使用各控件页上的链接启动该应用并查看控件的实际应用。

  • 从 Microsoft Store 获取 WinUI 3 库WinUI 2 库
  • GitHub 获取这两种应用的源代码(对 WinUI 3 使用 main 分支,对 WinUI 2 使用 winui2 分支)。

字体

Windows 类型系统可帮助你在内容中创建结构和层次结构,以最大程度地提高 UI 中的可读性和可读性(有关详细信息,请参阅 Segoe UI 字体系列)。

建议使用以下字体:

工具

Adobe Photoshop 的屏幕截图,其中显示了正在进行的磁贴和图标生成器操作。

可以使用 Adobe Photoshop 的 磁贴和图标生成器 操作从 7 个文件生成 68 个推荐的磁贴和图标资产(请参阅 磁贴和图标生成器演示)。

下载磁贴和图标生成器操作

示例

以下示例包括各种视觉吸引且用户友好的界面。

Fluent XAML Theme Editor

Fluent XAML 主题编辑器图像的屏幕截图。

Fluent XAML 主题编辑器是一种工具,可帮助演示 Fluent Design System 的灵活性,并通过为 Windows 应用程序中使用的 ResourceDictionary 框架生成 XAML 标记支持应用开发过程。

下载工具示例

在 GitHub 上查看此工具

VanArsdel

VanArsdel sanple 应用的屏幕截图。

Van Arsdel, Ltd. 端到端 Windows 示例应用是为了展示下一波 Fluent Design 系统而构建的。 它广泛利用了 WinUI 中的改良方法和新控件,以及 UX 框架和组合的强大基础功能。 此示例展示了如何构建丰富高效的体验,用于管理和购买 IoT 设备(在本例中为照明灯)。

下载 VanArsdel 示例

在 GitHub 上查看 VanArsdel 示例

BuildCast

BuildCast 示例的屏幕截图。

BuildCast 是一个端到端示例,旨在展示 Fluent Design System 和 Windows。 它允许浏览、下载和播放特定视频播客,包括一些 Windows 技术爱好者内容的示例。 它还具有墨迹注释、书签和远程播放的功能。 此示例最初是在 2017 Build 大会的借助 Fluent 设计构建精彩应用演讲期间展示的。

下载 BuildCast 示例

在 GitHub 上查看 BuildCast 示例

午餐计划安排器

午餐计划程序示例的屏幕截图。

一个用于安排与朋友和同事午餐的时间的 Windows 应用示例。 你创建午餐预订,邀请朋友到感兴趣的餐厅,应用负责每个人的午餐管理。 此应用将合并 Fluent Design 系统的元素,包括亚克力、显示和连贯动画。

下载 Lunch Scheduler 示例

在 GitHub 上查看 Lunch Scheduler 示例

想要更多代码?

请查看 Windows 示例页,获取所有 Windows 应用示例的完整列表。