Общие сведения о проектировании приложений для WindowsIntroduction to Windows app design

пример приложения для работы с освещением

Руководство по проектированию приложений для Windows — это ресурс, который поможет вам начать разрабатывать и создавать красивые и проработанные приложения.The Windows app 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.

В этом введении представлен обзор функций проектирования, включенных в каждое приложение UWP, для создания пользовательских интерфейсов, которые превосходно масштабируются для отображения на различных устройствах.This introduction provides an overview of the universal design features that are included in every UWP app, helping you build user interfaces (UI) that scale beautifully across a range of devices.

Эффективные пиксели и масштабированиеEffective pixels and scaling

Приложения UWP работают на всех устройствах Windows 10, от телевизора до планшета или ПК.UWP apps run on all Windows 10 devices, from your TV to your tablet or PC. Итак, как спроектировать пользовательский интерфейс, который хорошо выглядит на самых разнообразных устройствах и экранах любого размера?So how do you design a UI that looks good on a wide variety of devices and screen sizes?

одно приложение на различных устройствах

UWP помогает автоматически корректировать элементы пользовательского интерфейса, чтобы они были разборчивыми и с ними легко было бы взаимодействовать на всех устройствах и экранах любого размера.UWP helps by automatically adjusting UI elements so that they're legible and easy to interact with on all devices and screen sizes.

При запуске приложения на устройстве система использует алгоритм, позволяющий оптимизировать отображение элементов пользовательского интерфейса на экране.When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the screen. Этот алгоритм масштабирования учитывает расстояние, на котором осуществляется просмотр, и растровую плотность (количество пикселей на дюйм) и оптимизирует воспринимаемый (а не физический) размер элементов.This scaling algorithm takes into account viewing distance and screen density (pixels per inch) to optimize for perceived size (rather than physical size). Алгоритм масштабирования гарантирует, что шрифт размером 24 пикселя на Surface Hub, расположенный на расстоянии трех метров от пользователя, будет столь же читаемым, как и шрифт аналогичного размера, отображаемый на телефоне с диагональю экрана 5 дюймов, расположенный на расстоянии нескольких сантиметров от пользователя.The scaling algorithm ensures that a 24 px font on Surface Hub 10 feet away is just as legible to the user as a 24 px font on 5" phone that's a few inches away.

Дистанция просмотра для различных устройств

В силу особенностей работы системы масштабирования, создавая приложение UWP, вы проектируете в эффективных, а не физических пикселях.Because of how the scaling system works, when you design your UWP app, you're designing in effective pixels, not actual physical pixels. Эффективные пиксели (epx) — это виртуальные единицы измерения, используемые для обозначения размеров макета и интервалов, независимо от плотности экрана.Effective pixels (epx) are a virtual unit of measurement, and they're used to express layout dimensions and spacing, independent of screen density. (В наших рекомендациях обозначения epx, ep и px взаимозаменяемы.)(In our guidelines, epx, ep, and px are used interchangeably.)

При разработке вы можете игнорировать плотность пикселей и фактическое разрешение экрана.You can ignore the pixel density and the actual screen resolution when designing. Выполняйте разработку с учетом эффективного разрешения (разрешения в эффективных пикселях) для класса размеров (дополнительные сведения см. в статье Размеры экрана и точки останова).Instead, design for the effective resolution (the resolution in effective pixels) for a size class (for details, see the Screen sizes and breakpoints article).

Совет

При создании макетов в графических редакторах установите количество точек на дюйм равным 72 и соотнесите размеры изображения с эффективным разрешением целевого класса размеров.When creating screen mockups in image editing programs, set the DPI to 72 and set the image dimensions to the effective resolution for the size class you're targeting. Список классов размеров и эффективные разрешения см. в разделе Размеры экрана и точки останова.For a list of size classes and effective resolutions, see the Screen sizes and breakpoints article.

Кратность 4Multiples of four

В приложениях UWP размеры, поля и положения элементов пользовательского интерфейса должны быть кратны 4 epx.The sizes, margins, and positions of UI elements should always be in multiples of 4 epx in your UWP apps.

UWP можно использовать на разных устройствах. Поддерживаются следующие масштабы: 100 %, 125 %, 150 %, 175 %, 200 %, 225 %, 250 %, 300 %, 350 % и 400 %.UWP scales across a range of devices with scaling plateaus of 100%, 125%, 150%, 175%, 200%, 225%, 250%, 300%, 350%, and 400%. Базовая единица — это 4, так как это единственное целое число, которое может масштабироваться путем умножения на дробные числа (например, 4 * 1,5 = 6).The base unit is 4 because it's the only integer that can be scaled by non-whole numbers (for example, 4*1.5 = 6). Благодаря этому все элементы пользовательского интерфейса с целыми пикселями выравниваются и имеют четкие и острые края.Using multiples of four aligns all UI elements with whole pixels and ensures UI elements have crisp, sharp edges. Обратите внимание, что это требование не относится к тексту, который может быть любого размера и иметь любое положение.(Note that text doesn't have this requirement; text can have any size and position.)

Сетка

МакетLayout

Поскольку приложения UWP автоматически масштабируются на всех устройствах, разработка приложения UWP для любого устройства выполняется по тем же принципам.Since UWP apps automatically scale to all devices, designing a UWP app for any device follows the same structure. Начнем с самого начала пользовательского интерфейса вашего приложения UWP.Let's start from the very beginning of your UWP app's UI.

Окна, кадры и страницыWindows, Frames, and Pages

Когда приложение UWP запускается на каком-либо устройстве с Windows 10, оно запускается в окне с кадром, в котором возможна навигация между экземплярами страниц.When a UWP app is launched on any Windows 10 device, it launches in a Window with a Frame, which can navigate between Page instances.

Снимок экрана: окно с кадром.

Пользовательский интерфейс приложения можно рассматривать как набор страниц.You can think of your app's UI as a collection of pages. Вам решать, что появится на каждой странице и как страницы будут связаны между собой.It's up to you to decide what should go on each page, and the relationships between pages.

Дополнительные сведения см. в статье об основах навигации.To learn how you can organize your pages, see Navigation basics.

Снимок экрана: страница коллекции.

Макет страницыPage layout

Как должны выглядеть эти страницы?What should those pages look like? Большинство страниц имеют общую структуру для обеспечения согласованности, поэтому пользователи могут легко перемещаться между страницами вашего приложения и внутри них.Well, most pages follow a common structure to provide consistency, so users can easily navigate between and within pages of your app. Страницы обычно содержат три типа элементов пользовательского интерфейса:Pages typically contain three types of UI elements:

  • Элементы навигации помогают пользователям выбрать то содержимое, которое они хотят отобразить.Navigation elements help users choose the content they want to display.
  • Командные элементы инициируют действия, такие как управление, сохранение или предоставление общего доступа к содержимому.Command elements initiate actions, such as manipulating, saving, or sharing content.
  • Элементы содержимого отображают содержимое приложения.Content elements display the app's content.

Общий шаблон макета

Дополнительные сведения о том, как применять общие шаблоны приложения UWP, см. в разделе Макет страницы.To learn more about how to implement common UWP app patterns, see the Page layout article.

Можно также использовать Windows Template Studio в Visual Studio, чтобы начать работу с макетом приложения.You can also use the Windows Template Studio in Visual Studio to get started with a layout for your app.

Элементы управленияControls

Платформа разработки UWP предоставляет набор стандартных элементов управления, которые гарантировано будут хорошо работать на всех устройствах под управлением Windows, и они соответствуют нашим принципам системы Fluent Design.UWP's design platform provides a set of common controls that are guaranteed to work well on all Windows-powered devices, and they adhere to our Fluent Design System principles. Эти элементы управления включают в себя как простые элементы управления, такие как кнопки и текстовые элементы, так и сложные элементы управления, которые могут создавать списки на основе набора данных и шаблона.These controls include everything from simple controls, like buttons and text elements, to sophisticated controls that can generate lists from a set of data and a template.

Элементы управления UWP

Полный список элементов управления UWP и шаблонов, которые могут быть созданы на их основе, см. в разделе Элементы управления и шаблоны.For a complete list of UWP controls and the patterns you can make from them, see the controls and patterns section.

СтильStyle

К стандартным элементам управления автоматически применяются тема системы и цвет элементов системы, они работают со всеми типами ввода данных и масштабируются на всех устройствах.Common controls automatically reflect the system theme and accent color, work with all input types, and scale to all devices. Таким образом они отражают принципы системы Fluent Design — они адаптивны, приятны и красивы.In that way, they reflect the Fluent Design System - they're adaptive, empathetic, and beautiful. Стандартные элементы управления используют свет, движение и глубину в своих стилях по умолчанию, поэтому с их помощью вы внедряете нашу систему Fluent Design в свое приложение.Common controls use light, motion, and depth in their default styles, so by using them, you're incorporating our Fluent Design System in your app.

Стандартные элементы управления обладают широкими возможностями настройки — можно настроить основной цвет элемента управления или полностью изменить его внешний вид.Common controls are highly customizable, too--you can change the foreground color of a control or completely customize it's appearance. Чтобы переопределить стили по умолчанию в элементах управления, используйте облегченное определение стиля или создайте пользовательские элементы управления в XAML.To override the default styles in controls, use lightweight styling or create custom controls in XAML.

gif с цветами элементов

ShellShell

Ваше приложение UWP будет взаимодействовать с общим интерфейсом Windows с помощью плиток и уведомлений в оболочке Windows.Your UWP app will interact with the broader Windows experience with tiles and notifications in the Windows Shell.

Плитки отображаются в меню "Пуск" и при запуске приложения. Они позволяют узнать о содержимом приложения.Tiles are displayed in the Start menu and when your app launches, and they provide a glimpse of what's going on in your app. Их ценность — это содержимое, а также то, насколько искусно и умело они были созданы.Their power comes from the content behind them, and the intelligence and craft with which they're offered up.

Приложения UWP поддерживают плитки четырех размеров (маленькие, средние, широкие и крупные), которые можно настроить, используя значок приложения и его свойства.UWP apps have four tile sizes (small, medium, wide, and large) that can be customized with the app's icon and identity. Узнайте больше о проектировании плиток для приложений UWP в разделе Руководство по работе с ресурсами плиток и значков.For guidance on designing tiles for your UWP app, see Guidelines for tile and icon assets.

Плитки в меню "Пуск"

Входные данныеInputs

В основе приложений UWP лежит интеллектуальное взаимодействие с пользователем.UWP apps rely on smart interactions. Вы можете выполнять обработку нажатия и при этом вам будет все равно, осуществляется ли это нажатие с помощью щелчка мыши, пера или прикосновения пальца.You can design around a click interaction without having to know or define whether the click comes from a mouse, a stylus, or a tap of a finger. Но вы также можете разработать приложения для определенных режимов ввода.However, you can also design your apps for specific input modes.

Снимок экрана: значки, которые обозначают разные режимы ввода.

УстройстваDevices

устройств

Аналогичным образом, хотя UWP автоматически масштабирует приложение для различных устройств, вы также можете оптимизировать приложение UWP для конкретных устройств.Similarly, while UWP automatically scales your app to different devices, you can also optimize your UWP app for specific devices.

Удобство использованияUsability

Короткое видео: нарисованные фигуры, которые отображают людей с разными возможностями.

Последнее, но не менее важное, удобство использования – это то, что позволяет сделать приложение доступным для всех пользователей.Last but not least, usability is about making your app's experience open to all users. Любой пользователь может воспользоваться преимуществами по-настоящему инклюзивных возможностей. См. раздел Удобство использования приложений UWP чтобы узнать, как сделать приложение удобным для всех пользователей.Everyone can benefit from truly inclusive user experiences - see usability for UWP apps to see how to make your app easy to use for everyone.

Если вы разрабатываете продукт для международной аудитории, вам может пригодиться раздел Глобализация и локализация.If you're designing for international audiences, you might want to check out Globalization and localization.

Вы также можете добавить в приложение специальные возможности для слабослышащих и слабовидящих пользователей, а также пользователей с трудностями в передвижении.You might also want to consider accessibility features for users with limited sight, hearing, and mobility. Если специальные возможности встроены в проект вашего приложения с самого начала, реализация полной доступности вашего приложения займет немного дополнительного времени и усилий.If accessibility is built into your design from the start, then making your app accessible should take very little extra time and effort.

Средства и наборы инструментов для проектированияTools and design toolkits

Теперь, когда вы знакомы с основными особенностями проектирования, как насчет того, чтобы начать разработку собственного приложения UWP?Now that you know about the basic design features, how about getting started with designing your UWP app?

Мы предоставляем разнообразные инструменты для проектирования:We provide a variety of tools to help your design process:

Краткий видеообзорVideo summary

Далее: Система Fluent DesignNext: Fluent Design System

Если вы хотите узнать о принципах проектирования с помощью Fluent Design (системы проектирования корпорации Майкрософт) и ознакомиться с дополнительными компонентами, которые можно добавить в собственное приложение UWP, см. раздел Система Fluent Design.If you'd like to learn about the principles behind Fluent Design (Microsoft's design system) and see more features you can incorporate into your UWP app, continue on to Fluent Design System.