Windows 應用程式的設計基本概念Design basics for Windows apps

設計基本圖示

Windows 設計指導方針可以協助您設計和建立美觀、優雅的應用程式。Windows design guidance is a resource to help you design and build beautiful, polished apps. 這不是一份詳盡規則的清單,這份文件會隨著不斷演進的 Fluent Design 系統以及我們應用程式建置社群的需求改變。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 系統Fluent Design System

Fluent Design 系統展現我們建立彈性、共鳴和美觀的使用者介面的目標和原則。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.