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

Рабочий интерфейс оператор открывает каждый день, и от его вида зависит, найдёт ли человек нужную кнопку с первого взгляда и не нажмёт ли случайно не ту. Ниже описано, как с помощью цвета, градиента, теней, скруглений, значков и шрифтов сделать интерфейс аккуратным и понятным, как задать оформление один раз и применить его ко многим элементам (паттерны), как превратить кнопку в лейбл и обратно, как вставить готовый элемент из JSON и как пользоваться менеджером изображений. Примеры взяты из учебного проекта «Демо-зал» (см. «UI-Designer»); как создать сами элементы, показано в «Первом интерфейсе», а как устроены состояния кнопок — в «Кнопках и состояниях».

Вкладка «Главная» проекта «Демо-зал» на UI-Panel

Вкладка «Звук»: светлые карточки, градиентные ползунки, зелёная и красная кнопки

Несколько правил, которые работают

Это не требования редактора, а опыт «Демо-зала»: интерфейс получается спокойным и читаемым, если держаться нескольких правил.

• Светлая тема. Белые карточки с мягкой тенью на светло-сером фоне. Глянцевый экран панели в освещённом зале не теряет текст в бликах, а белый фон не утомляет за рабочий день.

• Акцент — только у того, что включено или выбрано. Всё остальное нейтральное: белое, серое. В «Демо-зале» выбранная вкладка и выбранный источник — синие, включённый переключатель — зелёный, опасное действие («Выключить всё») — красное. Когда яркого цвета мало, он сразу показывает, что происходит.

• Крупные цели касания. Кнопка — не меньше 72 пикселей по меньшей стороне (на панели 10″ с экраном 1920 × 1200 это около 8 мм). Палец не промахивается, и кнопки можно нажимать не глядя.

• Крупный текст. Меньше 24 пикселей в «Демо-зале» нет ни одной надписи; основные подписи кнопок — 26–30, значения — 48 и 72.

• Единые отступы и скругления. Поля от края экрана и внутри карточки одинаковые (32 пикселя), промежутки между карточками — 24, углы у карточек, кнопок и окон скруглены одинаково для каждого вида.

• Один шрифт, два начертания. В «Демо-зале» — Inter Tight, обычный и жирный.

Палитра «Демо-зала» — для образца; подберите свою, но сохраните роли цветов.

Роль	Цвет
Фон страницы	градиент #F5F8FC → #EDF1F6
Карточка	#FFFFFF, рамка #E2E8F0
Основной текст / вторичный / подпись	#0F172A / #334155 / #64748B
Выбрано	градиент #3B82F6 → #2563EB
Включено	градиент #16A34A → #15803D
Опасное	градиент #EF4444 → #DC2626; мягкий вариант: заливка белая, текст #B91C1C, рамка #FCA5A5

Цвет и градиент

Любое поле цвета — «Цвет фона», «Цвет границы», «Цвет шрифта», «Цвет» у тени, «Цвет подложки» у фрейма (см. «Фрейм и Pop Up») — открывает одно и то же окно выбора цвета.

1. Выберите элемент и раскройте нужный раздел, например «Свойства фона и изображения».

2. Нажмите поле цвета: откроется окно выбора цвета.

3. Выберите «Сплошной», чтобы задать один цвет, или «Градиент», чтобы задать плавный переход.

4. Для градиента выберите вид: «Лин.» (линейный) или «Рад.» (радиальный). У линейного градиента задайте угол: круговым регулятором или числом от 0 до 360°.

5. На градиентной полосе — маркеры, по одному на каждый цвет. Щёлкните по полосе, чтобы добавить маркер. Выберите маркер, чтобы изменить его цвет, и перетащите его, чтобы изменить положение. Значок корзины удаляет выбранный маркер, но градиент всегда держит не меньше двух.

6. Цвет выбирайте ползунком оттенка, палитрой или вводом значения: над готовыми цветами поле «HEX» (например, #2F72F0), рядом поля R, G, B, A (A — прозрачность, от 0 до 100) и строка CSS. Отдельный ползунок тоже задаёт прозрачность — от прозрачного до непрозрачного. Пипетка, если браузер её поддерживает, берёт цвет с экрана.

Окно выбора цвета: 1 — переключатель «Сплошной» / «Градиент», 2 — вид градиента «Лин.» / «Рад.», 3 — угол, 4 — градиентная полоса с маркерами, 5 — удалить маркер

Что вы увидите: поле цвета и сам элемент на холсте сразу показывают выбранный цвет или градиент.

Градиент — простой способ сделать плоскую кнопку «объёмной»: в «Демо-зале» у выбранной кнопки и у включённого переключателя заливка — переход между двумя оттенками одного цвета (см. палитру выше). У карточек сценариев синий и фиолетовый градиенты заданы под углом 135°. Берите два соседних оттенка: резкий переход выглядит дёшево.

Примечание

Переключатель «Градиент» показывается не в каждом поле цвета. Если его нет, у поля доступен только сплошной цвет.

Чтобы градиент кнопки плавно менялся между состояниями, в разделе «Переход» кнопки задайте «Длительность перехода (мс)» и включите «Использовать переход для градиентных фонов». Включайте это только там, где плавность нужна: переход градиентных фонов увеличивает нагрузку на панель.

Тени, граница и скругление

Три приёма превращают прямоугольник в аккуратную карточку или кнопку: мягкая тень, тонкая рамка и скруглённые углы.

Тени

Тени задаются в разделе «Свойства тени». Теней у элемента может быть несколько, они складываются; новая тень добавляется в начало списка.

1. Выберите элемент. Если это кнопка, снимите «Применить ко всем состояниям»: пока он включён, раздел просит отключить его, и редактировать тени нельзя. Затем выберите вкладку нужного состояния.

2. В разделе «Свойства тени» нажмите значок «Добавить тень». Если выделено несколько элементов, значок недоступен: тень добавляется только к одному.

3. Щёлкните строку тени (имя со стрелкой): откроется окно с полями тени.

4. Задайте поля тени: «Имя», «X» и «Y» (смещение), «Радиус размытия», «Радиус распространения», «Цвет». Флажок «Внутри» делает тень внутренней.

5. Чтобы добавить ещё одну тень, нажмите значок снова. Значок «Удалить тень» убирает тень, значок «Перенести тени из другого состояния» копирует тени из другого состояния кнопки.

«Свойства тени»: 1 — «Добавить тень», 2 — «Перенести тени из другого состояния», 3 — «Удалить тень», 4 — поля тени, 5 — «Внутри»

Как сделаны тени в «Демо-зале»:

Что	Как
Белая карточка	две мягкие тени одного цвета #0F172A, но очень прозрачного: X 0, Y 1, размытие 2 и X 0, Y 10, размытие 30 (похожая «Карточка из одного лейбла» — в «Сложной графике»)
Цветная кнопка (сценарий, выбранное, включённое)	одна цветная тень: X 0, Y 8, размытие 20, цвет самой кнопки с прозрачностью около 30 % — получается «свечение» (рецепт «Свечение выбранной кнопки» — в «Сложной графике»)
Нажатая кнопка	тень с флажком «Внутри»: кнопка выглядит вдавленной (рецепт «„Вдавленная“ кнопка» — там же)
Окно подтверждения	одна большая тень: X 0, Y 24, размытие 64, тёмный цвет

Тени тем мягче, чем больше «Радиус размытия» и прозрачнее цвет. Тёмная плотная тень с малым размытием выглядит грязной рамкой.

Граница и скругление

Раздел «Свойства границы» есть у кнопки, фона, списка, лейбла, даты, времени, клавиатуры, инпута и фрейма. У слайдера, спидометра и Web URL его нет.

1. Выберите элемент (у кнопки — вкладку состояния, как для теней).

2. В разделе «Свойства границы» в списке «Стиль границы» выберите «Сплошной» (или «Пунктирный», «Точечный», «Двойной», «Канавка», «Гребень», «Вдавленный», «Выпуклый»; «Нет» убирает границу).

3. Задайте «Ширину границы» и «Цвет границы».

4. Скруглите углы в поле «Радиус скругления углов».

По умолчанию значение действует на все стороны сразу. Если нужна разная ширина, цвет, стиль или радиус по сторонам, переключите «Редактировать все стили» / «Редактировать все ширины» / «Редактировать все цвета» / «Редактировать все радиусы» и задайте отдельно верх, право, низ, лево (для радиуса — отдельно каждый угол: верх-лево, верх-право, низ-право, низ-лево).

«Свойства границы»: 1 — «Стиль границы», 2 — «Ширина границы», 3 — «Цвет границы», 4 — «Радиус скругления углов», 5 — «Редактировать все стили»

В «Демо-зале» скругление — часть общего вида: карточка 28, клавиша 20–24, вкладка 22, окно 32, а переключатели в шапке — «пилюли» с радиусом 36. Рамка у карточек и белых клавиш — тонкая светло-серая (#E2E8F0, #CBD5E1); у красной кнопки «Выключить всё» — розовая (#FCA5A5).

Значки на кнопках

Значок объясняет кнопку без слов и помогает найти её быстрее: оператор запоминает картинку раньше, чем читает подпись. Значок — отдельный слой в кнопке и лейбле (и в инпуте), со своим разделом «Свойства иконки».

1. Выберите кнопку (или лейбл). Если нужно, чтобы значок отличался в разных состояниях, снимите «Применить ко всем состояниям» и выберите вкладку.

2. Раскройте «Свойства иконки».

3. В поле «Иконка» откроется сетка значков. Найдите нужный в поле «Поиск иконок…» (поиск идёт по названию и тегам; крестик очищает запрос) и щёлкните по нему. Первый пункт «Нет иконки» убирает значок.

4. Задайте «Размер» и «Цвет» значка.

5. «Выравнивание» — положение значка на кнопке: сетка 3 × 3 (верх, центр, низ и лево, центр, право).

6. «Внутренний отступ» — отступ значка от краёв кнопки: при включённом «Редактировать все отступы» одно поле, при выключенном — четыре поля «Отступ (сверху)», справа, снизу, слева.

«Свойства иконки»: 1 — «Иконка», 2 — «Размер», 3 — «Цвет», 4 — «Выравнивание», 5 — «Внутренний отступ»

Выбор значка: 1 — «Поиск иконок…», 2 — крестик очистки, 3 — «Нет иконки»

Что вы увидите: значок появится на кнопке сразу. «Шрифт» и «Жирный шрифт» у значка нет — они только у текста.

Текст, значок и картинка в одной кнопке

На кнопке три слоя: текст, значок и внутреннее изображение (раздел «Свойства внутреннего изображения»). Непрозрачное внутреннее изображение закрывает значок и текст; чтобы значок был виден, поднимите «Z-ось» в разделе «Свойства иконки». Порядок слоёв и примеры — в «Сложной графике», раздел «Слои и Z-ось».

В «Свойствах иконки» есть и собственные «Свойства тени» и «Свойства границы» слоя значка: значку можно дать свою рамку и тень, не затрагивая кнопку.

В «Демо-зале» значки подобраны по смыслу: вкладки — «дом», «экран», «видеозвонок», «микрофон», «звук», «камера»; сценарии — «люди», «видеозвонок», «выключение»; «Звук включён» и «Звук выключен» — динамик и динамик с чертой. Один и тот же значок в одном месте всегда значит одно и то же; не используйте два разных значка для одного действия.

Шрифты

Шрифт выбирается в разделе «Свойства текста»: поле «Шрифт» — выпадающий список, «Жирный шрифт» — рядом. Поле есть у лейбла, кнопки, фона, даты, времени и инпута.

В списке 26 гарнитур:

• рубленые без засечек: Open Sans, Roboto, Roboto Condensed, Roboto Flex, PT Sans Narrow, Fira Sans Condensed, Nunito Sans, Inter Tight, Montserrat, Libre Franklin, Oswald, Arial, Helvetica, HelveticaNeue, HelveticaNeue-Ultra Light, Verdana, Trebuchet MS, Thonburi;

• с засечками: Merriweather, Times New Roman, Georgia;

• моноширинные: Courier, Courier New;

• акцентные: Russo One, Advent Pro, Rubik Mono One.

«Свойства текста»: 1 — «Шрифт», 2 — «Жирный шрифт», 3 — «Размер»

Советы:

• Для всего интерфейса хватает одной гарнитуры. Разные шрифты в одном экране выглядят случайно.

• Проверьте выбранный шрифт на самой панели.

• Загрузить свой шрифт в UI-Designer нельзя — только выбрать из списка.

• Текст лейбла помещается в одну строку: длинная надпись обрезается, а не переносится. Перенос строки — только если вы сами поставили его в тексте.

Паттерны: оформить один раз, применить ко многим

Если у вас двадцать кнопок и каждую нужно сделать одинаковой, оформлять двадцать раз не нужно. Паттерн — это шаблон оформления для элементов одного типа. Элементы, привязанные к паттерну, берут из него свои оформительские свойства; поменяли паттерн — поменялись все привязанные элементы.

Чтобы создать паттерн:

1. В дереве слева выберите интерфейс (верхний уровень, а не страницу).

2. В «Свойствах» нажмите «Редактировать паттерны». Рабочая область заменится редактором паттернов, панель инструментов холста исчезнет.

3. Нажмите значок «Создать Паттерн» и выберите тип: «Паттерн Кнопки», «Паттерн Лейбла», «Паттерн Фрейма» или паттерн другого элемента (фона, слайдера, спидометра, клавиатуры, инпута, списка, Web URL, даты, времени).

4. Выберите карточку паттерна в списке слева: его оформление задаётся в правой панели «Свойства» так же, как у обычного элемента (цвет, граница, тени, шрифт). У паттерна кнопки там четыре вкладки состояний (DEFAULT, SELECTED, PRESSED, DISABLED) и флажок «Применить ко всем состояниям». Он включён по умолчанию; чтобы оформить состояния по отдельности, снимите его. Положения паттерн не задаёт: полей «X» и «Y» на его странице нет.

5. Выйдите из редактора крестиком «Выйти из редактора паттернов». Откроется первая страница интерфейса.

Редактор паттернов: 1 — «Создать Паттерн», 2 — импорт паттерна из JSON, 3 — «Фон» (фон рабочей области), 4 — «Выйти из редактора паттернов», 5 — список паттернов

В редакторе паттернов слева — список карточек: щелчок выбирает паттерн, двойной щелчок переименовывает. Новые паттерны получают имена «Pattern 1», «Pattern 2» и так далее; дайте осмысленные имена, например «Карточка» или «Клавиша». Значок корзины удаляет. Значок «Фон» (подсказка) выбирает, на каком фоне вам удобнее видеть паттерн: «Белый», «Черный» или «Сетка». Это настройка только вашего окна: на интерфейс она не влияет.

Как привязать элемент к паттерну:

1. Выберите элемент на странице.

2. В «Свойствах» раскройте раздел «Основные свойства» и откройте список «Паттерн». В нём пункт «Без паттерна» и паттерны того же типа, что и элемент: для лейбла — только паттерны лейблов.

3. Выберите паттерн.

Элемент с паттерном: 1 — список «Паттерн», 2 — «Отвязать от паттерна» у свойства

Что вы увидите: элемент принимает вид паттерна, а поля оформления становятся полупрозрачными, то есть неактивными: значение берётся из паттерна. Если какое-то свойство одному элементу нужно сделать иначе, включите у этого свойства флажок «Отвязать от паттерна»: для него элемент использует собственное значение, а остальное по-прежнему берёт из паттерна.

Что нужно знать:

• Если выделено несколько разных привязанных элементов, поля паттерна скрыты: привязывайте элементы по одному.

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

• Для старой (обычной) кнопки паттерна нет: паттерн кнопки (пункт «Паттерн Кнопки» в меню «Создать Паттерн») — для кнопки, которая создаётся пунктом «Создать Кнопку».

Конвертация элементов

Иногда надпись должна стать кнопкой или кнопка — просто надписью. Перерисовывать не нужно: элемент можно конвертировать.

1. Выделите один элемент: кнопку или лейбл. Если выделено несколько или другой элемент, значок недоступен.

2. Над холстом нажмите значок «Конвертировать элемент».

3. Выберите пункт меню:

   • у кнопки — «Конвертировать кнопку в лейбл (выбрать состояние)»: затем выберите состояние «Default», «Selected», «Pressed» или «Disabled»; лейбл получит оформление выбранного состояния (текст, значок, внутреннее изображение, тени, границу, фон);

   • у лейбла — «Конвертировать лейбл в кнопку»: все четыре состояния получат одинаковое оформление лейбла;

   • у старой (обычной) кнопки — «Конвертировать кнопку в кнопку»: она становится кнопкой нового вида, состояния сохраняют свои картинки.

Конвертация: 1 — значок «Конвертировать элемент», 2 — пункт меню для выделенного элемента

Что вы увидите: рядом с исходным элементом появится новый с именем «<имя> converted». Исходный элемент не удаляется — удалите его сами, когда убедитесь, что результат подходит. Если конвертация вам не нужна, отмените её сочетанием Ctrl + Z.

Что делать после конвертации:

• Переименуйте новый элемент: имя с пробелом и словом «converted» не годится как ID. Программа в U-Logic (редактор программы управления) ищет элемент по имени (см. «Кнопки и состояния»).

• Настройте кнопку заново: ссылки и действия у новой кнопки сброшены: «Перенаправить на», «Открыть Фрейм», «Скрыть Фрейм» нужно указать снова. Оформление лейбла попадает во все четыре состояния кнопки одинаково. Снимите «Применить ко всем состояниям» и оформите SELECTED, PRESSED и DISABLED отдельно (у кнопки состояния свои, в отличие от лейбла).

Импорт элемента из JSON

Если у вас есть готовое описание элемента в формате JSON (например, полученное из другого проекта или составленное по образцу), его можно вставить в интерфейс, не создавая элемент вручную.

1. Откройте нужную страницу или оверлей (подстраницу со своим холстом).

2. Над холстом нажмите значок «Импортировать Элемент» или клавиши Ctrl + I. Откроется окно «Импортировать Элемент из JSON».

3. Загрузите файл .json (перетащите в область загрузки или выберите) или вставьте текст в поле «Вставьте ваш JSON здесь». Если выбран файл, поле для текста блокируется: файл главнее.

4. Если текст неровный, нажмите «Выровнять JSON»: он отформатируется. Если в тексте ошибка, поле подсвечивается красным.

5. Нажмите «Импортировать». Пока нет файла или корректного JSON, кнопка недоступна. «Отменить» закрывает окно без изменений.

Окно «Импортировать Элемент из JSON»: 1 — область загрузки файла, 2 — «Выровнять JSON», 3 — «Вставьте ваш JSON здесь», 4 — «Импортировать»

Что вы увидите: на странице появится новый элемент. В JSON может быть как один элемент, так и список элементов; элементы неизвестного типа пропускаются.

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

• идентификатор, порядок наложения, масштаб, видимость, признаки скрытия и блокировки, принадлежность группе;

• все картинки: фоновые, внутренние изображения, картинки ползунка, в том числе внутри слоёв и состояний;

• связи с другими элементами: клавиатура, кнопка отправки и очистки, исходный инпут, ссылки и действия кнопки («Открыть Фрейм», «Скрыть Фрейм», «Перенаправить на»);

• неизвестное имя значка заменяется на пустое.

Размер элемента не может быть меньше минимального, а положение — отрицательным: слишком малые значения исправляются. Если в JSON у элемента указан паттерн по имени и в интерфейсе есть паттерн того же типа с таким именем, элемент привяжется к нему.

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

Тот же значок есть в редакторе паттернов: там JSON превращается в новый паттерн.

Менеджер изображений

Менеджер изображений — хранилище картинок проекта: в нём они собраны в библиотеки и группы.

Открыть его можно двумя способами: нажать «МЕНЕДЖЕР ИЗОБРАЖЕНИЙ» на стартовом экране «Давайте начнем» или выбрать библиотеку в панели «Менеджер изображений» в рабочей области редактора. Панель сворачивается, свёрнутая — вкладка с той же подписью. В панели — список названий библиотек: щелчок по названию выбирает библиотеку.

В окне менеджера:

• в шапке — «Менеджер изображений» и «Библиотека: <имя>» — под синей шапкой;

• поле «Найти библиотеку…» ищет по названию;

• слева — колонка со списком библиотек; рядом — плитки групп изображений; зона «Перетащите, чтобы добавить новую группу» принимает файлы JPEG, PNG, GIF и SVG;

• справа — «Информация о группе» (закрывается крестиком).

Группа состоит из строк по состояниям (имена до 8 символов). В каждой строке:

1. Нажмите «Добавить изображение» или перетащите в неё файл PNG, JPEG, GIF или SVG.

2. У картинки показаны имя, размер «ширина × высота» и вес в килобайтах.

3. Дважды щёлкните по картинке, чтобы посмотреть её крупно.

4. Чтобы удалить картинку, наведите на неё курсор, нажмите значок удаления и подтвердите: «Вы уверены, что хотите удалить …» — «ДА» или «НЕТ».

5. Чтобы использовать то же изображение для другого состояния, перетащите картинку из одной строки в другую: она будет скопирована.

Чтобы поставить картинку в элемент, перетащите её из панели «Менеджер изображений» на поле «Изображение» в свойствах элемента. Где задаётся картинка у каждого элемента — в «Сложной графике», раздел «Картинки».

Менеджер изображений: 1 — плитки групп, 2 — зона «Перетащите, чтобы добавить новую группу», 3 — «Добавить изображение» в строке состояния, 4 — «Информация о группе»

Поиск свойств

У элемента десятки свойств, и искать нужное по разделам долго. Над списком свойств находится поле «Поиск свойств…».

1. Выберите элемент.

2. Введите в поле часть подписи свойства, например «Цвет» или «Радиус».

3. Чтобы вернуть полный список, нажмите крестик в поле.

Поиск свойств: 1 — поле «Поиск свойств…» с запросом «Цвет», 2 — оставшиеся свойства

Что вы увидите: остаются только свойства, чья подпись содержит запрос. Исключение — у кнопки всегда видны «Отметить как toggle», «Скрыть Фрейм», «Открыть Фрейм» и «Перенаправить на»: поиск их не фильтрует.

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

Частые ошибки

• Кнопка не выделяется при нажатии. Включён «Применить ко всем состояниям»: все состояния выглядят одинаково. Снимите флажок и оформите состояния по отдельности (см. «Кнопки и состояния»).

• Тень не редактируется. У кнопки включён «Применить ко всем состояниям» (появляется подсказка с просьбой отключить его) или выделено несколько элементов.

• Значок не виден. Его закрывает непрозрачное внутреннее изображение: поднимите «Z-ось» в «Свойствах иконки». Или у значка цвет совпал с цветом кнопки.

• Поле оформления не меняется. Элемент привязан к паттерну: поле неактивно. Измените паттерн или включите «Отвязать от паттерна» у этого свойства.

• В списке «Паттерн» нет нужного паттерна. Паттерн другого типа: лейблу подходят только паттерны лейблов, кнопке — только паттерны кнопок.

• Градиент выглядит грязно. Слишком далёкие цвета или лишний маркер: оставьте два близких оттенка одного цвета.

• Мелкий текст не читается на панели. Проверяйте оформление в предпросмотре и на самой панели; в «Демо-зале» на панели 10″ нет надписей мельче 24 пикселей.

• Импортированный элемент без картинки или не реагирует на нажатие. При импорте картинки и ссылки вырезаются: назначьте их заново.

• После конвертации появился лишний элемент. Исходный элемент не удаляется: удалите его сами.

• Правки не видны на панели. Вы нажали «Сохранить», но не «Опубликовать» (см. «UI-Designer»).