Основы проектирования содержимого для приложений для Windows

  • Статья

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

Интервалы и подготовки

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

Two buttons separated by 8 pixels.

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

A button and a flyout separated by 8 pixels.

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

A control and a header separated by 8 pixels.

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

A Control and a label separated by 12 pixels

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

Two content areas separated by 12 pixels.

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

A surface containing text with 12 pixel gutters on both sides.

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

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

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

An example of text using title, subtitle, and body styles when there is adequate space.

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

An example of using Body Strong instead of Title in a confined space.

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

An example of using the Caption style in a confined space.

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

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

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

An example list with multi-element list items.

Для списков с несколькими строками используйте текст и подпись из пандуса типа и значки 32epx.

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

An example of horizontal lists.

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

An example list containing large list items.

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

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

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

An example of an expander with child controls.

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

An example how controls inside an expander are aligned.

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