Тестовое задание для Binomo
Выполнил Илья Никитин
ВВЕДЕНИЕ
Задача и этапы её решения
Задача
Проработать контрол выбора инструмента: бинарные опционы, 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
This site was made on Tilda — a website builder that helps to create a website without any code
Create a website