К нам обратился заказчик с задачей разработать дизайн интерфейса вендингового автомата, который его команда проектировала. Особенность такого автомата - возможность заправки авто топливом, возможность автоматической загрузки товаров, широкий ассортимент сопутствующих товаров. У заказчика уже были черновые варианты страниц, но от них можно было отходить. В процессе работы над интерфейсом у заказчика возникло желание оформить еще и наружный фасад киоска для аппарата.
1. Оформление киоска
Elena Larvatus:
Команда Vendera разрабатывает различные автоматизации для рутинных процессов. Например, автоматические автозаправочные станции для автомобилей. В этом проекте они решили разработать новый вариант автомата с продуктами. Основным отличием от других автоматов, которые сейчас есть на рынке, выступает очень большой ассортимент товаров от банки кока колы до горячего супа. Достигается это другой системой выдачи товара и другими условиями хранения.
Они хотели, чтобы визуально автомат не был похож на железный ящик. Чтобы он был больше арт объектом, к которому приятно подходить и приятно что-то оттуда брать, чем просто ящиком с продуктами.
Также нужно было, чтобы дизайн автомата вписывался в дизайн интерьера помещения, в котором он будет находится. Самую первую тестовую модель было решено поставить в казанский коворкинг GrowUp.
Я как всегда начала с эскизов.
Потом сделала полностью иллюстрацию и превью того, как это будет выглядеть на объекте.
Чертежи и превью отправились на согласование дирекции коворкинга.
После согласования я стала готовить иллюстрацию к печати.
Иллюстрация в жизни:
2. Анимации для интерфейса
Lex Larvatus:
Анимации были выполнены в формате .svg для удобства адаптации под разные разрешения мониторов.
Плюсом такого подхода еще стал достаточно небольшой размер файла. Весь код анимации прописал непосредственно в .svg-файле. Каждая анимация для удобства вёрстки была сохранена отдельным файлом.
Две анимации на экране выбора раздела:
Анимации всех стадий заправки авто:
Анимация сбора заказанного товара и подготовки к выдаче:
Анимация стартового экрана с рекламой:
Анимация экрана, информирующего об отсутствии товара в аппарате, но его скорой доставке:
Анимация экрана выбора способа оплаты:
Анимация, появляющаяся в нижней части экрана над механизмом выдачи товара при его открывании:
Фоновая анимация блока с логотипом:
Реакция кнопок:
Смена фона и переключение вкладок:
Анимация линий фона на большинство разделов:
3. Интерфейс терминала
Каждая страница была подготовлена в виде интерактивного прототипа на html + css + js + animated svg.
Для экрана выбора ТРК, на которой клиент оставил свой автомобиль, была реализована схема размещения в виде сот. Такая компоновка позволила наиболее компактно разместить на экране большее количество ячеек ТРК. Нами было предусмотрено и подготовлено несколько основных компоновок под разное количество ТРК на АЗС.
Составили небольшой гайд для использования цветов и шрифтов в интерфейсе.
Для разделов магазина были отрисованы варианты иконок. Но впоследствии было решено от них отказаться.
4. Созданные скрипты
Так как мы делали прототипы каждой страницы, то нужно было наполнить их интерактивом.
Интерактив и анимации были созданы с помощью Javascript, CSS и анимирования SVG (CSS-анимации и SMIL-анимации).
Нами были проанимированы:
Анимация переключения вкладок и смена градиентного фона;
Анимации эффектов нажатия на кнопки;
Анимация сборки товаров на платформу;
Анимация движения линий на фонах страниц;
Анимация ТРК и корзины на экране выбора раздела;
Анимация выбора способа оплаты;
Анимация доставки товаров;
Анимация полос на стартовом экране;
Анимации счётчиков товара и итоговой суммы, при наборе товаров;
Анимация ячейки с ТРК (подъезд авто, выбор ТРК, выбор топлива, анимация заправки, анимация отъезда авто)
Контроллер анимаций ячеек ТРК, имитирующий работающую АЗС и случайный поток авто и их поведение.
Что мы сделали:
Эскизирование
Иллюстрации
Анимации
UI/UX
Скрипты и интерактив
Прототипирование
Предпечатная подготовка
Авторский надзор
