Рекомендации по масштабированию в зависимости от плотности пикселей

Статья
05/19/2015

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

Эти рекомендации неприменимы для приложений Windows Phone, использующих Silverlight. Рекомендации, относящиеся к Silverlight, см. в документе Multi-resolution apps for Windows Phone 8.

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

Описание

Без масштабирования физические размеры объектов на экране уменьшаются при увеличении плотности пикселей на устройстве. Если элементы пользовательского интерфейса могут стать слишком маленькими для касания, а текст — слишком мелким для чтения, Windows автоматически изменяет масштаб приложения до следующих фиксированных значений масштабирования:

Приложения Магазина Windows:

1,0 (100 %, масштаб не изменяется)
1,4 (масштаб 140 %)
1,8 (масштаб 180 %)

Приложения Магазина Windows Phone:

1,0 (100 %, масштаб не изменяется)
1,4 (масштаб 140 %)
2,4 (масштаб 240 %)

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

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

Рекомендации

Используйте масштабируемую векторную графику. Windows изменяет масштаб этих форматов автоматически без заметных искажений. Для приложений на JavaScript используйте формат SVG. В приложениях на C#, C++ или Visual Basic можно использовать XAML для определения графики.
Используйте загрузку ресурсов для точечных изображений в пакете приложения и предоставляйте изображение для каждого коэффициента масштабирования. Включайте масштаб в имя файла изображения (например, Assets\Square7070Logo.scale-100.png). Windows будет автоматически загружать правильное изображение для текущего масштаба. В разделе Пример масштабирования по количеству точек на дюйм показано, как использовать загрузку ресурса для изображений.

Требования к изображениям, относящиеся к сертификации приложения, см. в разделе Выбор изображений для вашего приложения. Подробнее о соглашении о наименовании см. в разделах Краткое руководство: использование ресурсов файлов или изображений (приложения Магазина Windows на JavaScript и HTML) или Краткое руководство: использование ресурсов файлов или изображений (приложения Магазина Windows на C#, VB, C++ и XAML).
При создании ваших активов для различных уровней масштабирования:
- Не следует создавать точечные изображения с масштабом 100 % и изменять их масштаб вручную. Даже при использовании высококачественной графической программы это приведет к размытым изображениям.
- Помните, что при уменьшении большого высококачественного изображения результат не всегда будет гладким и четким. Однако если исходное векторное изображение недоступно, то лучше уменьшать размеры файла с высоким разрешением, чем увеличивать файл с низким разрешением.
Если приложение загружает изображения во время выполнения с помощью кода (например, когда для создания пользовательского интерфейса используется DirectX, а не XAML или HTML), используйте свойство ResolutionScale (Windows) или RawPixelsPerViewPixel (Windows Phone), чтобы определить масштаб и вручную загрузить изображения в зависимости от процентного значения масштабирования.
Используйте API Thumbnail для изображений файловой системы. API эскизов оптимизируют производительность за счет кэширования мелких версий изображения для использования в качестве эскизов. Подробнее: Эффективный доступ к файловой системе.
Указывайте ширину и высоту изображений вместо использования автоматического изменения размеров, чтобы не допустить изменения макетов при загрузке крупных изображений.
Используйте типографские единицы сетки и вспомогательные единицы. Используйте размеры типографской сетки (20 пикселей для основных единиц сетки и 5 пикселей для вспомогательных единиц сетки), чтобы пиксели макетов не смещались из-за округления пикселей. Для любых размеров, кратных 5 пикселям, округление пикселей не выполняется.
Для удаленных веб-изображений используйте запрос носителя для разрешения. Если приложение написано на JavaScript и имеется удаленное веб-изображение, используйте носитель разрешения CSS @media со свойством background-image для замены изображений во время выполнения.
Не используйте изображения, размеры которых не кратны 5 пикселям. Использование единиц, не кратных 5 пикселям, может привести к смещению пикселей при увеличении масштаба до 140 %, 180 % и 240 %.