Руководство по поддержке различных размеров экрана

Статья
05/19/2015

Приложения Windows и Windows Phone могут работать на разнообразных устройствах с различными размерами экрана и разрешениями. Пользователи также могут изменять ориентацию экрана или, если приложение работает в Windows, уменьшить его размер до минимальной ширины, или отобразить его рядом с другими приложениями. Использует ли пользователь приложение на телефоне, планшете, ноутбуке, настольном компьютере или устройстве PPI, следует убедиться, что пользовательский интерфейс выглядит хорошо и сохраняет свою функциональность. Выполняйте эти рекомендации при разработке пользовательского интерфейса, адаптирующегося к экранам всех размеров и ориентаций.

Конкретные указания по адаптации приложения Магазина Windows к узким окнам см. в статье Guidelines for resizing to narrow layouts.

Описание

Вероятно, ваше приложение будет использоваться на самых разных экранах: на маленьких экранов телефонов, средних экранах ноутбуков, экранах моноблоков или устройств PPI. В зависимости от размера и разрешения экрана объем видимой области, которую может использовать приложение, будет варьироваться.

пример приложения на планшете

пример приложения на большом мониторе настольного компьютера

Чтобы понимать процесс масштабирования для разных размеров экрана, важно знать следующие термины.

Размер экрана	Физический размер экрана задается в дюймах и обычно определяется его диагональю.
Разрешение экрана	Количество пикселей, которое поддерживает экран по горизонтали и вертикали (например, 1366 x 768).
Пропорции	Формат экрана — это отношение его ширины к высоте (например, 16:9).

Платформа, элементы управления и шаблоны позволяют оптимизировать приложения для различных экранов, разрешений и пропорций. Хотя в основном масштабирование макета приложения выполняется автоматически, необходимо продумать макет верхнего уровня, области содержимого, навигацию и команды, чтобы интерфейс приложения был предсказуемым и интуитивно понятным на экранах любых размеров.

В следующей таблице указаны наиболее важные размеры экранов, которые следует учитывать при проектировании приложения.

Полноэкранный размер (эффективное разрешение в пикселях)	Описание устройства
1366 x 768	Планшеты, трансформеры и многие ноутбуки (пропорции 16:9); базовое разрешение для ноутбуков и настольных компьютеров
1920 x 1080	Большие ноутбуки и устройства (пропорции 16:9)
2560 x 1440	Очень большие устройства все-в-одном (пропорции 16:9)
1280 x 800 и 800 x 1280	Небольшие устройства с книжной ориентацией (пропорции 16:9)
1024 x 768 и 768 x 1024	Небольшие устройства с альбомной ориентацией (пропорции 4:3)
1371 x 857 и 857 x 1371	Небольшие устройства (пропорции 16:9)
384 x 640	Телефон 4.5" (пропорции 15:9)
400 x 711	Телефон 4.7" (пропорции 16:9)
450 x 800	Телефон 5.5" (пропорции 16:9)
491 x 873	Телефон 6" (пропорции 16:9)

При разработке приложения для работы в Windows (а не Windows Phone) следует учесть размер доступного пользователю экрана, рассматривая случаи, когда два приложения используют экран совместно или ширина окна приложения меняется до минимальной.

Размер для разделенного экрана (эффективное разрешение в пикселях)	Описание
672 x 768	Разделенный надвое экран на устройстве с разрешением 1366 x 768
500 x 768	Стандартный минимальный размер приложения; разделенный надвое экран на устройстве с разрешением 1024 x 768
320 x 768	Минимальный размер для приложений, которые поддерживают минимальную ширину 320 пикселей

Рекомендации по масштабированию см. в статье Guidelines for scaling to pixel density.

Важные размеры окна для полного и разделенного экрана

Дополнительные рекомендации по использованию

Автоматическая поддержка изменений ориентаций

Пользователи могут поворачивать свои телефоны, планшеты и мониторы. Windows автоматически обрабатывает книжную и альбомную ориентацию, если приложение не использует фиксированный макет. Вам нужно лишь подумать о том, как изменение ширины приложения повлияет на его макет.

Подробнее о том, когда может быть уместно отказаться от гибкого макета см. в разделе Фиксированные макеты ниже.

Альбомный и книжный макеты

Поведение приложений при изменении размера (только для приложений Магазина Windows)

Если пользователь разместил на экране несколько приложений, то возможны несколько уникальных взаимодействий пользовательского интерфейса.

Чудо-кнопки применяются к последнему приложению, с которым работал пользователь, независимо от размера приложения и его положения на экране.
У каждого приложения на экране есть маркер. Пользователи могут изменить размер окна, переместив маркер. Маркер также показывает, какое приложение находится в фокусе в данный момент.
Если пользователь пытается с помощью маркера сделать размер меньше минимального, приложение исчезает с экрана.
Если пользователь поворачивает устройство или монитор, когда на экране размещаются несколько приложений, приложения не меняют ориентацию.

Фиксированные макеты

Большинство приложений использует динамические макеты, которые адаптируются к изменениям размера и разрешения экрана и соответственно перераспределяют содержимое. Но иногда приложению требуется фиксированный макет. Приложения, которые не ориентированы на содержимое или зависят от целостности графики, такие как игровые приложения, должны использовать фиксированные (абсолютные) макеты. Windows автоматически подгоняет такие приложения под размер экрана.

Если в своем приложении вы используете фиксированный макет, который не может автоматически адаптироваться под различные разрешения, применяйте подгонку окна под размер экрана, как показано на рисунках ниже.

Подгонка для игры с фиксированным макетом

Чтобы реализовать подгонку, выполните следующие действия.

Разработайте свой макет для базового разрешения, например 1366 x 768 пикселей (компьютер или планшет) либо 384 x 640 пикселей (телефон). Затем этот макет можно масштабировать для более высоких разрешений.
Разместите фиксированное содержимое в элементе управления ViewBox (ViewBox in JavaScript and HTML или Viewbox in C#/VB/C++ and XAML). Элемент управления ViewBox подгоняет фиксированный макет под размер экрана.
Убедитесь, что элемент управления ViewBox имеет размер 100 % ширины и высоты.
Определите свойства фиксированного размера для объекта ViewBox по фиксированным размерам своего макета (например, 1366 x 768 пикселей или 384 х 640 пикселей).
Выберите цвет для киноформата Letterbox. Фиксированные элементы управления не адаптируются динамически под пропорции или размер экрана, поэтому подгонка под размер экрана автоматически разместит содержимое окна по центру и применит к нему киноформат Letterbox (по горизонтали или вертикали). Цвет макета приложения верхнего уровня определяет цвет полей в киноформате Letterbox. Рекомендуем применять либо темные цвета (например, черный), которые гармонируют с цветом оборудования, либо серый цвет, который уместен почти всегда, либо тот цвет, который подходит к интерфейсу вашего приложения.
Используйте наборы ресурсов векторной графики или изображений высокого разрешения. При подгонке под размер экрана больших мониторов окно приложения может увеличиться до 180 % (для Windows) или до 280 % (для Windows Phone). Чтобы избежать артефактов или размытости при масштабировании, используйте графические примитивы либо такие векторные форматы, как SVG или XAML. Если необходимы точечные ресурсы (например, точечные рисунки), предоставляйте ресурсы MRT.

На рисунках показано, насколько сильно снижается качество растровых изображений (справа) по сравнению с векторными (слева) при увеличении.
Не помещайте адаптивные элементы управления в элемент управления ViewBox.