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

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

Размеры мини-приложений

Мини-приложения предоставляют пользователю возможность выбора из трех размеров. Рекомендуется создать и рассмотреть все 3 размера и адаптировать дизайн специально для каждого размера. Небольшие и средние размеры обеспечивают лучшую возможность обнаружения по мере того, как они чаще отображаются в динамическом веб-канале. Большие размеры полезны для отображения более подробных сведений. Поддержка нескольких размеров позволяет пользователям настраивать мини-приложения, которые они предпочитают закреплять на доске мини-приложений.

Небольшой

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

Средняя

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

Большой

Большие размеры позволяют отображать дополнительные сведения, но содержимое по-прежнему должно быть сосредоточено и легко потребляемо. Кроме того, карточка большого размера может выделить одно изображение или раздел и иметь более иммерсивный интерфейс. Большой размер должен иметь не более 3-4 целевых объектов касания.

Цвет и тематические тона

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

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

Рекомендации по специальным возможностям веб-содержимого (WCAG) 2.0 уровня AA требуют коэффициент контрастности по крайней мере 4.5:1 для обычного текста и 3:1 для большого текста. WCAG 2.1 требует коэффициент контрастности не менее 3:1 для компонентов графического и пользовательского интерфейса (таких как границы ввода формы). Уровень AAA WCAG требует коэффициент контрастности не менее 7:1 для обычного текста и 4.5:1 для большого текста. Большой текст определяется как 14 пунктов (обычно 18,66 пикселя) и полужирный или более крупный, или 18 пунктов (обычно 24 пикселя) или больше.

Отступы

Каждое мини-приложение имеет 16px-отступ вокруг него и 48px область для атрибуции, в которой нельзя размещать содержимое. Единственным компонентом, который может жить в правом поле и нижнем поле, являются точки разбиения на страницы. Примеры размещения точек пагинации см. в разделе "Руководство по проектированию взаимодействия с мини-приложением".

Для мини-приложений, использующих контейнеры, интервал между каждым элементом составляет 4px, а контейнеры должны касаться краев полей. Содержимое также должно использовать интервалы и размеры, кратные четырем пикселям, для достижения чистого, пиксельно идеального дизайна на разных разрешениях экрана.

При проектировании содержимого также следует ознакомиться с рекомендациями по интервалам и канавкам в Content design basics for Windows apps.

Оформление текста

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

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

В конструкторе Adaptive Cards заголовки и основной текст используют цвет по умолчанию, связанный с темой виджета. Дополнительным вариантом для отличия заголовка от основного текста является использование более приглушенного варианта цвета по умолчанию. Цвет акцента используется только для гиперссылок.

Иконография

Изображения профилей

Если мини-приложение включает в себя отображение профилей пользователей (например, веб-канала или потока социальных сетей) используйте один из следующих допустимых размеров профиля круга: 96x96px, 48x48px, 32x32px или 24x24px.

Всплывающие подсказки

Советы по инструменту можно использовать при усечении текста заголовка в мини-приложении. Следуя лучшим практикам, текст должен вписываться в пространство виджета и не требовать усечения, однако это может не всегда получаться в зависимости от таких сценариев, как локализация языка, масштабирование системного текста или при цитировании (т. е. название статьи, имя песни). Это не относится к основному тексту в мини-приложении.