Інтерфейси 101: Зробити це досить

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

Як ви можете приймати невільні, послідовні рішення щодо зовнішнього вигляду та інтерфейсу вашої гри?

Наприклад, у першій моїй грі на основі хімії Silverlight я прийняв (погано?) Рішення про натуральний, ландшафтний стиль вигляду та відчуття, в результаті чого цей інтерфейс:

Потім, в подальшому ітерації, я став розумнішим і пішов з більш "машинним", шорстким виглядом і відчуттям, що призвело до цього (остаточний інтерфейс):

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

Чи є кращий спосіб розібратися, як тематизувати свою гру?

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

Редагувати: Схоже, я це не добре пояснив. Дозвольте мені спростити питання в крайньому випадку: коли мені потрібно викласти заголовний екран (з фоном, шрифтами, шкірними кнопками), як я вирішувати, як вони повинні виглядати? Зелений чи синій? Гранж чи ні? Округлені або плоскі? Сериф чи сан-серіф?

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

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

Здається, у вас конфліктні стилі.

Погляньте на ці інтерфейси користувача Peggle, Ultima Underworld, Diablo 3, Starcraft 2 та Gran Turismo 5.

Зверніть увагу, наскільки кожен інтерфейс відповідає своїй темі .

Peggle є шпилькою, як і у всіх її елементах інтерфейсу. Все - метр, важіль, насадка, трамплін.

У Ultima Underworld елементами інтерфейсу є залізо / сталь, зілля, рюкзаки, карти. Час пригод.

Схожий на підземний світ Ultima (адже, здається, він базується на UW)

Футуристичний, витончений, простий, мінімальний (протос)

Салон автомобіля

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

Доктор Маріо - це в основному медичні препарати, що стосуються бактерій, вірусів, медицини

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

Одне, що я починаю усвідомлювати, є дуже важливим: правильне використання контрасту.

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

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

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

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

Що я б робив: перекидання нижньої смуги, щоб добре поєднуватися з основним фоном, з точки зору контрасту. Зробіть більш легку межу між нею та основним фоном, щоб перетнути той факт, що вона окрема. Тоді позбудьтеся більшої частини тексту. "Діамант" може стати справжнім алмазом. "Атоми зліва" можуть стати живописним видом у кілька атомів. "Залишився час" може стати пісочним годинником, наручним годинником або кишеньковим годинником. "Далі" може пройти повністю - ви кажете "вам доведеться проглянути, щоб побачити, які атоми ви отримаєте", але це дратує ігровий механік. Перетворіть його на стопку атомів праворуч, сидячи на стрічці конвеєра, з невеликою візуальною машинною підказкою, для якої наступний рядок. Тада! Головоломка покращилась, покращився інтерфейс, все виглядає менш захаращено.

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

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

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

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

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

(Я піду на це з точки зору теорії кольорів)

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

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

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

Ви б відчували, що гра була або дуже зла, або якась гра на День Святого Валентина.

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

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

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

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

Коротка відповідь: Існує немає короткої відповіді .

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

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

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

Щодо шрифтів, то є цілі статті та статті досліджень (ось одна про serif vs sans serif ). Знову ж таки, загальним правилом є вибір, максимум, двох шрифтів. Хороший вибір - вибрати шрифт, який не є за замовчуванням, але все ще виглядає приємно. Якщо це варіант, Helvetica - це дуже приємно, але там багато інших хороших.

На стиль та / або тему відповісти ще важче. Я думаю, що найбільша порада тут - відповідати своєму стилю . Не намагайтесь поєднати природу з scifi чи ескізним лінійним мистецтвом з його рес-3d полімоделями. Це здебільшого означає знайти одного художника, який би робив ВСЕ мистецтво, або займався цим самим (у випадку великих компаній, ось чому є арт-лідер). Тема - це те, з чим вам доведеться грати, якщо ви не маєте на увазі задану тему, перш ніж починати. Чесно кажучи, це може змінитися з плином часу, і у вас буде більше гри. Швидше за все, що тема зміниться в ході розвитку, насправді.

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

ВІДМОВЛЕНО:

Гаразд, я переписав це, тепер, коли я краще розумію питання.

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

Отже, розглядаючи дизайн інтерфейсу як питання презентації, ви повинні подумати над тим, що ви хочете представити. Я маю на увазі, звичайно, ви намагаєтесь представити свою гру, але що ще? Ви хочете, щоб це виглядало професійно? Весело? Темний? Світло?

Як приклад, я розгляну два опубліковані вами зображення та розповім про враження, які я отримую від них.

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

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

Отже, що ви можете зробити з двома темами? Що ж, перша тема - це те, що може бути добре, якщо те, що ти хочеш зробити, це відчувати себе більш випадково. Це дає таке відчуття, як те, що зараз робить гравець з ігровими фігурками - це не все, що відбувається у світі. Другий образ надає йому більше відчуття актуальності. «Відомий світ» гри набагато менший, і він більше ставить акцент на те, що робить гравець.

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

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

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