Проработать контрол выбора инструмента: бинарные опционы, forex, акции, криптовалюты и активы (EUR/USD) для торговли в мобильном приложении.
Условие тестового задания — сделать landscape версию, но я решил перенести все в портретный режим. Это удобнее и привычнее для начинающего пользователя.
1. Наброски
Карандашные зарисовки в тетради с пониманием будущего функционала.
2. Axure
Макет, созданный на базе набросков, включает только те идеи, которые подходят для развития в будущем.
3. Sketch
Отрисовка чистового варианта интерфейса приложения и проработка поведения отдельных элементов.
4. Principle
Анимация поведения элементов с учетом реалистичных финансовых показателей.
ЭТАП 1
Наброски в тетради
Чтобы часто не переделывать чистовой вариант дизайна, я прорабатываю проект на обычной бумаге. Сразу прикидываю количество нужных элементов и выстраиваю первичную иерархию.
В ландшафтном варианте элементы казались мелкими, поэтому решил сделать сразу портрет.
Придумал элементы оформления карточек для активов, где показан график за последние 5 минут.
Также мне стало понятно, что раздел табов можно кастомизировать, вызывая ховер-меню.
ЭТАП 2
Прототип в Axure
На этапе сборки первоначального прототипа я понял, что навигацию в приложении лучше расположить внизу, как это сейчас делают крупнейшие игроки рынка.
Дополнительные и второстепенные разделы можно убрать в "More".
Передо мной сложилась картина того, как будут выглядеть карточки активов и сколько их может поместить в одном вьюпорте.
Также было продумано ховер-меню для добавления табов на странице активов.
ЭТАП 3
Отрисовка интерфейса в Sketch
Чистовая отрисовка интерфейса — простая задача. На данном этапе не нужно придумывать какие-то дополнительные функциональные особенности, я беру и переношу прототип в другое графическое представление.
Стилистически я хотел быть близок к цветам и оформлению Binomo.
Плюсы этого макета — крупная и ясная типографика, отсутствие мелких деталей, который присущи проектам, которые делаются "на лету".
В тестовом задании я следовал семантике и давал правильные названия слоям, группам и элементам, чтобы потом было проще их анимировать.
ЭТАП 4
Анимация в Principle
Анимация — трудный и кропотливый этап при создании приложения.
Тут я привел пример отработки интерфейса при нажатии на "+" в поле табов. Данная функция позволяет увеличить/уменьшить количество контента для пользователя. Опытные юзеры смогут следить за наибольшим количеством показателей, новички не потеряются в разнообразии активов и быстрее освоятся.
За основу было взято нативное поведение iOS при открытии контекстной ховер-страницы, что упрощает разработчикам перенос анимации в интерфейс.
Ну и куда же без выбора цветовой схемы?
Спасибо за внимание!
Всегда рад сотрудничеству
Санкт-Петербург Телефон: +7 960 242 83 93 E-mail: aloha.nikitin@gmail.com