![](/templates/the-old-republic/design_img/last_obs.jpg)
![](/templates/the-old-republic/design_img/tochka.png)
Анонс Legacy of the Sith (Наследие Ситхов)
Hisata 08.12.2021 04:29
![](/templates/the-old-republic/design_img/tochka.png)
The Jedi Order (PvE/PvP)
El_ClassicO 06.12.2021 21:36
![](/templates/the-old-republic/design_img/tochka.png)
Представляем Легендарные Предметы!
Dmitriy 29.10.2021 13:08
![](/templates/the-old-republic/design_img/tochka.png)
Фотошопим и делимся
bumbalaki 12.10.2021 16:35
![](/templates/the-old-republic/design_img/tochka.png)
Ежедневные награды и окно эмоций - скоро в обновле ...
Brotsaid 15.09.2021 13:28
![](/templates/the-old-republic/design_img/tochka.png)
Галактический сезон 1: Незнакомец из Кубинди
TAPSON 25.05.2021 04:57
![](/templates/the-old-republic/design_img/tochka.png)
Общее обсуждение
Don Maestro 06.03.2021 08:33
![](/templates/the-old-republic/design_img/tochka.png)
Внутриигровые вопросы (LFG, GTN, Система Наследия ...
Ubhra 03.03.2021 19:32
![](/templates/the-old-republic/design_img/tochka.png)
Техническое обслуживание 2 марта и патч 6.2.1
Dmitriy 26.02.2021 22:19
![](/templates/the-old-republic/design_img/tochka.png)
Техническое обслуживание 21 октября и патч 6.1.4a
Mortis 21.10.2020 00:48
![](/templates/the-old-republic/design_img/inv.jpg)
![](/templates/the-old-republic/design_img/yandex.jpg)
![](/templates/the-old-republic/design_img/but.jpg)
Майкл Войт, ведущий UI-художник
BioWare
BioWare
Всем привет, меня зовут Майкл Войт, я ведущий UI-художник в BioWare Austin (UI – англ.: интерфейс пользователя – прим.пер.). В этой записи блога я поделюсь с вами некоторыми идеями и целями, стоявшими перед нами при создании интерфейса пользователя для Star Wars: The Old Republic, и расскажу о решениях, позволивших нам воплотить их в жизнь.
Начальная задумка
На ранних стадиях разработки прототипа мы решили, что хотим иметь интерфейс, который был бы гораздо более упрощенным по сравнению с большинством стандартных интерфейсов MMORPG. Мы хотели, чтобы интерфейс не отвлекал игрока от мира и не скрывал исследовательскую природу игры. Мы также считали, что пользовательские интерфейсы в других MMORPG состоят из множества сложных форм и очень детализированных контуров. Мы чувствовали, что силуэт нашего интерфейса должен быть спокойным и простым и не привносить излишней изощренности.
Мы использовали аналогию сравнения кабины паровоза с современным спортивным автомобилем. У паровоза были стрелки и циферблаты в каждом углу кабины, а у спортивной машины – гладкая приборная панель, на которой в эргономичной форме сосредоточены все нужные датчики. Данная иллюстрация демонстрирует те различия, о которых мы думали.
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112479_1.jpg)
Наша игра может похвастаться прекрасными панорамными видами, и мы хотели, чтобы интерфейс дополнял их и не отвлекал от них. Упрощенный силуэт стиля спортивной машины привел нас к горизонтальной ориентации элементов, так как мы считали, что это уменьшает общий визуальный шум.
Мы постепенно решали проблему загроможденности интерфейса, и одновременно должны были проследить, чтобы у игрока всегда были ясные игровые индикаторы и элементы управления. Также было важно не отпугнуть ветеранов MMORPG. Стандарты MMORPG уже сформировались, и мы не хотели слишком сильно отклоняться от них; игроки, например, ожидают, что кнопки способностей будут расположены близко к связанным с ними клавишам.
Мы проанализировали каждую систему и определили те области, изменения в которых не будут сбивать с толку опытных игроков и в то же время будут интуитивно понятны новым игрокам. Нашей целью было представить знакомый MMORPG интерфейс, который был бы менее отпугивающим и в то же время новаторским.
Логическая группировка систем
Когда управляющие элементы для различных игровых систем были сведены вместе, мы занялись разработкой логичного расположения для них. Мы взяли пространство экрана и разнесли их по его углам. Управляющие элементы логично было расположить по этим углам, чтобы они не загораживали центральную область экрана, где происходит бой. Так же как и органы управления спортивной машины не закрывают обзор дороги, наши игровые управляющие элементы не мешают вам драться или исследовать игровой мир.
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112524_2.jpg)
Мы пришли к следующей структуре, которую вы можете видеть на схеме выше. Здесь:
1. Социальные системы: чат – верхний левый угол
2. Игровые системы: помощь – центр верхнего края
3. Системы задания – верхний правый угол
4. Навигационные системы (индикаторы игрового мира) – нижний правый угол
5. Боевые системы: опыт (индикаторы игрока) – центр нижнего края
6. Системы партии: спутники – центр и нижний угол левого края
После того, как мы соединили вместе эту базовую структуру, мы начали разрабатывать макеты экрана. Это были варианты применения различных стилей – некоторые с имитацией реальных материалов, а некоторые более абстрактные. Это создало хорошую основу, на которой мы могли выбрать наиболее удачный вариант и дальше работать уже с ним.
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112620_3.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112612_4.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112558_5.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112573_6.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112655_7.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112601_8.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112645_9.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112604_10.png)
После выбора наиболее удачного варианта мы продолжили творческий поиск. Во время таких итераций мы снова вернулись к нашим изначальным вопросам, касавшимся того, что игроки любого уровня должны быть в состоянии с легкостью использовать наш интерфейс. Мы также решили, что окончательный кандидат интерфейса должен быть рациональным, гладким и соответствовать по стилю нашим мирам.
Затем мы уделили некоторое время обрамлению, то есть тому, насколько хорошо элементы UI действуют во время боя в игре. Мы заметили, что в построении игровых интерфейсов прослеживается тенденция уменьшения размеров рамок. Например, если посмотреть на некоторые из ранних игр BioWare, то там элементы интерфейса зачастую весьма крупные с приличными рамками.
Мы продолжили анализировать этот аспект и заметили, что данная тенденция во многом определяется разрешением экрана. Нынешние мониторы и графические карты могут поддерживать значительно более высокие разрешения картинки, чем старые VGA-мониторы и видеокарты. В старых играх необходимо было делать более крупные структурные элементы интерфейса, чтобы убедиться, что текст получается достаточно разборчивым. И наоборот, нам нужно было соблюдать здесь определенную осторожность, потому что из-за возросшего разрешения экрана текст мог стать слишком мелким и неразборчивым. В The Old Republic игроки смогут изменять настройки отображения текста, но мы хотели, чтобы вариант, используемый по умолчанию, максимально подходил всем игрокам.
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112740_11.png)
Увеличенная плотность текста
Помня обо всех этих соображениях, мы решили провести дальнейшую очистку интерфейса, чтобы уменьшить количество рамок. Мы хотели использовать практически все пространство, отведенное для интерфейса, под индикаторы и элементы управления, оставив лишь необходимые рамки.
После того, как данная стадия была завершена, я понял, что мы пытаемся сохранить некоторые рамки из эстетических соображений, а их можно было еще сильнее уменьшить – но у нас еще оставалось время на итерации, поэтому мы оставили это на потом.
Закончив работать с рамками на данном этапе, мы перешли к уменьшению плотности информации и общей «тяжести» интерфейса. Мы обнаружили, что уменьшение количества текста – это отличный способ достичь желаемого. Там где было возможно, мы изыскивали способы заменить текст иконками. Мы оставили постоянно включенные подписи только у самых важных элементов. В результате получился интерфейс, который не выглядел слишком беспорядочно.
Реализация
На данном этапе большая часть работы заключалась в чистом проектировании, но, имея уже созданный каркас, мы начали реализацию интерфейса в игре. Постоянно помня о нашей изначальной идее, мы перенесли каждый элемент интерфейса в игру один за другим.
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112736_12.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112776_14.png)
Различные системы
При наличии столь большого количества игровых систем в The Old Republic, стадия их реализации оказалась достаточно продолжительной. Большинство наших игровых систем подразумевает постоянное взаимодействие с интерфейсом, и они также могут быть весьма разнообразными, но у нас в команде работали очень талантливые дизайнеры интерфейса и они смогли с достоинством выполнить его реализацию. Они провели нашу идею в ее игровое воплощение. Для нас было крайне увлекательно следить за их волшебной работой и видеть, как наши разработки воплощаются в жизнь, система за системой.
Хотя мне чрезвычайно приятно видеть воплощение задумок моей команды в игре, The Old Republic подвергается постоянному тестированию, как внутреннему, так и внешнему. Во время реализации мы все время реагировали на отзывы и улучшали качество интерфейса. Мы не сомневаемся, что этот процесс будет продолжаться до самого запуска и после него.
Эстетика
После того как ключевые системы заняли свои места, мы обратили свое внимание на эстетику интерфейса и решили «поджать графику». Мы хотели поднять планку еще выше и добиться по-настоящему высокого общего качества интерфейса.
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112936_15.png)
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112904_16.png)
Эволюция стиля
Для того чтобы достичь этого, мы привлекли к делу наших концепт-художников, чтобы они взяли существующий вариант и увеличили его визуальную точность. Дополнительная итерация, которая была целиком сосредоточена на визуальных качествах, позволила нам унифицировать цвета, тему и общую логичность построения. Как вы можете видеть из этой схемы, мы изрядно потрудились, чтобы обеспечить связанность элементов!
![Создание интерфейса Создание интерфейса](http://www.the-old-republic.ru/uploads/posts/2011-04/1304112944_17.jpg)
Единая тема
Как я уже упоминал выше, даже закончив работу с рамками, я чувствовал, что у нас еще осталось чуть-чуть лишних рамок. Интерфейс все еще не обладал требуемой минималистичностью. Однако во время эстетического прохода мы срезали лишний жир и воплотили единое визуальное направление.
Данный проход также позволил нам отловить некоторые элементы, о которых мы забыли во время работы, и уделить им должное внимание для обеспечения высокого общего качества. Это изображение в настоящий момент является текущим интерфейсом The Old Republic.
Окончательный интерфейс - щелкните для увеличения
Наш пользовательский интерфейс весьма сильно изменился в рамках постоянно изменяющихся условий игрового рынка. Я думаю, мы движемся в правильном направлении в плане достижения всех наших целей, и мы будем продолжать анализировать рынок, следить за отзывами и продолжать улучшать интерфейс до самого выхода игры и после него.
Я с большим удовольствием поделился с вами этой информацией и с нетерпением жду ваших отзывов и комментариев, когда вы сможете сами сыграть в The Old Republic!
Источник
![](/images/line.jpg)
Поделился новостью - помог сайту в развитии!
Теги: