iOS · Android · 2026
2026 / Редизайн · Бренд · iOS · Android
RusGuard Key
Редизайн приложения, в котором смартфон работает как пропуск: знак, логотип и иконка, 15 экранов для iOS и Android и дизайн-система.
15 экранов
и 3 уведомления для iOS и Android
Задача
Пропуск, который всегда с собой
В RusGuard Key смартфон заменяет карту доступа: двери, ворота и шлагбаумы открываются без пластикового пропуска. Заказчику нужен был новый дизайн приложения для iOS и Android. Логика и состав экранов оставались прежними — интерфейс мы пересобрали, а знак и иконку обновили.
Три способа пройти
NFC
Поднести смартфон к считывателю — как при бесконтактной оплате.
BLE
Встряхнуть смартфон или разблокировать экран рядом со считывателем.
QR-код
Показать код из приложения сканеру на считывателе.
Требования разработчиков
Без Liquid Glass
На Android с этим эффектом проблемы.
Без градиентных анимаций
Они сложные и дорогие в разработке.
Почти системные переключатели и окна
На iOS их сложно перенастроить, а свои окна дороже в разработке.
Системные шрифты
SF Pro на iOS, Roboto на Android.
Бренд
Знак, логотип и иконка
Знак собран из трёх одинаковых пластин на трёх равных рядах, все грани — под одним углом. Геометрия остаётся читаемой и в логотипе, и в маленькой иконке на домашнем экране.
- одинаковые пластины
- 3
- равных ряда
- 3
- наклон граней
- 59°
#9FC1FF → #627198
Ключи
Три типа ключа — три материала карты
Тип ключа видно сразу: у каждого своя карта — чёрная, серебряная или золотая. Тип выбирается в одной плашке, а форма для каждого типа — короткая.
Ключ создаётся прямо в приложении.
Экраны
15 экранов и 3 уведомления
В макете не только основные экраны, но и их состояния: пустой главный экран, неактивный ключ, успешное и неудачное считывание, настройки с изменениями и без. Где платформы отличаются, у iOS и Android свои экраны.
Главный экран
01–04
01 Нет карт
02 iOS
03 Android
04 Ключ не активен
Карта
05–06
05 Данные карты
06 QR-код
Считывание
07–08
07 Ключ считан
08 Ошибка
Новый ключ
09–13
09 Новая карта
10 Тип ключа
11 Сгенерированный
12 По номеру телефона
13 Эмитированный
Настройки
14–15
14 Есть изменения
15 Без изменений
Уведомления
16–18
16 ID скопирован
17 Ошибка копирования
18 Общая ошибка
Дизайн-система
Система, по которой собраны экраны
Вместе с экранами в макете — правила: у каждого цвета своё назначение, у каждого шрифта iOS есть пара на Android, отступы заданы шагами, а компоненты показаны в разных состояниях.
Палитра
#FFFFFF
Текст и кнопки
#FFFFFF · 50%
Подписи
#FFFFFF · 30%
Текст неактивной кнопки
#FFFFFF · 10%
Фон кнопки
#6A85F0
Низ фона
#000000
Верх фона, кнопки и плашки
#000000 · 50%
Текст на серебряной карте
#000000 · 10%
Подложка кнопки «Сохранить»
#6BFF26
Успех и включённый переключатель
#FF2626
Ошибка
Шрифты
iOS
SF Pro Text
Android
Roboto
На Android каждое начертание SF Pro Text заменяется своей парой в Roboto.
Отступы
- 30 px
Внутри кнопок и между связанными элементами
- 22 px
Между заголовком и подписью
- 80 px
Между блоками на главных экранах
- 60 px
Между блоками в настройках — плотнее, чтобы меньше листать
- Обновлённые знак, логотип и иконку
- 15 экранов и 3 уведомления для iOS и Android
- Три материала карт под типы ключей
- Компоненты в разных состояниях
- Палитру, шрифты и отступы для разработки