Windows 应用的设计基础知识Design basics for Windows apps

“设计基础知识”图标

使用 Windows 设计指南这一资源,可帮助你设计和构建美观、精良的应用。Windows design guidance is a resource to help you design and build beautiful, polished apps. 它不是一份说明性规则的清单 - 它是一个动态文档,旨在适应我们不断演变的 Fluent Design System 以及应用构建社区的需求。It's not a list of prescriptive rules - it's a living document, designed to adapt to our evolving Fluent Design System as well as the needs of our app-building community.

概述Overview

Windows 应用设计简介Introduction to Windows app design

介绍了 Windows 应用功能以及与这些功能相结合的最佳做法(用于创建在所有类型的支持 Windows 的设备上都表现出色的应用)。An introduction to Windows app features combined with best practices for creating apps that scale beautifully on all types of Windows-powered devices.

Fluent Design SystemFluent Design System

Fluent Design System 展示了我们创建自适应、共鸣和美观用户界面的目标和原则。The Fluent Design System presents our goals and principles for creating adaptive, empathetic, and beautiful user interfaces.

入门Basics

导航基础知识Navigation basics

Windows 应用中的导航基于导航结构、导航元素和系统级功能的灵活模型。Navigation in Windows apps is based on a flexible model of navigation structures, navigation elements, and system-level features. 本文将向你介绍这些组件,并向你展示如何结合使用它们来创建良好的导航体验。This article introduces you to these components and shows you how to use them together to create a good navigation experience.

命令基础知识Command basics

命令元素是使用户能够执行发送电子邮件、删除项或提交表单等操作的交互式 UI 元素。Command elements are the interactive UI elements that enable the user to perform actions, such as sending an email, deleting an item, or submitting a form. 本文将介绍命令元素(如按钮和复选框)、它们支持的交互以及承载它们的命令图面(如命令栏和上下文菜单)。This article describes the command elements, such as buttons and check boxes, the interactions they support, and the command surfaces (such as command bars and context menus) for hosting them.

内容基础知识Content basics

任何应用的主要用途都是提供对内容的访问权限:在照片编辑应用中,照片即是内容;在旅行应用中,地图和旅行目的地信息即是内容;等等。The main purpose of any app is to provide access to content: in a photo-editing app, the photo is the content; in a travel app, maps and info about travel destinations is the content; and so on. 本文提供了适用于三种内容方案的内容设计建议:使用、创建和交互。This article provides content design recommendations for the three content scenarios: consumption, creation, and interaction.

教程Tutorials

了解如何在 XAML 和 C# 中创建基本的照片编辑应用程序。Learn how to create a basic photo-editing application in XAML and C#.

1.创建基本 UI1. Create a basic UI

使用 XAML 创建基本用户界面。Use XAML to create a basic user interface.

2.创建自适应布局2. Create an adaptive layout

为照片编辑应用程序提供自适应布局。Give the photo-editing application an adaptive layout.

3.创建自定义样式3. Create custom styles

通过创建自定义样式为我们的 Windows 控件提供你自己的外观。Give our Windows controls your own look and feel by creating custom styles.