Макет содержимого и интервалы

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

Интервалы и каналы

Использование единообразного размера интервалов и отступов семантически группирует элементы пользовательского опыта в отдельные компоненты. Эти значения сопоставляются с логикой округленных углов и вместе помогают создать согласованный и удобный макет.

Две кнопки, разделенные 8 пикселями.

8epx между кнопками

Кнопка и всплывающий элемент, разделенные 8 пикселями.

8epx между кнопками и всплывающими панелями

Элемент управления и заголовок, разделенные 8 пикселями.

8epx между элементом управления и заголовком

Элемент управления и метка, разделенные 12 пикселями

12epx между элементом управления и меткой

Две области содержимого, разделенные 12 пикселями.

12epx между областями содержимого

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

16epx между поверхностью и краевым текстом

Текст + иерархия

Наша шкала размеров шрифтов (ссылка) предназначена для предоставления набора размеров, которые могут помочь передать иерархию в приложении.

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

Использование заголовка, субтитров и текста с интервалом 12epx.

Пример использования Body Strong вместо Title в ограниченном пространстве.

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

Пример использования стиля заголовка в ограниченном пространстве.

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

Списки и сетки

Существует множество стилей списков и сетки, которые можно создать. Ниже приведены различные композиции, используемые в Windows.

Пример списка с элементами списка с несколькими элементами.

Для списков с несколькими строками используйте текстовые стили 'Тело' и 'Подпись' из шкалы типов и значки размером 32px.

Используйте Body Strong для заголовков разделов.

Пример горизонтальных списков.

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

Пример списка, содержащего большие элементы списка.

Используйте стиль «Основной текст» для основного текста и выравнивание по левому краю с изображением, если в списке содержатся крупные графические элементы с текстом.

Использование элементов управления

Некоторые примеры того, как элементы управления могут быть связаны друг с другом в распространенных конфигурациях.

Пример экспандера с дочерними элементами управления.

Примеры использования элемента управления типа 'расширитель' (ссылка) со стилями списков и стандартными элементами управления. Элементы управления должны быть выровнены по правому краю, при этом между элементом управления и кнопкой расширения должно быть расстояние в 16 эпикс.

Пример выравнивания элементов управления внутри расширителя.

В этом примере показано выравнивание элементов управления при размещении внутри расширителя. Установите отступ для элементов управления на 48epx.

  • Last updated on