Оформление в Windows 11

  • Статья

Несколько слов, отображаемых в Segoe UI Variable

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

Segoe UI Variable — это новый системный шрифт для Windows. Это обновленный подход к классическому Segoe и использует технологию переменных шрифтов, чтобы динамически обеспечить большую удобочитаемость при очень небольших размерах, и улучшенные контуры при размерах дисплея.

Метрики

Слово

Веса

Имя веса Значение оси веса Объект класса Visual
Светлый 300 Слово
Полусветлый 350 Слово
Регулярно 400 Слово Segoe, отображаемое в segoe UI Variable regular
Полужирный 600 Слово
Полужирный 700 Слово Segoe, отображаемое в segoe UI Variable полужирным шрифтом

Оптическая ось

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

Segoe UI Variable поддерживает две оси: вес и оптический размер. Ось веса является добавочной, в то время как ось оптического размера является автоматической и включенной по умолчанию. Ось оптического размера управляет формой и размером счетчиков в шрифте, чтобы определить приоритет разборчивости при небольших размерах и личности при больших размерах.

Использование переменной Segoe Fluent

Набор шрифтов

Windows 11 использует следующие значения для различных типов текста в пользовательском интерфейсе.

Пример Вес Размер/высота строки
Пример текста подпись Small 12/16 epx
Пример основного текста Текст 14/20 epx
Пример строгого текста текста Текст с запятой 14/20 epx
Пример большого текста основного текста Текст 18/24 epx
Пример текста подзаголовка Отображение с запятой 20/28 epx
Пример текста заголовка Отображение с запятой 28/36 epx
Пример большого текста заголовка Отображение с запятой 40/52 epx
Пример отображаемого текста Отображение с запятой 68/92 epx

Рекомендации по оформлению в Windows 11

Windows 11 использует переменную пользовательского интерфейса Segoe со следующими атрибутами в зависимости от контекста, в котором отображается текст.

attribute Значение Примечания
Weight Обычный, полубольный Используйте обычный вес для большинства текста, а для заголовков — semibold
Выравнивание Слева, по центру Выравнивание по левому краю по умолчанию, выравнивание по центру только в редких случаях, таких как текст под значками
Минимальные значения 14px Semibold, 12px Regular Текст меньше этих размеров и весов неразборчив в некоторых языках
Регистр Вариант предложения Использование регистра предложений для всего текста пользовательского интерфейса, включая заголовки
Усечение Многоточие и обрезка В большинстве случаев используйте многоточие; обрезка используется только в редких случаях

Примеры

Совет

Откройте приложение коллекции WinUI 3 и ознакомьтесь с принципами оформления в действии.

Приложение коллекции WinUI 3 содержит интерактивные примеры большинства элементов управления, функций и функций WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub