Сложная графика: рецепты

Кнопка с переезжающим кружком, ярлык в углу, вдавленная клавиша, слайдер с градиентной заливкой, спидометр с цветными зонами: ничего из этого не нужно рисовать в графическом редакторе. Всё собирается из свойств самих элементов: слоёв, скруглений, границ, теней и градиентов. Ниже описано, как собирать такие вещи и почему они работают: так вы сможете придумывать свои.

Основы оформления — цвет и градиент, тени, граница, значки, шрифты — описаны в «Оформлении интерфейса», состояния кнопок — в «Кнопках и состояниях». Здесь они считаются известными: страница о том, как их соединять.

Идея: элемент — это несколько слоёв

У кнопки, лейбла и инпута внутри есть несколько слоёв, лежащих друг над другом на всю площадь элемента:

• фон элемента: «Цвет фона» и, если нужна, картинка в «Свойствах фона и изображения»;

• текст («Свойства текста»);

• значок («Свойства иконки»);

• внутреннее изображение («Свойства внутреннего изображения»): прямоугольник со своей шириной и высотой, цветом, границей и тенью. Хотя называется «изображением», картинка в нём не обязательна: чаще это просто цветной блок, из которого делают кружок, полосу, ярлык или подложку.

У каждого слоя свои цвет, граница, тень, отступы, выравнивание и «Z-ось». А у кнопки такой набор свой в каждом состоянии: в DEFAULT кружок слева и серый, в PRESSED справа и зелёный. Поэтому почти все рецепты ниже устроены одинаково: в одном состоянии слой стоит и выглядит так, в другом — иначе.

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

Примеры в интерфейсе «Рецепты»

Каждый рецепт показан на работающем примере. Интерфейс «Рецепты» входит в архив проекта «Демо-зал»: как скачать его и загрузить на контроллер, написано в «UI-Designer». Откройте интерфейс в UI-Designer (редактор интерфейсов) и выберите нужный элемент: имена вида Rcp_… указаны в заголовках рецептов.

На панели интерфейс «Рецепты» — пять вкладок: «Кнопки и лейблы», «Слайдеры и спидометр», «Список», «Картинки», «Клавиатура и ввод» (последняя описана в «Клавиатура и поле ввода»). В карточках кнопок обычно три строки (в части карточек подписи другие, например «Выбрано», «Полоса» и «Треугольник»):

• «Обычное» и «Нажато» (или «Выбрано») — неподвижные копии кнопки, у которых заранее выбрано состояние: так на одном экране видно оба вида;

• «Нажмите» — живая кнопка, на которой можно проверить, как оформление меняется при нажатии.

Сам интерфейс значений не хранит: слайдеры и спидометры стоят в нуле, а строки в список присылает программа U-Logic (редактор программы управления) из того же архива; без программы список на панели пуст.

Вкладка «Кнопки и лейблы» интерфейса «Рецепты» на UI-Panel

Как читать таблицы рецептов

Значения в таблицах — в пикселях экрана 1920 × 1200; цвета — как в окне выбора цвета (о нём — в «Оформлении интерфейса»), «прозрачность» — ползунок прозрачности там же.

Чтобы повторить рецепт для кнопки:

1. Выберите кнопку.

2. Снимите «Применить ко всем состояниям». Пока флажок включён, любая правка применяется сразу ко всем состояниям, поэтому они выглядят одинаково, а тени редактировать нельзя.

3. Выберите вкладку состояния (DEFAULT, PRESSED, SELECTED или DISABLED) и задайте поля из столбца этого состояния.

4. Повторите для остальных состояний. Если в таблице значение одно на все состояния, задайте его в каждом состоянии, где оно нужно, — у каждого состояния свои поля.

Что вы увидите: холст показывает то состояние, вкладка которого выбрана. Нажатие на панели проверяйте в предпросмотре или на самой панели.

У лейбла состояний нет: все поля задаются один раз.

Какое состояние показывает кнопка и как оно меняется:

• обычная кнопка показывает PRESSED, пока её держат, и возвращается в прежнее состояние;

• переключатель («Отметить как toggle») по нажатию меняет DEFAULT и PRESSED;

• SELECTED выставляет группа с Interlock или программа.

Слои и Z-ось

Кто кого закрывает

Слои лежат в одном порядке: текст — значок — внутреннее изображение, причём каждый следующий выше предыдущего. «Z-ось» у каждого слоя по умолчанию 1. При равной Z-оси порядок именно такой, и последним, то есть сверху, оказывается внутреннее изображение. Если оно непрозрачное, оно закрывает текст и значок: надпись и значок «пропадают».

Поле «Z-ось» есть в трёх разделах: «Свойства текста», «Свойства иконки» и «Свойства внутреннего изображения». Это целое число, не меньше 1. Чем оно больше, тем выше слой. Картинка в «Свойствах фона и изображения» — не слой: она всегда под всеми тремя слоями.

        flowchart LR
    subgraph A["Z-ось 1 у всех"]
        direction TB
        A1["Внутреннее изображение (сверху)"]
        A2["Значок"]
        A3["Текст"]
        A4["Цвет фона и картинка элемента (снизу)"]
        A1 --- A2
        A2 --- A3
        A3 --- A4
    end
    subgraph B["Значок 3, текст 2"]
        direction TB
        B1["Значок (сверху)"]
        B2["Текст"]
        B3["Внутреннее изображение"]
        B4["Цвет фона и картинка элемента (снизу)"]
        B1 --- B2
        B2 --- B3
        B3 --- B4
    end
    A --> B
    

Чтобы поднять нужный слой, задайте ему «Z-ось» больше, чем у слоя, который его закрывает. Принятая в рецептах расстановка для «значок и текст на подложке»: подложка (внутреннее изображение) — 1, текст — 2, значок — 3.

Примечание

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

Рецепт: значок и текст на подложке (Rcp_Ico_b, Rcp_Ico_bad_b, Rcp_Ico_live_b)

Зачем: подложка-«пилюля» под значком и надписью делает кнопку заметной, но, если не поднять слои, подложка закроет всё содержимое. Пример показывает обе ситуации: на вкладке «Кнопки и лейблы» в карточке «Слои и Z-ось» строка «Верно» — как надо, строка «Ошибка» — подложка поверх значка и текста.

Карточка «Слои и Z-ось»: «Верно» — значок и текст видны, «Ошибка» — подложка закрыла их

Что настроено. Кнопки одинаковые, отличается только «Z-ось»:

Раздел, поле	Rcp_Ico_b, Rcp_Ico_live_b («Верно»)	Rcp_Ico_bad_b («Ошибка»)
«Свойства внутреннего изображения»: «Ширина», «Высота»	206, 64	206, 64
то же, «Свойства границы» слоя: «Радиус скругления углов»	32	32
то же: «Цвет фона»	#EAF1FF (в PRESSED — белый)	то же
то же: «Выравнивание»	по центру	по центру
то же: «Z-ось»	1	1
«Свойства иконки»: «Иконка» «videocam», «Размер» 36, «Цвет» #2563EB	слева по центру, отступ слева 36	то же
«Свойства иконки»: «Z-ось»	3	1
«Свойства текста»: «Текст» «Камеры», «Размер» 28	слева по центру, отступ слева 84	то же
«Свойства текста»: «Z-ось»	2	1

Шаги:

1. Выберите кнопку и задайте внутреннему изображению ширину, высоту, скругление (половина высоты даёт «пилюлю») и цвет подложки.

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

3. Если значок и текст пропали — подложка их закрыла. Задайте значку «Z-ось» 3, тексту 2, а подложке оставьте 1.

Rcp_Ico_b, поле «Z-ось» в трёх разделах: 1 — «Свойства текста», 2 — «Свойства иконки», 3 — «Свойства внутреннего изображения»

Что вы увидите: значок и текст лежат на светлой «пилюле». Если у значка и текста «Z-ось» осталась 1, на кнопке останется только пустая «пилюля».

Подводные камни:

• Z-ось нужно выставить в каждом состоянии кнопки, где слои пересекаются: у состояний свои поля.

• Равная Z-ось не означает «никто никого не закрывает»: слои всё равно идут в порядке текст — значок — внутреннее изображение.

• Если значок и текст на месте, а подложка «просвечивает» не так, проверьте прозрачность цвета подложки, а не Z-ось.

Кнопки и лейблы

Переключатель-«пилюля» (Rcp_Pill_off_b, Rcp_Pill_on_b, Rcp_Pill_b)

Зачем: привычный выключатель — кружок, который едет по дорожке и меняет её цвет. Читатель интерфейса сразу понимает, включено или нет, без подписи.

Идея: дорожка — сама кнопка, кружок — внутреннее изображение. Он «переезжает», потому что в состоянии PRESSED у слоя другое выравнивание и другой отступ.

Карточка «Переключатель-пилюля»: «Обычное» — выключено, «Нажато» — включено, «Нажмите» — живой переключатель

Кнопка 168 × 88. Rcp_Pill_off_b и Rcp_Pill_on_b — неподвижные копии (DEFAULT и PRESSED), Rcp_Pill_b — живой переключатель: у него включено «Отметить как toggle» (см. «Кнопки и состояния»).

Раздел, поле	DEFAULT (выключено)	PRESSED (включено)	Что даёт
«Свойства границы»: «Радиус скругления углов»	44	44	половина высоты: форма «пилюли»
«Свойства фона и изображения»: «Цвет фона»	#CBD5E1	градиент #16A34A → #15803D	серая дорожка → зелёная
«Свойства тени»	внутренняя: X 0, Y 2, размытие 4, #0F172A, прозрачность 15 %, «Внутри»	то же	лёгкая вдавленность дорожки
«Свойства внутреннего изображения»: «Ширина», «Высота»	68, 68	68, 68	кружок
то же, «Свойства границы» слоя: «Радиус скругления углов»	34	34	круг
то же: «Цвет фона»	#FFFFFF	#FFFFFF	белый кружок
то же, «Свойства тени» слоя	X 0, Y 2, размытие 6, #0F172A, прозрачность 25 %	то же	кружок «приподнят»
то же: «Выравнивание»	слева по центру	справа по центру	кружок слева или справа
то же: «Внутренний отступ»	слева 10	справа 10	зазор от края
«Свойства текста»: «Текст»	«Выкл»	«Вкл»	подпись
то же: «Выравнивание», «Внутренний отступ»	справа по центру, справа 22	слева по центру, слева 24	подпись на свободной стороне

Rcp_Pill_b, вкладка DEFAULT, «Свойства внутреннего изображения»: 1 — «Ширина» и «Высота», 2 — «Выравнивание», 3 — «Внутренний отступ» (звёздочка и пустое поле — у сторон разные значения; чтобы увидеть «слева 10», выключите «Редактировать все отступы»), 4 — «Цвет фона», 5 — «Z-ось» (в архиве: у текста 2, у внутреннего изображения 1 — кружок не закрывает надпись «Вкл/Выкл»; значка у пилюли нет)

Шаги:

1. В DEFAULT задайте скругление кнопки, цвет фона и внутреннюю тень.

2. Создайте кружок во внутреннем изображении (размер, скругление, цвет, тень) и поставьте его слева.

3. Перейдите на вкладку PRESSED и поменяйте только то, что отличается: цвет фона кнопки, выравнивание и отступ кружка, текст и его место.

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

Подводные камни:

• Чтобы кружок оказался слева, нужно и выравнивание «слева по центру», и отступ слева. Отступ задаёт «зазор от края» только для той стороны, к которой прижат слой.

• Подпись и кружок не должны накладываться: подпись ставят на свободную сторону и в каждом состоянии настраивают отдельно.

• Если выключатель не меняет вид, у кнопки включён «Применить ко всем состояниям» или забыто «Отметить как toggle».

Ярлык в углу (Rcp_Tag_b, Rcp_Tri_b)

Зачем: пометить кнопку («ЭФИР», «NEW», «ошибка») так, чтобы метка была частью кнопки и двигалась вместе с ней.

Карточка «Ярлык в углу кнопки»: «Полоса» (Rcp_Tag_b) и «Треугольник» (Rcp_Tri_b)

Полоса. Внутреннее изображение 96 × 40 прижато к правому верхнему углу. Скруглены только два его угла. Кнопка обрезает слои по своему скруглению, поэтому верхний правый угол ярлыка совпадает с углом кнопки. Текст «ЭФИР» — слой текста поверх ярлыка, значок камеры — слой значка слева.

Раздел, поле	Значение
«Свойства внутреннего изображения»: «Ширина», «Высота»	96, 40
то же: «Выравнивание», «Внутренний отступ»	справа сверху, 0
то же: «Цвет фона»	#DC2626
то же, «Свойства границы»: «Радиус скругления углов»	верх-лево 0, верх-право 20, низ-право 0, низ-лево 16
«Свойства текста»	«ЭФИР», белый, 24, справа сверху, отступ справа 15,5, сверху 8
«Свойства иконки»	«videocam», 48, слева по центру, отступ слева 28; в PRESSED цвет #1D4ED8
«Z-ось»	текст 2, значок 3, внутреннее изображение 1

Без такой расстановки ярлык, как внутреннее изображение, лёг бы выше текста «ЭФИР» и скрыл надпись.

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

Rcp_Tag_b, «Свойства внутреннего изображения»: 1 — «Цвет фона», 2 — «Редактировать все радиусы», 3 — «Радиус скругления углов» по четырём углам

Треугольник — из рамки. Внутреннее изображение 48 × 48 без цвета фона. У него своя граница: сверху — 48 зелёная, слева — 48 прозрачная, справа и снизу — 0. Рамка слоя считается внутрь его размера, и от квадрата остаётся зелёный треугольник в правом верхнем углу.

Раздел, поле	Верх	Право	Низ	Лево
«Ширина границы»	48	0	0	48
«Цвет границы»	#16A34A	прозрачный	прозрачный	прозрачный
«Стиль границы»	Сплошной	Нет	Нет	Сплошной

Остальное: «Ширина» и «Высота» 48, «Выравнивание» справа сверху, отступ 0, «Цвет фона» прозрачный (#00000000). Для ширины, цвета и стиля сторон выключите «Редактировать все ширины», «Редактировать все цвета» и «Редактировать все стили».

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

Что вы увидите: ярлык прижат к углу и повторяет его скругление.

Подводные камни:

• Если «Редактировать все радиусы» включён, поле одно, и все четыре угла получат одно значение.

• Ярлык, вылезающий за скругление кнопки, обрезается по её контуру: это не ошибка, а свойство кнопки.

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

Индикатор-точка (Rcp_Dot_off_b, Rcp_Dot_on_b, Rcp_Dot_b)

Зачем: цветная точка рядом с подписью быстро показывает состояние («в сети» / «не в сети»).

Карточка «Индикатор-точка»: точка серая, при нажатии зелёная с ореолом и зелёной обводкой кнопки; «Нажмите» — переключатель

Раздел, поле	DEFAULT	PRESSED	Что даёт
«Свойства внутреннего изображения»: «Ширина», «Высота»	22, 22	то же	точка
то же, «Свойства границы» слоя: «Радиус скругления углов»	11	то же	круг
то же: «Выравнивание», «Внутренний отступ»	слева по центру, слева 28	то же	точка слева
то же: «Цвет фона»	#94A3B8	#22C55E	серая → зелёная
то же, «Свойства тени» слоя	нет	X 0, Y 0, размытие 0, «Радиус распространения» 6, #22C55E, прозрачность 25 %	ореол вокруг точки
«Свойства текста»: «Текст», «Цвет»	«Не в сети», #334155	«В сети», #166534	подпись по состоянию
«Свойства границы»: «Ширина границы», «Цвет границы»	1, #CBD5E1	2, #16A34A	зелёная обводка у включённой

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

Тот же приём годится для лейбла, но состояний у лейбла нет: цвет точки у него меняет только программа.

«Вдавленная» кнопка (Rcp_Press_off_b, Rcp_Press_on_b, Rcp_Press_b)

Зачем: клавиша, которая выглядит выпуклой и физически «продавливается» при нажатии, нажимается увереннее.

Карточка «Вдавленная кнопка»: «Обычное» — выпуклая, «Нажато» — вдавленная

Раздел, поле	DEFAULT (выпуклая)	PRESSED (вдавленная)
«Цвет фона»	градиент #FFFFFF → #F6F8FB	#E2E8F0
«Свойства тени» (две тени)	X 0, Y 6, размытие 0, #CBD5E1 («нижняя грань»); X 0, Y 10, размытие 18, #0F172A, прозрачность 12 %	внутренние («Внутри»): X 0, Y 4, размытие 10, #0F172A, прозрачность 25 %; X 0, Y −2, размытие 0, #FFFFFF, прозрачность 50 %
«Ширина границы», «Цвет границы»	1, #CBD5E1	2, #94A3B8

Суть — в тенях. Снаружи: жёсткая тень без размытия, смещённая вниз, выглядит как нижняя грань клавиши, а мягкая даёт приподнятость. Внутри: тень с флажком «Внутри» делает кнопку вдавленной.

Rcp_Press_b, вкладка PRESSED, «Свойства тени»: 1 — «Добавить тень», 2 — поля одной тени, 3 — «Внутри»

Подводные камни:

• Тени редактируются только при выключенном «Применить ко всем состояниям».

• Отдельного свойства «Внутренняя граница» в этой версии нет. Внутренний контур делается внутренней тенью («Внутри») или стилем границы.

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

Сегменты (Rcp_Seg_1_b, Rcp_Seg_2_b, Rcp_Seg_3_b, группа Rcp_Seg_grp)

Зачем: переключатель «Тихо / Средне / Громко» — три кнопки вплотную, как одно целое: скруглены только внешние края, между кнопками одна тонкая линия.

Карточка «Сегменты»: выбран средний сегмент

Три кнопки стоят вплотную. Скругление и границу каждой задайте по отдельности:

Раздел, поле	Левая	Средняя	Правая
«Радиус скругления углов» (верх-лево, верх-право, низ-право, низ-лево)	24, 0, 0, 24	0, 0, 0, 0	0, 24, 24, 0
«Ширина границы» (верх, право, низ, лево)	2, 0, 2, 2	2, 2, 2, 2	2, 2, 2, 0
«Стиль границы» (верх, право, низ, лево)	Сплошной, Нет, Сплошной, Сплошной	Сплошной	Сплошной, Сплошной, Сплошной, Нет
SELECTED: «Цвет фона», «Цвет границы»	градиент #3B82F6 → #2563EB, #1D4ED8	то же	то же

Левая кнопка не рисует правую сторону, а правая — левую; границу между ними даёт средняя. Так между кнопками остаётся одна линия вместо двойной.

Выбор сегмента делает группа с Interlock: как её создать — в «Кнопках и состояниях». В примере группа Rcp_Seg_grp, начально выбрана средняя кнопка.

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

Подводные камни: если радиус оставить «общим» (включено «Редактировать все радиусы»), скруглятся все углы и сегменты не сойдутся; ширины и стили сторон тоже нужно переключить на отдельные.

Свечение выбранной кнопки (Rcp_Glow_off_b, Rcp_Glow_on_b, Rcp_Glow_a_b, Rcp_Glow_b_b)

Зачем: выбранный вариант должен бросаться в глаза: яркая заливка и «светящаяся» тень.

Карточка «Свечение выбранной»: «Обычное», «Выбрано» и пара живых кнопок «Зал» / «ВКС» с Interlock

Раздел, поле	DEFAULT	SELECTED
«Цвет фона»	светлый градиент, как у обычной клавиши	градиент 135°: #60A5FA → #2563EB → #1D4ED8
«Свойства тени»	обычная тень клавиши	X 0, Y 10, размытие 28, #2563EB, прозрачность 50 % (свечение); X 0, Y 0, размытие 0, «Радиус распространения» 6, #93C5FD, прозрачность 40 % (кольцо); внутренняя X 0, Y 1, размытие 0, #FFFFFF, прозрачность 35 % (блик по верхней кромке)
«Цвет» текста, «Цвет» значка	#334155, #2563EB	#FFFFFF

Три тени разной природы дают один эффект: размытая цветная тень — «свет», кольцо без размытия — «обводка», тонкая внутренняя светлая — «блик» на верхней грани. Живые кнопки Rcp_Glow_a_b и Rcp_Glow_b_b лежат в группе Rcp_Glow_grp (Interlock), поэтому выбранной становится та, на которую нажали.

Rcp_Glow_on_b, вкладка SELECTED, «Свойства тени»: три тени, 1 — свечение, 2 — кольцо, 3 — блик («Внутри»)

Карточка из одного лейбла (Rcp_Card_lb, Rcp_Card2_lb)

Зачем: карточка с заголовком, значком и цветной полоской — без отдельных элементов под каждую часть. У одного лейбла есть фон, тень, текст, значок и акцентная полоса.

Карточка «Карточка из лейбла»: слева полоса-акцент, справа сверху значок

Раздел, поле	Rcp_Card_lb	Rcp_Card2_lb
«Цвет фона»	#FFFFFF	градиент #FFFFFF → #F5F3FF
«Свойства границы»	радиус 20, ширина 1, #E2E8F0	то же
«Свойства тени» (две)	X 0, Y 1, размытие 2, #0F172A, 5 %; X 0, Y 10, размытие 30, #0F172A, 7 %	то же
«Свойства текста»	«Переговорная 2», 30, жирный, слева сверху, отступы слева 36, сверху 30	«Учебный класс», слева по центру, слева 32
«Свойства иконки»	«meeting_room», 40, #2563EB, справа сверху, отступы 24	«groups», #7C3AED, справа по центру
«Свойства внутреннего изображения»	10 × 150, #2563EB, слева по центру, отступ 0	382 × 10, фиолетовый градиент, по центру сверху

Внутреннее изображение здесь — акцентная полоса: узкий высокий блок слева или широкий низкий сверху. Углы полосы обрезает скругление самого лейбла, поэтому отдельного скругления ей не нужно.

Ограничение: в лейбле один текстовый слой, и строка не переносится. Вторую строку ставьте символом перевода строки в тексте (размер шрифта у неё будет тот же) или отдельным лейблом.

Слайдеры

Слайдер состоит из полоски и ручки. Основные поля — в разделе «Свойства слайдера»: «Ориентация», «Толщина полоски», «Скругление углов полоски», «Цвет пустой полоски», «Цвет заполненной полоски», «Цвет ручки», «Изображение ручки», «Ширина ручки», «Высота ручки», «Радиус ручки», «Скругление углов ручки», «Круглая ручка».

Как он устроен и что из этого следует:

• Полоска лежит по центру элемента. Ручка — отдельный слой поверх неё, поэтому она может быть шире полоски (как у пульта) и по-прежнему видна целиком. Обрезает ручку только край самого элемента: высоте элемента (у вертикального — ширине) дайте запас.

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

• Для круглой ручки включите «Круглая ручка» и задайте «Радиус ручки»: поля ширины и высоты ручки тогда не действуют. У прямоугольной ручки «Ширина ручки» — размер вдоль полоски, «Высота ручки» — поперёк. У вертикального слайдера градиенты и ручка повёрнуты: направление градиента 90° (слева направо) на экране идёт снизу вверх.

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

Значение слайдера при загрузке — 0: дальше его ставят прикосновением или программа. Слайдер не показывает своё значение в тексте сам: подпись «64 %» — это обычный лейбл, текст которому пишет программа. Подписи «0» и «100» и риски на шкале — тоже отдельные лейблы.

Вкладка «Слайдеры и спидометр», верхний ряд: «Слайдер-пилюля», «Фейдер с рисками», «Градиентная заливка», «Тонкая полоска»; значения прислала программа U-Logic

Слайдер-пилюля (Rcp_SlPill_sl)

Зачем: толстая, «мягкая» полоска, на которую проще нажать пальцем.

Раздел, поле	Значение	Что даёт
«Ориентация», размер элемента	«Горизонтальная», 382 × 72
«Толщина полоски», «Скругление углов полоски»	56, 28	толстая полоска-пилюля
«Круглая ручка», «Радиус ручки»	включено, 28	круглая ручка во всю толщину
«Цвет заполненной полоски»	градиент 90°, #60A5FA → #2563EB	заливка светлеет к началу
«Цвет пустой полоски»	#E2E8F0
«Цвет ручки»	градиент 180°, #FFFFFF → #E6ECF8	объёмная белая ручка

Рамки у ручки нет: объём даёт градиент.

Фейдер с рисками (Rcp_SlFader_sl)

Зачем: ручка шире полоски и деления шкалы — вид микшерного пульта.

Раздел, поле	Значение	Что даёт
«Ориентация», размер элемента	«Вертикальная», 120 × 340
«Толщина полоски», «Скругление углов полоски»	20, 10	тонкая полоска
«Круглая ручка»	выключено	прямоугольная ручка
«Ширина ручки» / «Высота ручки»	36 (вдоль) / 104 (поперёк)	ручка шире полоски
«Скругление углов ручки»	8
«Цвет ручки»	градиент 180°, #F8FAFC → #CBD5E1
«Цвет заполненной полоски»	градиент 90°, #1D4ED8 → #60A5FA	на экране — тёмный снизу, светлый вверху
«Цвет пустой полоски»	#1E293B	тёмная незаполненная часть

У слайдера нет делений, их рисуют лейблы: полоски 36 × 4 с цветом фона #94A3B8 и скруглением 2 (Rcp_SlFader_t*_lb) и числа рядом (Rcp_SlFader_n*_lb). Ручка ходит по высоте элемента минус собственная длина. Поэтому риску для доли пути v (от 0 до 1) ставьте на 18 + (1 − v) × (340 − 36) пикселей ниже верхнего края элемента: 18 — половина длины ручки.

Rcp_SlFader_sl, раздел «Свойства слайдера»: 1 — «Ориентация», 2 — «Толщина полоски», 3 — «Цвет заполненной полоски», 4 — «Ширина ручки» и «Высота ручки», 5 — «Круглая ручка»

Градиентная заливка (Rcp_SlGrad_sl, Rcp_SlGrad2_sl)

Зачем: цвет заливки сам показывает «много / мало» (громкость, нагрузка).

Раздел, поле	Rcp_SlGrad_sl	Rcp_SlGrad2_sl
«Толщина полоски», «Скругление углов полоски»	40, 20	40, 12
«Цвет заполненной полоски»	градиент 90°: #22C55E 0 %, #EAB308 50 %, #EF4444 100 %	градиент 90°: #06B6D4 → #8B5CF6
Ручка	круглая, «Радиус ручки» 30	прямоугольная, 28 вдоль и 64 поперёк, скругление 8

Три точки градиента (маркеры на градиентной полосе окна выбора цвета) дают «светофор»: зелёный — жёлтый — красный.

Тонкая полоска, крупная ручка (Rcp_SlThin_sl)

Зачем: линия-«бегунок» с крупной ручкой, которую легко поймать пальцем.

Раздел, поле	Значение	Что даёт
«Толщина полоски», «Скругление углов полоски»	8, 4	линия
«Круглая ручка», «Радиус ручки»	включено, 30	ручка 60 при полоске 8
«Цвет ручки»	градиент 180°, #60A5FA → #2563EB
«Цвет заполненной полоски» / «Цвет пустой полоски»	#2563EB / #CBD5E1

Высота элемента — 72, чтобы ручка не обрезалась по краю. Значение рядом («64 %») — лейбл Rcp_SlThin_val_lb, текст которому пишет программа. Поле «Показать Шаги в Лейбле» есть в разделе «Свойства слайдера», но связи с конкретным лейблом редактор не сохраняет, поэтому в примере её нет.

Подводные камни слайдеров:

• Ручка обрезается краем элемента: элемент должен быть не меньше ручки поперёк движения.

• Для вертикального слайдера не путайте «Ширину ручки» и «Высоту ручки»: ширина всегда вдоль движения.

• Градиент 90° у вертикального слайдера идёт снизу вверх, а не слева направо.

Спидометр

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

Что нужно знать о настройке:

• Размеры спидометра — не в пикселях, а в условных единицах, где весь рисунок равен 100. Радиус дуги — (100 − «Толщина») / 2.

• «Угол выреза» — угол, который остаётся незакрашенным, внизу. 0 — полный круг, 120 — дуга 240°, 180 — верхний полукруг.

• «Сегменты» — цветные участки дуги. У каждого «Цвет» и «Размер» (в процентах). Сумма всегда 100 %: когда вы меняете «Размер» сегмента, разницу забирает или отдаёт сегмент справа. «Размер» последнего сегмента недоступен, он получает остаток. «Добавить сегмент» делит пополам самый широкий. Поэтому задавайте размеры по порядку: первый, второй, а третий получит остаток.

• «Без пустого трека» включён: сегменты видны целиком всегда (шкала-зоны). Выключен: сегменты закрашиваются только до значения, остальное показывает «Цвет пустого трека».

• «Индикатор» — «Стрелка», «Ручка» или «Нет». У стрелки — цвет, длина, ширина, «Цвет обводки стрелки» и «Ширина обводки стрелки», скругление, «Прямоугольная стрелка». У ручки — «Ширина индикатора», «Высота индикатора», «Цвет индикатора», «Скругление индикатора», «Цвет границы индикатора» и «Ширина границы индикатора».

• «Деления»: «Количество делений», «Длина делений», «Толщина делений», «Цвет делений» и «Удалённость делений от центра». Деления с удалённостью меньше радиуса дуги лежат внутри дуги, больше — снаружи.

Значение при загрузке — 0, дальше его ставит программа или прикосновение (поля «Шаги» и «Отправлять команды после»).

Вкладка «Слайдеры и спидометр», нижний ряд: «Спидометр: зоны», «Полукруг с ручкой», «Кольцо с делениями», «Прямоугольная стрелка»; значения прислала программа U-Logic

Rcp_GgZone_gg, раздел «Свойства спидометра»: 1 — «Угол выреза», 2 — «Толщина», 3 — «Сегменты», 4 — «Без пустого трека», 5 — «Индикатор»

Спидометр: зоны (Rcp_GgZone_gg)

Зачем: шкала «норма — внимание — авария» с цветными зонами и стрелкой.

Раздел, поле	Значение	Что даёт
«Угол выреза», «Толщина», «Скруглённые концы»	120, 12, выключено	дуга 240°
«Без пустого трека»	включено	зоны видны всегда
«Сегменты»	#22C55E — 60, #EAB308 — 25, #EF4444 — 15	зелёная, жёлтая, красная зоны
«Индикатор»	«Стрелка», цвет #0F172A, ширина 5, длина 36	стрелка
«Прямоугольная стрелка», скругление стрелки	выключено, 1	треугольная стрелка
«Деления»	включены, «Количество делений» 11, «Удалённость делений от центра» 30, «Длина делений» 5, «Толщина делений» 1,2, «Цвет делений» #94A3B8	деления внутри дуги

Полукруг с ручкой (Rcp_GgKnob_gg)

Зачем: регулятор в виде дуги, в котором ручка бегает по дорожке.

Раздел, поле	Значение	Что даёт
«Угол выреза», «Толщина», «Скруглённые концы»	180, 14, включено	верхний полукруг, концы скруглены
«Без пустого трека», «Цвет пустого трека»	выключено, #E2E8F0	серая дорожка
«Сегменты»	один, #2563EB — 100	синяя заливка до значения
«Индикатор»	«Ручка», «Ширина индикатора» 18, «Высота индикатора» 18, «Скругление индикатора» 9	круглая ручка
«Цвет индикатора», «Цвет границы индикатора», «Ширина границы индикатора»	#FFFFFF, #2563EB, 3	белая с синей обводкой

Кольцо с делениями (Rcp_GgRing_gg)

«Угол выреза» 60, «Толщина» 10, «Скруглённые концы» включено, «Без пустого трека» выключено, «Цвет пустого трека» #E2E8F0. Четыре сегмента по 25: #22C55E, #84CC16, #EAB308, #EF4444 — цвет заливки меняется по мере роста значения. «Индикатор» не нужен. «Деления»: 21 шт., удалённость от центра 34, длина 3, #CBD5E1.

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

Прямоугольная стрелка и деления снаружи (Rcp_GgRect_gg)

«Угол выреза» 90, «Толщина» 6, «Без пустого трека» включено; сегменты #93C5FD — 50 и #2563EB — 50. Стрелка: «Прямоугольная стрелка» включена, цвет #DC2626, ширина 3, длина 42, белая обводка толщиной 1. «Деления» снаружи: удалённость от центра 49 больше радиуса дуги ((100 − 6) / 2 = 47), 13 шт., длина 6, #64748B. Рисунок расширяется сам, чтобы деления не обрезались.

Подводные камни спидометра:

• Сумма размеров сегментов всегда 100 %: правка одного «Размера» сдвигает правого соседа, а последний сегмент получает остаток. Проверьте, что доли получились, как задумано.

• Если деления не видны, проверьте их удалённость от центра: у дуги радиус (100 − «Толщина») / 2.

• Если «Без пустого трека» включён, заполнение по значению не видно: сегменты закрашены всегда.

Список

Список — прокручиваемый перечень строк «ключ — значение» с заголовком. Оформляется как обычный элемент (фон, граница, тень) плюс собственный раздел «Свойства списка»: «Редактировать все отступы», «Отступ контента», «Высота заголовка», «Цвет заголовка», «Заголовок прокручивается», «Высота элемента», «Расстояние между ключом и значением», «Толщина разделителя», «Цвет разделителя». Текст оформляется в трёх отдельных разделах: «Текст заголовка списка», «Параметры текста ключей» и «Параметры текста значений»: шрифт, размер, цвет, выравнивание, отступ.

Ключ и значение делят строку пополам: ключ по умолчанию слева, значение справа.

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

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

• Своей подсветки выбранной строки нет: есть только мгновенный отклик на нажатие. Выбранную строку показывают лейблом, текст которого пишет программа, как в примере Rcp_LstA_sel_lb.

• Особенность панели: при первом заполнении после открытия первая строка может не нарисоваться.

Вкладка «Список», строки присланы программой: «Список контактов» и «Тёмный список»

Список контактов (Rcp_LstA_ls)

Зачем: список крупных строк с синей «шапкой» и тонкими разделителями.

Раздел, поле	Значение	Что даёт
«Цвет фона»	#FFFFFF
«Свойства границы»	радиус 24, ширина 1, #CBD5E1
«Свойства тени»	как у карточки (см. «Карточка из одного лейбла»)
«Текст заголовка списка»	«Контакты», 26, жирный, белый, слева по центру, отступ слева 28
«Цвет заголовка», «Высота заголовка»	сплошной #2563EB, 72	синяя «шапка»
«Параметры текста ключей»	30, жирный, #0F172A, слева по центру, слева 12	имя слева
«Параметры текста значений»	24, жирный, #1D4ED8, справа по центру, справа 12	тип справа
«Высота элемента», «Толщина разделителя», «Цвет разделителя»	96, 2, #E2E8F0	крупные строки
«Отступ контента»	16

Rcp_LstA_ls, раздел «Свойства списка»: 1 — «Высота заголовка», 2 — «Цвет заголовка», 3 — «Высота элемента», 4 — «Толщина разделителя», 5 — «Цвет разделителя»

Тёмный список (Rcp_LstB_ls)

«Цвет фона» — сплошной #1E293B, без границы; тень X 0, Y 16, размытие 32, #0F172A, прозрачность 25 %; радиус 24. Заголовок «ИСТОРИЯ ВЫЗОВОВ», 24, #94A3B8 на прозрачном «Цвете заголовка» (#00000000). Ключ — 28, белый; значение — 24, #93C5FD. «Высота элемента» 80, «Толщина разделителя» 1, «Цвет разделителя» #334155, «Отступ контента» 20.

Зачем: список «в тон» тёмному экрану: заголовок, фон и разделители сливаются в одну поверхность.

Подводные камни: если список «пустой», проверьте, пришли ли строки от программы; для выбранной строки заведите лейбл и подписывайте его программой.

Картинки

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

Форматы

В менеджере изображений можно загрузить PNG, JPEG, GIF и SVG (подробнее — в «Оформлении интерфейса», раздел «Менеджер изображений»). Выбирайте так:

• SVG — для значков, логотипов, схем: он векторный, поэтому при любом размере элемента остаётся резким. Хорошо подходит для картинок по состояниям: у каждого состояния кнопки — свой рисунок.

• PNG, JPEG, GIF — для фотографий и сложных растровых изображений. Растровая картинка, растянутая сильно больше своего размера, размывается.

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

Где задаётся картинка

Элемент	Где выбрать	Как ложится
Кнопка	«Свойства фона и изображения»: «Изображение», «Размер изображения» («Вписать» или «Растянуть») — в каждом состоянии отдельно	под всеми слоями; у каждого состояния своя
Лейбл	«Свойства фона и изображения»: те же поля	под слоями, по скруглению лейбла
Слой «внутреннее изображение» (кнопка, лейбл, инпут)	«Свойства внутреннего изображения»: «Внутреннее изображение»	внутри прямоугольника слоя, по его скруглению
Слайдер	«Свойства слайдера»: «Изображение ручки»	вместо заливки ручки
Фон	элемент «Фон»: «Изображение»	на всю страницу

Чтобы задать картинку в поле «Изображение», перетащите её из панели «Менеджер изображений» на это поле.

Картинка элемента — не слой: она всегда под текстом, значком и внутренним изображением. Поэтому надпись поверх неё не нужно «поднимать» Z-осью.

Вкладка «Картинки»: кнопка-картинка, картинка-фон, картинка в слое, картинка ручки; кнопка «Нажмите» — переключатель

Кнопка-картинка (Rcp_ImgBtn_off_b, Rcp_ImgBtn_on_b, Rcp_ImgBtn_b)

Зачем: кнопка, у которой в каждом состоянии свой рисунок («микрофон выключен» / «включён»), а не цвета и значки.

Раздел, поле	DEFAULT	PRESSED
«Изображение»	SVG «микрофон выключен»	SVG «микрофон включён» (зелёный)
«Размер изображения»	«Растянуть»	«Растянуть»
«Цвет фона»	прозрачный (#00000000)	прозрачный
«Свойства текста»	«Микрофон», 26, #334155, слева по центру, отступ слева 94	белый
«Свойства тени»	тень клавиши	зелёное свечение

Цвет фона не нужен: фон даёт картинка. Тень повторяет скругление 20, как и картинка. Текст ложится поверх картинки.

Rcp_ImgBtn_b, вкладка DEFAULT, «Свойства фона и изображения»: 1 — «Цвет фона», 2 — «Изображение», 3 — «Размер изображения»

Картинка-фон (Rcp_ImgCard_lb)

В «Свойствах фона и изображения» лейбла выбрана картинка PNG 800 × 400, «Размер изображения» «Растянуть», «Цвет фона» прозрачный, радиус 20: картинку обрезает скругление лейбла. Текст «Переговорная 3» — белый, слева снизу, с тенью текста (X 0, Y 2, размытие 6, #0F172A, прозрачность 60 %): так он читается на любой картинке. Тень текста задаётся в «Свойствах тени» внутри «Свойств текста».

Картинка в слое (Rcp_ImgAva_lb, Rcp_ImgAva2_lb)

Зачем: аватар или значок в круге или скруглённом квадрате, не меняя саму картинку.

Во «Внутреннем изображении» лейбла выбрана SVG-картинка 96 × 96. Слой 72 × 72, слева по центру, отступ слева 28; текст — с отступом слева 120. «Радиус скругления углов» слоя 36 даёт круг, 16 — скруглённый квадрат: картинку обрезает граница слоя.

Rcp_ImgAva_lb, «Свойства внутреннего изображения»: 1 — «Внутреннее изображение», 2 — «Ширина» и «Высота», 3 — «Радиус скругления углов»

Картинка ручки слайдера (Rcp_ImgKnob_sl)

В поле «Изображение ручки» раздела «Свойства слайдера» выбрана SVG-ручка 64 × 64; «Круглая ручка» включена, «Радиус ручки» 32. Когда у ручки есть картинка, её заливка становится прозрачной, и картинка ложится поверх.

Подводные камни картинок:

• Если картинка кнопки не меняется по состояниям, у кнопки включён «Применить ко всем состояниям» или картинка задана только в одном состоянии.

• Текст на пёстрой картинке теряется: добавьте текстовую тень или слой-подложку.

• Размер элемента не подстраивается под картинку: «Вписать» (по умолчанию у кнопки) и «Растянуть» по-разному укладывают картинку в элемент; выберите подходящий вариант, посмотрев на результат.

• Картинки не переносятся при импорте элемента из JSON: назначьте их заново (см. «Оформление интерфейса»).

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

• Значок и текст пропали на подложке. Подложка — внутреннее изображение — лежит выше. Поднимите «Z-ось» значку и тексту (рецепт «Значок и текст на подложке»).

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

• Тень не редактируется. Включён «Применить ко всем состояниям» или выбрано несколько элементов.

• Скруглились все углы, а нужны два. Включён «Редактировать все радиусы»: переключите его и задайте четыре угла отдельно.

• Нет «внутренней границы». Такого свойства нет: используйте внутреннюю тень («Внутри») или стиль границы.

• Ручка слайдера обрезана. Элемент слайдера меньше ручки: увеличьте его поперёк движения.

• Слайдер не показывает число. Он и не показывает: число пишет программа в обычный лейбл.

• Список без строк или без подсветки выбранной. Строки приходят от программы; выбранную строку показывают лейблом.

• Рецепт получился, но «сломал» чужое оформление. Если элемент привязан к паттерну, поля неактивны: отвяжите их или правьте паттерн (см. «Оформление интерфейса»).

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