Интерфейсы 101: сделать это красиво


23

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

Как вы можете принимать произвольные, последовательные решения относительно внешнего вида и интерфейса вашей игры?

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

Валентность 0,1, изобилует травой, камнями и небом.

Затем, на более поздней итерации, я стал умнее и пошел с более «машинным», шероховатым внешним видом, что привело к этому (финальному интерфейсу):

Финальная версия Valence выглядит более машиноподобной и шероховатой

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

Есть ли лучший способ понять, как создать тему для вашей игры?


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

Edit: кажется, что я не объяснил это хорошо. Позвольте мне упростить вопрос до крайности: когда мне нужно выложить экран заголовка (с фоном, шрифтами, скинами кнопок), как мне решить, как они должны выглядеть? Зеленый или синий? Гранж или нет? Округлый или плоский? С засечками или без засечек?

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

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


Я хочу уточнить, что этот вопрос не относится к формату, игре или платформе (за исключением, может быть, 2D-игр); это характерно для любых игр, которые вы можете построить.
ashes999

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

1
«В этом режиме! В этом режиме у вас есть…»
Даниэль Пендергаст

1
@ Nevermind: За исключением того, что уже целый UXSE посвящен таким вещам.

5
UI! = Графический дизайн. Оба приведенных выше примера имеют одинаковый пользовательский интерфейс с разными графическими темами.
DampeS8N

Ответы:


15

Кажется, у тебя противоречивые стили.

Посмотрите на эти интерфейсы от Peggle, Ultima Underworld, Diablo 3, Starcraft 2 и Gran Turismo 5.

Обратите внимание, как каждый пользовательский интерфейс соответствует своей теме .

Peggle

Peggle - это пинбол, как и все его элементы интерфейса. Все метр, рычаг, насадка, трамплин.

Ultima подземный мир

Ultima Underworld имеет элементы пользовательского интерфейса: железо / сталь, зелья, рюкзаки, карты. Время приключений.

Diablo III

Похоже на преисподнюю Ультимы (на самом деле, похоже, она основана на UW)

Starcraft 2

Футуристический, гладкий, простой, минимальный (протосс)

Гран Туризмо 5

Интерьер автомобиля

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

Доктор марио

Доктор Марио в основном медицинский, бактериальный, вирусный, медицинский тематический

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


8

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

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

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

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

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

Что я хотел бы сделать: перенастроить нижнюю панель, чтобы она лучше подходила к основному фону с точки зрения контраста. Сделайте более светлую границу между ним и основным фоном, чтобы подчеркнуть тот факт, что он отделен. Тогда избавьтесь от большей части текста. «Бриллиант» может стать настоящим бриллиантом. «Атомы слева» могут стать графическим представлением нескольких атомов. «Оставшееся время» может стать песочными часами или наручными часами или карманными часами. «Далее» может полностью исчезнуть - вы говорите: «Вы должны пройти, чтобы увидеть, какие атомы вы получите», но это раздражающая игровая механика. Превратите его в стопку атомов справа, сидя на измученной конвейерной ленте, с небольшим наглядным механизмом, за которым следует следующий в очереди. Тада! Улучшена головоломка, улучшен интерфейс, все выглядит менее загроможденным.

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

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

Во-первых, размыто Во-вторых, размыто

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

Во-первых, край Во-вторых, край

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

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


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

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

6

(Я собираюсь прийти к этому с точки зрения теории цвета)

Я думаю, что ваш вопрос не о том, как сделать привлекательный графический интерфейс, я думаю, вы действительно указываете на то, «Как мне выбрать опыт, который я хочу дать своим игрокам?»

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

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

Вы бы чувствовали бы, что игра была или очень сердита или некоторой игрой Дня святого Валентина.

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

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

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

Это действительно сводится к необработанным эмоциям, которые вы ожидаете от своего игрока.


5

Короткий ответ: Там нет не короткий ответ.

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

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

Итак, несколько советов. Для цветовых схем используйте что-то вроде Color Scheme Designer . Потратьте некоторое время на изучение того, как цвета работают вместе, и, как правило, старайтесь выбрать только несколько цветов, не переусердствуйте. Ограничение должно быть около 3 цветов.

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

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

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


+1 за не смешивание стилей. На самом деле я проходил курсы дизайна как часть моего двойного курса, но это все равно не помогает мне выбрать, почему синий против зеленого против красного против ...
ashes999

Ответ DeM0nFiRe отлично справляется с тем, как выбрать тему. Тем временем тема важна для общего дизайна и поможет вам решить, почему синий, зеленый, красный, ярко-розовый. Стоит проверить статьи / книги о теории цвета, правилах и т. Д. Вот статья о правилах цвета, найденная через google: writedesignonline.com/resources/design/rules/color.html
thedaian

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

Да, я думаю, что очень важно подчеркнуть, что вы однажды не проснетесь и не начнете изучать дизайн. Это то, что вы узнаете на опыте.
DeM0nFiRe

"некоторые люди просто ... не так хороши в этом" .. Это очень верно. Я считаю себя исключительно хорошим программистом, но я действительно терплю неудачу в проектировании, и хотя постепенно я становлюсь лучше, прогресс очень медленный. Это всегда беспокоило меня, потому что не позволяло мне быть «независимым», за исключением таких вещей, как разработка серверов (что на самом деле является моей любимой областью, но я отвлекся).
Томас Бонини

2

Отредактированный:

Хорошо, я переписал это, теперь, когда я понимаю вопрос лучше.

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

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

В качестве примера я посмотрю на два изображения, которые вы разместили, и расскажу о впечатлениях от них.

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

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

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


На самом деле не отвечает на мой вопрос. У меня нет проблем при разработке игры, механики, сюжета, фона и т. Д., Но есть такие мелкие вопросы, как тема, выбор цветовой схемы, шрифты, стиль и т. Д. (Даже после двойной специализации в CS и дизайне). У меня действительно нет руководящих принципов "почему X, а не Y" с точки зрения общего внешнего вида. Это то, что я после. Я отредактировал свой вопрос, чтобы уточнить и упростить.
ashes999

Хорошо, я переписал свой пост соответственно
DeM0nFiRe

Отличный ответ, но не отвечает на мой вопрос - как объединить тему и выяснить, что нужно делать для небольших деталей, таких как знание того, какой фон использовать. Игра в химию была только примером.
ashes999

2
Ответ все еще применяется. Первое, что вам нужно сделать, это решить, что вы пытаетесь представить. Почему X, а не Y, потому что X лучше представляет Z. Вы должны решить, что такое Z, тогда вы можете узнать, почему X подходит лучше, чем Y. Вы спрашиваете нас о выборе отдельных частей. Вы не можете решить отдельные части, пока не решили все.
DeM0nFiRe

это должен быть ваш ответ :)
ashes999

1

Это действительно о том, чтобы сделать его красивым? Это субъективная вещь, и мне кажется, что первый скриншот выглядит лучше, чем второй.

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


Смотрите мои правки о выборе синий против зеленого. Это не просто тема, я могу справиться с темой; меня выбирают произвольные решения, такие как цветовая схема.
ashes999

4
Я думаю, что вы ищете ответы в стиле программиста на вопросы в стиле художника. :) Я не думаю, что они будут думать о таком низком уровне, как "синий против зеленого" при выборе цветовой схемы. Вместо этого они выберут целую схему дополнительных цветов, частично основанную на личных предпочтениях и, возможно, на приверженности теме игры, если эта тема по своей сути предполагает цветовую схему.
Килотан

Меня не волнует синий против зеленого. Я забочусь о «Вот как вы
выбираете

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

1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.