Entrixy — Дизайн-гайд

Проблема

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

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

1. Скриншот экрана с иконками в 38dp-кружках (наш «посадочный слот»).
2. Python + PIL + numpy: измеряем bounding box нарисованного глифа (макс ширина/высота в пикселях).
3. Формула: new_size = 24 × 52 / measured_px, клип в [18..28].
4. Также центрируем внутри 38dp-слота по вертикали и горизонтали.

52 px — референсный painted-глиф Fingerprint, на него ориентируемся как на «единичный».

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

AutoMode

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

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

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

Используем стандартные роли Material3. Сознательно ограничились четырьмя:

Шкала

Договорились работать кратно 2 / 4 / 8 / 10 / 14 / 16 / 20. Не «то густо то пусто» — одинаковые элементы одинаково.

Между плашками (карточками) в общем скролле

• Контейнер bottom-sheet: spacedBy(12.dp). Плашки отделены 12dp.
• Горизонтальные отступы контента sheet: padding(horizontal=20.dp).

Внутри плашки (RuleCard)

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

Внутри FieldSection (label + content)

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

Pill-кнопки и статусы

• Статус/подсказка → pill-кнопка: Spacer(10.dp). Единообразно в Geo, Wi-Fi connect, Wi-Fi list.

Слайдеры — особый случай

Material3 Slider занимает ~48dp по лейауту (из-за минимального touch-target), из которых видимая дорожка — только ~4dp по центру, а над/под ней по ~22dp пустой touch-зоны. Из-за этого:

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

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

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

Выключенный свитч — кружок становится серым (#9AA0A6), независимо от выбранного уровня.

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

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

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

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

• Size: 38dp, CircleShape, background = цвет уровня.
• Внутри — иконка размером по калибровке (см. раздел 1), тint белый.
• Контент центрирован: contentAlignment = Alignment.Center.

Радио-кнопки

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

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

Отключён минимальный touch-target: CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) — иначе радио-строки набирают по 48dp и ломают ритм.

Switch

Стандартный Material3 Switch. Справа от заголовка карточки. Выключает всё правило. Цвета уровня при этом не показываются (кружок серый).

Segmented row

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

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

Pill-кнопки

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

Slider

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

Dropdown выбора уровня

Вызывается по клику на строку заголовка карточки (весь Row кроме Switch). Открывается прямо под шапкой, по всей ширине контента карточки. Для этого:

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

Пункты dropdown — воздушные, не плоские строки: цветной маркер слева, ярлык жирно, описание под ним мелко-muted. Выровнены вертикально по первой строке (ярлыку).

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

В отличие от обычных цветных кружков правил, у Активации в заголовке — пульсирующий.

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

Пунктуация

Одно предложение в UI-строке — без точки в конце. Точки только когда предложений два и больше (для разделения). Касается всех описаний, подсказок, статусов, hint-текстов, заголовков, единичных фраз.

От кого пишем

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

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

В статусах слайдеров в жёлтом (Предустановка) режиме — честно пишем про направление свободы:

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

В красном (Закреплено) — «74 м · точно» / «5 из 7 · точно».

Ярлыки уровней — закреплены

«Гость решает / Предустановка / Закреплено» — прижились, не меняем.

Свитч vs радио «не выбрано»

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

Примеры применения:

• Авторизация: Switch off = не запрашивается. Switch on → показываются только три реальных способа (PIN / Биометрия / PIN или биометрия).
• Подтверждение: Switch off = звонок идёт автоматически. Switch on = гость нажимает кнопку. Радио внутри вообще не нужно — всё на Switch.

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

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

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

Тело карточки раскрывается только если:

• Свитч включён И
• Уровень не OWN (при «Гость решает» тело смысла не имеет — ничего не задаём).

Анимация: expandVertically(tween(220)) + fadeIn(tween(220)) на открытии, shrinkVertically(tween(180)) + fadeOut(tween(120)) на закрытии.

Когда показываем диалог «Ключ добавлен»

При получении гостевого ключа — только если приложение в foreground и это новый ключ (не дубль). Иначе молча сохраняем. (Подробнее — см. memory feedback_key_dialog.md.)

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