Attraction
Завершено в 2018
Проектирование, оформление и подготовка для дальнейшей разработки интерфейса приложения под iOS и Android.
Задача
Спроектировать и отрисовать интерфейс мобильного приложения с рекомендациями на основе анализа лица, подготовить его для разработчиков и материалы для публикации в App Store.
Идея
Андрей Искорнев (основатель клиники пластической хирургии Платинентал) разработал алгоритм, который в отрыве от общепринятых шаблонов красоты говорит на сколько сочетаются черты лица между собой. На основе результатов работы этого алгоритма, можно давать рекомендации, например, стоит ли сделать прическу длиннее или использовать меньше косметики под глазами.
Сценарии использования
Вместе с командой разработки приложения мы продумали функционал и описали пути использования этого функционала пользователем в рамках планируемого интерфейса. В результате получилась таблица с пользовательскими сценариями.
![Кейсы использования Кейсы использования](/images/projects/projects-attraction-usecases.jpg)
Структура приложения
Далее мы составили структуру приложения, позволяющую выполнить описанные пользовательские сценарии.
![Структура приложения Структура приложения](/images/projects/projects-attraction-structure.jpg)
Структура приложения представляет из себя крайне приблизительное понимание что и на каком экране будет. Следующим шагом мы уточнили структуру и детализировали каждый экран приложения.
Финальные макеты
Схематичные макеты служат базой для финальных макетов интерфейса приложения. Мы определились со стилистикой и финализировали макеты.
Знакомство
При первом входе пользователя встречает прострая инструкция, которая вкратце объясняет как пользоваться приложением.
![Знакомство Знакомство](/images/projects/projects-attraction-onboarding.png)
Основной экран
Стартовый и основной экран приложения — это камера. Этот экран не просто делает снимок, но и помогает сделать правильное кадрирование, что, в итоге, повлияет на результат анализа снимка.
![Основной экран Основной экран](/images/projects/projects-attraction-camera.png)
Обработка снимка
Пока происходит обработка снимка, пользователь может наблюдать за процессом. Это не даст ему заскучать и поможет понять, как происходит анализ.
![Обработка снимка Обработка снимка](/images/projects/projects-attraction-process.png)
Результаты
Результатом анализа снимка является индекс от 0 до 9.9. На этом же экране есть возможно поделиться индексом и получить подробное описание сильных сторон и тех, которым стоит уделить внимание.
![Результаты Результаты](/images/projects/projects-attraction-result.png)
При повороте смартфона в альбомное положение, экран фокусируется на истори всех сделанных и проанализированных снимков.
![Результаты (альбомный вид) Результаты (альбомный вид)](/images/projects/projects-attraction-result-album.png)
Подсказки
Также в приложении есть подсказки как сделать снимок, позволяющи провести максимально точный анализ.
![Подсказки Подсказки](/images/projects/projects-attraction-tips.png)
Ошибки
Случается всякое. И на это всякое приложение должно реагировать соответствующе. Подготовили сообщения об ошибках, рассказывающие что случилось и что с этим можно поделать.
![Ошибки Ошибки](/images/projects/projects-attraction-errors.png)
И прочие экраны и их состояния…
![Прочие экраны Прочие экраны](/images/projects/projects-attraction-other.png)
Адаптация под Android
Так как интерфейс приложения построен не на стандартных компонентах, то сильной привязанности к паттернам поведения пользователей на iOS не было. Отсюда и надобности перерисовывать весь интерфейс под Android не возникло, что помогло ускорить доставку интерфейса под Android. Ограничились только адаптацией диалоговых окон.
![Адаптация под Android Адаптация под Android](/images/projects/projects-attraction-android.png)
Разработка приложения велась силами клиента.
Взгляните на другие мобильные приложения
![Приложение Виртуальной АТС Приложение Виртуальной АТС](/images/share/shareimage-megafon-vats-app.jpg)
Приложение Виртуальной АТС
![Skybonds Skybonds](/images/share/shareimage-skybonds.jpg)
Skybonds
![Datsun Datsun](/images/share/shareimage-datsun.jpg)
Datsun