Определение макетов и представлений (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
Вы можете создавать приложения среды выполнения Windows с интерфейсом, обеспечивающим гибкую и гармоничную работу на устройствах с разнообразными форм-факторами, при разных размерах экрана и состояниях просмотра. Все это обеспечивается благодаря согласованному и предсказуемому управлению пользовательским интерфейсом. Вам нужно приложение, которое отлично выглядит и на телефоне, и на планшете, и на большом мониторе с высоким разрешением, в книжной и альбомной ориентациях, а также при изменении размера окна приложения. Если заранее продумать, какие устройства и представления будут применять пользователи, то пользовательский интерфейс сможет гибко подстраиваться под их предпочтения.
.png "Полноэкранное представление с альбомной и книжной ориентацией и узкое представление с измененным размером")
Настройка пользовательского интерфейса приложения среды выполнения Windows на JavaScript связана с двумя основными факторами: с представлениями, поддерживаемыми приложением, и необходимыми макетами. Чтобы их определить, используются каскадные таблицы стилей (CSS).
CSS. Пользовательский интерфейс описывается и управляется с помощью стандартных CSS, которые отделяют содержимое от его представления, т. е. отображаемое от способов отображения. Такое разделение позволит вам донести до пользователя целостный, пригодный к использованию и приятный глазу интерфейс, который поддерживает множество устройств, форм-факторов, размеров экрана, пользовательских установок и состояний просмотра.
Макеты. Макеты — это механизмы, с помощью которых программа приспосабливается к поддерживаемым ею представлениям. Стиль, структура и внешний вид содержимого приложения определяются с помощью модулей макетов в каскадных таблицах стилей уровня 3 (СSS3). К таким макетам относятся сетки, расположения в несколько столбцов, области и адаптируемые блоки, которые могут приспосабливаться к выбранному пользователем режиму просмотра содержимого.
Приложение, включающее функцию семантического масштабирования, может указать семантические пороговые значения, где в зависимости от разбиения и количества представленной информации пользовательский интерфейс может переключиться между сеткой и линейным представлением.
Представления. Представление — это способ доступа к содержимому приложения и управления им со стороны пользователя.
- Альбомная или книжная ориентация
- Полный экран или измененный размер
- Поверхности интерфейса: сдвигаемые, масштабируемые, измененные
- Особые элементы интерфейса, например панель результатов поиска или структура папки
Для определения макетов и представлений в приложениях среды выполнения Windows требуется знание HTML, JavaScript и CSS.
В этом разделе
| Тема | Описание |
|---|---|
Вы можете определить макеты приложения для любого размера окна или ориентации. |
|
Краткое руководство: разработка приложений для разных размеров окон |
Разрабатывая приложение, которое бы выглядело интересным и хорошо работало при любом размере окон, необходимо решить, создавать ли дополнительные макеты для используемого по умолчанию полноэкранного горизонтального макета. |
Краткое руководство: создание нескольких окон для приложения |
Вы можете помочь пользователям работать эффективнее, дав им возможность открывать несколько независимых задач в отдельных окнах. |
Чтобы предоставить наиболее гибкий и адаптируемый интерфейс пользователям приложения среды выполнения Windows, надо сначала решить, какой режим макета лучше всего подходит для содержимого этого приложения, а также в каких представлениях это содержимое будет использоваться. В этом разделе описываются компоненты макета, содержащиеся в каскадных таблицах стилей третьего поколения (CSS3) и поддерживаемые приложениями Магазина Windows в Windows 8. |
|
Для размещения элементов пользовательского интерфейса на страницах приложения вы можете использовать шаблон макета, описанный здесь. Задание шаблонов для полей, заголовков страницы, ширины переплета и других подобных элементов позволяет поддерживать единообразие приложений и упрощает взаимодействие людей с системой. |