Как стать автором
Обновить

Комментарии 28

НЛО прилетело и опубликовало эту надпись здесь
Добрый день, уважаемый God_root!
Сразу видно что дешевые приемы на вас не действуют.
Думаю что благодаря такой конструктивной критике вы таки сможете заставить большинство дизайнеров открыть для себя всю палитру цветов. Желаю вам удачи на этом нелегком пути, пожалуйста, не сдавайтесь!
Не обращайте внимания на троллей, очень круто!
Как человек всегда получавший трояк по рисованию и технарь по жизни всегда относился к таким вещам как к магии)
Плюса к сожалению не поставлю — не хватает кармы.
НЛО прилетело и опубликовало эту надпись здесь
По поводу дизайна интерфейсов — в Skyforge с очередным обновлением кардинально поменяли интерфейс, после чего было много криков «что за ерунда, поменяйте обратно». Но самое интересное, что первоначальное впечатление со временем поменялось, и то, что вначале казалось некрасивым и не привычным, в итоге стало вполне удобным.
Человек привыкает ко всему.
Особенно если это «все» меняется не каждый понедельник.
Про разработку интерфейса магазина прочитал. Хотелось бы ещё про разработку интерфейса игры почитать.

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

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

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

Классная статья! Спасибо!
Я немного далёк от этой темы, но можете рассказать, как происходит разработка анимаций? Статическая картинка выглядит красиво, но если её взять и перенести в игру "как есть", она наверняка будет выглядеть очень топорно.
Взять, например, конкретный элемент: основную кнопку в ui-ките. Вот эти все квадратики и декоративные элементы вокруг кнопки, они предполагаются как статичные? Или это всё анимировано/двигается/плавает/дрыгается? Если второй вариант, в каком виде это объясняется/отдаётся разработчикам? А переходы между состояниями? Например, ховер подразумевает появление новой рамочки. Она тоже вряд ли должна появляться резко, а анимировать её можно десятками способов (проявляется из своего центра, проявляется из своего внешнего/внутреннего края, проявляется на месте, прилетает снаружи, проявляется из центра кнопки, и так далее). Плюс время анимации, временная функция, и тд...

Добрый день
Если у нас есть достаточно времени и моушн-дизайнер, создание анимации происходит так:


  1. Художник делает концепт, на котором показывает основные состояния анимируемого элемента и переходы между ними.
  2. Концепт передают моушн дизайнеру.
  3. Моушн дизайнер делает анимацию и сохраняет её в виде секвенции — набора кадров, потом передает её программисту.
  4. Программист вставляет секвенцию в игру и настраивает переходы между анимациями.
Лично мне не нравится, когда интерфейс напоминает новогоднюю елку, как в том же мобильном пабге. Куча эффектов, которые не скипаются и тормозят на топовом железе, выглядят по-цыгански, тратят время и нервы и еще друг на друга накладываются. В итоге получается переливающийся экран, любые действия на котором приводят дополнительным переливаниям. Всякие мобильные мморпг также страдают избытками эффектов зачастую.
Интересная статья, особенно классно, что поделились наглядными примерами референсов, спасибо.

Один вопрос — в последнем шаге, про программистов и реализацию, вы пишете конкретные пиксели и размеры в вашем «ките»\«макете». Вопрос — ну очевидно же, что игры играются на 100500 разных разрешениях и, более того, на разных пропорциях экрана. Кажется, что конкретные пиксели указывать это вообще что-то странное. Можно провести аналогию с CSS — вроде как нынче в пикселях разве что всякие border/margin остались, а размеры элементов задаются больше пропорциями экрана или просто адаптивно «автомагически». Можете прокомментировать?
Добрый день, TheGodfather!
Обычно выбирается дефолтное разрешение игры, например, 1920х1080, и все интерфейсы дизайнятся и собираются в нем. А потом макет программно скейлится под 100500 разрешений разных мониторов пользователей.
Ну мы же знаем, что игру из 3:4 на 21:9 нельзя взять и «программно заскейлить». Точнее, можно, но будет убого. Тут опять аналогия с CSS — сам интерфейс может выглядеть немного по-другому. Где-то больше отступов, где-то панельки можно перенести (чтобы занимать больше горизонтального места, а не вертикального, например). Поэтому и спросил, т.к. кажется, что просто масштабирование «в лоб» не особо поможет.
Заскейлить — не значить растянуть. Масштабирование бывает простое — подгонка минимального параметра, и дальше расстановка интерфейса под формат. И сложное, когда элементы масштабируются тоже, под конкретное разрешение и пропорции.

Я недостаточно полно выразился, сейчас разверну.


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


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

Поинтересуюсь как пользователь, раз уж в статье присутствует этот элемент — в чем смысл отдельного окошка/уведомления о покупке предмета которое закрывает весь экран до обязательного подтверждения(клика)?
У этой части интерфейса имеется какая то задумка?
Для чего дизайнер интерфейсов заваливает меня подобными окнами ПОСЛЕ покупки?

Почему в момент покупки просто не перекрасить лот в таблице выбора условно в зеленый цвет, и оповестить звуком и маленьким уведомлением на 5 секунд что транзакция успешна
БЕЗ необходимости кликать на уведомления закрывающие весь экран или его часть

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

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

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

Михаил ответил, но дополню уточняющее-обобщающим ответом — потому что людишки глупые! :) Им пока по глазам не врежешь модалкой, они не заметят мелких изменений в интерфейсе. Этот момент многократно всплывает на тестированиях.
Но при этом я согласен с Ferzian, это дико бесит, особенно если покупаешь несколько вещей сразу. Мне кажется, добавления условной зеленой галочки на иконку, замены цены на «куплено», соответствующего звука и просто всплывающей небольшой нотификашки с краю «Покупка удалась» более чем достаточно, нет нужды делать модальный диалог.
Хорошая статья! Есть только один момент: если вы собираете дизайн в фигме, то программист может в ней же сам посмотреть все расстояния и размеры, зачем делайть гайдлайн? Описать отдельно можно то, что фигма не может показать…
Добрый день!
Согласен с вами — если макет собирается в фигме, то конечно не нужно доп. материалов. Мой макет собирался в фотошопе так как в нем удобнее работать с декоративными элементами, поэтому я решил добавить картинку с размерами.
Спасибо за ответ. Могу еще добавить, что сейчас эту же проблему можно решать с помощью zeplin. Экспортировать из фотошопа макет в zeplin и там уже программисты так же могут все размеры, расстояния и стили брать сами)
Пожалуйста. Если будут какие-то вопросы, пишите — по возможности отвечу. =)
Хорошая статья! Приходите в мой канал, если интересна тема game UI/UX дизайна
t.me/Gamedev_UI_UX
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации