ДиалогиDialogs

Диалоговые окна следует использовать экономно, так как они могут нарушить работу, и у пользователя должен быть очевидный способ выхода.Dialogs should be used sparingly since they can be disruptive, and should have a clear way for the user to exit.


МасштабаSizes

У нас есть 3 варианта размеров диалоговых окон.We have 3 dialog sizes to choose from. Выберите размер, который подходит для имеющегося содержимого.Choose the size that is appropriate for the content you have.


КнопкиButtons

Кнопки выравниваются по правому краю.Buttons are right-justified. Все остальные элементы (флажки, текст справки и т. д.) должны быть выровнены по левому краю.All other elements (checkboxes, help text, etc.) should be left-justified. Не повторяйте отрицательные действия (никогда не предоставляйте кнопку ' X ' и ' Cancel ' одновременно).Don’t duplicate negative actions (Never provide an ‘X’ and a ‘Cancel’ button at the same time.). Кнопки "Применить" должны быть связаны с кнопками "Отмена".‘Apply’ buttons should be paired with ‘Cancel’ buttons.


ПрокруткиScrolling

В некоторых случаях содержимое будет прокручено.In some cases, content will scroll. Заголовок диалогового окна и другие важные сведения остаются на месте.The dialog title and other important information remains in place.


Внутренние поляPadding

Заполнение всеми четырьмя сторонами диалогового окна должно быть интервалами по 32.The padding around all four sides of the dialog should be 32px.


Шрифтовое оформлениеTypography

Мы используем Семиболд UI в 18pt (title2) и $app-Black для заголовков диалоговых окон.We use Segoe UI SemiBold at 18pt (title2) and $app-black for dialog titles. Для основного текста мы используем регулярный пользовательский интерфейс в 14pt (Base) и $app-Black.For body text, we use Segoe UI Regular at 14pt (base) and $app-black.