1ВХОД
Светло-серый экран с синими полями сменил тёмный фирменный: 3D-иллюстрация бренда, приветствие и оранжевая «Войти».
< ВСЕ УРОВНИ
УРОВЕНЬ 1-3 / 03
WORLD 1-3 · UI-ДИЗАЙН · 2026
МОБИЛЬНОЕ
ПРИЛОЖЕНИЕ
ЭН+ ТЕЛЕКОМ
Быстрый редизайн личного кабинета под новый бренд: свежий визуал на тех же экранах — без новых функций и без переделки сценариев.
01О ПРОЕКТЕ
После ребрендинга «РегионТелеком» стал «Эн+ Телеком». Сайт уже получил новый облик, а приложение всё ещё говорило голосом старого бренда.
Приложение — это личный кабинет абонента: баланс и пополнение, лицевые счета, подключённые и дополнительные услуги, новости компании, профиль и настройки. Им пользуются каждый месяц, поэтому разрыв между новым сайтом и старым приложением был заметен сразу.
02ЗАДАЧА
Быстро перевести приложение на новый бренд — не трогая функциональность.
Это не большой редизайн, а визуальное обновление. Пользователи должны открыть знакомое приложение и найти всё на своих местах, а разработка — перенести новые стили на существующие экраны без переписывания логики.
НЕ ДЕЛАЕМДЕЛАЕМ
Новые функции и разделыНовые цвета, иконки и формы из айдентики бренда
Новые сценарии и логикуТе же экраны и тот же путь пользователя
Долгие исследования и тестыБыстрый аудит и сразу — визуальное решение
Изменения в данных и APIUI-кит, прототип и описание анимаций для разработки
03ЧТО БЫЛО
Старое приложение осталось в образе прежнего бренда и выглядело как стандартный шаблон.
Я прошёл по ключевым экранам на телефоне и собрал скриншоты: вход, главная, меню, профиль, офисы, лицевые счета, пополнение, дополнительные услуги и новости.
- 01Старый бренд.Логотип и название «Регион Телеком», синий цвет из прежней айдентики — приложение не совпадало с новым сайтом.
- 02Шаблонный вид.Системные элементы, серые градиентные фоны, плоские списки с разделителями — без характера компании.
- 03Главная как меню.Баннер и сетка из девяти одинаковых круглых иконок. Баланс и услуги не видны сразу, а разделы повторяют боковое меню.
- 04Нет акцента.Синим окрашены шапки, кнопки, иконки и ссылки — главное действие на экране ничем не выделяется.
04ПРОЦЕСС
Короткий путь от скриншотов до прототипа.
- Аудит старого приложения.
Прошёл по разделам на телефоне, собрал скриншоты и зафиксировал, что остаётся без изменений: экраны, данные и порядок действий.
- Перенос айдентики.
Взял визуальный язык из редизайна сайта: изумрудный и оранжевый, спокойные нейтральные, скругления и карточки. Сохранил цвета в Figma как стили.
- UI-кит.
Собрал компоненты: кнопки, поля логина и пароля, переключатели, чипы сумм, карточки услуг и новостей, модальные шторки.
- Восемь экранов.
Вход, главная, уведомления, профиль, лицевые счета, пополнение, дополнительные услуги и новости — в новом визуале, с той же структурой.
- Прототип и анимации.
Связал экраны в кликабельный прототип и описал для разработки переходы между страницами, шторки и закреплённую шапку.
05РЕШЕНИЕ
Новый бренд — на тех же экранах и в тех же сценариях.
- Изумрудная шапка с градиентом и скруглением снизу, светлый фон — приложение выглядит частью одной системы с сайтом.
- Оранжевый оставил только для главных действий: «Войти», «Пополнить», «Подключить».
- Карточки вместо плоских списков: баланс, услуги со статусом «Активна», новости с фотографиями.
- Иконки в одном линейном стиле на светлых плашках вместо разнородных синих.
- Главная собирает нужное на первом экране: баланс с кнопкой пополнения, переходы в разделы чипами и подключённые услуги.
- Модальные окна стали шторками снизу экрана — до них удобно дотянуться пальцем.
2ГЛАВНАЯ
Вместо сетки из девяти иконок — баланс с «Пополнить», чипы разделов и подключённые услуги карточками.
3ПРОФИЛЬ
Серые плашки разделов стали карточками, переключатели — в фирменном цвете. Те же настройки, те же пункты.
4ЛИЦЕВЫЕ СЧЕТА
Номер счёта — чипом, баланс — крупно рядом с кнопкой, заметка о дате списания, услуги со статусом.
5ПОПОЛНЕНИЕ
Поле «Сумма» и кнопка «Далее» превратились в крупную сумму с быстрыми вариантами 300 / 600 / 1000 / 1200.
6ДОП. УСЛУГИ
Длинные описания с синей кнопкой у каждой услуги стали компактным списком — подробности и цена открываются в шторке.
7НОВОСТИ
Текстовые блоки стали карточками с фото, заголовком и кратким текстом, который раскрывается по «Подробнее».
06ДЕТАЛИ
Небольшие решения, которые делают привычное приложение удобнее.
07UI-КИТ И ПРОТОТИП
Компоненты, прототип и описание анимаций — чтобы разработка перенесла визуал без догадок.
- 8экранов в новом визуале
- 23компонента и варианта в 11 наборах
- 5цветовых стилей бренда в Figma
- 31интерактивный элемент в прототипе
7.1
Спецификация анимаций
Для каждого перехода описал направление, длительность и кривую — одинаковые движения делают приложение цельным.
ДЕЙСТВИЕАНИМАЦИЯ
Переход на новую страницуMove in справа налево поверх текущего экрана · 300 мс · ease-out
Возврат на предыдущую страницуMove out слева направо, открывая предыдущий экран · 300 мс · ease-out
Выход из аккаунтаЭкран уезжает вниз, под ним — вход · 300 мс · ease-out
Модальные окнаШторка снизу по центру экрана · 300 мс · ease-out
Переключатели, суммы, новостиSmart animate между состояниями · 300 мс · ease-out
Прокрутка главнойШапка с логотипом, уведомлениями и профилем закрепляется
08РЕЗУЛЬТАТ
Приложение заговорило языком нового бренда, а пользователям не пришлось ничего переучивать.
Все разделы и сценарии остались на своих местах: баланс, пополнение, услуги, новости и профиль работают как раньше. Изменился облик — теперь приложение выглядит частью одной системы с сайтом Эн+ Телеком. Макеты, UI-кит, прототип и спецификация анимаций готовы для разработки: новые стили ложатся на существующие экраны без изменения логики.
