Руководство по масштабированию для различных экранов (приложения Магазина Windows)
В этом разделе приведены рекомендации по проектированию и разработке макета приложения Магазина Windows для различных экранов, поддерживаемых Windows 8.
Система Windows 8 может работать с разными типами экранов — от малых и средних дисплеев планшетов и ноутбуков до больших экранов стационарных компьютеров и терминалов. Приложения Магазина Windows поддерживают все типы экранов, с которыми работает Windows 8. Как правило, чем крупнее экран, тем выше его разрешение и тем больше содержимого можно на нем отобразить.
В этом документе используются следующие термины и обозначения.
| Term | Description |
|---|---|
Размер экрана |
Физический размер экрана задается в дюймах и обычно определяется его диагональю. |
Разрешение экрана |
Количество пикселей, которое поддерживает экран по горизонтали и вертикали (например, 1366 x 768). |
Пропорции |
Формат экрана — это отношение его ширины к высоте (например, 16:9). |
Размер экрана
Самым важным фактором для приложений Магазина Windows является разрешение экрана. На крупных экранах используется высокое разрешение, значит, имеется довольно много места для окна приложения. Пользователи ожидают увидеть на таких экранах больше содержимого и функций,
поэтому разработчики и дизайнеры должны это учитывать. Внешний вид приложения при высоких разрешениях зависит от параметров, которые задаются еще на этапе проектирования и разработки.
Платформа, элементы интерфейса и шаблоны позволяют оптимизировать приложения для различных экранов. Для этого не нужно писать много кода — достаточно лишь внести небольшие изменения в макет верхнего уровня, области содержимого, навигацию и команды, чтобы интерфейс приложения был интуитивно понятным при высоких разрешениях.
На рисунке ниже показано, что может произойти с окном приложения, которое не адаптировано для больших экранов.
.png "Большая незаполненная область, возникшая из-за негибкого макета")
Минимальные разрешения экрана
Ваше приложение должно поддерживать два основных разрешения экрана.
- Минимальное разрешение, с которым выполняются приложения Магазина Windows, — 1024 x 768.
- Минимальное разрешение, требуемое для поддержки всех возможностей Windows 8 (включая многозадачность с привязкой), — 1366 x 768. Дополнительные сведения о прикрепленных представлениях см. в статье Руководства для прикрепленного и заполненного представлений.
Приложения Магазина Windows не могут выполняться с разрешением 1024 x 600 или 1280 x 720.
Рекомендации для основных экранных разрешений приведены в таблице.
| Рекомендация | Описание |
|---|---|
Приложение должно работать при минимальном разрешении 1024 x 768. |
Что это дает?
|
Оптимальное разрешение для работы приложения — 1366 x 768. |
Что это дает?
|
Проектирование интерфейса для больших экранов
При разработке приложения для больших экранов особое внимание следует уделять макету интерфейса, а также его презентабельности и пропорциональности. Кроме того, у приложения может быть несколько макетов разной сложности в зависимости от размеров используемого экрана.
Рекомендации для высоких экранных разрешений приведены в таблице.
| Рекомендация | Описание |
|---|---|
Приложение должно занимать весь экран |
Это позволяет создавать интерфейсы, которые выглядят максимально иммерсивно на любых экранах. Приложения должны занимать все доступное им пространство, а также гибко приспосабливаться к различным разрешениям. Пользователи покупают большие мониторы в расчете на то, что приложения будут выглядеть так же естественно, как и раньше, а содержимого при этом станет больше. |
Выберите оптимальный тип макета — фиксированный или адаптивный |
Существует два способа создания приложений с масштабируемым интерфейсом. Выбор подходящего способа зависит от сложности макета и сценариев использования. |
Фиксированный макет
Фиксированный макет чаще всего используется в играх или игровых приложениях, интерфейс которых содержит много растровой графики. В таких макетах обычно есть заданный объем содержимого (например, игровое поле), а показ большего числа элементов невозможен либо не имеет смысла. Эти макеты не могут (или не будут) динамически изменяться в зависимости от разрешения экрана, так как в них используются фиксированные значения пикселей. В таких случаях Windows 8 автоматически подгоняет их под размер экрана.
.jpg "Фиксированный макет при различных разрешениях")
Подгонка фиксированного макета под размер экрана
Если в своем приложении вы используете фиксированный макет, который не адаптируется под различные разрешения, применяйте подгонку окна под размер экрана, как показано на рисунке ниже.
.png "Подгонка фиксированного макета под размер экрана")
Рекомендации по подгонке приложений под размер экрана приведены в таблице.
| Рекомендация | Описание |
|---|---|
Начните с основных экранных разрешений. |
При разработке фиксированного макета реализуйте сначала поддержку базовых разрешений (1024 x 768 и 1366 x 768). Затем этот макет можно масштабировать для более высоких разрешений. |
Размещайте фиксированное содержимое внутри элемента управления ViewBox. |
Элемент управления ViewBox подгоняет фиксированный макет под размер экрана. |
Не добавляйте в ViewBox адаптивные элементы управления (например, AppBar). |
Эти компоненты изменяются в зависимости от разрешения экрана. |
Используйте стиль и цвет киноформата "Letterbox". |
Фиксированные макеты не адаптируются под пропорции или разрешение экрана, поэтому подгонка под размер экрана автоматически разместит содержимое окна по центру и применит к нему киноформат "Letterbox" (по горизонтали или вертикали). Подобрав стиль и цвет киноформата "Letterbox", сочетающийся с остальными элементами приложения или цветом оборудования, вы получите красивый и удобный интерфейс. Цвет формата "Letterbox" определяется цветом фона в макете верхнего уровня. Рекомендуем применять либо темные цвета (например, черный), которые гармонируют с цветом оборудования, либо серый цвет, который уместен почти всегда, либо тот цвет, который подходит к интерфейсу вашего приложения. |
Используйте наборы векторных или крупных растровых изображений. |
При подгонке под размер экрана больших мониторов окно приложения может увеличиться до 200 %. Чтобы избежать артефактов или размытости при масштабировании, используйте графические примитивы либо такие векторные форматы, как Scalable Vector Graphics (SVG) или Extensible Application Markup Language (XAML). Если необходимо добавить растровые изображения, убедитесь, что их реальный размер вдвое больше, чем в окне приложения. В этом случае изображения не придется увеличивать. На рисунках ниже показано, насколько сильно снижается качество растровых изображений (справа) по сравнению с векторными (слева) при увеличении.
|
.png "Изменение размеров векторных и растровых изображений")
Адаптивный макет
Адаптивные макеты чаще всего используются в приложениях, связанных с созданием, обработкой или управлением содержимым. Обычно такие макеты состоят из определенных пропорциональных элементов и каркаса верхнего уровня. Например, приложение для чтения новостей содержит заголовок, строку состояния и область содержимого, расположенную по центру. Адаптивные макеты динамически изменяются с учетом размеров экрана, заполняя дополнительное пространство в соответствии с установленными для них правилами. Система Windows 8 предоставляет таким приложениям обширные возможности, которые подробно рассмотрены ниже.
.jpg "Адаптивный макет при различных разрешениях")
Управление пространством в адаптивном макете
Если вы выбрали для своего приложения поддержку адаптивного шаблона, следуйте приведенным ниже рекомендациям по эффективному использованию места на экране.
Рекомендации по подгонке приложений под размер экрана приведены в таблице.
| Рекомендация | Описание |
|---|---|
Определите, сколько дополнительного места понадобится каждой адаптивной области. |
Для каждой ячейки, которая может изменяться по горизонтали или вертикали, определите, как макет приложения может использовать дополнительное пространство на большом экране. |
Создайте каркас макета верхнего уровня. |
В этом каркасе должны быть определены основные области верхнего уровня, в частности расположение заголовка, а также областей навигации и содержимого. Пример каркаса верхнего уровня показан на рисунке ниже.
|
Выберите, какие части макета будут фиксированными, а какие — адаптивными. |
Для каждой ячейки в каркасе верхнего уровня укажите, как должны изменяться ее горизонтальный и вертикальный размеры в зависимости от разрешения экрана. На основе описания каркаса верхнего уровня и правил изменения размеров можно задать параметры GridLayout.
|
Укажите, какие размеры каждой адаптивной области должны изменяться. |
Для каждой ячейки, которая может изменяться по горизонтали или вертикали, определите, как макет приложения может использовать дополнительное пространство на больших экранах. |
Определите, как приложение должно использовать дополнительное пространство. |
После того, как вы указали правила изменения каждой адаптивной области, необходимо выбрать способ применения появившегося пространства. Существует множество вариантов использования дополнительного пространства, которые можно комбинировать друг с другом. Все они поддерживаются в Windows 8. |
Убедитесь, что все представления в коллекции имеют исходные размеры (100 % по ширине и высоте). |
Компонент ListView автоматически заполняет доступное пространство дополнительными элементами.
|
Для текстовых элементов используйте Multi-column Layout везде, где это возможно. |
Компонент Multi-column Layout автоматически добавляет столбцы для улучшения читаемости, а также равномерно перераспределяет содержимое в окне.
|
Для изображений используйте canvas везде, где это возможно. |
Объект canvas автоматически занимает все доступное ему пространство.
|
Больше свободного пространства. |
Сохраняйте объем содержимого приложения, которое вы отображаете, компенсируя его с помощью лишних пробелов.
|
Больше пространства для интерфейса. |
Больше содержимого приложения. В зависимости от способа адаптации вашего содержимого вы также можете отображать большее количество пробелов — или нет.
|
.png "Структура каркаса верхнего уровня")
.png "Параметры каркаса")
.png "Коллекция отображается как на малых, так и на больших экранах")
.png "Многостолбцовый макет отображается как на малых, так и на больших экранах")
.png "Полотно отображается как на малых, так и на больших экранах")
.png "две плитки с пустой областью")
.png "Две плитки")
Тестирование макета приложения
Каждое приложение необходимо протестировать при разных разрешениях экрана. Поскольку у большинства разработчиков в распоряжении не так уж много устройств, мы встроили поддержку тестирования приложений в такие средства как Visual Studio 11. Например, симулятор Windows позволяет тестировать приложения при различных разрешениях, ориентациях и разрешающих способностях экрана, как показано на рисунке ниже.
.png "Симулятор Windows из Visual Studio 11")
Blend для Microsoft Visual Studio 2012 для Windows 8 (см. рисунок ниже) добавляет встроенное меню, с помощью которого разработчики могут "на лету" проектировать свои приложения на экранах различных размеров, с разной плотностью пикселей. Полотно Blend динамически обновляется с учетом параметров экрана, которые выбираются прямо из меню.
.png "Встроенное меню Blend с различными параметрами разрешения экрана")
Related topics
Build date: 7/2/2013