Геометрия в Windows

Округленные угла и интервалы элементов в Windows 11

Геометрия описывает форму, размер и расположение элементов пользовательского интерфейса на экране. Эти основные элементы дизайна помогают ощущать согласованность во всей системе проектирования.

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

Совет

В этой статье описывается применение языка Fluent Design к приложениям Windows. Дополнительные сведения см. в разделе Fluent Design — Shapes.

Скругленные углы

Диалоговое окно с округленными углами

Windows 11 применяет округленные углы ко всем окнам приложений верхнего уровня. Это же относится к большинству распространенных элементов управления, таких как Button и ListView.

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

Радиус угла Использование
8px Контейнеры верхнего уровня, такие как окна приложений, всплывающие элементы и диалоговые окна округляются с помощью радиуса угла 8px.
4px Элементы на странице, такие как кнопки и фоновые элементы списка, округляются, применяя радиус 4px.
0px Прямые края, пересекающиеся с другими прямыми краями, не округляются.
0px Углы окна не округляются при привязке или развернутии окон.

Прямоугольные элементы пользовательского интерфейса

Стандартные элементы управления, которые пользователи всегда видят на экране, используют радиус угла 4px . К ним относятся такие элементы управления, как Button, CheckBox, ComboBox, TextBox и ListView.

Кнопка с выделенными скругленными углами

Элементы пользовательского интерфейса всплывающего окна и наложения

Временные элементы пользовательского интерфейса, которые временно появляются на экране или перекрывают другие элементы интерфейса, используют радиус угла 8px. К ним относятся такие элементы, как ContentDialog, Flyout, MenuFlyout и TeachingTip. Подсказка является исключением, использующая 4px из-за её небольшого размера.

Пример всплывающего меню

Элементы панели

Элементы пользовательского интерфейса, сформированные как полосы или линии, используют радиус угла 4px . К ним относятся такие элементы управления, как ProgressBar, ScrollBar и Ползунок.

Пример индикатора выполнения

Когда не следует округлять

Есть случаи, где угол элемента управления не должен быть округлен, и поэтому мы не округляем их по умолчанию.

  • Если несколько элементов пользовательского интерфейса, размещенных внутри контейнера, касаются друг друга, например две части SplitButton. При контакте не должно быть места.

SplitButton

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

Снимок экрана: всплывающее меню автоподсказки, в котором некоторые уголки не округляются.

Настройка радиуса угла

Угловые радиусы по умолчанию управляются двумя глобальными ресурсами: ControlCornerRadius (по умолчанию 4px) и OverlayCornerRadius (по умолчанию 8px). Эти значения можно переопределить в App.xaml, чтобы изменить округление во всех элементах управления в приложении.

Если вы создаете классическое приложение Win32, вы можете выбрать округленные углы для окон приложения с помощью API DWM. Дополнительные сведения см. в руководстве по применению скругленных углов в настольных приложениях.

  • Last updated on