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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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