Майкл Войт, ведущий UI-художникBioWare

Всем привет, меня зовут Майкл Войт, я ведущий UI-художник в BioWare Austin (UI – англ.: интерфейс пользователя – прим.пер.). В этой записи блога я поделюсь с вами некоторыми идеями и целями, стоявшими перед нами при создании интерфейса пользователя для Star Wars: The Old Republic, и расскажу о решениях, позволивших нам воплотить их в жизнь.

Начальная задумка

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

Планировка интерфейса

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

Логическая группировка систем

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

Планировка интерфейса

Мы пришли к следующей структуре, которую вы можете видеть на схеме выше. Здесь:

1. Социальные системы: чат – верхний левый угол
2. Игровые системы: помощь – центр верхнего края
3. Системы задания – верхний правый угол
4. Навигационные системы (индикаторы игрового мира) – нижний правый угол
5. Боевые системы: опыт (индикаторы игрока) – центр нижнего края
6. Системы партии: спутники – центр и нижний угол левого края

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

Макеты экрана

После выбора наиболее удачного варианта мы продолжили творческий поиск. Во время таких итераций мы снова вернулись к нашим изначальным вопросам, касавшимся того, что игроки любого уровня должны быть в состоянии с легкостью использовать наш интерфейс. Мы также решили, что окончательный кандидат интерфейса должен быть рациональным, гладким и соответствовать по стилю нашим мирам.Затем мы уделили некоторое время обрамлению, то есть тому, насколько хорошо элементы UI действуют во время боя в игре. Мы заметили, что в построении игровых интерфейсов прослеживается тенденция уменьшения размеров рамок. Например, если посмотреть на некоторые из ранних игр BioWare, то там элементы интерфейса зачастую весьма крупные с приличными рамками.Мы продолжили анализировать этот аспект и заметили, что данная тенденция во многом определяется разрешением экрана. Нынешние мониторы и графические карты могут поддерживать значительно более высокие разрешения картинки, чем старые VGA-мониторы и видеокарты. В старых играх необходимо было делать более крупные структурные элементы интерфейса, чтобы убедиться, что текст получается достаточно разборчивым. И наоборот, нам нужно было соблюдать здесь определенную осторожность, потому что из-за возросшего разрешения экрана текст мог стать слишком мелким и неразборчивым. В The Old Republic игроки смогут изменять настройки отображения текста, но мы хотели, чтобы вариант, используемый по умолчанию, максимально подходил всем игрокам.

Увеличенная плотность текста

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

Реализация

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

Различные системы

При наличии столь большого количества игровых систем в The Old Republic, стадия их реализации оказалась достаточно продолжительной. Большинство наших игровых систем подразумевает постоянное взаимодействие с интерфейсом, и они также могут быть весьма разнообразными, но у нас в команде работали очень талантливые дизайнеры интерфейса и они смогли с достоинством выполнить его реализацию. Они провели нашу идею в ее игровое воплощение. Для нас было крайне увлекательно следить за их волшебной работой и видеть, как наши разработки воплощаются в жизнь, система за системой.Хотя мне чрезвычайно приятно видеть воплощение задумок моей команды в игре, The Old Republic подвергается постоянному тестированию, как внутреннему, так и внешнему. Во время реализации мы все время реагировали на отзывы и улучшали качество интерфейса. Мы не сомневаемся, что этот процесс будет продолжаться до самого запуска и после него.

Эстетика

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

Эволюция стиля

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

Единая тема

Как я уже упоминал выше, даже закончив работу с рамками, я чувствовал, что у нас еще осталось чуть-чуть лишних рамок. Интерфейс все еще не обладал требуемой минималистичностью. Однако во время эстетического прохода мы срезали лишний жир и воплотили единое визуальное направление.Данный проход также позволил нам отловить некоторые элементы, о которых мы забыли во время работы, и уделить им должное внимание для обеспечения высокого общего качества. Это изображение в настоящий момент является текущим интерфейсом The Old Republic.