О проекте

VPNgram — мобильное VPN-приложение с бесплатным ежедневным лимитом трафика и платной подпиской без ограничений. Интерфейс построен на светлой нейроморфной стилистике: мягкие тени, выпуклые карточки и фирменный градиент от оранжевого к фиолетовому, который подсвечивает только активные элементы.

Задача

От VPN-приложения пользователь хочет одного — включить защиту и забыть о ней. Нам нужно было сделать интерфейс, в котором подключение занимает одно касание, при этом пользователь всегда видит, сколько бесплатного трафика осталось, и понимает, как получить больше.

Первый запуск

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

Подключение

Главный экран почти пустой, и это сознательное решение. В центре — большой переключатель: когда VPN включён, он заливается фирменным градиентом и под ним появляется статус «Подключено». Внизу — полоса израсходованного трафика с остатком по времени и выбранный сервер с флагом страны, городом и пингом. Навигация состоит из трёх иконок: подключение, список серверов и подписка.

Выбор сервера

Серверы сгруппированы по странам: США, Мексика, Япония, Франция, Китай, Бельгия, Польша, Россия и другие. Под названием страны указано число доступных локаций, а при раскрытии карточки появляются города с индикатором нагрузки и пингом. Так пользователь сначала выбирает страну, а затем — самый быстрый город в ней.

Подписка

Экран тарифов показывает текущий бесплатный лимит на день и сколько из него уже использовано. Отдельная кнопка «Пригласить друга» даёт дополнительный гигабайт трафика — это бесплатный способ продлить работу без оплаты. Ниже — тариф Unlimited за 250 рублей в месяц и кнопка «Оформить подписку».

Результат

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