Entrixy — руководство по дизайну

Проблема

Иконки Material из androidx.compose.material.icons.outlined.* имеют один номинальный размер — сетку 24×24, — но нарисованная часть у каждой своя. Поставь всем простой Modifier.size(24.dp)— и одни будут выглядеть крупными и тяжёлыми (Bolt, Delete), а другие крошечными (Contacts, VpnKey). Их надо калибровать вручную.

Метод калибровки

1. Снять экран с иконками в кружках 38 dp — это наше посадочное место.
2. На Python с PIL и numpy измерить габаритный прямоугольник нарисованного глифа — максимальную ширину и высоту в пикселях.
3. Формула: new_size = 24 × 52 / measured_px, с ограничением до [18..28].
4. Затем отцентровать в слоте 38 dp по вертикали и горизонтали.

52 px — эталонный нарисованный глиф, Fingerprint; всё меряется от него как от единицы.

Итоговая карта размеров

AutoMode

Используется везде, где раньше стоял Bolt, — кнопка Автоматизация на карточке ключа, иконка раздела в настройках. Размер 26 dp, как у Bolt.

Где таблица лежит в коде

IconsDebugSheet.kt — карта iconSizeByName. Отладочный экран открывается из SettingsScreen кнопкой Иконки UI (дебаг): сверху FlowRow откалиброванных иконок, снизу список имён, размеров и контекстов.

Используем стандартные роли Material 3, сознательно ограничившись четырьмя:

Шкала

Договорились работать кратно 2 / 4 / 8 / 10 / 14 / 16 / 20. Без то густо, то пусто: одинаковые элементы получают одинаковые отступы.

Между карточками в основной прокрутке

• Контейнер нижнего листа: spacedBy(12.dp). Карточки на 12 dp друг от друга.
• Горизонтальные отступы содержимого листа: padding(horizontal=20.dp).

Внутри карточки (RuleCard)

• Отступы со всех сторон: 16 dp.
• Шапка — кружок, заголовок, шеврон, выключатель — одна строка: 14 dp между кружком и заголовком, 12 dp между заголовком и выключателем.
• От шапки к телу в развёрнутом виде: padding(top=16.dp).
• В теле используется verticalArrangement = spacedBy(16.dp) между крупными блоками.

Внутри FieldSection (подпись плюс содержимое)

• Columnarrangement: spacedBy(2.dp). Всего 2 dp между жирной подписью и статусом или подсказкой под ней, чтобы они читались парой заголовок и пояснение.
• То же правило распространяется на любой парный текст: 2 dp везде, без исключений. Раньше в одном месте было 0 dp, в другом 2 dp, и это резало глаз.

Кнопки-пилюли и статусы

• От статуса или подсказки к кнопке-пилюле: Spacer(10.dp). То же в Гео, подключении Wi-Fi и списке Wi-Fi.

Ползунки — особый случай

Ползунок Material 3 занимает в раскладке около 48 dp из-за минимальной области касания, из которых видимая дорожка — всего около 4 dp посередине, а сверху и снизу примерно по 22 dp пустой сенсорной зоны. Отсюда:

• Между текстом статуса и ползунком применяем Modifier.offset(y=-16.dp) , чтобы подтянуть бегунок к тексту.
• Под ползунком применяем Modifier.sliderTrim() (хелпер в GuestAutomationEditor.kt), который сообщает родителю высоту 22 dp вместо 48 dp. Так у карточки padding(16.dp) даёт от бегунка до нижнего края тот же зазор, что и у карточек, заканчивающихся кнопкой-пилюлей.

Три уровня доверия гостю

Каждое правило — Геолокация, Wi-Fi, Время, Авторизация, Подтверждение — и блок Активация принимают один из трёх уровней. Кружок иконки на карточке окрашивается соответствующим цветом, когда выключатель включён.

При выключенном переключателе кружок становится серым (#9AA0A6), какой бы уровень ни был выбран.

Правила для описаний уровней

• Писать в третьем лице, без я и мной. Говорить гость, настройка, значение.
• Одно предложение точки не получает (см. Правила текста).

Цветной кружок с иконкой (38 dp)

Единое посадочное место 38 dp по всему приложению:

• Размер: 38dp, CircleShape, фон — цвет уровня.
• Внутри — иконка своего откалиброванного размера (см. раздел 1), белая.
• Содержимое центрируется: contentAlignment = Alignment.Center.

Радиокнопки

Оборачивать в Box(Modifier.size(38.dp), contentAlignment=Center) { RadioButton(...) } , чтобы центр кружка радиокнопки совпал с центром цветного кружка выше. Без обёртки радиокнопка уезжает по горизонтали, потому что RadioButton рисуется со своими отступами.

Между радиокнопкой и её текстом: Spacer(14.dp). Между строками радиокнопок в группе: Column(spacedBy(4.dp)).

Минимальная область касания отключена: CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — иначе каждая строка радиокнопки раздувается до 48 dp и ломает ритм.

Switch

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

Сегментированный ряд

Свой элемент для переключения режимов внутри правила — сейчас только в Wi-Fi: По конкретной сети / По сетям вокруг. Два элемента в Row, у каждого weight(1f):

• Фон всего элемента: colorScheme.surface, RoundedCornerShape(10.dp), отступ 4dp.
• Выбранный: фон primaryContainer, RoundedCornerShape(8.dp), текст SemiBold.
• Невыбранный: прозрачный, обычное начертание.

Кнопки-пилюли

Обводка, иконка и текст, полностью скруглённые. Для второстепенных действий — Использовать текущее положение, Снять сети вокруг. В выключенном состоянии обводка и текст уходят в alpha=0.4.

Slider

См. раздел 3 про offset(y=-16.dp) и sliderTrim(). Перед ползунком всегда идёт StatusLine со статусным текстом (bodySmall, приглушённый) — 74 м · максимум, гость может уменьшить.

Выпадающий список уровней

Открывается нажатием на строку заголовка карточки — всю Row, кроме переключателя. Появляется прямо под шапкой, во всю ширину содержимого карточки. Для этого:

• Row оборачивается в Box с onGloballyPositioned, и мы измеряем её ширину в dp.
• DropdownMenu получает эту ширину через DropdownMenuItem с модификатором Modifier.width(anchorWidthDp).

Пункты списка дышат, а не сплюснуты в строки: слева цветной маркер, название жирным, описание под ним мелким приглушённым шрифтом. По вертикали выравниваются по первой строке — по названию.

Пульсирующий кружок Активации

В отличие от обычных цветных кружков правил, кружок в шапке Активации пульсирует.

• Внутри слота 38 dp: сплошной кружок 28 dp, без иконки.
• Поверх: две концентрические волны, нарисованные drawBehind + Stroke(width=6dp).
• Радиус волны растёт линейно с 14 dp до 19 dp — половины от 38 dp.
• Цикл длится 2000 мс, вторая волна смещена на 1000 мс.
• Кривая: строго LinearEasing. Не FastOutSlowInEasing — иначе на перезапуске цикла виден рывок.
• Прозрачность идёт по кривой sin(π·p) × 0.6: при p=0 и p=1 прозрачность равна 0, пик — посередине. Перезапуск незаметен.

Punctuation

Одно предложение в строке интерфейса точки не получает. Точки появляются только при двух и более предложениях, чтобы их разделить. Это касается всех описаний, подсказок, статусов, всплывающих пояснений, заголовков и отдельных фраз.

От чьего лица пишем

• Нельзя: Задаю точное значение, Ничего не ограничиваю.
• Можно: Значение задано, Гость сам выбирает настройку.

Выбор между максимумом и точным значением

В статусах ползунка в жёлтом режиме (Задано) прямо указываем направление свободы:

• Радиус: 74 м · максимум, гость может уменьшить — меньше значит строже.
• Порог Wi-Fi: 5 из 7 · минимум, гость может увеличить — больше значит строже.

В красном (Закреплено): 74 м · ровно / 5 из 7 · ровно.

Названия уровней устоялись

Решает гость / Задано / Закреплено прижились, менять их не будем.

Переключатель или радиовариант не выбрано

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

Examples:

• Authorisation: выключатель выключен — значит не запрашивается. Включён — показываются только три настоящих способа: PIN-код, биометрия или PIN-код либо биометрия.
• Confirmation: выключатель выключен — вызов уходит автоматически. Включён — гость нажимает кнопку. Радиокнопки внутри не нужны: переключатель несёт всё.

Координаты и действия справа

В блоке Координаты иконки копирования и удаления стоят справа вровень с обеими строками (подписью и статусом). Реализовано как Row { Column(weight=1f) { label; status }; CopyIcon; DeleteIcon }. Иконки центрируются по вертикали относительно пары целиком.

Показ и скрытие тела карточки

Тело раскрывается только когда:

• переключатель включён, и
• уровень не OWN — при Решает гость тело бессмысленно, ведь мы ничего не задаём.

Animation: expandVertically(tween(220)) + fadeIn(tween(220)) при открытии, shrinkVertically(tween(180)) + fadeOut(tween(120)) при закрытии.

Когда показывать диалог Ключ добавлен

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

• Иконки LocationOn и LocationOff — согласованы по пикселям, это эталон.
• Иконки ExpandMore и ExpandLess (шевроны) — 22 dp, не калибруются.
• Формула прозрачности в PulsatingCircle — sin(π·p) × 0.6. Любое упрощение портит вид.
• LinearEasing в волнах. Ease-in или ease-out дают рывок.
• Названия уровней — Решает гость / Задано / Закреплено. Описания со временем менялись, названия закреплены.
• FieldSection spacedBy(2.dp) — намеренно тесно, ради пары заголовок и пояснение.