Разработка интерфейса игры Vikings: War of Clans

Интерфейс игры — это точка соприкосновения пользователя с приложением. Он должен помочь игроку эффективно и без усилий управлять геймплеем и всецело погрузить его в атмосферу игровой вселенной. Тем не менее в реальности возможен и другой вариант, когда непродуманный интерфейс способен испортить по-настоящему отличную игру и отбить всякое желание вернуться в нее еще раз. Стоит держать это в своей голове и отнестись к проектированию пользовательского интерфейса с предельной серьезностью, что мы и сделали, работая над мобильным проектом Vikings: War of Clans.

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

Работа над интерфейсом в нашей краснодарской студии делится на несколько этапов. Сначала на основе функционала, который подробно описывается в документации, создаются первые прототипы окон. Они тестируются на выявление ошибок, тщательно дорабатываются и только потом передаются дизайнерам для финальной отрисовки.

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

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

02-(1).jpg


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

04-(1).jpg

Неотъемлемой частью интерфейса игры являются иконки, каждая из которых должна быть выразительной и иметь ясную информационную нагрузку. К примеру, герб Клана — иконка, призванная помочь отличать Кланы друг от друга, при этом функционал игры позволяет игрокам генерировать герб самостоятельно путем сочетания подложки и двух элементов. Учитывая этот факт, мы разработали принципы создания гербов, чтобы они выглядели эффектно и лаконично: были подобраны подходящие метафоры, подготовлены наброски и отрисованы варианты подложек и элементов к ним. Мы нарисовали черепа, факелы, мечи и другой декор в стиле викингов, который должен был удовлетворить пожелания игроков при создании герба.

04 (2).jpg

05 (1).jpg06-(1).jpg

Одно из самых функциональных окон в игре — окно Героя. С момента выхода приложения оно претерпело ряд существенных изменений. Сейчас мы расскажем, как это было.

Изначально в окне располагались только иллюстрация Героя и шкала с его опытом, а основной функционал был представлен кнопками, которые находились в нижней части окна.

03 (2).jpg

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

03 (1).jpg

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

01-(1).jpg

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

- Интерфейс игры должен быть удобным и интуитивно понятным. Нужно стремиться к идеалу — сделать его максимально незаметным, чтобы он буквально слился с геймплеем.

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

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

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

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

Традиционно в конце статьи наши специалисты делятся простыми, но практичными советами с теми, кто только начинает свой путь в области проектирования и дизайна интерфейсов:

- Играйте в игры и анализируйте чужие работы. Отмечайте, как другие подошли к решению того или иного вопроса.

- Делайте скриншоты понравившихся окон, выделяйте их плюсы, а также минусы и подумайте, как бы вы их устранили.

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

526 0 850 8
1
2017-01-31
Спасибо! Сейчас это очень актуально для меня
RENDER.RU