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

Второй момент — это уже художественная сторона. Попадает ли UI в арт-дирекшен? Придерживается ли он заданной темы и тона? Например, очень люблю интерфейс в Nier: Automata и в Diablo III, — при этом понятно, что интерфейс из Nier будет неуместно смотреться в Diablo, и наоборот.

По каким ошибкам можно вычислить новичка?

Самая частая ошибка — начинать сразу с чистовика. Не с простой схемы, не с блокаута — а прямо с «финального варианта». Такой подход часто выдаёт новичков.

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

Бывают композиционные ошибки: например, предоставил слишком мало места под текст, не учёл локализацию, расположил смысловые блоки слишком далеко друг от друга и прервал логическую близость.

Понравилась статья?

Хочешь получать лучшие статьи
от XyZ раз в неделю?

Подпишись на рассылку XyZ

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

Интервью: как создавали симулятор короля Yes, Your Grace

Геймдизайнеру и художнику Рафалю Бриксу понадобилось шесть лет, чтобы довести до ума визуальный стиль Yes, Your Grace — изначально ему недоставало навыков рисования, и…

Алексей Луцай задал вопросы Елене Альт, художнице уровней в «Мор» (2019) и Atomic Heart

Елена Альт рассказала о пути в индустрию, задачах, необычных дизайн-документах Ice-Pick Lodge, работе с Дыбовским и повествовании через окружение.

Кто такой UI-дизайнер — ArtCraft Media

UI-дизайнер — это такая должность, которая звучит максимально непонятно. А если еще и загуглить, то глаза совсем на лоб лезут: внезапно выясняется, что бывает еще всякое UX и, не приведи господь, даже UX/UI. В общем, что-то на программистском: проще побрызгать святой водой и отойти, чем пытаться в этом всем разобраться.

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

Вообще мы каждый день сталкиваемся с примерами UI-дизайна. Листаешь ли ты TikTok, играешь в компьютерную игру или смотришь сериал на Netflix — ты неизбежно сталкиваешься с результатами работы UI-дизайнеры. Иногда хорошими, а иногда — не очень.

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

Часто о UI говорят в связке с UX, и многие путают эти понятия. UX — это «user experience», или пользовательский опыт. Представь, что ты хочешь испечь пирог. Для начала тебе нужно выбрать температуру и вид нагревания. Так вот, поворачиваешь ты при этом ручку или нажимаешь на табло, решает UX-дизайнер. А что именно показывает табло и какой формы ручка — это UI.

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

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

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

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

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

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

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

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

Еще один пример неудачного UI — интерфейс, не продуманный на разных языках. Так, мессенджер Discord замечательно и понятно выглядит на английском языке. Но при переключении на русский он выдает новому пользователю обучающие подсказки (что само по себе хорошо), не влезающие в текстовый баббл. И лаконичное «OK» в английском варианте приложения превращается в таинственное «Яс…» в русскоязычном интерфейсе. В итоге человеку, не умеющему работать в Discord, может быть очень непросто разобраться с управлением.

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

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

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

1. The 4 Golden Rules of UI Design | Adobe XD Ideas
2. Профессия UI-дизайнер: что делает дизайнер интерфейсов
3. Работа художника интерфейсов в 13 вопросах
4. What Does A UI Designer Actually Do? An Expert Explains
5. UI Designer
6. What Exactly is a Game UI Artist? — Prattatatat — Pixels and Polygons from Dan Pratt

Статья обновлена 11 июля 2023

Pokémon Go заработала в пандемию на $400 миллионов больше обычного: вот как им это удалось

Игра для смартфонов Pokemon Go адаптировалась к новой реальности и вышла из пандемии с выручкой в $1,3 миллиарда. ArtCraft Media рассказывает, как у них это получилось.

UI дизайн UI-дизайнер UI-художник интерфейс дизайн интерфейсов пользовательский интерфейс

Что такое художник игрового интерфейса? — Prattatat

Дизайн пользовательского интерфейса для игр традиционно недооценивали и упускали из виду, но это чрезвычайно важная часть для многих игр. К счастью, это меняется! Поскольку я уже довольно давно занимаюсь интерфейсами для игр, я заметил, что существует не так много ресурсов о , что именно делает художник игрового пользовательского интерфейса и , кто может подойти на роль . Я хочу это изменить! Я собираюсь поделиться некоторыми мыслями о том, что я вижу в роли дизайнера игрового пользовательского интерфейса и кто может отлично подойти для этой карьеры. И чтобы дать вам представление о том, откуда я родом, я делаю игры (в основном пользовательский интерфейс) в течение последнего десятилетия для всех видов платформ (консольные, мобильные, браузерные) и принимал непосредственное участие в найме более года.

Прежде чем начать, я хочу прояснить некоторые возможные недоразумения. При просмотре списков вакансий вы можете заметить некоторые расхождения в названиях должностей… UI-художник, UI-дизайнер, UI/UX-художник и т. д.! Какая разница? Есть ли разница? Мы рассмотрим это через мгновение, но с этого момента я буду называть эту роль просто UI Designer .

Итак, если вас интересует вышесказанное, читайте подробнее ниже !

Краткое введение

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

«Дизайнер пользовательского интерфейса, проектирует, строит и реализует все аспекты графического интерфейса игры. От первоначальных пользовательских схем и прототипов каркасов до окончательных внутриигровых макетов, интерактивных и графических компонентов, анимации перехода и эффектов с упором на качество, инновации, интеграцию и простоту использования». — Роб Моук

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

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

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

Чем отличается пользовательский интерфейс от UX

Вы будете часто слышать термины UI и UX при работе с интерфейсами. Важно отметить, что эти термины имеют два разных значения (и люди часто понимают их неправильно). Я собираюсь предложить очень короткое объяснение, но ознакомьтесь с этой статьей, если вам нужно более подробное объяснение.

UI (пользовательский интерфейс) , в простейшей форме, обычно относится к визуальным элементам интерфейса. Думайте об этом как о стиле, цветовой палитре, текстуре и т. д. Мне нравится говорить, что это слой краски, который видит игрок, когда смотрит на интерфейс вашей игры.

UX (User Experience) относится к тому, как игрок взаимодействует с интерфейсом и насколько приятным может быть это взаимодействие. Например, знает ли игрок, куда нажимать/перемещаться? Получают ли они правильное количество обратной связи для конкретного действия? Все это помогает сделать интерфейс интуитивно понятным и приятным в мелочах.

Обязанности

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

• Создание пользовательских потоков
• Каркасные экраны
• Сбор ссылок
• Изучение стиля пользовательского интерфейса (повседневный, плоский, физический, соответствие существующему и т. д.)
• Взаимодействие с прототипом 
• Создание кнопок , виджеты, значки
• Подготовка пользовательского интерфейса
• Импорт и настройка ресурсов пользовательского интерфейса (Unity, Unreal, Scaleform и т.  д.)
• Анимация ресурсов пользовательского интерфейса (Flash, After Effects, In-Engine)
• Документирование рабочих процессов
• Выбор и редактирование типографики

Инструменты и технологии

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

• Adobe Creative Suite (Photoshop, Illustrator, Flash, After Effects)
• Программное обеспечение для моделирования (3DS Max, Maya и т. д.)
• Игровые движки (Unity, Unreal и т. д.)
• Прототипирование (Axure, Adobe Experience Design и т. д.)

Я понимаю, что это большой список приложений, которые у меня есть . Я бы посоветовал очень свободно владеть несколькими ключевыми (скажем, Photoshop, 3DS Max и Unity), но хорошо разбираться в других. Как говорится, знание – сила.

Черты дизайнера пользовательского интерфейса

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

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

Все еще заинтересованы? Хороший!

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

• Изучите основы своего искусства (рекомендуется формальное образование)
  • Курсы по графическому дизайну, промышленному дизайну, психологии и 3D-моделированию дадут вам хороший выбор Дизайнер пользовательского интерфейса
    • Бонусные баллы за демонстрацию «мышления», стоящего за вашими решениями, мне нравится видеть каркасы и обозначения в проектах
    • Добавление движения в вашу работу — это здорово
  • Сеть, сеть, сеть!

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

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

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

   

  Как стать художником пользовательского интерфейса для видеоигр

  Это одно из более чем 30 интервью с профессиональными разработчиками игр. Для получения дополнительной информации посетите страницу Какая игровая работа подходит именно вам?.

  Познакомьтесь с Тамарой Кносс, UI/UX художником

  Это Тамара, и она надеется, что вы не заметите ее работу.

  Тамара активно работает в игровой индустрии более десяти лет. Ее ранняя работа была связана с Nintendo Game Boy Advance в качестве 2D-аниматора. Совсем недавно она была ключевым художником по взаимодействию с пользователем (UI) и дизайнером пользовательского опыта (UX) в ряде игр, включая Battle Nations , Deer Hunter Reloaded , Samurai vs Zombies Defense 2 и Шиноби 3DS .

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

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

  Всего несколько предложений? Жестко, мужик!

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

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

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

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

  Как вы пришли к работе UI/UX Artist?

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

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

  Что вам больше всего нравится в работе?

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

  Что насчет самой нелюбимой части?

  Ощутимая боль от разочарования от того, что ваша работа «почти, но не совсем» соответствует вашим представлениям.

  Это тот волшебный момент, когда вы смотрите на экран и он впервые становится «настоящей игрой».

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

  Какой аспект работы удивил бы людей, наблюдающих за ней со стороны?

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

  Пользовательский интерфейс имеет чрезвычайно высокий профиль для мгновенной критики на всех этапах разработки, и у КАЖДОГО есть ДЕЙСТВИТЕЛЬНОЕ мнение. Каждый, кто дает вам обратную связь, говорит о своем опыте пользователя, и они не ошибаются. (Хотя они могут быть в 1 процентиле пользователей, и они могут представить это как придурок, но они не ошибаются.) Вы должны принимать много критики от людей, которые не научились правильно критиковать , и вы должны научиться принимать это изящно. Задача состоит в том, чтобы найти гармоничные компромиссы, подходящие для продукта.

  Какие таланты и личность нужны, чтобы преуспеть в этой работе?

  Эмпатия, мужество убеждений, всплеск ОКР (идеальный пиксель!), и толстая кожа.

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

  Какой совет вы бы дали школьникам, которые думают о UI/UX Art как о своей карьере?

  Если вы заинтересованы в создании пользовательского интерфейса, я бы порекомендовал вам, помимо традиционных занятий изобразительным искусством, графическим дизайном и даже анимацией, изучить UX-дизайн. Взаимодействие человека с компьютером. Изучайте CSS, HTML, JavaScript — возможно, даже некоторые полнофункциональные языки программирования. Чем большей универсальностью и силой вы обладаете, тем больше у вас будет возможностей для реализации своего видения. Не говоря уже о том, что вы будете более желанны для потенциальных работодателей.

  Что бы вы порекомендовали для образования, книг или другого обучения, чтобы начать карьеру в искусстве UI/UX?

  Часто говорят, что лучший пользовательский интерфейс остается незамеченным. Это потому, что, если все сделано правильно, UI/UX может превратиться в интуитивно понятное существование пользователя в этом мире — настолько хорошо, что вы даже не думаете об этом. Обратите внимание на UI/UX во всем, что вы видите. Это действительно везде. Посмотрите на веб-сайты, консольные игры ААА, приборную панель автомобиля, микроволновую печь, упаковку жевательной резинки.

  Обращайте внимание на UI/UX во всем, что видите. Это действительно везде.

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

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

  Существует множество книг, эссе и блогов, которые можно читать.