;-)

Создание макетов приложения «Фридом Финанса» для айфона и андроида

Описание• Процесс

Вникаем в мир биржи, изучаем, что к чему, смотрим, как вообще бывает.

Арт-директор предлагает начать не с проектирования, а с концепции. Сначала просто описать словами, а потом нарисовать три экрана и не думать, как все будет связано.


Готовим текст концепции.

«Покажем, что Казахстанская биржа — перспективное и интересное место для инвестиций.

Сделаем приложение „Фридом Финанса“ информативным и дружелюбным. Продемонстрируем, что брокер хочет не просто получить очередного клиента, а помочь людям научиться инвестировать или открыть для себя новый рынок.

Кроме того, сделаем путь от анализа до покупки максимально коротким».


Рисуем эскизы трех основных экранов: вотч-лист, экран с графиком и информацией о компании и «стакан» котировок (экран со списком заявок на покупку или продажу).

Арт-директор: ОК.

Оформляем эти три экрана. Чтобы добавить живости, кладем на фон градиент из фирменных цветов компании.

Появляется еще вариант с клетчатым паттерном поверх градиента, но он сразу отпадает.

Теперь думаем о связи экранов. С экраном графика и «стаканом» котировок все просто: второй будет дочерним для первого. Но будет ли сам экран графика дочерним для вотч-листа? Это уже два уровня вложенности, хотя джипегов нарисовано всего три штуки.

В это же время арт-директор просит добавить внизу вотч-листа панель с графиком, статистикой и новостями: «В эппл-акциях сразу доступен для просмотра график цен, а у тебя приходится делать для этого клик».

Добавляем в вотч-лист нижнюю панель. И это наводит на интересную идею: пусть по вытягиванию нижней панели вверх открывается экран графика. Так у нас появляется интересный и простой переход между экранами и становится на один уровень вложенности меньше.

Добавляем в нижнюю панель вотч-листа статистику и новости.

Арт-директор: Сделай кнопки кнопками — добавь под них плашки. Сейчас они не считываются сходу как кнопки. И в «стакане» котировок сделай визуальное разделение блоков менее агрессивным.

Поправляем.

Еще нужно придумать переключение между графиком с японскими свечами и обычным линейным. Первая мысль: запихнуть куда-нибудь переключалку. Но ни места, ни желания просто так отмахиваться нет. В итоге появляется решение переключать вид графика по тапу. Проще некуда.

Собираем прототип перехода из вотч-листа к экрану графика и обратно в «Атомике».

На следующий день открываем для себя приложение «Принципл» и пересобираем уже более полный прототип в нем.

Приступаем к проектированию. Сначала рисуем эскизы на бумаге. Надо как-то более изящно обойтись с навигацией, пока что все не особо слажено. Между одними экранами переход с помощью свайпа вверх-вниз, у других использован обычный уровень вложенности. Появляется идея с развитием навигации по свайпу. Пусть будет три основных экрана: портфель, вотч-лист и экран графика. Тянем экраны за шапку и переключаемся между ними.

Примерно набрасываем портфель и прототипируем механизм. Называем его «барабаном».

Проектируем остальные экраны.

Появляется мысль, как сделать покупку и продажу классными.

Дизайнер: На Казахстанской бирже не бывает такого, что покупают или продают мало акций на небольшую сумму. Всегда торгуют большим объемом акций на большие деньги. Но редко. Если вдруг кто-то купил или продал акции, то это событие. Настоящее такое событие, а не просто как за хлебом сходить.

Поэтому мы покажем, что произошло событие. При покупке и продаже акций после нажатия на кнопку ОК снизу всплывает плашка «Потяните вверх, чтобы купить» (это, конечно, заимствование у «Робингуда», но у нас этот свайп будет решать другую задачу). И потянув за плашку, человек вытянет за ней воздушные шары, салют или еще какие-то штуки, которые покажут, что произошло настоящее событие. Вызовем эмоцию. Люди захотят поторговать еще только ради того, чтобы снова анимацию посмотреть :-)


Арт-директор: Может быть прикольно. Набросаешь?

Набрасываем. Тут есть свои нюансы — например, как показать ошибку после отправки. Делаем первый подход.

Арт-директор: Насчет пузырей не уверен. Сама метафора не очень. Пузырь — переоцененная компания, стоимость которой вот-вот рухнет. Не лучшая ассоциация для экрана покупки.

И еще я бы не стал делать свайп единственным способом покупки. Как дополнительный вариант — ОК, но лишать людей простого способа — не ОК.


Меняем свайп на клик, а пузыри — на лучи.

Анимируем в «Афтер эффектсе».

Арт-директор: ОК.

После того как заявка на покупку или продажу отправлена, она переходит в таблицу заявок. Надо показать это анимацией.

Дополняем видео процесса покупки демонстрацией происходящего после нажатия кнопки ОК.

Получается топорно.

Ищем другое решение. Сначала кривая изменения позиции по оси Y для экранов на заднем плане была с прямым участком по середине.

То есть экраны начинают движение, потом встают на паузу и затем двигаются обратно. Но если сделать движение без паузы, то сразу все становится хорошо.

Оттачиваем улетающий экран.

Добавляем экран входа; он отображается вместо портфеля, пока человек не залогинится.

Арт-директор: Сейчас у тебя неочевидно, как вернуться с экрана входа обратно в вотч-лист. И убирай из левого верхнего угла ссылку на экран выше, ты без нее ничего не потеряешь.

Меняем экран входа и убираем ссылку из ЛВУ. Заодно делаем красивую анимацию при запуске и в вотч-листе отказываемся от режима редактирования — вместо него просто делим список на избранное и неизбранное.

Рисуем еще несколько экранов, собираем презентацию, показываем концепцию заказчику.

Заказчик утверждает концепцию и дает профессиональные комментарии о том, что сделано не так и что еще нужно добавить.

Причесываем верстку, меняем цветные японские свечи на белые, упрощаем внешний вид. Рисуем все состояния вотч-листа.

Придумываем, как будут работать вместе зум и ползунки для просмотра ценового диапазона. И для того и для другого нужно водить двумя пальцами по графику. Как совместить функции? Просто отказаться от одной не вариант.

Попробуем так: если свайпить сразу, то график зумится, а если удержать пальцы на полсекунды, то появляются ползунки для просмотра диапазона цен. А если для последних айфонов разделить функции с помощью 3D-тача? По сильному тапу — ползунки, без него — зум.

Арт-директор: На первый взгляд, ОК, но надо будет еще потыкать в это, конечно, и проверить пальцами, когда программисты соберут прототип.


Выясняем, что вместо полупрозрачного белого или черного лучше использовать режим наложения «Мягкий свет».

Просто полупрозрачный белый.

Белый в режиме наложения «Мягкий свет».

Белый с небольшой примесью зеленого в режиме наложения «Мягкий свет» — вот так полупрозрачные элементы выглядят натуральнее всего.

Рисуем и причесываем остальные экраны с кучей состояний для каждого.

Появляется идея на экране покупки и продажи для нестандартных видов заявок описывать их смысл человеческим языком.

Туда же добавляем плашку для неавторизованных ребят. Текст меняется в зависимости от того, что мы хотим сделать: подать рыночную заявку на покупку, стоп-лимитированную на продажу, открыть РЕПО или что-то другое. По клику попадаем на экран входа.

В барабане сейчас не нравится, что неосновной экран не дает с ходу понять, что это такое. Особенно бесит повторение в портфеле переключалки «акции — фьючерсы».

Придумываем смену шапки экрана на название.

Арт-директор: ОК. Будет классно, если это получится запрогать.


Вспоминаем, что надо еще поставить подпись студии. Ищем место.

Что-то не очень.

Арт-директор: А есть у нас какой-нибудь нефункциональный раздел — типа «О приложении»?

Дизайнер: В брифе не было, поэтому не делали.

Арт-директор: Давай сделаем?


Рисуем экран «О приложении».

Арт-директор выбирает вариант со звездочками, ведущими в «Аппстор».


Вспоминаем, что еще требуется нарисовать экран для перевода акций.

Придумываем логику попадания на этот экран: либо по долгому тапу на акции в вотч-листе, либо по нажатию на кнопку с тремя точками на экране графика.

Рисуем сам экран.

Заказчик предлагает в выпадающем меню не делить пункты о РЕПО и о переводе акций и объединить кнопки «Купить» и «Продать».

Объединяем все пункты РЕПО в один и делаем то же самое для пунктов перевода акций. Выбор вида будет происходить уже на их собственном экране. Так вроде даже лучше. Но кнопки «Купить» и «Продать» убеждаем не делить. Это будет совершенно непонятно непрофессионалам.

Изучаем графический стиль и интерфейс андроида, адаптируем приложение под него.

Собираем типовые экраны.

Скругляем углы экранов. Так приложение выглядит дружелюбнее и больше намекает на логику работы барабана.

Следим за разработкой.