Разработка указателя мыши для цифровой метавселенной


Указатель мыши уже давно является фундаментальной частью современного интерфейса. Системные указатели Windows и Mac практически не изменились за последние несколько десятилетий. С другой стороны, в видеоиграх есть история переосмысления указателя. Большая часть современных настольных видеоигр использует настраиваемые указатели, брендированные для их игр. Но что нужно для разработки указателя видеоигры, который также работает в интерфейсе, похожем на ОС, таком как Roblox? Roblox — это платформа, на которой пользователи могут создавать и исследовать захватывающий виртуальный опыт. Поскольку оно служит бесшовной метавселенной между играми и опытом, приложение Roblox представило уникальную задачу UX, над которой мне было интересно работать.

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

Проблема

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

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

Указатель мыши Roblox 2012 года. Текстового указателя не было, поэтому вместо него использовался указатель наведения.

Взгляните на указатель Roblox 2012 года. Он пошел в правильном направлении, используя нейтральные оттенки серого. Однако в состоянии наведения использовался черный указатель, который сбивал с толку новых пользователей на компьютере Mac. Еще одна ошибка заключается в том, что плечи стрелки были нарисованы с использованием вертикальной оси, а не оси стрелки. Это означает, что стрелка асимметрична примерно на 6,8%.

Указатель по умолчанию не был симметричен относительно оси стрелки.

Смотреть и чувствовать

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

Указатели мыши из популярных настольных игр. Посмотрите, сколько вы можете узнать!

Указатель Roblox должен не только выглядеть адекватно во всех жанрах опыта, но и дополнять нашу систему дизайна uiBlox. Система дизайна uiBlox в настоящее время использует значки #FFFFFF в темной теме по умолчанию. В нашем стиле используются кривые радиусом 2 пикселя и приблизительное соотношение 3:1 закругленных и квадратных углов в каждой иконке. На создание курсора в виде указывающей руки меня вдохновил наш новый рисунок с эмоциями, нарисованный одним из наших замечательных дизайнеров, Эми Лю.

Слева: стиль иконографии Roblox использует в основном закругленные углы с небольшой резкостью. Справа: дизайн эмоций Roblox от Эми Лю.

Собираем все вместе

Получив отзывы от других дизайнеров, мы разработали окончательный набор указателей для Roblox. Новый указатель по умолчанию теперь симметричен и добавляет хвост стрелки для видимости. Падающая тень обеспечивает современность и глубину в 3D-среде. Новый указатель наведения повышает доступность, делая форму отличной от указателя по умолчанию. Наконец, текстовый указатель меняет форму на курсор #FFFFFF 1px, чтобы придать ему контраст с нашей темной темой. Темный штрих создает видимость нашей светлой темы и других игр Roblox со светлым фоном.

Новые указатели мыши Roblox 2021 года.

Эффективность редизайна зависит от обратной связи с пользователем. Мы опросили 215 разработчиков Roblox, чтобы узнать, что они говорят об этих новых курсорах. Значительное большинство согласилось с тем, что курсоры улучшили как эстетику, так и удобство использования. Самая захватывающая статистика — это реакция наших разработчиков на указатель Text. Из колоссальных 89%, которые согласились, что это общее улучшение, 74% полностью согласились с этим утверждением. Знание того, что наши пользователи положительно реагируют на эти улучшения UX, поможет нам, когда мы будем разрабатывать остальную часть нашего набора указателей, а также другие элементы пользовательского интерфейса в процессе работы.

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

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

Хотите присоединиться к команде Roblox Design и решать подобные проблемы? Проверьте нас на corp.roblox.com/карьера/ для последних возможностей.


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

© 2021 Корпорация Roblox. Roblox, логотип Roblox и Powering Imagination входят в число наших зарегистрированных и незарегистрированных товарных знаков в США и других странах.



Источник: https://blog.roblox.com

Вам может понравиться...

Добавить комментарий