Куток

Обкладинка для допису Дизайн інтерфейсів робіт Ukrainian Visual Novel Jam #2
Lisper
Lisper

Додано • Оновлено

Дизайн інтерфейсів робіт Ukrainian Visual Novel Jam #2


ВСТУП


Вітаю Вас, шанувальники візуальних новел та інтерактивного мистецтва загалом. На початку цього року пройшов другий Ukrainian Visual Novel Jam. І робіт на ньому було навіть більше ніж на попередньому. Можна довго обговорювати кожен аспект цих візуалок, проте в даній статті мова піде суто про їх інтерфейси. Здавалось би, маленька деталь якою можна знехтувати, але UI це буквально перше, що баче гравець. Це частина візуалу, що задає атмосферу. Це, зрештою, інструмент взаємодії з грою. Тому така от «дрібничка» здатна як покращити враження від інтерактивного твору, так і погіршити. А значить їй варто приділяти увагу.


ВАЖЛИВО

Я прекрасно розумію, що час на розробку ВН був обмежений, і тому лишень сам факт того, що творці заморочились і зробили власний UI (а не просто лишили стандартний), вже заслуговує на неабияку пошану. Особливо якщо проект розроблявся в соло (підморгую «Стільникам»).
Але буду критикувати інтерфейси так, наче то була робота спеціаліста з необмеженим часом. Нащо? Аби підняти рівень освіченості авторів у цій темі і, як наслідок, підвищити планку якості наступних творів. А також аби допомогти тим, хто хоче покращити конкурсну роботу, ба навіть збирається видаватись в Steam.


ЗАГАЛЬНА КАРТИНА (BAD)


Ситуація з другим джемом вимальовується вельми дивною. З одного боку він багатший на креативні ідеї та дизайнерські рішення. А з іншого відсоток новел з набридливими помилками також збільшився. Тому вважаю за потрібне про них нагадати, попри те що «це ж було вже»(с) у попередній моїй статті та в гайді від Shreibikus. А саме:
1) Стандартний UI
Звісно це не помилка як така, просто прикро бачити прісний та безликий стандартний інтерфейс Ренпаю на фоні самобутнього візуалу новели. Як то «Olivia Dwight» чи «Ноти моєї тиші». Загалом інтерфейс «із коробки» лишився у 23% робіт (минулого конкурсу — лиш у 10%).
2) Стандартна локалізація
Українську мову дідуган Ренпай отримав досить недавно, тому ще не встиг її відшліфувати. Як наслідок за замовчанням маємо такі назви пунктів меню, що через свою надмозковість вже стали мемом. Тут вам і «Невидимий текст» замість «Непрочитаний текст», і «Швидкість авто-переадресації» замість «Швидкості авто-читання». Смішки смішками, а людину, котра мало знайома з жанром такі слова фруструють і дезорієнтують. Ложка дієвидла в бочці Джему. Цим відзначилися 25% робіт (минулого конкурсу — 9%)
Опис картинки
3) Мішанина з мов
Доволі неприємно коли одні кнопки підписані українською, інші — російською, а повідомлення взагалі на англійській. Начебто очевидні речі кажу, але «режим поліглота» мають 5% робіт (минулого конкурсу — 3%).
Опис картинки
4) Відсутність необхідних функцій
Візуальні новели мають сформований кістяк із необхідних геймплейних фіч. Їх небагато, тому відсутність бодай однієї може створити масу незручностей. В деяких джемовських роботах не можна прокрутити вже прочитаний текст, в інших — зберегтись у будь-який момент. Буває, що навіть немає можливості відкрити ігрове меню. Якщо Вас спіткали подібні незручності, то скоріш за все ВН була написана на рушії широкого або взагалі чужорідного профілю (типу Unity чи RPGMaker). Воно і зрозуміло, адже банально не встигаєш розробити всі механіки з нуля (хоча он, «Мрія на орбіті» справилась). Так на другому джемі відзначились «Повернення Лицаря», «Остання розмова» і «Тригер». Але були і ті, хто умудрився купірувати функціонал навіть на Ренпаї: «Дорога» та «Виграш?». І того 8% у порівнянні з минулорічними 2,5%.


ЗАГАЛЬНА КАРТИНА (GOOD)


Ну що, годі про погане, поговорімо тепер про хороше, бо його теж багацько.
1) Креативні назви пунктів меню
Давати вже усталеним пунктам меню якісь авторські назви – ризикований хід. В погоні за автентичністю та атмосферністю дизайнер ризикує викликати у гравця ступор та розгубленість.
Перша скреативила «Bondage». Від її менюшок віє гріховністю і табу. Тут замість «Налаштування», «Довідки», та «Виходу» маємо «Уточнити кінки», «Допоможи» та «Вийти і забути».
Другою відзначилась «Алло!.. хто це?». Де в такій собі телефонній манері замість «Почати гру» та «Виходу» маємо «Відповісти» та «Попрощатися».
2) Кастомні курсори
Дрібничка, але приємно що навіть їй приділили увагу. Якщо авторський курсор зроблений правильно — він також додає атмосфери. Маємо три гарні приклади: «Віддзеркалені», «Два без одного» та «Мана: мій милий кошмар».
3) Анімація головного меню і не тільки
Цей джем багатий на моушн-дизайн: від простеньких програмних штук (типу плавної появи/затухання) до таких анімацій, що бідна щелепа падає і котиться ген за обрій. Це дійсно вражає, особливо враховуючи часові обмеження на розробку, та тодішні блекаути. Я зараз говорю про «Віддзеркалені», «Мана: мій милий кошмар», «Промінь Хігабани» та «Я!». Проте сама по собі наявність анамації не обов'язково робить гру краще. Наприклад стартовому екрану «Карпатських хронік» вона як п'яте колосе, а від головного меню «Дідових рецептів» взагалі нудить і паморочиться в голові.
4) «Плаваючі» текстбокси
Пам’ятаєте у попередній статті я передрікав появу кайзер-лайків? Що ж, стосовно UI це передбачення поступово справджується: цього джему в нас аж чотири новели, що використовують техніку «плаваючих» текстбоксів. Тобто таких що не «припаяні» до конкретного місця на екрані, а можуть змінювати своє розташування, чи навіть форму, що дає не аби який простір для творчості. Я кажу про «Bondage», «Мана: мій милий кошмар», «Сліпий пошук» та «Тригер».
Опис картинки
Опис картинки
5) Різниця між головним та ігровим меню
Ви вже знаєте, що після запуску гри відкривається головне меню, а посеред читання можна зайти у ігрове. Зазвичай у джемовських новелах вони виглядають ідентично і нічого поганого в цьому немає. Проте ви можете покращити ігровий досвід користувача якщо дизайн цих менюшок буде трохи відрізнятись. Якщо головне меню буде занурювати в загальну атмосферу твору, а ігрове — не буде виривати з настрою поточної сцени. От уявіть ситуацію: читача захоплює яскравий пейзаж, він відчуває літній настрій, але варто йому відкрити налаштування – вся краса зникає, а натомість з’являється темний дощовий бекграунд з повзунками і кнопками (бо це копірка з головного меню).
Так от, не зважаючи на часові обмеження є аж три новели що заморочились над розмежуванням менюшок, а саме: «Віддзеркалені», «Кризаліс програних снів» та «Мрія на орбіті». Про них детальніше згодом.
6) Свіжі дизайнерські рішення
Ох, в цьому плані другому UVNJ є чим похизуватися!

  • У «Поверненні лицаря» замість фонових зображень виступають стилізовані 3D-модельки локації. Більше того — їх можна крутити і роздивлятись з усіх боків, прямо як в 3D редакторі. Жаль тільки що підкачала загальна композиція. Опис картинки
  • В «Голосі лісу» під час діалогів неймбокс і репліка вирівнюються по стороні того, хто зараз говорить. Це просте і в той же час геніальне рішення, що прибирає необхідність перед кожною реплікою читати ім'я мовця. Опис картинки
  • Тим часом «Twins» та «Божественна майже комедія» вирішили замість традиційних спрайтів прикріпляти портрети героїв прямо до текстбокса. Цікаво та економить час на малювання персонажів. Опис картинки
  • А «Дорога» подумала "нащо робити екран налаштувань на весь монітор, якщо опцій не так вже і багато?", та й скомпонувала все в акуратний блок. Справжня ода мінімалізму. Опис картинки

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


Argumentum ad culpam


Опис картинки
Головне меню одразу задає настрій зі своїми древніми фоліантами, магічними аксесуарами та заходом Сонця. Не зважаючи на велику кількість речей на екрані, гравець чітко розуміє де знаходяться інтерактивні елементи. Чого він не розуміє на початку гри, так це призначення порожньої полички. Вона ж посеред екрану, вона поруч з кнопками, там повинно щось бути. І його думки матеріалізуються після першого проходження: виявляється, на цю поличку гра дбайливо складає пройдені фінали.
Опис картинки
По-перше, це геймплейно корисна фіча – бо спонукає гравця вийти на всі кінцівки. По-друге, це гарно, бо оформлено не текстом, а піктограмами – у кожного фіналу вона своя. Вірніше своя частинка цілого зображення (котре неодноразово з'являється в самій грі). А от якщо вже натиснути на нього – з’явиться список пройдених шляхів (це спрощує обговорення проходжень в ком’юніті).
Далі, коли натискаєш на корінець книги – вона наче відкривається перед тобою. Пожовклий пергамент і візерунки магічних чорнил. Жаль тільки що пергамент надто зістарився.
Опис картинки
В підменю налаштувань бачимо цікаву ідею – сумістити фоновий візерунок з інтерактивними елементами, але вони сплелись так сильно, що спочатку гравець взагалі не розуміє куди йому тицяти, а коли розуміє то не баче края повзунків. До того ж важко зрозуміти де просто текст, а де інтерактивна текстова кнопка (бо останні розкидані по екрану і стилістично не виділяються).
Вразило що після натискання «Почати» камера почала плавно їхати в бік. Я був неймовірно здивований, коли зрозумів, що головне меню фізично знаходиться у світі гри. Моя пошана за таку імерсивність.
Опис картинки
Тепер до текстбоксу. Якби мені показали його окремо від гри, я би сказав що він якийсь дивний, перемудрений. Але не забуваємо, що інтерфейс це частина візуалу. Тому саме в цій грі він виглядає органічно, і нагадує вишукане ковання. Неймбокс тут «випинаючий», тому з’являється лише під час діалогів. Цей прийом добре розвантажує візуал. А от що його перевантажує, так це шрифти, бо колорит-колоритом, а читати складно і очі втомлюються.
Опис картинки
Як бачите, на такий насичений текстбокс просто немає куди ліпити ще й кнопки швидкого меню, тому автори феєрично викрутились, зробивши для нього окремий міні-екран.
Відкривається він по клацанню на праву кнопку мишки і виглядає стильно.
Опис картинки
В екрані історії читати текст стає ще важче, ніж в текстбоксі через оцей от стовп посеред екрану.
Опис картинки
Коли настає час вибирати, перед вами з’являється книга, яку, так би мовити, ви пишете самі. Нажаль інтерактивний текст не підсвічується що плутає гравця. Тобто вкотре порушується так зване правило видимості стану системи. Воно каже що користувач завжди повинен орієнтуватися і добре розуміти, що відбувається в грі.

P.S. Зараз Аргументум готується до релізу в Стімі і багато помилок в UI вже виправлені. І звичайно я вже додав його у бажане!


Home Chat


Опис картинки
Ця гра використовує нетривіальний спосіб подачі історії, а саме – через діалоги в чатику під’їзду. Тому інтерфейс являє собою майже весь візуал новели (не враховуючи фотографій, що їх час від часу відправляють мешканці). І він настільки сильно занурює, що коли чуєш в навушниках стукіт у двері, лякаєшся так, наче то ломляться в твою хату. Створюється такий потужний ефект, очевидно, завдяки самому формату чатику. Бо ми і самі в таких сидимо, а тому переживаємо події гри близький до серця. А, по-друге, завдяки реалізації: окрім інтерфейсу, наближеного до реального, ми бачимо літаючі пилинки, відблиски сонця на моніторі, червоні спалахи, коли за вікном лунає сирена, і таке інше. Все наче каже «ти не в грі, ти перед монітором, це все прямо зараз відбувається в твоєму під’їзді».
Дуже круто, але такий от ефект просочення можна підсилити. Наприклад, додавши інших чатів. Якісь новини, тематичні чатики, переписка зі старим знайомим. Нехай в них буде мало повідомлень, але сам факт їх наявності уже додасть реалізму. Також можна покращити моменти, коли головний герой пише повідомлення. В джемовській версії ГГ друкує по 100500 знаків на секунду, що взагалі не реалістично. Тут можна не просто наблизити швидкість набору до реальної, а ще й творчо «погратися», як це зробили в «Lifesigns» (сторінка гри в Steam). Там головна героїня друкує як справжня людина: змінює швидкість, робить паузи, іноді навіть стирає вже написане.
Ще у "Home Chat" немає можливості зберегтись або прокрутити вже бачений текст. Доволі спірне рішення, бо з одного боку це підсилює психологічне напруження під час виборів (думай гаренько, назад вороття не буде). А з іншого – відбиває бажання перепроходити новелу і дізнатися інші кінцівки. Також не забуваємо про відключення світла і блекаути у джемовський період. Якщо отак світло вирублять посеред сюжету, то потім проклацувати все з початку без можливості пропуску якось не дуже приємно.
Безспірно поганим рішенням було відібрати у гравця можливість регулювати гучність музики та прокручувати текст назад.


Πολιτεία


Опис картинки
Гра зустрічає нас креативним стартовим екраном, котрий стилізовано під антиутопічний аналоговий телевізор. Одразу навіває атмосферу Орвеловського "1984". При наведенні на будь-яку кнопку у міні-екрані відображається її назва (Tooltip якщо більш технічною мовою). Спочатку це викликає вау-ефект, але потім думаєш "нащо воно потрібно?". Адже назви кнопок говорять самі за себе. От якби вони були оформлені іконками, а при наведенні курсора розкривалось їх значення – це було би корисно і навіть необхідно.
Опис картинки
Потім відкриваємо налаштування і бачимо що це окремий екран поверх існуючого. Краще було би далі розвивати початковий концепт: тобто зробити оцей екран-в-екрані більшим і всілякі налаштування\збереження відображати прямо в ньому.
Опис картинки
Текстбокс строгий та мінімалістичний. В купі з чорно-білою кольоровою гаммою та скрінтонами він прекрасно вписується у загальну манга-подібну стилістику новели. Його варто лишень трішки підшліфувати: уніфікувати контури і щось зробити з кнопкою HIDE (бо користуватись нею будуть нечасто, але при цьому вона чогось найбільша). Типу якось так:
Опис картинки
UX зберігалок тут, як на мене, набагато ліпший за стандартний Ренпаєвський. Немає страху, що от зараз натиснеш на сейв-слот а гра замість того щоб зберегтись — завантажиться, бо переплутав екран збереження з абсолютно таким самим на вигляд екраном завантаження.
Опис картинки
В "Πολιτεία" вибір завантажити чи зберегти стоіть прямо біля слоту. Дуже наглядно і не треба тягнутись мишею на край монітору щоб із сейв-скріну перемкнутись на лоад-скрін.
Також вдалим рішенням було розмити фон під час входу у меню. Погляд фокусується на інтерактивних елементах, і в той же час гравець не виходить зі стану потоку. Нажаль серед усіх новел другого Джему така крута фіча є лише в даній та у «Віддзеркалених».
Опис картинки
А от екран історії то щось страшне. По-перше, у кожної репліки свій розмір шрифта. Це дезорієнтує, бо слова крупним шрифтом сприймаються як більш важливі, тому увага мимоволі спрямовується туди. А, по-друге, спробуйте знайти де цей екран закривається...


Віддзеркалені


Опис картинки
Якби мене обмежили одним словом, щоб описати цей інтерфейс, я би сказав "вишуканий". Але ніхто мене не обмежує, тому можу розписати все детально.
Тож, буквально зі старту "Віддзеркалені" справляють враження ААА-новели, що була створена за кошти якоїсь "Nitro+" чи "Innocent Gray". Вдала композиція з ритмом, направляючими лініями та симетрією. Чітка градація об'єктів по важливості завдяки їх розташуванню, розміру та виваженій роботі з кольорами. Погляду є що ретально роздивитись і де відпочити. Ну і звичайно ж, анімація героїв, котра оживляє сцену, і водночас не відволікає від менюшок (а витримати такий баланс ой як непросто).
Опис картинки
Текстбокс виконаний з дотриманням вищезгаданих чеснот. Тому, не зважаючи на таку от деталізовану залізну ковку, від нього віє легкістю, а погляд не "чіпляється" за вензеля під час читання.
Опис картинки
При вході в ігрове меню фонове зображення розфокусовується, аби тримати читача зануреним у гру, але в той же час не відволікає від інтеракції з UI. Але тут є один прорахунок в плані зручності: після входу в ігрове меню доводиться завжди робити ще один клік. Було би значно ефективніше, якби після натискання іконки "Опції" гравець бачив не порожній екран з варіантами, а те підменю, яке в більшості випадків йому буде треба, а саме — налаштування. Також радив би змістити фрейм ігрового меню трохи лівіше задля балансу композиції.
Опис картинки


Два без одного


Опис картинки
Зізнаюсь, намальовані від руки елементи UI це моя слабкість. Як дизайнера (бо не вмію), і як гравця (бо милуюсь). Новелі "Два без одного" ця техніка надзвичайно пасує, адже створює атмосферу старовинної казки. Теплі кольори, мазки пензлем, магічні приблуди — прямо книжкова ілюстрація перед очима. Але є нюанс в плані юзабіліті:
Опис картинки
У попередній статті я розказував про скевоморфізм — коли елементи інтерфейсу виглядають як об'єкти з реальності. Це робить UI зручним та інтуітивно зрозумілим. "Два без одного" використовує атрибути цього метода, забувши про його суть. Спочатку юзер не розуміє де що знаходиться, а потім плутається бо банально забуває. Вся справа у тім що скевоморфізм працює завдяки втіленню у віртуальному світі концепцій, з якими гравець давно знайомий у фізичному. Нажимаю на магнітофоні кнопку з трикутником — грає музика, бачу таку ж кнопку на комп'ютері — о, значить вона робить те саме. Але в кого з гравців у голові є сталий зв'язок між мечем та налаштуваннями, або між черепом птаха та виходом з гри? Отож. Тому радив би підкорегувати стартовий екран аби назви пунктів меню виднілись постійно.
Опис картинки
Зайшовши у підменю, ми бачимо, що на тому ж столі, де були розставлені речі, з'являється старовинний папір у якості фрейма. Гарно-файно, але необхідно попрацювати над розташуванням елементів UI, бо вони то гуляють, то впираються у края, то взагалі виходять за межі.
Те саме стосується текстбоксу.
Опис картинки
Також в грі є такий собі інвентар (вірніше список речей, котрі носить з собою ГГ).
Опис картинки
Іконка для його виклику з'їдає забагато простору, як для функції що використовується гравцем дуже рідко, а сам фрейм можна поставити трохи вище. Також для зручності варто дати юзеру можливість закрити інвентар повторним клациком на іконку, аби курсор не подорожував від правого верхнього кута екрану до його центру.


Карпатські хроніки


Опис картинки
Всупереч тематиці карпатських міфів, котрі оспівують красу та гармонію природи, інтерфейс рясніє внутрішніми конфліктами. В той час як фонове зображення світле, з м'якими переходами пастельних тонів та плавними формами, — бокова панель рівна, однотонно сіра та з килотно-зеленими дрібними візерунками. В той же час для тексту менюшок було обрано шрифт у старо-слов'янському стилі, а для назви гри — у древньо-єгипетському. Якщо бути точним, то це сумнозвісний у дизайнерських колах Papyrus (до "слави" Comic Sans йому далеко, але менше з тим). Ну і вишенькою на торті: плавна процедурна анімація мавки ніяк не в'яжеться з різкою покадровою анімацією метелика.
Опис картинки
У текстбоксі той самий "стиль": різкі края прямокутника ріжуть плавні рослинні візерунки, а разом з ними — і швидке меню. В неймбоксі видніється щільно затиснуте ім'я мовця та скукошені до рівня молекул вензеля.


Космічне питання


Опис картинки
Як же приємно зі стартового екрану бачити такий, у прямому і переносному сенсі, космічний фон. І як же неприємно, що його затуляє оця величезна дошка, на якій дрібка тексту і купа порожнього, сірого місця. Negative space, звичайно, важлива штука — елементам UI треба "дихати", але тут його невиправдано багато. Хоча сама ідея розмістити менюшки на дошці оголошень дійсно непогана. Щось подібне я робив колись давно для Reverie:
Опис картинки
З екранами ситуація ще гірша. В той час коли на задньому плані деталізований хай-тек в кольоровій гаммі літньої ночі, на передній план вривається грубий, обшарпаний лоу-лайф.
Опис картинки
Все таке пласке, з рандомно розкиданими яскравими елементами, що нагадує собою текстуру, яку витягли зі старенької відео-гри. За ядучо-блакитний я взагалі мовчу.
Опис картинки
А тепер погляньте на цей текстбокс, пригадайте все що було сказано раніше, і спробуйте відгадати, що тут не так.
Опис картинки
Обрали варіант? Тоді поздоровляю, ви праві! Бо працювати треба буквально над усім перчисленим.

  • Яскраві елементи відволікають вид головного: тексту та інтерактивних елементів (котрі чомусь навпаки маленькі та біленькі). Товстий жовтий кабель через весь текстбокс, червоний та зелений світлодіоди, зелена панель зліва — за все це око гравця буде постійно чіплятись.
  • Ширина занадто велика. Книжки не дарма виходять у, барабанний дріб, книжковому форматі. Бо саме він комфортний для читання. А уявіть якби книги були в альбомному форматі, та ще й шириною в цей текстбокс...
  • Не лишнім було би і попрацювати над зручністю користування та зчитування інформації. От зараз ім'я персонажа просто висить у повітрі, хоча оці от чотири "кнопки" так і просяться щоб з них виринав неймбокс. І вже на ньому ім'я буде легше зчитуватись. Типу якось так: Опис картинки А ще тут є функція приховання іконок. Загалом корисна штука, але в даному випадку абсолютно безглузда: Опис картинки Чому? Тому що подібні функції існують аби розвантажити візуал. Щоб чисельні кнопки не муляли око, доки гравець сам їх не покличе. І це прекрасно розуміє минулорічна «Коли розквітають проліски»: Опис картинки
  • І от, після всих правок, наш текстбокс стане гарним... для «Трансивера на горищі». Бо ця аналогова, груба стилістика більше личить "Трансиверу", ніж "Питанню". Останньому пасувало би щось легке, мінімалістичне, сяюче.

Кризаліс програних снів


Опис картинки
Над інтерфейсом цієї новели я працював особисто. Технічне завдання було напрочуд складним: зробити сучасне переосмислення естетики PC-98. При чому в трьох варіаціях: техно-містичному, лімінально-буденному, та кіберпанко-маджонговому. Плюс треба рамки для "плаваючого" тексту та зображень. І до того ж все це має добре виглядати як на ПК, так і на смартфоні.
Ну а що я? Мені чим складніше, тим цікавіше.
Витративши не один день на пошук референсів, я усвідомив, що не встигну намалювати стільки всього з необхідним для стилю рівнем деталізації за відведений час.
Опис картинки
Тому довелось вкотре згадати гасло "нестандартні проблеми вимагають нестандартних рішень".
Опис картинки
Так-так, увесь інтерфейс "Кризалісу" зроблений в Blender. Майже всі 3D-об'єкти модельовані з нуля, приправлені набором авторських шейдерів що імітують стилістику PC-98, і посипані зверху пост-обробкою у графічному редакторі.
Опис картинки
Опис картинки
Опис картинки
І якщо ви думаєте, що я не бачу дровиняки у власному оці, то це не так. По-перше, треба додати тултіпи, повністю переробити кодекс, бо зараз він дуже сирий та незручний. А, по-друге, відновити дизайнерські рішення, що були втрачені через технічні проблеми:
Опис картинки
Опис картинки
Опис картинки


Мана: мій милий кошмар


Опис картинки
В контексті даної статті я би назвав її радше "Мана: моя прєєєлєсть". Дивишся, наче на відновлене вінтажне авто: зовні — відполірований капот, що навіває ностальгію, а всередині — сучасні навороти.
Так у головному меню VHS-ний шум та стильний ретро-шрифт ідуть в комплекті з анімаціями та ефектом паралаксу.
Враховуючи, як сильно Ренпай навантажує систему під час анімацій (котрих в Мані багацько), дуже вдалим рішенням є надати гравцю можливість відключити їх кнопкою "Для слабких ПК".
Опис картинки
Музикальна кімната не просто стилізована під аудіо-програвач, вона ще й функціонує відповідно. Крутяться диски, блимають індикатори, кнопки злегка втискаються коли проводиш по них пальцем. Ой, вибачте, мишкою.
Єдине що тут можна покращити так це зробити плеєр більшим і виводити на екран назву треку.
Опис картинки
А як файно стилізовані слоти. Навіть підписані ніби від руки. Щоправда не дуже розумію призначення квадрата з червоним кругом. Логічніше було би їх прибрати, можливо навіть стилізувати під відеокасети. Щоб сильніше олд-скули зводило.
Опис картинки
В самій грі текстбокс сповідує принцип, закладений у попередній роботі автора — максимально розвантажити візуал.

  • Він "гумовий" — тобто підлаштовує свій розмір під довжину реплік. Завдяки чому завжди займає мінімальну площу на екрані.
  • Портрет ГГ з'являється коли він говорить, і зникає коли йдуть думки чи опис подій.
  • Замість неймбоксу гра повідомляє читачу хто з персонажів зараз говорить за допомогою зміни кольору текстбокса.
  • іконки для управління текстом ("назад", "вперед", "пропустити") можна приховати, до часів коли вони дійсно знадобляться. Хоча навіть у розкритому варіанті вони займають мало простору.

Ну і загалом "Мана" це повноцінна гра. Можна ходити по квартирі, їздити на роботу чи ще кудись, грати в азартні ігри, etc. І для всього цього були створені окремі екрани.
Опис картинки
Опис картинки
Опис картинки
Короче, моя пошана.


Мрія на Орбіті


Опис картинки
Приємно бачити свіже поєднання сайфайних форм і сірого кольору з такими от смарагдовими вставками. Нема оцієї холоднечі та стерильності, до якої нерідко вдаються коли дизайнять щось в сетінгу космічних подорожей. Що бачити неприємно так це назву гри — через форму та колір вона виглядає наче якась заблокована кнопка меню.
Опис картинки
Відкривши Опції, бачимо порожній фрейм. Це змушує гравця щоразу робити один лишній клік. До того ж всі налаштування розбиті по чотирьом категоріям. Таке розгалуження зрозуміло для AAA-відеогри, в якій налаштувань не один десяток. Але у ВН вони всі прекрасно влізають на один екран.
Опис картинки
Таке розбредання призводить до того, що з'являється забагато порожнього місця, і щоб його компенсувати доводиться значно збільшувати розмір менюшок. В той же час є внутрішньо-ігрове меню, де все добре поміщається на один екран.
Опис картинки
Текстбокс файний-сайфайний, але надто прозорий, через що читати стає важко. А бідне квік-меню все ніяк не може визначитись: воно слова, чи воно іконки.


Редакторка Р.К


Опис картинки
Ох, коли дивишся на цей дизайн, то відчуваєш себе в гостях у подруги: затишно, спокійно і все акуратно розставлено по поличкам. Те що треба для гри з ГГ редакторкою. Ця атмосфера створюється завдяки кольоровій палітрі та комбінації строгих форм з ажурними візерунками. Назва гри не просто надрукована десь вгорі, вона художньо вписана у фонове зображення. Цей декоративний прийом також буде використаний протягом гри: таким чином кнопки "Клацай" і "Назад" вписані в бекграунд і являються його інтерактивною частиною. Також вдалим рішенням було зобразити слова в якості прямокутників: ми розуміємо що перед нами текст, і при цьому картинка не перевантажена купою букв. Ех, от би і «Ланцюг» зробив так само.
Опис картинки
Нажаль залишились артефакти від базового інтерфейсу. Це прямокутники від чекбоксів, слайдер в меню історії, та координати об'єктів. Через останнє менюшки перекриваються декоративними елементами, або налазять на них. Що особливо прикро, так це стандартна локалізація з її невидимим текстом та автопереадресацією. Тому, шановні PlayUA, текст Вашого інтерфейсу потребує редагування. До речі, з цього можна зробити лудо-наративну фічу: лишити як є, але зробити так, щоб при наведенні курсором текст виправлявся.
Опис картинки
Ще одне цікаве дизайнерське рішення чекає нас під час point-n-click секцій. Текстбокс ховається, а натомість з'являється спеціальна вузенька підкладка для квік-меню. Також в оточення вписана вище згадана підказка "Клацай" (передаю вітання "Cut off their limbs"). Таким чином гравець розуміє, що це не якийсь глюк, через який з екрану пропав текстбокс, а запрошення до дій. Єдине, що збентежує, так це відсутність підсвічення інтерактивних об'єктів. Як наслідок гравець вимушений бездумно тицяти в усе підряд наче мавпа палицею.
Опис картинки
Інша справа коли діло доходить до пошуку помилок в тексті. Тут відсутність підсвітки навпаки розважає гравця, бо вимагає від нього розумових зусиль. Він уважно читає, згадує правила, виправляє хиби. Словом — відчуває себе в шкурі справжнього редактора. А от якщо вже всі помилки не знайшов, і доводиться клацати все підряд, то думає він не про поганий гейм-дизайн, а про власну неуважність та нестачу знань. І зрештою, натрапивши брутфорсом на пропущену помилку, дізнається для себе щось нове.


Стільники


Опис картинки
"Стільники" мають унікальну стилістику медового техно-мінімалу, і тамтешній UI чудово її доповнює. Прямо дивишся на стартовий екран і вже хочеш якийсь мерч у такому стилі, чи тему на телефон, чи що-небудь іще. Єдине, що трохи вибивається, так це шрифт із засічками, котрий навпаки — відсилає до минулого, формальностей та традиційості.
Опис картинки
Внутрішні екрани мають власне фонове зображення, що сильно спрощене (аби простіше було зчитувати елементи менюшок), але в той же час цікаво перегукується зі стартовим.
Опис картинки
На екрані левітує текстбокс із дуже приємним кольором та шейдінгом. Так, він маленький, але і репліки в грі короткі, а шрифт достатньо вузький. Розташування його незвичне, але дуже вдале. Єдина незручність — квік-меню не видно на світлому фоні.

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


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

Топ коментарі (9)

Звернути
 
shreibikus_e2850716b8c496 profile image
Shreibikus

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

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

Звернути
 
ultra_scream profile image
Ultra_Scream

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

Звернути
 
shreibikus_e2850716b8c496 profile image
Shreibikus

Я теж за раз, але під кінець вже підхрамував)

Звернути
 
lisper_1991_71eab5e0ecc54 profile image
Lisper

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

Звернути
 
tellery_spyro_58031d08098 profile image
Tellery Spyro

Мегабазована стаття! Отримайте вантажівку з кавуняками, 300 репутації і 200 кентек!

Звернути
 
lisper_1991_71eab5e0ecc54 profile image
Lisper

Мій внутрішній егідолог невимовно радіє :3

Звернути
 
thenikcd profile image
TheNikCD

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

Дякую за статтю, навіть бажання озналймитись з‘явилось у не фанату жанру

Звернути
 
merkuri profile image
Merkuri

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

Звернути
 
ci8ird profile image
Volodymyr

Політехніка та Кризаліс виглядають дуже круто. Хотів б побачити ці два проєкта в Steam.

Куток

Підписуйтеся на наші соціальні мережі:
Telegram
Twitter
Facebook


Тепер у нас також є Youtube канал!