ТЕКСТ: ЕВГЕНИЙ БРЯНЦЕВ. Привет. Я — разработчик приложений для iOS. На прошлой неделе мы с моделлером и программистом выпустили забавное приложение для детей Буквоед. Это такая азбука, в которой буквами надо кормить милого, но вечно голодного персонажа. Тащишь букву или несколько к Буквоеду, он пережевывает и произносит название буквы. Приложение работает на айпаде, айфоне и айподтаче. Я расскажу, как мы разрабатывали персонажа, интерфейс и снимали ролик.
Идея
Cамая простая — монстр ест букву и сразу ее произносит. Это понятно и прикольно.
Персонаж
Персонаж должен был быть милым, с большой пастью, чтобы буквы помещались и такой чтобы нравился детям.
Сначала мы думали сделать монстра двухголовым, чтобы он одной головой ел, а второй произносил. Но смотрелся он ужасно. Подумал сделать монстра с головой и дополнительным хоботом, которым он мог бы произносить буквы, но смотрелся он неоднозначно. По-этому решили сделать процесс естественным — монстр ест букву и произносит ее. Вместе с Наташей мы начали делать карандашные эскизы и довольно скоро получился персонаж, похожий и на жабу и на осьминога и на дракона одновременно.
Стали прорабатывать варианты фактур. Пробовали мохнатенькие фактуры, чтобы персонаж был похожим на чувачков из Big Planet, но тут фактуры явно не катили.
Получался ковер настенный 🙂 это явно не то. Решили делать просто матовым зеленым.
Продолжили работать с формой, анимацией жевания, прической, эмоциями и начал появляться какой-то конкретный персонаж.
Получившейся образ мы проработали в деталях и сделали рендеры всех кадров анимации.
Интерфейс для айпада, выбор фона и шрифта
Я уверен в том, что все хорошие приложения для детей до 6 лет должны быть без меню с кнопкой Start, без рекламы, а в бесплатных и лайт версиях не должно быть ссылок на полную версию. Потому, что дети жмут все подряд и не ожидают, что вдруг откроется эпстор или диалоговое окно. В Буквоеда мы даже не встроили . Для большинства приложений можно избежать ненужных, непонятных этапов для ребенка. Приложение должно запускаться и быть готовым к работе. Так мы и сделали. После запуска появляется сразу весь алфавит и можно кормить Буквоеда.
Шрифт
Мы очень долго искали подходящую гарнитуру. Конечно же выбрали Букварную. Тоненькая, красивая, легкая. И сразу видно чем буквы различаются между собой. Именно этой гарнитурой раньше набирали азбуки и учебники.
Почему такой простой деревянный фон? – Все очень просто. На градиентных фонах буквы висят в воздухе. А если фон имеет рисунок дерева, то легче запоминать расположение буквы, изгибы выносных элементов. Да и просто приятней. Фон не должен отвлекать. Мы перебрали несколько цветовых сочетаний, фактур, контрастов, букв с фоном.
Остановились на зеленом фоне и бело-желтых буквах. Яркость подобрали такую, чтобы буквы были заметны и видны днем на улице. Потом подобрали максимально возможные расстояния между буквами, чтобы детские пальчики не ошибались. Строчки сделали с разным количеством букв, чтобы избежать коридоров. Асимметричные смотрятся приятней.
Озвучка
С нами согласился работать актер . Он и посоветовал нам хорошую студию звукозаписи. Работать с профессионалами очень приятно — Саша придал персонажу характер и очень забавно озвучил. На каждую букву мы делали около 20 записей — озвучка должна была получаться игровой, мультяшной, но с правильной дикцией.
: 1.wav, 2.wav, 3.wav
Отобрав звуки принялись за иконку и надпись – логотип. Тут с первого раза получилось неплохо.
Все, можно собирать. Отдали материалы Мише Голубу. Он довольно быстро, за несколько часов собрал рабочую версию и мы при случае начали давать играть детям. Детям сразу понравилось, это было приятно.
Хоть мы и собрали рабочую версию быстро, но на то, чтобы отловить все баги и подогнать анимацию ушел примерно месяц. И ура! Миша собрал готовую версию под айпад. С ней мы уже могли начать снимать рекламный ролик.
Хорошо, когда есть друзья. Да еще с белой комнатой, двумя камерами, светом и умеющие снимать. С нами работал из студии Yatta! Мы решили сделать все просто — снять детей и то, как они играют с Буквоедом. Собрали всех знакомых мам с маленькими детьми, привезли в студию, включили свет, дали айпад, запустили Буквоеда и стали снимать. Мы очень обрадовались, что детям Буквоед понравился. Они первый раз увидели его и все эмоции сняты честно. Не знаю, правда, чтобы я делал, если бы он им не понравился) Ролик смонтировали уже через 3 дня.
Интерфейс для айфона
Теперь пришла очередь версии под айфон. И тут с моей стороны, как дизайнера и проектировщика случился факап. Дело в том, что на айфоне было бы глупо отображать всю кириллицу сразу — буквы были бы мелкими. Я решил делать слайдер из трех букв. Первая и последняя видны только на половину, а той, что по середине можно кормить Буквоеда. То есть вправо-влево тащишь — переключаешь буквы. Тянешь вниз — тащишь букву на съедение. Но я вовсе не подумал что эти зоны перекрываются. То есть телефону непонятно, тащишь ты буквы на кормление или просто скроллишь буквы влево-вправо.
Миша предложил следующее решение — когда тянешь влево-вправо до 30 градусов к горизонтальной оси — работает скролл. Когда тянешь вниз — буква тащится на кормление.
Так решили сделать. Запустили. Интерфейс хоть и стал работать, но срабатывание по-прежнему осталось непредсказуемым. Этого не должно быть. Добавлять кнопки скролла влево-вправо тоже не решение. Мы все думали как сделать правильно, а время шло. Мы выбрали такой вариант, когда буквы скроллятся по нажатию на одну из крайних. То есть нажал на крайнюю буквы — ряд сдвинулся на одну букву. Конечно, такой способ не “интуитивный”, зато дает четкий предсказуемый результат. Так решили и сделать. Собрали билд и отправили на проверку. Ровно через 7 дней приложение прошло проверку и попало в магазин. Мы обрадовались и стали раздавать промокоды разработчикам и друзьям, слушать отзывы. Выловили баг на айподтаче — там было две Г. На айфонах все пытались тянуть букву и скролл не срабатывал. Уже после релиза мы опять принялись думать над тем, как правильно сделать переключение и драг буквы. И нашли решение: для корректной интуитивно – понятной работы со слайдером и дрэгом надо развести зоны их срабатывания — просто опустить центральную букву на строчку ниже. Тогда все круто работает. Пользователю понятно наглядно, что именно эту букву надо тащить на кормление. А при перетягивании крайних букв срабатывает скролл и буквы летают по прикольной дуге.
Именно это решение мы встроили в обновление вместе с фиксом багов на айподтаче. Если у вас есть идеи того, как можно решить проблему с интерфейсом на айфоне другим способом — буду рад выслушать, а если она будет лучше последнего варианта, то мы даже внедрим ваш способ. Спасибо за внимание. Очень надеемся, что детишкам наш веселый Буквоед придется по вкусу 🙂
iPhone + iPad: $0.99 [iTunes link]
Данная история опубликована в рамках нашей рубрики Developer Story, где разработчики делятся секретами своей внутренней кухни.
Источник:
