Размеры экрана и точки остановаScreen sizes and breakpoints

Приложения для Windows могут работать на любом устройстве под управлением Windows, в том числе на телефонах, планшетах, настольных компьютерах, телевизорах и т. п.Windows apps can run on any device running Windows, which includes phones, tablets, desktops, TVs, and more. Из-за большого количества целевых устройств и экранов разного размера в экосистеме Windows 10 мы рекомендуем не оптимизировать пользовательский интерфейс для каждого устройства, а проектировать приложения для нескольких ключевых категорий ширины экрана (также называемых "точки прерывания"):With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called "breakpoints"):

  • небольшая (менее 640 пикселей);Small (smaller than 640px)
  • средняя (641–1007 пикселей);Medium (641px to 1007px)
  • большая (1008 пикселей и более).Large (1008px and larger)

Совет

При разработке под определенные точки прерывания учитывайте количество экранного пространства, доступного для приложения (окно приложения), а не размер экрана.When designing for specific breakpoints, design for the amount of screen space available to your app (the app's window), not the screen size. Когда приложение работает в полноэкранном режиме, окно приложения соответствует размеру экрана, но если приложение работает не в полноэкранном режиме, окно меньше экрана.When the app is running full-screen, the app window is the same size as the screen, but when the app is not full-screen, the window is smaller than the screen.

Точки прерыванияBreakpoints

В таблице ниже описаны различные классы размера и точки прерывания.This table describes the different size classes and breakpoints.

Точки прерывания для обеспечения отзывчивого дизайна

Класс размера:Size class Точки прерыванияBreakpoints Обычный размер экрана (по диагонали)Typical screen size (diagonal) УстройстваDevices Размеры окнаWindow sizes
НебольшойSmall 640 пикселей и меньше640px or less От 4" до 6"; от 20" до 65"4" to 6"; 20" to 65" Телефоны, телевизорыPhones, TVs 320x569, 360x640, 480x854320x569, 360x640, 480x854
СреднийMedium 641–1007 пикселей641px to 1007px От 7" до 12"7" to 12" Фаблеты, планшетыPhablets, tablets 960x540960x540
КрупныйLarge 1008 пикселей и больше1008px or greater 13" дюймов и выше13" and larger Компьютеры, ноутбуки, устройства Surface HubPCs, laptops, Surface Hubs 1024x640, 1366x768, 1920x10801024x640, 1366x768, 1920x1080

Почему телевизоры считаются "небольшими"?Why are TVs considered "small"?

Несмотря на то что большинство экранов телевизоров физически являются достаточно большими (обычно 40–65 дюймов) и поддерживают высокие разрешения (HD или 4K), проектирование для телевизора с разрешением 1080p, просмотр содержимого экрана которого осуществляется на расстоянии 10 метров, отличается от проектирования для монитора с разрешением 1080p, просмотр содержимого которого осуществляется на расстоянии 40 см.While most TVs are physically quite large (40 to 65 inches is common) and have high resolutions (HD or 4k), designing for a 1080P TV that you view from 10 feet away is different from designing for a 1080p monitor sitting a foot away on your desk. При учете расстояния 1080 пикселей телевизора, скорее, сравнимы с 540 пикселями монитора, что гораздо ближе.When you account for distance, the TV's 1080 pixels are more like a 540-pixel monitor that's much closer.

Система эффективных пикселей UWP автоматически учитывает расстояние от экрана за вас.UWP's effective pixel system automatically takes viewing distance in account for you. При указании размера для элемента управления или диапазона точки прерывания вы фактически используете эффективные пиксели.When you specify a size for a control or a breakpoint range, you're actually using "effective" pixels. Например, при создании гибкого кода для 1080 пикселей и больше монитор с 1080 пикселями будет использовать этот код, но телевизор с разрешением 1080p не будет, так как несмотря на то, что телевизор с разрешением 1080p имеет 1080 физических пикселей, эффективными из них являются только 540.For example, if you create responsive code for 1080 pixels and higher, a 1080 monitor will use that code, but a 1080p TV will not--because although a 1080p TV has 1080 physical pixels, it only has 540 effective pixels. Поэтому проектирование для телевизора похоже на проектирование для телефона.Which makes designing for a TV similar to designing for a phone.

Эффективные пиксели и коэффициент масштабированияEffective pixels and scale factor

Приложения UWP автоматически масштабируют пользовательский интерфейс, чтобы гарантировать, что ваше приложение будет отображаться разборчиво на всех устройствах с Windows 10.UWP apps automatically scale your UI to guarantee that your app will be legible on all Windows 10 devices. Windows автоматически выбирает масштаб для каждого дисплея на основе его показателя DPI (количества точек на дюйм) и расстояния от экрана устройства.Windows automatically scales for each display based on its DPI (dots-per-inch) and the viewing distance of the device. Пользователи могут переопределить значение по умолчанию, перейдя на страницу Параметры > Экран > Масштабирование и макет.Users can override the default value and by going to Settings > Display > Scale and layout settings page.

Общие рекомендацииGeneral recommendations

НебольшойSmall

  • Задайте левое и правое поля окна равными 12 пикселям, чтобы создать визуальное разделение между левой и правой стороной окна приложения.Set left and right window margins to 12px to create a visual separation between the left and right edges of the app window.
  • Закрепите панели приложения в нижней части окна для улучшения доступности.Dock app bars to the bottom of the window for improved reachability.
  • Используйте один столбец или регион за один раз.Use one column/region at a time.
  • Для отображения поиска используйте значок (не используйте поле поиска).Use an icon to represent search (don't show a search box).
  • Включайте область навигации в режиме наложения, чтобы сэкономить экранное пространство.Put the navigation pane in overlay mode to conserve screen space.
  • Если вы применяете шаблон основных и подробных данных, то для экономии пространства экрана используйте режим презентации стопкой.If you're using the master details pattern, use the stacked presentation mode to save screen space.

СреднийMedium

  • Задайте левое и правое поля окна равными 24 пикселям, чтобы создать визуальное разделение между левой и правой стороной окна приложения.Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Разместите командные элементы, такие как панели приложения, в верхней части окна приложения.Put command elements like app bars at the top of the app window.
  • Используйте до двух столбцов или регионов.Use up to two columns/regions.
  • Отобразите поле поиска.Show the search box.
  • Переведите панель навигации в режим полосы, чтобы всегда отображалась узкая полоска значков.Put the navigation pane into sliver mode so a narrow strip of icons always shows.
  • Рекомендуется дополнительно адаптировать интерфейс для телевизоров.Consider further tailoring for TV experiences.

КрупныйLarge

  • Задайте левое и правое поля окна равными 24 пикселям, чтобы создать визуальное разделение между левой и правой стороной окна приложения.Set left and right window margins to 24px to create a visual separation between the left and right edges of the app window.
  • Разместите командные элементы, такие как панели приложения, в верхней части окна приложения.Put command elements like app bars at the top of the app window.
  • Используйте до трех столбцов или регионов.Use up to three columns/regions.
  • Отобразите поле поиска.Show the search box.
  • Переведите панель навигации в режим стыковки, чтобы она всегда отображалась.Put the navigation pane into docked mode so that it always shows.