Advertisement
  1. Game Development
  2. UI Design

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

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Tanya Ira (you can also view the original English article)

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


Введення

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

User Interface and UX in game development
 Складовою скріншот з бджолиного меду 3 матчі. Лівій верхній половині відображається в зелено-сліпий режим ColorOracle; нижня-права половина є оригінальним. Приблизно 1 на 100 чоловік Зелений-сліпий, і ця гра майже недоступним для них.

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


 Що UI і UX?

 Умови UI і UX іноді (неправильно) використовуються як синоніми, але вони мають конкретний сенс.

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

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


Що робить хорошу уй робити?

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

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

Ми можемо піти далі і звести процес проектування користувальницького інтерфейсу на шість основних питань:

  1.  Цей інтерфейс скажи мені, що мені потрібно знати прямо зараз?
  2.  Чи Легко знайти інформацію я шукаю, або мені доведеться шукати його? (Меню вкладені настільки глибоко, що вони приховують інформацію від гравця?)
  3.  Чи можу я використовувати цей інтерфейс без необхідності читати інструкції в іншому місці?
  4.  Речі, які я можу зробити цей очевидний екрані?
  5. Мені не потрібно чекати інтерфейс для завантаження або відтворення анімації?
  6.  Є втомлює або повторюваних завдань, які можна укоротити (з допомогою гарячої клавіші, наприклад) або видалити?

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

Справа в точку

 Хорошим прикладом є Пипбой Фоллаут 3 - або, точніше, коротку анімацію вашого персонажа, підвищення Пипбой на рівні очей, коли ви звертаєтеся до нього:

 Анімація триває всього півсекунди, так що ви можете покласти багато думав це.  Але дивитися, як він кидає виклик терпіння ваших гравців після засідання через незліченну кількість разів протягом 80 годину гри.  Не зробити висновок, що ваш плеєр буде "звикати" робити що-то неоптимально. Вони будуть тільки розварити і поганий рот вашої відсутності сенсу дизайну.


Як Я Можу Практиці Проектування УІС?

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

 Примітка редактора: і завжди наша сестра Webdesigntuts сайті+...

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


Хто повинен розробляти ігри користувальницького інтерфейсу?

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

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

 Вони повинні зосередити увагу на функціональні аспекти інтерфейсу: наскільки вона велика, він (або вона) сувій, яка інформація відображається і де, і як гравець переходить через нього.  Зварганити його з двох або трьох кольорів, тому не слід покладатися тільки на зміну кольору, щоб передати інформацію. Принаймні, запустити його через ColorOracle або Coblis, щоб переконатися, що дальтоніки не вистачає.


Ігри З Поганим УІС

 Перш ніж потрапити в це, важливо зрозуміти, що коли я говорю про БАД Исю, я роблю, що вирок заснований на ідеї і моделі поведінки, які я приношу його як ПК геймер, який грає в ігри з клавіатурою та мишею.

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

Забуття

Інтерфейс Облівіона-це класичний приклад однієї платформи користувальницького інтерфейсу бути несумісні з іншого.  Хоча Обливион був портований з консолей на ПК, він все ще зберіг свій контролер-орієнтованого інтерфейсу.  Це повна аналогія з випуском гри на iOS або Android і дозволяє гравцеві переміщати на екрані курсор навколо, як вони використовують трекпад ноутбука, замість того, щоб користуючись абсолютним сенсорного позиціонування.

Так що ж робить інтерфейс Облівіона так погано? Це поєднання невикористаного простору, неправильне масштабування, та неналежного контролю.

User Interface and UX in game development

 Я сподіваюся, ти не проти перегляду шести елементів одночасно; ці вікна не регулюється.  Фактична частина меню, який передає необхідну інформацію, таку як вміст вашого інвентарю, використовує лише 21,7% від загальної площі екрану при роздільній здатності 1920x1080.

User Interface and UX in game development

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

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

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

Сіквел, Скайрим, піде на виправити деякі з цих проблем, але деякі залишаються або стають гірше. Насправді я застряг в перший раз, коли я відкрив скриню в Skyrim: втеча не витягнути мене з цього вікна; - інвентаризацію не вам мене; намагається використовувати груди знову не зрозумів мене. Немає кнопки ви можете натиснути на вихід або підкажемо, що вам сказав, що робити. Клацніть за межами вікна не працюють.  Думаю, що ключ, нарешті, дозвольте мені залишити грудну клітку? Обшити/готову зброю, звичайно.

Далеко Плакати 3

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

 Він був виправлений, так що я збираюся зосередитися на стані її в грі HUD, коли він був вперше випущений.  Давайте почнемо з вивчення HUD у свого попередника, Far Cry 2.

User Interface and UX in game development

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

Тепер давайте подивимося на далекій відстані 3-х Худ.

User Interface and UX in game development

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

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

User Interface and UX in game development

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


Ігри З Гарною УІС

Але давайте не витрачати весь цей час говоримо про погані УІС. Великі приклади УІС приходять з ігор, які визнають обмеження і сильні сторони своєї системи.

Морровинд

 Більшість геймерів погодяться, що Морровинд (попередник Облівіона) володіє однією з кращих комп'ютерних УІС навколо - за винятком одного питання, яке я буду говорити про нижче.

User Interface and UX in game development

Давайте розглянемо основні елементи цього екрану.

  • Це один екран з чотирма різними, untabbed вікна.  За годинниковою стрілкою згори ліворуч у вас є деталі характеру, карти (які можна збільшити), ваш список заклинань і магічних предметів, і ваш інвентар (з вкладки для сортування предметів).
  • У верхній правій частині кожного з цих вікон невеликій площі. Якщо ви натисніть на цю площу, то вікно буде залишатися на екрані, навіть після того, як ви вийдіть з режиму меню.  Ви можете тримати вікно відкрити карту якщо ви намагаєтеся повністю карту узбережжя, наприклад, або ви можете зберегти чарівне вікно відкритим, щоб тримати очей на кількість зарядів залишилося в кільце зцілення.
  •  Ви можете перетягувати ці вікна в будь-якому місці на екрані, і ви можете змінювати їх або мінімізувати їх адаптувати інтерфейс до ваших потреб.
  • У правому нижньому кутку екрану деякі значки стану.  Якщо ви побачили там незнайому іконку ви можете навести вказівник миші у режимі меню і підказка скаже вам, що це таке. Ті ж піктограми відображаються в верхній частині занадто чарівне вікно.
  •  Інвентаризація виклав у компактні сітки, і ви можете відрегулювати кількість елементів відображається з допомогою зміни розмірів екрану інвентарю.

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

 Єдина деталь, яка дозволяє цього інтерфейсу є те, що зілля і свитки використовувати інвентарні іконки; унікальні значки на якість зіль, а не за його ефект, тому майстер водного дихання зілля виглядає так само, як майстер відновлення втоми зілля.

За гранню добра і зла

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

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

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

Рідний

Рідний зламав землю в 1999 році як перша RTS з істинно тривимірні рухи.  Будучи в змозі рухатися блоки по трьох осях був новий виклик дизайн, і абсолютно рідний поставляються зі стилем і елегантністю. Проблема: як представити 3D рух на 2D площині (монітора).

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

User Interface and UX in game development

Потім, справа з додатковою вертикальній площині.

User Interface and UX in game development

 Екрані рух також дає гравцеві деякі тонкі, але потужні інструменти:

  • Зверніть увагу на компас кільце за межами діапазону руху цих розвідників.  Карти світу, все інше-великі і порожні, і заголовки компас важливі для орієнтування в локальному просторі.
  • Подивіться, як легко бачити лінії, які складають функціональну частину екрану.  Деякі ігри намагаються узгодити свої елементи користувальницького інтерфейсу з ігровим світом, роблячи їх блідими і прозорими, але не рідний. Імперія: тотальна війна-хороший контр-приклад тут.  Обстріл індикатор дуги виконані з тонкою червоною лінією, облямованої білою плямою, і він органічно вписується в ландшафти досить часто. Слава Богу, для модів і модостроителей.
  • Є хороший перехрестя в центрі руху колом коло, і він завжди вказує на центр вибраного освіти.  Без цього, вам доведеться шукати смужки здоров'я з обраних кораблів, щоб з'ясувати, де вони знаходяться, і здоров'я може бути досить маленьким і темним, коли корабель пошкоджений.
  • Лінії руху забезпечує переміщення відстань, зручне для оцінки транзитного часу на карту без очевидних орієнтирів.
  • Подивіться на комбайн корабель трохи попереду розвідників. Є лінія, що стирчала його, розриваючи в малому колі вище. Цей коло знаходиться на горизонтальній площині розвідників (зелений кружечок). Це наскільки нижче або вище цій площині комбайн насправді.  З цими двома показниками, рухаючись в напрямку судно-це швидкий і точний: переміщення по горизонталі маркер літака на диск, а потім потягніть вниз до нижньої лінії, щоб встановити вертикальну площину.

Крусейдер Кінгс 2

Крусейдер Кінгс 2-це своєрідний комплекс, багаторівнева гра, яка змушує вас почувати себе стрьомно.  Однак, його інтерфейс робить все можливе, щоб допомогти вам через все це.  По-перше, існує безліч підказки, які з'являються, поки ви не досить комфортно з цієї гри, щоб сказати йому, щоб зупинити. По-друге, є така чудова функція.  Сказати, що я хочу знати, що ікона монет є, просто наведіть на нього курсор і бац!

User Interface and UX in game development
Підказка виглядає трохи безтілесним, тому що вказівник не відображений на скріншотах.

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

 Ви можете подивитися на це й сказати, "Так, підказки були навколо назавжди. Звичайно треба висунутися, коли я парити над чимось".  Просто майте це на увазі, як легко забути.

Долина Без Вітру

Одне місце, де дуже легко забути про підказки в передню меню вашої гри. Ось для підказки у долині без меню параметрів вітру.

User Interface and UX in game development

Ось для підказки у Халф Лайф 2: Епізод 2 меню.

User Interface and UX in game development

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

Цивілізація 5

Екран місто Сив 5 є прекрасним прикладом зробити швидко доступної інформації.

User Interface and UX in game development

 Одномісний екрані говорить вам: економічний і культурний стан всієї імперії; у виробництві цього міста, зокрема зростання чисельності населення (та межі зростання в разі, якщо список згорнутий); юнітів і будівель, доступних для цього міста і як довго це візьме, щоб побудувати їх; забудови вашого міста, а також ресурсні поля в ньому і які листи громадян в даний час працюють; будівлі вже побудовані в її межах, і звалився Панель Управління громадянин, де ви можете переключитися на інший розподіл робочих профілів спеціалізуватися на виході цього міста.

 Ви також можете переміщати робітників між плиткою на карті міста, поставивши все це екранне простір з користю.


Висновок

Давай сформулювати шість основних питань проектування користувальницького інтерфейсу, як шість загальних принципів:

  1. Передбачити, що користувач хоче знати, і дати їм цю інформацію.
  2. Інформація повинна бути легко знайти.
  3. Інтерфейс повинен бути простим у використанні і навігації.  Використовувати встановлені шаблони, де ви можете: всі знають, що Ctrl-клік додає елементи на вибір, так що не зробити його елементів замість заміни.
  4.  Зробіть розташування користувача в системі меню очевидно, а очевидно, де користувач може піти і що вони можуть робити.
  5. Мінімізувати час завантаження і уникнути анімації в меню.
  6.  Ліквідувати або спростити повторювані завдання.

 Дизайн користувальницького інтерфейсу-це логічне завдання, яке ви не повинні боятися робити.  Зверніть увагу на ігри ви граєте, зверніть увагу, як вони представляють інформацію і як це змушує вас почувати себе.  Взяти до відома речей, які ви робите постійно, і як вони можуть бути поліпшені. Шукати інформацію про те, що діє тільки в якості прикраси, і подумайте, що б ви замінити його. Зверніть увагу на речі, які вас бентежать. І нарешті, завжди є деякі люди грати-тестувати вашу гру перед вами.  Скажіть їм, як запустити гру, потім мовчки дивитися і не піддаватися спокусі, щоб направляти їх. Це досить принизливо.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.