Проектирование гибкого макета (приложения в стиле Metro с использованием JavaScript и HTML)

  • Статья

[Это предварительная документация, которая может изменяться.]

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

Состояние просмотра

Состояние просмотра представляет три способа отображения приложений в стиле Metro, которые может выбрать пользователь: прикрепленный, заполненный и полноэкранный режим, как показано на следующих рисунках.

Состояние просмотра в полноэкранном режиме

Во весь экран

Приложение занимает весь экран.
Состояние просмотра в прикрепленном режиме

Прикреплено

Приложение прикреплено к узкой области всего экрана.
Состояние просмотра в заполненном режиме

Заполненный режим

Приложение занимает оставшуюся область на экране, не занятую приложением в прикрепленном состоянии.

 

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

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

Ориентация экрана

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

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

Взаимодействия с пользователем

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

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

Создайте представления, позволяющие пользователям изменять размер и увеличивать масштаб содержимого приложения.

Область, поддерживающая изменение размеров

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

Сдвиг нескольких страниц содержимого

В этом разделе

Тема Описание

Краткое руководство: определение макетов приложений для состояний просмотра

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

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

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

Руководство по масштабированию в зависимости от экранов

В этом разделе приведены рекомендации по проектированию и разработке макета приложения в стиле Metro для различных экранов, поддерживаемых в Windows 8.

Руководство по прикрепленному и заполненному режимам представления

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