Рубрика развивается при поддержке
Gamedev
Алиса Высотина
6432

Принципы разработки игрового интерфейса

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

В закладки
Аудио

Для начала давайте разделим эти две специальности. Дизайнер интерфейсов - это специалист, который не просто умеет рисовать, но и разбирается в принципах построения игрового интерфейса, теории и технологии, которая лежит в его основе. Это не значит, что вы приносите ему описание игровой механики, и он все делает за вас, выдавая результат в виде готового игрового окна. Дизайнер интерфейсов работает по детальному описанию функционала интерфейса, созданному геймдизайнером, при этом минимизируя его ошибки и обеспечивая максимально качественный с технической точки зрения интерфейс. Очень повезло, если у вас есть такой сотрудник. Но довольно часто, особенно в инди командах, мы сталкиваемся с тем, что на проекте нет дизайнера, а есть просто художники. Художник по интерфейсам - это обычный художник, который либо помогает дизайнеру в отрисовке особо художественных элементов UI, либо занимается отрисовкой игровых окон, кнопок и элементов и делает он это четко по вашим макетам, которые составили вы, частично взяв на себя обязанности дизайнера. Но такая система (геймдизайнер + художник) может работать только тогда, когда геймдизайнер действительно хорошо разбирается в вопросе.

Если в вашей команде есть дизайнер интерфейсов, то вы можете смело остановиться прямо здесь и почитать что-то более интересное. Эта статья предназначена для тех геймдизайнеров, которые обделены квалифицированным сотрудником по дизайну UI.

Итак, есть две новости: хорошая, и плохая.

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

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

В этой статье мы не будем рассматривать художественную сторону разработки, которая о цвете, ленточках или вензельках; она субъективна - зависит от конкретного жанра, сеттинга и личных вкусов самих разработчиков.

Итак, существует ряд принципов построения игрового интерфейса, которые можно условно разделить на две группы: психологические и фундаментальные.

Психологические принципы построения интерфейса

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

1. Движение взгляда

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

В игре Dishonored 2 эта диагональ очень хорошо прослеживается. От Mission к Objectives, от портрета Антона Соколова к названию главы, Dreadful Wale.

Да, в этой статье будет много примеров из Dishonored 2, потому что я прямо забалдела от их интерфейсов. Стоит поиграть хотя бы ради того, чтобы посмотреть на чумовую анимацию UI.

2. Сначала картинка, потом текст

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

3. Группы объектов

Человек плохо воспринимает большой объем данных, и гораздо лучше он усваивает сущности, разбитые на группы. Как и в написании дизайн-документации, где информацию важно подавать блоками и списками, так и в подаче визуальной информации важно группировать ее для того, чтобы пользователь шел от общего к частному. Также элементы интерфейса нужно группировать по общему признаку или задаче, которую они выполняют.

На страничке героя в Dota2 можно заметить очень четкие группы элементов. Первая группа — теги героя, вторая — скиллы, далее отдельная группа — скины и новая группа — магазин скинов. Они не смешиваются и все стоят отдельно друг от друга, обособленные формой, размерами, расстоянием между ними. Кстати, здесь так же соблюдено правило «сначала картинка, а потом текст».

4. Привычные элементы

В любом типе интерфейсов существуют устоявшиеся и принятые человечеством аксиоматичные элементы. Это не значит, что все эти интерфейсы должны быть похожи друг на друга. Тем не менее, сталкиваясь с незнакомым и новым интерфейсом, человек будет стараться зацепиться за знакомый и понятный принцип расположения информации, или знакомый элемент. Так, например, большинство инвентарей RPG имеют похожую структуру, а обозначение звонка - это пиктограмма телефонной трубки (несмотря на то, что трубками такой формы уже давно никто не пользуется).

Для дополнительной информации можно погуглить Закон Якоба.

5. Количество информации, которую может усвоить человек

Когда пользователь сталкивается с новым интерфейсом, то ему приходится впитать огромное количество информации, узнать о многих новых функциях, научиться ими пользоваться. Объем нового прямо пропорционален ужасу, охватывающему человека. Сложные и многофункциональные экраны нужно разбить на простые, не пытаясь впихнуть всю информацию в одно место. Это правило также из тех, которые работают не только для интерфейса: точно так же последовательно нужно вводить в игру новые механики, чтобы игрок не очумел от запутанности вашего геймплея.

Для дополнительной информации можно погуглить Закон Хика

Интерфейс игры The Witcher 3. Слева — все квесты, затем кратко цели выбранного квеста, и только потом художественное описание. Представьте себе, если бы вся эта бодяга открывалась бы сразу под названием квеста? Ориентироваться в них было бы гораздо сложнее. И опять, сочетание с принципом «слева-направо».

Фундаментальные принципы построения интерфейса

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

1. Слишком большое количество элементов на одном игровом экране

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

Представьте себе игровое окно как предложение:

Жуткий ливень начался только что, буквально в половину седьмого вечера, на улице дикий потоп!

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

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

Вот обратите внимание на баланс в обеих половинах интерфейса. Несмотря на то, что левая половина является крайне функциональной из-за большого количества слотов, она не перевешивает правую, так как по заполненности и форме она сделана так же, а ведь это всего лишь кнопка перехода в другой интерфейс и каунтер Raw bones. Можно было и крафт амулетов вместить в это окно, но представьте только, насколько оно было бы перегружено функционалом.

2. Отсутствие единообразия элементов

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

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

Интерфейсы из Dishonored 2. Элементы обоих окон пусть не идентичны, но имеют очень похожую визуализацию: похожие плашки, похожим образом оформлены заголовки, списки, выделение выбранного, кнопки Back и Exit, детализация информации в правой части экрана. Попав из интерфейса загрузки в интерфейс туториалов, игрок сразу поймет, что ему нужно сделать и куда посмотреть.

3. Отсутствие обратной связи

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

4. Большое количество текста

Игроки не очень любят читать обучающие тексты и правила, и если для того, чтобы объяснить ему как пользоваться интерфейсом вы добавляете в окно пояснения - то, Хьюстон, у вас проблемы. Нужно вернуться назад и посмотреть, какое из правил, описанных в этой статье, вы нарушили и придумать, как сделать его лучше. Пресловутая фраза про «интуитивно понятный интерфейс» - это заповедь разработки номер один разработки.

Везде, где это возможно, нужно избавиться от надписей на кнопках или под иконками GUI. Все что можно сделать иконками и пиктограммами - нужно делать иконками и пиктограммами. Любое чтение в момент быстрой навигации внутри окна затрудняет восприятие и делает общение между игроком и игрой мучительным. Если вы делаете кнопку, по нажатию на которую открывается карта мира - ну сделайте очень простую и понятную иконку в виде карты, и не нужно подписывать ее текстом. Всегда стоит помнить о такой вещи, как локализация, и то, что на английском будет выражено простыми тремя буквами «map», на немецком может выглядеть как «flugergehaimer».

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

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

Вы спросите: а как же тогда быть с дневниками героя или художественными текстами, сопровождающими историю? Я, наверное, вас разочарую, если скажу правду: такие тексты читает подавляющее меньшинство игроков. Тем не менее, именно эти игроки являются самыми лояльными, именно они выискивают пасхалки и секретные квесты. Но эту аудиторию можно расширить, если сделать подачу информации максимально привлекательной для игрока. Лучшее, что я пока видела на этот счет - это дневник Артура Моргана из Red Dead Redemption 2.

Также можно использовать дневник не как набор художественных записей, а зашифровывать в них подсказки по игре или советы для игрока. Так, например, сделан журнал квестов в The Witcher 3 (см. п.5 психологических принципов).

5. Красота важнее удобства

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

В общем интерфейсе Bonecharms (см. п.1) и в этом интерфейсе крафта есть украшательства: чертежи рун, портрет главной героини, чернильные плашки, неоднородный фон, пятна и прочее. Тем не менее, ни один вензелек и украшение не отвлекают от сути, интерфейс функционален и понятен.

6. Отсутствие акцентов

Эта проблема появляется тогда, когда на экране нет акцентов, или когда, наоборот, их настолько много, что ничто конкретное не выделяется для глаза. Акцент - это выделение элементов интерфейса цветом, анимациями, или размером. Помните школьные конспекты, где (ну, хотя бы в самом начале года) вы выделяли зеленой ручкой важное, подчеркивали определения и писали NB! на полях? Так вот, игровому интерфейсу также необходимы свои «нотабене», чтобы сконцентрировать внимание игрока на том, что является важным в каждом отдельном интерфейсе. К тому же игра - это постоянно изменяющаяся и динамичная структура. Меняются ее правила, появляются новые возможности, исчезают старые. На все это нужно сразу обращать внимание игрока.

Выбранное меню Powers — акцент, выбранная способность — акцент, выученные способность — акцент, количество рун — акцент, описание способности — чуть более бледно, около пунктов Lore & Maps и Travel Log — пиктограммы «что-то новое». К вопросу о группировании: Обратите внимание, как разделены интерфейсы. Powers и Enhancements разделены расстоянием и цветом, ветка способности — полупрозрачной подложкой, описание — тоже. Тем не менее, описание и дерево, как более близкие друг к другу по смыслу элементы (один является продолжением другого) находятся ближе, чем дерево и сами скиллы.

  • В инвентаре появился новый предмет, которого у игрока не было раньше? Отметьте его специальной пиктограммой.
  • Закончился кулдаун и игроку снова доступен определенный тип боя? Заанимируйте кнопку.
  • Пришло новое письмо? Выделите его другим цветом в списке остальных сообщений.

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

Больше интересных статей читайте в моем блоге:

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Алиса Высотина", "author_type": "self", "tags": [], "comments": 56, "likes": 171, "favorites": 521, "is_advertisement": false, "subsite_label": "gamedev", "id": 70438, "is_wide": false, "is_ugc": true, "date": "Wed, 18 Sep 2019 17:58:33 +0300", "is_special": false }
0
{ "id": 70438, "author_id": 138586, "diff_limit": 1000, "urls": {"diff":"\/comments\/70438\/get","add":"\/comments\/70438\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/70438"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64954, "last_count_and_date": null }
56 комментариев
Популярные
По порядку
Написать комментарий...
19

Было бы вообще круто, если бы показали и реализацию плохих интерфейсов, чтобы чётко понимать как делать не нужно.

Ответить
5

Чертовы консоли . Свитки интерфейсов из за них 

Ответить
3

По сравнению с Скайримом, это еще по-божески, вот там настоящий Ад.

Ответить
1

Мне почему-то в юности нравился интерфейс облы, и сейчас он не прям ужасный

Ответить
1

Посмотри на мобилках Dungeon Crushers. Мне кажется разработчики где-то нашли учебник "Как НЕ надо делать UI" и чётко ему следовали.

Ответить
–4

Все замечательно, но почему в ленту выведен скрин нового интерфейса из Доты? Он настолько ужасен, что загрузив ее однажды в порыве ностальгии я не сразу нашел даже как в очередь в мм встать, не говоря уже про создание группы.

Лучше уж из Endless Space 2 тогда взял бы, вот там да - божественный уровень проработки.

Ответить
27

Если у тебя возникли проблемы с обнаружением огромной зелёной кнопки "играть", то вероятно ужасны твои когнитивные способности, а не интерфейс.

Ответить
–1

Видел его последний раз года два назад, когда только появился этот... Плиточный? Интерфейс.

Не было там такой кнопки.

Ответить
1

Напрасно хамите. Я прекрасно помню как после обновления интерфейса эту кнопку сходу не мог найти ни один из моих знакомых и я в том числе. Так что проблемы явно именно у этого интерфейса, а не у пользователей с головой.

Ответить
2

вообще то там заебись интерфес

хотя не лучше интерфейса 2013 года но все еще хороший

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

4

Отдельное спасибо за пункт 3.

Когда пошла мода на флэт и его стали лепить в каждом первом проекте, вот эта тема «чтобы сделать то-то, нажмите одну единственную кнопку» так стала раздражать: не могу я нажать на эту кнопку, потому что она неактивна, КАРЛ! Почему неактивна? Никто не говорит. Наверно, потому что где-то есть другая «правильная» кнопка, которую я почему-то не замечаю. И водишь, как дурак, 5 минут глазами по пустому окну...

Ответить
3

Интересно почитать разбор интерфейсов каких нибудь стратегий от Парадоксов, Европка или Стелларис какой нибудь.

Ответить
3

Там и без разборов ясно, что все печально

Ответить
1

хуяльно

это нишевые с продукты с отлично работающими для своей ЦА и назначения интерфейсами

Ответить
1

Или EVE

Ответить
2

Спасибо! Полезная статья.

Насчет Dishonored 2: интерфейс, конечно, интересный, но я все еще не могу забыть испытанный мною ужас, когда увидел, что в главном меню надписи на кнопках имеют разные шрифты.

Ответить
2

Меня это тоже смутила сперва, если честно. Но мне кажется, в этом есть свой шарм, читается-то хорошо.

Ответить
2

Посмотри интерфейс guild wars 2, я как человек сопричастный к разработке интерфейсов - когда его увидел в 2012м просто офигел в положительном смысле, на тот момент да и сейчас это наверное лучший нативный интерфейс в ммо.

Ну и да, столько всего написала, могла бы сразу скинуть ссылку на книгу про мытьё слона)

Ответить
1

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

Так хорошая статья, или плохая? Ваше мнение, как человека сопричастного, особенно интересно :)

Ответить
4

Хорошая статья, но всегда хорошо делать схематику: игровые интерфейсы обычно максимально просты, но хорошо показывать те же группировки обведя их разным цветом и проставив номера, обозначив блоки. Так же самое важное это показать не хорошие интерфейсы, а плохие в сравнении с хорошими. Про плохое писать всегда тяжелее, но надо)

Ответить
2

А мне показалось, что такая стилистика обусловлена историей ну и геймплеем, конечно. Когда впервые увидел, немного ужаснулся, подумал: "где мой лаконичный и сдержанный интерфейс из первой части!?" А потом пришло в голову, что смешение шрифтов означает возможность игры за двух героев: старый шрифт - Корво, новый(к тому же курсив) - Эмили. То есть интерфейс как бы дает понять, что это не просто продолжение истории Корво, но и его дочери и что они неразрывно связаны.

Ответить
0

Мне кажется, это правильная мысль. Круто подмечено!

Ответить
0

Хотя, знаете, я посмотрел скрины, освежил воспоминания. И теперь сильно неуверен в своей мысли. Уж слишком какой-то салат у них получился) Но где-то она может быть полезна))

Ответить
0

Кому как. Это довольно спорная особенность. Вот кому-то показалось, что в этом есть свой шарм, а кого-то стошнило :>

Было ли это дизайнерское решение целесообразным? Черт его знает

Ответить
2

Это называется леттеринг. В леттеринге очень много стилей, и в данном случае вероятно попытка стилизовать меню под афиши 19го века.

Ответить
1

Спасибо.

Лично мне немного неудобно и больно открывать такое меню. Нахожусь в ступоре долю секунды, когда вижу, что стиль каждой надписи разный.

Думаю, не просто так афиши 19-го века остались там, в 19-ом веке.

Ответить
0

Не играл, но предположу, что тут замешаны условности локализации и в оригинале (английском) размер шрифта одинаков.

Ответить
3

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

Ответить
2

Хорошая статья. По всем самым главным правилам прошлись, примеры на мой вкус слишком современны, но игры хорошие почему бы и нет.

Что вы скажете о таком интерфейсе? 

Ответить
1

Аккуратно. В духе 90-х.

Ответить
0

Спасибо)

Ответить
–5

 Плохая новость - учебника, руководства, четкого однозначного списка правил, которые помогли бы вам создать идеальный интерфейс именно для вашей игры - не существует.

 Фундаментальные принципы построения интерфейса

Ясненько, хорошо что по заголовкам пробежался, не придется дочитывать

Ответить
5

Ну, речь шла о том, что у вас не получится открыть инструкцию, которая пошагово поможет вам сделать интерфейс для своей игры с учетом всех ее особенностей. Поэтому такое уточнение в первом предложении - "именно для вашей игры". Есть базовые принципы, которые я назвала "фундаментальными", например, использование большого количества текстов в интерфейсе. Вы можете учесть этот принцип, но это не гарантирует, что у вас получатся толковые окна. Это такие базы, основы, которые просто помогут вам хотя бы от чего-то оттолкнуться, но единого алгоритма все равно нет.

Надеюсь, мне удалось объяснить, что я имела в виду. Я была бы рада, если бы вы почитали статью и сказали свое более взвешенное мнение.)

Ответить
0

Что это за игра?

Ответить
2

Nords: Heroes of the North.

Ответить
0

Спасибо

Ответить
1

Спасибо за труд. Ждём больше статей на эту же или смежную тематику.

Ответить
1

Спасибо, Алиса! Отличная статья (правда про корректуру не забывайте). =)

Ответить
0

Я стараюсь, в меру своей грамотности. Мне некому помочь, к сожалению :(

Ответить
1

Замечательная статья. Спасибо!

Ответить
0

Спасибо за статью! Очень информативно. Я правильно понимаю что некоторые из приведенных примеров не работают для мобильных игр? Например интерфейсы игр Supercell.

Ответить
1

Спасибо, что читаете! А под какие именно принципы, по-вашему, не подходят интерфейсы Supercell?

Ответить
0

Иконка с текстом к примеру.

Ответить
2

Пункт про текст в интерфейсам в основном о том, чтобы минимизировать его количество в интерфейсе. Это не значит, что его вообще не должно быть: тогда интерфейс может превратиться в кучу иконок и картинок, которые игроку придется выучить - это тоже плохо.

Интерфейсы Supercell довольно неплохие. Но в них есть ряд решений, которые я бы, действительно, сделала по-другому. Конкретно в вашем примере, я думаю, можно было бы разработать такие иконки, в которых текст был бы не нужен. Например, карта и лежащий на ней меч прекрасно заменили бы слово "attack", shop - и так понятная иконка. То же касается и других иконок на вашем скриншоте.

Неизвестно, почему они сделали так, как сделали: возможно, провели А/Б тесты и иконки с подписями показали себя лучше. Но я бы сделала иначе и в данном конкретном случае избавилась бы от текста.

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

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

Если вы хотите посмотреть на действительно крутой мобильный интерфейс, советую скачать игру Knighthood от King. Обратите внимание, как они играют с текстом: разные размеры и разные шрифты для акцентов, тексты никогда не на первом месте. Например, у них элементы HUD тоже подписаны, но полупрозрачным тонким шрифтом - на них вообще не обращаешь внимания, они подсказывают игроку где что, не бросаясь в глаза. Вся информация несущественная для игрока, или известная ему, скрыта в хинтах. В общем, все толково и найден тот самый баланс между текстом и картинками.

Ответить
0

Интерфейсы Supercell очень хорошие об этом говорит их юзербаза и доходы от их игр.

А/B тестинг это стандарт индустрии. И к тому же не надо забывать что UI/UX в многопользовательской мобильной игре продолжает меняться, дорабатываться и улучшаться со временем и это правильно! 

На счет плоского интерфейса, ваш пример не самый лучший в плане дизайна и юзабилити. Хотя бы взять топ-бар который почему то перемещен вниз. Все привыкли видеть его наверху. Какой цели добился дизайнер приняв такое решение я лично не понимаю. Может вы знайте и подскажете?

 Привычные элементы!

 Слишком большое количество элементов на одном игровом экране!

Ответить
0

а как Вам интерфейс Legend of Solgard (тоже Кингов)? Меня смущают абилки сверху (особенно заблокированная); разве они не должны быть ниже - ближе к тексту? Они кажутся оторванными

Ответить
0

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

Ответить
0

В случае Зельды это связано, скорее всего, с тем что игра сделана в Японии.

Ответить
3

Если бы Зельду делали в Австралии

Ответить
0

При чтении информация располагается слева направо, сверху вниз - так движутся наши глаза. 

Арабский язык справа налево читают, например. 

Ответить
1

Уф, я думаю, что интерфейсы проектов, у которых основная аудитория - арабы, вообще КРАЙНЕ СИЛЬНО отличаются от понятных и привычных нам. Статью стоит рассматривать относительно России и Европы. Понятно, что нишевые продукты, вероятно, подчиняются другим правилам. Но если какой-то наш проект локализовывают на арабский, никто для них не переделывает интерфейсы, арабы, к счастью, не являются ЦА для проекта. "К счастью" - потому что их менталитет и игровое поведение были бы разработчику очень непонятны интуитивно.

Ответить
0

у нас в команде тоже на арабский не заморачиваются, но было бы любопытно узнать, как на самом деле обстоят дела в тех краях. Все таки, если верить гуглу ~250 млн. человек, используют арабский язык, а это тоже рынок. Вероятнее всего, какие-то ответы можно найти в мобильных приложениях того региона. Но это так, праздное любопытство уже.

Ответить

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

0

Любой человек сначала обращает внимание на изображение, и только потом на текст

Обычно любой человек...Я Сначала смотрю: обана 999урона и только потом: бла, вот это грудь у гг...

Ответить
0

а где автор работает и не хочет ли схантиться?)

Ответить
0

Хорошая статья, спасибо. Но всё-таки местами есть популизм - совершенно нормально воспринимается текст слева, картинка справа) надо только не перегружать игрока не нужной информацией)

Ответить
0

А кто нибудь может прислать примеры тестовых заданий для разработчика интерфейсов?

Ответить

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovz", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "chfbl", "p2": "gnwc" } } } ]