Оформление карт для Apple Wallet и Google Pay. Советы дизайнера
В прошлой статье мы рассказывали про фишки дизайна электронных карт. В основном мы затронули дизайн карт в Apple Wallet. Сегодня же поговорим про неочевидные моменты, которые точно улучшат дизайн ваших электронных карт.
749 открытий
Первое, что хотели убрать многие клиенты – это логотип. Да-да, вы не ослышались!
Apple Walllet и Google Pay специально отвели место в макете карты под логотип вашего заведения. Но для многих оно кажется слишком маленьким и сам логотип часто просят поместить на баннер. Выглядит это вот так:
И визуально это может выглядеть хорошо, если бы не одно «Но». Это место выбрано неслучайно.
С помощью логотипа пользователь будет находить карту именно вашего заведения среди множества других карт. Пользователи Apple Wallet хранят достаточно много карт в электронном кошельке, потому логотип заведения поможет быстрее отыскать карту, к примеру, в ресторане. Если пользователь не сможет быстро найти карту, скорее всего в будущем картой лояльности вашего заведения он пользоваться не будет.
Примерно так выглядит кошелек Apple Wallet при входе в приложение:
Теперь вы видите, что место под логотип нужно обязательно использовать, иначе найти нужную карты будет нереально.
Другой вопрос — что делать, если принципиально нужно разместить логотип на баннере?
В таком случае выход есть — используйте иконку, в месте для лого. Это может быть та же иконка, что и в push-уведомлениях или фавикон с вашего сайта.
Ниже пример существующей карты:
Второе, на что следует обратить особое внимание – дизайн электронных карт Google Pay. Он значительно отличается от Apple Wallet, несмотря на то, что размеры баннеров у них похожи.
Самое большое различие в интерфейсе заключается в логотипе. В Google Pay правила размещения логотипа строже, чем в Apple Wallet. Логотип Google Pay размещается строго в круге. Это не всегда удобно, если у вас длинный прямоугольный логотип, к примеру. И не разместить логотип — нельзя совсем.
Место под логотип всегда выделено белым контуром, как в примере:
На примере показаны 2 карты, потому что телефонов на системе Android очень много и в зависимости от размера экрана интерфейс может быть таким, как слева, так и справа. Более новые смартфоны будут отображать интерфейс с баннером внизу. В Loona мы всегда готовим дизайн под 2 варианта интерфейса.
Карты хранятся в кошельке Google Pay также, как и в Apple Wallet, потому не оформив место с логотипом — карты не будет видно среди перечня других карт.
Мы разобрали, почему не стоит пренебрегать местом под логотип и немного углубились в гайды Apple Wallet и Google Pay. В дизайне важно смотреть глазами клиента, а пользователю важнее всего найти карту вашего заведения, удобно ли ей пользоваться, а уже на последнем месте стоит сам дизайн.
Функциональный дизайн — это главный принцип, по которому создаются карты в Loona.
Дизайн карт Apple Wallet и Google Wallet
Дизайн карт Apple Wallet и Google Wallet очень похожи, обе платформы дают широкие возможности для создание карты в стилистике бренда. В статье рассмотрим структуру карты и какие файлы необходимо подготовить, чтобы создать привлекательную карту лояльности для пользователей.
Структура карты Apple
Набор полей на карте Apple Wallet
Суммарно структуру карты можно разделить на 4 составляющих:
Также для любой карты можно выбирать цвета: самой карты, заголовков и текста под заголовками.
Структура карты Google
Набор полей на карте Google Wallet
Структура карты для Android отличается не сильно, в ней присутствуют все те же поля:
Цвет карты тоже можно задавать любой, но вот менять его, при переходе по уровням