Вторник, 17 октября 2017, 10:58

Приветствую Вас Гость

Меню сайта
Категории каталога
Создание игр [306]
Статьи об общих понятиях связанных с созданием игр.
Программирование [68]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [123]
Статьи о программах для создания игр, уроки и описания.
Софт [27]
Различные программы, в том числе в помощь игроделам.
2D-графика [11]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [10]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [4]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [69]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [55]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Как часто вы играете на мобильных устройствах?
Всего ответов: 706
Главная » Статьи » 2D-графика

6 примеров UI дизайна, на которые должен обратить внимание девелопер [перевод]

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

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

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


1. Clash Royale - Поверхность и прокрутка

Clash Royale полна уроков дизайна, которые широко применимы. Большая часть призыва данной игры связана с принятием простой предпосылки (противоборствующая защита башни, причем каждый игрок защищает короля и две башни, а также покупает атакующих юнитов), которая выполнена чрезвычайно гладко и изысканно.

Om Tandon, директор UX в DIGIT Game Studios, восхваляет Clash Royale за то, что данная она избегала ошибок многих других мобильных игр, пытаясь обратиться к «mid-core» аудитории - игрокам, которые находятся где-то между обычными и хардкорными.

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

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

«Детализация также уменьшается за счет помещения вторичных фрагментов информации поверх каждой изначально прокручиваемой секции», - говорит Ом. «И дизайн tab scrolling дополняется большим количеством контента в каждом разделе, что устраняет ужасное время загрузки».

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


2. Half Life 2 - Динамичная и акустическая

Valve имеет историю производства хороших гладких HUD, которые дополняют общую эстетику игр, и Half Life 2 может считаться вершиной своего класса. Дэвид Кэндленд, руководитель проекта UI в Bungie, призывает воплощать некоторые идеи, которые не были осуществлены со во времен запуска игры.

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

Candland подчеркивает, как HUD Half Life 2 может сбрасывать элементы, которые не настолько необходимы, как, например, походное оружие. «Конкретность в фрагментах данных и их выбор по требованию не создавали когнитивной нагрузки. - говорит он. - Когда они появились, анимация была быстрой и оперативной».

«Но звуковые эффекты в HUD так же важны, как визуальные. - добавляет он. - Кто мог забыть о звуках? В разгар битвы у игроков, как правило, туннельное видение и заметно меньше периферии экрана. Звуковые сигналы были достаточно четкими и ясными, чтобы отличить, когда вы брали боеприпасы, попадали под угрозу окружающей среды или пополняли свое здоровье. HUD Half-Life 2 - отличный пример экономичности и ясности, и он оказал большое влияние на мою работу».

TAKEAWAY: Half Life 2 показывает нам, что HUD - не всегда бывают запоздалыми и портят искусство игры. Вместо этого, они могут служить хорошим дополнением (и даже красивым). Им также не нужно полагаться исключительно на визуальные элементы для передачи информации.


3. Hearthstone - Тактильная и понятная

Как и Clash Royale, Hearthstone - это игра, которая отличается простотой, проработанной формулой и качественным исполнением с хорошим вкусом. Большая часть этого стиля - это доступность информации. HUD выделяет и показывает важную информацию именно тогда, когда игроки нуждаются в ней, и делает это все в легко усваиваемой форме. Станислав Костюк, разработчик игр в Ubisoft, выделяет тактильную презентацию карточной игры и разборчивость своего HUD как основные факторы, благодаря которым он пользуется успехом.

«Основная информация всегда понятна: кто может атаковать, кто нанесет смертельный урон, кто добавляет силы заклинаний», - говорит Костюк. «И то, как Hearthstone обеспечивает визуальную и звуковую обратную связь при каждом щелчке и действии - потрясающе. Каждый клик приносит удовольствие, даже такие простые действия, как перемещение карты».

TAKEAWAY: Ваш HUD должен быть неотъемлемой частью игры, а не на дополнительным слоем, загромождающий экран. Он должен позволять игрокам сосредоточиться на самом важном - игровом процессе.


4. Overwatch - компактная и центрированная

Как у любого многопользовательского шутера, основанного на классе персонажа, у Overwatch проблемы с необходимостью настраивать HUD под каждого героя.

Оливер Яношек, старший художник UI в Massive Entertainment, выделяет HUD Зари как особенно эффективный. Он дает важную информацию игрокам, сохраняя их в действии.

«Я один из сторонников UI дизайна, способного предоставить информацию игроку в том месте, на котором он больше всего фокусируется, не делая лишних движений глазами», - говорит Яношек.

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

TAKEAWAY: Чем больше информации вы поместите в небольшую область, сохраняя при этом читабельность, тем лучше.


5. Assassin’s Creed - Меньше значит больше

Иногда самым лучшим решением для создания отличного HUD является его полное устранение, по словам Станислава Костяка, разработчика игр в Ubisoft (но который не работает с Assassin's Creed).

«Я хочу сказать о первом Assassin's Creed. Игра выглядит на много лучше с выключенным HUD. Он не был задуман изначально и опыт был абсолютно другим."

Исключение HUD из такой игры, как Assassin's Creed, с ее open world убийствами и массивными, визуализированными средами, обеспечивает высокий уровень погружения, который невозможен с постоянными напоминаниями о том, что вы играете в симуляцию. Отсутствие HUD позволяет игрокам напрямую соединятся с персонажами.

«Когда вам говорят в Убежище Ассасинов, что вы можете найти информацию на рынке около еврейского квартала, вы не просто идете к иконке, выполняете небольшую миссию, и все», - говорит он. «Вы идете по крышам домов, смотрите вокруг, видите Звезду Давида на воротах - и это означает вы в еврейском квартале! И потом, когда вы уже добрались до него, вы ищете этот рынок, возможно пользуетесь Eagle Vision для поиска информаторов, теневых людей, разговаривающих друг с другом, или, может быть, вы слышите вестника, который говорит о вашей цели. Весь поток исследований превращается в процесс, в ходе которого вы узнаете город, понимаете как сложить визуальные или звуковые несоответствия в паттерны, которые помогут найти вашу цель. Полученный опыт гораздо более привлекателен и приятен, чем тот, который создается иконкой на мини-карте, но также требует конкретного подхода к окружающей среде, дизайну миссии и написанию диалога».

TAKEAWAY: Иногда признаком сильной философии дизайна является то, как хорошо игра работает без HUD.


6. Dead Space - Интегрированная и привлекательная

В то время как полное исключение HUD - хороший вариант для игры, подобной Assassin's Creed, другое дело - встроить его прямо в вашу игру. Для таких игр, как Dead Space, где HUD является почти обязательным. Этот вариант позволяет разработчикам сохранять погружение пользователей в игру без ущерба функциональности.

Джим Браун, старший дизайнер Epic Games, восхваляет подход Dead Space за его способность сделать HUD подходящим как персонажам игры, так и реальным игрокам.

«Dead Space - очень часто «хороший пример» креативных HUD, - говорит Браун. «Показатели здоровья отображается на спине, а накладная карта сделана в виде проекции, которая отображается на земле и направляет вас к следующей цели. В то время как этот подход действительно новаторский и полностью переворачивает на голову традиционное понятие HUD, его часто упускают из виду за еще большее влияние, которое он оказал на сам игровой процесс. Dead Space - смесь жанра шутера и Survival-хоррора, HUD очень хорошо справлялся с хоррор аспектами игры: помог игроку сосредоточиться на данном моменте игры, вместо того, чтобы тащить его на 2D-оверлей, отвлекая от геймплея ".

Разделение внимания - одна проблем, с которыми сталкиваются разработчики при разработке HUD / UI, говорит Браун, но EA Redwood Shores решил ее уникальным способом.

«Нealth bar на одежде часто служит для того, чтобы другой игрок мог увидеть вас, иногда является единственным источником света в темной комнате, влияет на общее настроение и напряженность, которые игрок чувствует во время стресса или исследования. Проецируемые линии были отличным способом вести игроков в сложных уровнях, но они также иногда замедляли игрока и блокировали его при проверке цели. Игроку приходилось прекращать движение, оставшись в уязвимом состоянии. В то же время, это помогало создать напряженность в игре, делая ее уже не просто интересной UI презентацией».

TAKEAWAY: Dead Space учит нас, что дизайн следующего уровня может быть успешно интегрирован в то, что другие игры часто считают банальным и второстепенным. Очень круто, что HUD перестает быть HUD и становится неотъемлемой частью игрового мира.



Оригинал статьи на английском тут.

Читать статью в Telegraph.



Источник: КЛИК»
Категория: 2D-графика | Добавил: FetBiko (14 сентября 2017)
Просмотров: 452 | Комментарии: 1 | Рейтинг: 5.0/4 |
Теги: интерфейс, design, примеры, информация, дизайн, советы, Hud, детали, UI, pgdcontent
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:
Если вас заинтересовал материал «6 примеров UI дизайна, на которые должен обратить внимание девелопер [перевод]», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

Всего комментариев: 1
+0-
1 Otinagi   (09 октября 2017 08:36)
OtinagiТч!! В Dead Space был дикий HUD. Надо было ещё удобно стать, чтобы толком его рассмотреть. А вообще, не люблю эти трёхмерные (или как их ещё обозвать) HUD. Порой их так выкрутят (как, например, в Phoning Home), что глаза сломать можно. Хотя, всё это, разумеется, на любителя..

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
10 случ. движков
  • Irrlicht Engine
  • Scrupp
  • Java Script WebGL Games Creator
  • Xaya Adventure Game Editor
  • PGD Community Engine
  • PointJS
  • RAPTOR
  • Zelda Classic
  • AresEd
  • Ludiloom
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    GameDev, Уроки OpenGL, Программирование, Создать Minecraft
    Все права сохранены. GcUp.ru © 2008-2017 Рейтинг