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

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

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

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

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

Использование сетки

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

Сетка состоит из единиц и субъединиц. Базовой единицей измерения является единица. Одна единица равна 20 × 20 пикселей. Каждая единица делится на субъединицы размером 5 × 5 пикселей. Каждая квадратная единица состоит из 16 субъединиц. На следующем рисунке показана сетка в левом верхнем углу экрана. Рисунок увеличен, чтобы показать пиксели, субъединицы и единицы.

Заголовок страницы

Базовая линия заголовка страницы должна располагаться на расстоянии 5 единиц (100 пикселей) от верхнего края. Левое поле для заголовка страницы составляет 6 единиц, или 120 пикселей. Заголовок страницы Windows 8 — это набор стилей SegoeUI 20. Подробнее о наборе стилей см. в разделе Руководство и контрольный список для текста и оформления.

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

Область содержимого

Верхняя граница области содержимого располагается на расстоянии 7 единиц (140 пикселей) от края. Левое поле составляет 6 единиц, или 120 пикселей. Нижнее поле является гибким. Для содержимого, сдвигаемого горизонтально, ширина нижнего поля должна находиться в пределах от 2,5 единиц (50 пикселей) до 6,5 единиц (130 пикселей). Для содержимого, сдвигаемого вертикально, верхнее и левое поля остаются прежними. Нижнее поле не определяется, потому что содержимое прокручивается за экран.

Значения горизонтальной отбивки

Горизонтальная отбивка между элементами содержимого варьируется в зависимости от элементов. Элементы с резкими границами (рисунки и пользовательские плитки) имеют 2 субъединицы (10 пикселей) отбивки между плиткой и сопровождающим текстом. Списки имеют 2 единицы (40 пикселей) отбивки между столбцами. Элементы с резкими границами имеют 2 субъединицы (10 пикселей) отбивки между столбцами.

Значения вертикальной отбивки

Вертикальная отбивка между элементами содержимого также варьируется в зависимости от типов элементов. Плитки и текстовые списки имеют 1 единицу (20 пикселей) вертикальной отбивки между элементами в строке. Объекты с резкими границами имеют 2 единицы (10 пикселей) отбивки между элементами в строке.

Горизонтальная отбивка между группами

Отбивка между группами составляет 4 единицы, или 80 пикселей. Этой отбивки достаточно для того, чтобы легко отличать при сдвиге одну группу от другой.

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

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

Руководство и контрольный список для текста и оформления