Определение макетов и представлений (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

Настройка пользовательского интерфейса приложения среды выполнения Windows на JavaScript связана с двумя основными факторами: с представлениями, поддерживаемыми приложением, и необходимыми макетами. Чтобы их определить, используются каскадные таблицы стилей (CSS).

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

Макеты. Макеты — это механизмы, с помощью которых программа приспосабливается к поддерживаемым ею представлениям. Стиль, структура и внешний вид содержимого приложения определяются с помощью модулей макетов в каскадных таблицах стилей уровня 3 (СSS3). К таким макетам относятся сетки, расположения в несколько столбцов, области и адаптируемые блоки, которые могут приспосабливаться к выбранному пользователем режиму просмотра содержимого.

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

Представления. Представление — это способ доступа к содержимому приложения и управления им со стороны пользователя.

• Альбомная или книжная ориентация
• Полный экран или измененный размер
• Поверхности интерфейса: сдвигаемые, масштабируемые, измененные
• Особые элементы интерфейса, например панель результатов поиска или структура папки

Для определения макетов и представлений в приложениях среды выполнения Windows требуется знание HTML, JavaScript и CSS.

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

Тема	Описание
Краткое руководство: определение макетов приложения	Вы можете определить макеты приложения для любого размера окна или ориентации.
Краткое руководство: разработка приложений для разных размеров окон	Разрабатывая приложение, которое бы выглядело интересным и хорошо работало при любом размере окон, необходимо решить, создавать ли дополнительные макеты для используемого по умолчанию полноэкранного горизонтального макета.
Краткое руководство: создание нескольких окон для приложения	Вы можете помочь пользователям работать эффективнее, дав им возможность открывать несколько независимых задач в отдельных окнах.
Выбор макета	Чтобы предоставить наиболее гибкий и адаптируемый интерфейс пользователям приложения среды выполнения Windows, надо сначала решить, какой режим макета лучше всего подходит для содержимого этого приложения, а также в каких представлениях это содержимое будет использоваться. В этом разделе описываются компоненты макета, содержащиеся в каскадных таблицах стилей третьего поколения (CSS3) и поддерживаемые приложениями Магазина Windows в Windows 8.
Страница размещения приложения	Для размещения элементов пользовательского интерфейса на страницах приложения вы можете использовать шаблон макета, описанный здесь. Задание шаблонов для полей, заголовков страницы, ширины переплета и других подобных элементов позволяет поддерживать единообразие приложений и упрощает взаимодействие людей с системой.

 

Связанные разделы

Создание макета пользовательского интерфейса

Создание макета страницы приложения