Есть задача?
Oops! Something went wrong while submitting the form.
Дизайн интерфейса
Интернет вещей
Дизайн интерфейса для станции зарядки и разработка фронтенд-оболочки приложения
Дизайн интерфейса для станции зарядки
и разработка фронтенд-оболочки приложения
Электротранспорт
Зарядная инфраструктура
Дизайн интерфейса
Интернет вещей
Компания «Зарядные станции «Яблочков» —
крупный производитель и разработчик
зарядных станций для электротранспорта
Компания «Зарядные станции «Яблочков» — крупный производитель и разработчик зарядных станций
для электротранспорта
Обновить интерфейс экранов зарядных станций, чтобы они стали удобнее для пользователей, а также разработать для него фронтенд-оболочку
Создание нового дизайна интерфейса
Проектирование удобного пользовательского пути
Разработка фронтенд-оболочки для интерфейса и интеграция с бэкендом
Проект был небольшим по дизайну: у интерфейса станции мало состояний и пользовательских флоу. Но технически задача была сложной.
Мы такое любим ✌️
Зарядные станции работают на открытом
воздухе и в любую погоду.Чтобы спокойно
Зарядные станции работают
на открытом воздухе и в любую погоду.Чтобы спокойно пользоваться ими даже зимой, управление реализовано через механические кнопки
пользоваться ими даже зимой, управление
реализовано через механические кнопки
Поэтому в дизайне нельзя было использовать кликабельные элементы, таббары или дропдауны.
Еще одна из особенностей работы — это небольшой размер самого экрана, на котором нужно компактно разместить все элементы интерфейса
Совместно с командой «Яблочков» мы
создали простой и интуитивный интерфейс
Совместно с командой «Яблочков»
мы создали простой и интуитивный интерфейс для зарядных станций, чтобы пользователям было удобно
и быстро начать зарядку
для зарядных станций, чтобы пользователям было удобно и быстро начать зарядку
Основной упор — на четкую навигацию, простоту выбора нужных параметров и понятную визуализацию процесса зарядки
Для старта зарядки пользователь должен авторизоваться
Выбор коннектора для зарядки
Прогресс
Для старта зарядки пользователь должен авторизоваться
Выбор коннектора для зарядки
Прогресс
Чтобы избежать путаницы при одновременном использовании нескольких коннекторов,
Чтобы избежать путаницы
при одновременном использовании нескольких коннекторов, показываем статусы их доступности
показываем статусы их доступности
Статусы коннекторов отображаются на начальном экране
В правой части экрана показываем коннекторы, даем превью по статусу и проценту заряда
Статусы коннекторов отображаются
на начальном экране
В правой части экрана показываем коннекторы, даем превью по статусу и проценту заряда
Для ошибок предусмотрена цветовая
индикация — от «оранжевой» до «красной»,
Для ошибок предусмотрена цветовая индикация — от «оранжевой»
до «красной», чтобы пользователь сразу понимал, что делать дальше
чтобы пользователь сразу понимал,
что делать дальше
Дизайн выдержан в монохромной палитре
с яркими акцентами — так интерфейс
Дизайн выдержан в монохромной палитре с яркими акцентами — так интерфейс остается читаемым даже при солнечном свете и под защитным стеклом
остается читаемым даже при солнечном
свете и под защитным стеклом
Основные цвета — серый, белый и черный — создают хорошую контрастность. Для акцентов — более яркие оттенки зеленого, красного, оранжевого и синего
Green
#21C789
Dark green
#1B8B61
Red
#C43333
Orange
#CE4C06
Blue
#246AD3
White
#FFFFFF
Light gray
#EBEBEB
Gray
#DBDBDB
Dark gray
#585858
Black
#131313
Решение протестировали с реальными
пользователями и доработали по отзывам.
Решение протестировали с реальными пользователями и доработали
по отзывам. Мы тесно сотрудничали
с инхаус-командой заказчика, чтобы без сбоев встроить обновления
в существующую систему
Мы тесно сотрудничали с инхаус-командой
заказчика, чтобы без сбоев встроить
обновления в существующую систему
Реализация проекта заняла 4 месяца. Заказчик остался доволен результатом