Дизайн мобильного приложения

Подготовка макета приложения по доставке лекарств для аптеки DeliVita

Разработка макетов приложения

О компании

Название приложения DeliVita сложилось из двух частей: Delivery + Vita. Это напоминает пользователям одновременно о сервисе доставки и об аптеках, в названиях которых, либо в названиях лекарств, часто встречается часть Vita. 

DeliVita создается, чтобы облегчить пользователю процесс поиска, выбора и заказа лекарств. Особенность приложения — возможность заказать необходимые препараты с доставкой на дом. 

Цель разработки макета приложения

К нам обратились, чтобы разработать макеты для мобильного приложения аптеки. В сфере онлайн-заказов лекарств высокая конкуренция, поэтому приложение должно было выгодно отличаться удобством использования, привлекательным внешним видом и расширенным функционалом.

Разработка дизайна мобильного приложенияВизуальный образ

Вводная страница приложения дает понять, что пользователь может найти внутри различные лекарственные препараты. Изображение дает ассоциацию заботы о человеке, окружении его всем необходимым для здоровой жизни. Текст на стартовой странице сразу указывает, что лекарства можно доставить на дом. Кнопка призыва к действию без давления зовет в каталог товаров, мягко приглашает за покупками, что ассоциируется, скорее, с приятным шоппингом, а не с поиском лекарств при болезни.

Цветовая гамма логотипа

В основе цветовой гаммы страниц приложения лежат четыре цвета: приглушенный темно-синий, сине-фиолетовый, карминно-розовый и спокойный розовый. Самый темный из них отражает надежность, уверенное спокойствие и высокое качество товаров, более светлый оттенок — комфорт и расположение к пользователю. Карминовые оттенки мягко привлекают к себе внимание и упрощают ориентацию на странице, а розовые тона образуют безопасное пространство вокруг человека на изображении.
Цветовая гамма логотипа мягкая и сдержанная. Благодаря им стартовая страница получилась минималистичной, но при этом не пустой.

Фирменный шрифт

Заголовки в приложении написаны шрифтом Nunito Bold, основной текст — Nunito Regular. В них нет сложных элементов, засечек и необычных линий, что исключает сложности при чтении и попытки разобрать название бренда. Текст выглядит простым и понятным и выполняет свою главную задачу: донести информацию до пользователя максимально быстро и не перегружать его восприятие. Поэтому простой удобочитаемый шрифт вызывает большее доверие, чем графика с множеством элементов.

Макеты приложенияГлавная страница приложения

Страница регистрации выполнена в тех же сдержанных тонах. Изображение пользователя, который вводит пароль в приложении в неком закрытом пространстве, ассоциируется с безопасностью персональных данных, а находящийся рядом лист дуба — с экологичностью, природой и здоровьем.

Процесс регистрации выглядит простым и удобным, от пользователя не требуется совершить каких-либо нестандартных или слишком сложных действий.

Главная страница приложения

При переходе на основную страницу приложения перед пользователем открывается возможность совершить любое из самых популярных стартовых действий: строка поиска, основные категории товаров и самые популярные препараты. Для удобства на строку поиска помещена иконка микрофона для голосового набора. 

Иконки категорий товаров выполнены в единой цветовой схеме. Минималистичные изображения позволяют не читать название категорий, а сразу понимать, что внутри: лекарства, косметические средства или витамины. 

В поле популярных товаров отражается основная информация о продукте: название, изображение упаковки, цена и производитель. Если пользователь знаком с препаратом, ему не обязательно переходить на страницу товара — кнопка добавления в корзину расположена рядом с карточкой товара и выделена цветом. 

Нижняя строка меню позволяет быстро перемещаться по страницам приложения, переходя из корзины обратно в каталог и отправляя интересующие товары в избранное. Элементы меню серого цвета, за счет чего не отвлекают на себя внимание пользователя, пока он занят просмотром товаров.

Карточка товара в приложении

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

Корзина в приложении

При переходе в корзину внимание в первую очередь привлекает изображение человека с тележкой. Этот образ ассоциируется с неспешной прогулкой по магазинам, когда можно взять все, что хочется, и без проблем довезти до машины — то есть получить на дом. 

Описание товаров в корзине повторяет основную информацию: внешний вид упаковки, название, цена, количество упаковок и производитель. Кнопка оформления заказа выделена заметным, но не чересчур ярким красным цветом. На нижней панели меню неброско выделяется кнопка корзины, указывая, на какой странице сейчас находится пользователь.

Оформление заказа в приложении

На странице оформления заказа пользователю предлагают еще раз проверить состав своего заказа. При этом сохранена возможность на этом же этапе добавить или уменьшить количество упаковок в заказе — возвращаться в корзину для этого нет необходимости. 

На этой странице пользователь видит одновременно конечную сумму заказа, из чего она складывается и размер скидки. Такая прозрачность повышает доверие к компании.

Избранное в приложении

На странице избранного внимание привлекает изображение. Человек, сидящий в расслабленной позе среди упаковок с лекарствами, отражает состояние спокойствия и комфорта. Это впечатление усиливают листья дуба, выглядывающие из-за банок, которые одновременно напоминают бабочку. Это также ассоциируется с легкостью и дружественностью. 

В целом вся логика приложения направлена на доведение пользователя до оформления заказа. К этому шагу он может прийти по любой цепочке из каждого пункта меню.

Логистика приложения разработана с учетом того, чтобы подвести пользователя до создания заказа. К данному действию он может дойти по каждой цепочке из любого пункта меню.

Заказать дизайн приложения

Оставить заявку

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: