UXPUB 🇺🇦 Дизайн-спільнота

Cover image for  📝 Напрямки UI у відеоіграх
Stanislav Stefaniuk 🇺🇦🇵🇱
Stanislav Stefaniuk 🇺🇦🇵🇱

Опубліковано • Оновлено

 📝 Напрямки UI у відеоіграх

В кінці 80-х і на початку 90-х відеоігри перестають бути купою пікселів і доростають до моменту, коли можуть і потребують візуалізувати інтерфейс на екрані.

Ultima Underworld (1992)

Ultima Underworld (1992)

System Shock 2 (1994)

System Shock 2 (1994)

Fallout (1997)

Fallout (1997)

Упродовж років вони вдосконалювалися, змінювалися і ми отримали три візуальні напрямки.


Класичні

Створені для того аби інформувати.

Cyberpunk 2077 (2020)

Cyberpunk 2077 (2020)

Продумані, неймовірно детальні у візуалі. Віддають 90-и і початком 00-х - що в деяких випадках непогано і навіть необхідно. Зустрічаються в проєктах де необхідно доносити та оперувати значною кількістю інформації - Стратегії та РПГ.

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

The Outer Worlds (2019)

The Outer Worlds (2019)

Тому дизайнери компенсують це стилізацією, аби кожна деталь нагадувала що ти ще в грі.

Darkest Dungeon (2016)

Darkest Dungeon (2016)

Crusader Kings 3 (2020)

Crusader Kings 3 (2020)

Мінімалістичні

Створенні для того аби не відволікати.

Metal Gear Solid 5: The Phantom Pain (2015)

Metal Gear Solid V: The Phantom Pain (2015)

Тому що ці ігри швидкі, гравець мусить приймати велику кількість тактичних рішень на одиницю часу. Також характерна лаконічність та скупченість - елементи рідко розкидані по всій площині екрану, натомість зосереджені в одному місці (Metal Gear Solid V і The Last of Us: Part II).

The Last Of Us: Part Two (2020)

The Last Of Us: Part Two (2020)

Інколи вони можуть бути візуально привʼязаними до персонажа гравця, аби не робити лишніх рухів очима. (Tom Clancy's: The Division)

Image description

Tom Clancy's: The Division (2016)

Зустрічаються в слешерах, шутерах від першої чи третьої особи.

Bloodborne

Bloodborne (2015)

Важливим аспектом є високий контраст та читабельність - тому чим яскравіше гра - тим яскравіші елементи UI (привіт Doom Eternal).

Doom Eternal (2020)

Doom Eternal (2020)

Дієгетичні

Створенні для того аби розмити рамки.

Dead Space 2 (2011)

Dead Space 2 (2011)

Плаский UI відсутній повністю чи частково.

Такий підхід тонка матерія, якісне і чисте виконання зустрічається доволі рідко.

Найчастіше зустрічається в хоррорах. При тому якщо це наукова фантастика - привіт голограми і подібні речі. Якщо готика - повна відсутність візуальних елементів окрім ключових, таких як індикатор інтеракції.

При ідеальному виконанні здатен створити “ефект вікна” - коли немає жодного візуального елементу, що був би прив’язаний до площини екрана і не вписувався в антураж гри.

Наприклад Dead Space та майбутня Calisto Protocol. (Не сумніваюся що Глен Скофілд буде вірний традиціям)

Metro:Exodus (2019)

Metro:Exodus (2019)

SOMA (2015)

SOMA (2015)

P.T. (2014)

P.T. (2014)

Розмістивши види інтерфейсів щодо ступеня імерсивності, отримуємо таку картину:

Інфографіка відношення імерсивності до типу інтерфейсу

Іммерсивність - це здатність гри занурити гравця в ігровий процес та / або сюжет.

Дієгетичні інтерфейси здатні максимально втягнути в ігровий процес, Класичні та Мінімалістичні - потребують умов в яких їх потенціал розкривається на повну.


Комбінації

Рідко коли в проєкті присутній лише один вид. Їх відносно легко комбінувати, наприклад Fallout 3.

Інтерфейси активних епізодів — це мінімалістичний тип, проте коли гравець взаємодіє із терміналами чи Піп-боєм — це дієгетика.

Fallout 3 (2008) - активний ігровий процес.

Fallout 3 (2008) - активний ігровий процес.

Fallout 3 (2008) - Піп-бой, інвентар.

Fallout 3 (2008) - Піп-бой, інвентар.

Fallout 3 (2008) - термінал.
Fallout 3 (2008) - термінал.

Найчастіше якийсь конкретний тип є основним, а інші відіграють допоміжну чи наративну роль.

Image description

Titanfall 2 (2016)

Наприклад Titanfall 2 - кількість набоїв зображена на гвинтівці. Індикатор дублюється на GUI, проте сам факт присутності такого лічильника набоїв додає відчуття продуманості.


Прикладом, що можна поставити в рамку є Alien Isolation в якому майстерно скомбіновані всі вище описані напрямки UI.

  • Дієгетичний - детектор руху, пристрій для злому та апаратура з якою взаємодіє гравець.
  • Мінімалістичний - присутній та практично непомітний.
  • Класичний - всі аспекти інтерфейсу включно з анімаціями виконанні в стилі 70-х - років.

Image description

Image description

Image description

Image description

Image description

Image description

У підсумку цей інформативний, простий, стильний інтерфейс допомагає гравцю зануритися в густу атмосферу гри в хованки із ксеноморфом по самі вуха.

Подібним підходом може похвастатись також Prey від Arkane Studios, та серія ігор Metro.


Observation

Як ви вже зрозуміли дієгетичний інтерфейс допомагає створювати проекти, що мінімально нагадують гравцю що він сидить перед екраном.

Але те саме можна зробити із іншими двома напрямками з допомогою чіткої постановки перспективи. Еталлоним прикладом цього є останній проєкт Джона Маккелана - Observation.

В ньому ми граємо за штучний інтелект космічної бази, яка потрапила у критичну ситуацію. Головна ціль гри - врятувати героїню, останнього члена екіпажа.

Єдиний спосіб інтеракції із оточуючим середовищем - це камери спостереження, мікрофони, а сам ігровий процес представляє із себе хакінг систем, головоломки та вишукування інформації в логах.

Image description

Інколи трапляються динамічні моменти, де треба швидко реагувати (або не реагувати). Наприклад за обмежений час знайти спосіб відкрити заклинивші двері що ведуть із відсіку де закінчилося повітря, слухаючи підказки головної героїні.

І при цьому все що ми бачимо, чуємо, і робимо вписується в контекст ситуації, тому що те саме бачить, чує і робить штучний інтелект чию роль ми відіграємо.

Image description

Таким чином екран нашого ПК / консолі, стає таким собі терміналом взаємодії із АІ з гри, і тому весь плаский інтерфейс виконаний у мінімалістичному стилі є дієгетичним.
От такий фокус.

Image description

Image description

Image description

Image description

Image description

Можна ламати правила, головне переконати гравця, що такому інтерфейсу є місце у контексті гри.


Підсумок

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

Є три основні напрямки:

  • Класичні - дають масу інформації.
  • Мінімалістичні - дають мінімум, коли це необхідно.
  • Дієгетичні - допомагають зануритися в процес.

Кожен актуальний у своїх жанрах при якісному виконанню
Напрямки піддаються маніпуляціям.
Їх можна комбінувати між собою та контекстно обігрувати.

UI - це візуальна комунікація між грою та користувачем.
І чим відповідніший грі буде інтерфейс, тим цільнішим відчувається ігровий процес, і тим легше в нього зануритись.

Завдяки цьому можна впливати на досвід гравця.


Спасибі за ваш час ✨

Підписуйтеся також на телеграм канал @design_untilted

Та чекніть мої Dribbble та LinkedIn 😉


Ресурси

Найновіші коментарі (0)