mPOS
![Личный кабинет Личный кабинет](/images/projects/projects-mpos-cover.jpg)
Завершено в 2015
Интерфейс мобильного приложения для телефона и планшета под iOS и Android.
Задача
Разработать интерфейс мобильного приложения для приема оплаты, с возможностью простой кастомизации под любой банк путем изменения цвета и логотипа банка.
Структура
Разработка такого большого интерфейса непременно должна начинаться с плана. В нашем случае, планом интерфейса выступает его структура.
![Структура Структура](/images/projects/projects-mpos-structure.jpg)
Структура приложения не только помогает спроектировать интерфейс, но и облегчает работу разработчикам: еще не видя финальных экранов приложения, они уже могут начинать свою часть работы, что существенно экономит время всей разработки.
Схемы
Далее началась работа над схемами приложения. Схемы приложения представляют собой изображения экранов, которые дают понять о его содержании и расположении элементов интерфейса относительно друг друга, но ничего не говорят об оформлении.
![Схемы Схемы](/images/projects/projects-mpos-wireframes.jpg)
![Invision Invision](/images/projects/projects-mpos-invision.jpg)
Все разрабатываемые в Flyphant интерфейсы приложения еще на этапе схем обязательно проходят проверку работоспособности в виде интерактивного прототипа в Invision.
Оформление
Оформление схем приложения было выполнено таким образом, что путем замены лишь одного цвета и логотипа приложение становится брендированным под тот или иной банк.
Выбор языка
При первом запуске язык приложения подставляется автоматически, но выбор остается за пользователем.
![Выбор языка Выбор языка](/images/projects/projects-mpos-language.jpg)
Активация
Далее пользователю предстоит пройти активацию. Указывается адрес электронной почты или номер телефона, на который отправляется код активации.
![Активация Активация](/images/projects/projects-mpos-activation.jpg)
Подключение устройств
После активации пользователю предлагается подключить устройство сразу, чтобы избежать этого шага при оплате.
![Подключение устройств Подключение устройств](/images/projects/projects-mpos-connect.jpg)
Авторизация
Последующий вход в приложение происходит с указанием пароля или PIN-кода. В одном приложении может быть активировано несколько пользователей.
![Авторизация Авторизация](/images/projects/projects-mpos-login.jpg)
Товары
В зависимости от предустановок приложения, у пользователя может быть возможность выбрать товар из представленного каталога.
![Товары Товары](/images/projects/projects-mpos-frontstore.jpg)
Способ оплаты
К оплате можно перейти двумя способами: выбрав товары или просто указав сумму чека.
![Способ оплаты Способ оплаты](/images/projects/projects-mpos-payment.jpg)
Оплата картой
Перед оплатой картой предлагается выбор как проводить карту: через кардридер или через PIN-пад.
![Оплата картой Оплата картой](/images/projects/projects-mpos-card.jpg)
В зависимости от выбранного способа проведения карты, пользователю может потребоваться оставить свою подпись.
![Подпись Подпись](/images/projects/projects-mpos-signature.jpg)
После подписи, сверяются все данные, указываются номер телефона и адрес электронной почты, куда будет отправлен чек, и оплата принята.
![Оплата прошла успешно Оплата прошла успешно](/images/projects/projects-mpos-success.jpg)
При желании и при наличии подключенного принтера, чек печатается тут же при покупателе.
![Печать чека Печать чека](/images/projects/projects-mpos-print.jpg)
Настройки
В настройках приложения можно привязать или отвязать устройства, изменить пароль или PIN-код для входа или поменять язык приложения.
![Настройки Настройки](/images/projects/projects-mpos-settings.jpg)
iPad
Ощутимая доля мобильных платежей производится с использованием планшета. Интерфейс, разработанный под iPhone был нами адаптирован под iPad.
![iPad iPad](/images/projects/projects-mpos-ipad.jpg)
Android
Помимо адаптации интерфейса приложения под iPad была произведена адаптация под смартфон и планшет под управлением операционной системы Android.
![Android Android](/images/projects/projects-mpos-android.jpg)
Разработка интерфейса завершилась подготовкой и передачей разработчикам всех графических материалов и видео роликов, описывающих анимацию интерфейса.
Взгляните на другие мобильные приложения
![Приложение Виртуальной АТС Приложение Виртуальной АТС](/images/share/shareimage-megafon-vats-app.jpg)
Приложение Виртуальной АТС
![Skybonds Skybonds](/images/share/shareimage-skybonds.jpg)
Skybonds
![Attraction Attraction](/images/share/shareimage-attraction.jpg)
Attraction