Следующие рекомендации по дизайну помогут обеспечить оптимальные условия для пользователей, играющих в вашу игру на YouTube на разных устройствах и платформах.
Помимо компонентов операционной системы, Playables в основном состоит из трех компонентов:
- Действия с игровыми объектами
- Игровое полотно
- Меню и диалоги
Эти лучшие практики игрового дизайна содержат рекомендации о том, как создать игру для игрового поля.
Изменение размера игры
Следуя этим рекомендациям, убедитесь, что игры правильно адаптируются к различным размерам и ориентациям экрана.
Измените размер игры и адаптируйте пользовательский интерфейс к размеру и соотношению сторон холста.
Используйте пилларбокс или леттербокс, если игра не может полностью реагировать на размер и соотношение сторон игрового холста.
Избегайте запуска полос прокрутки. Полосы прокрутки негативно влияют как на игровой процесс, так и на общую навигацию. Заполните холст, не приводя к тому, что игра станет прокручиваемой внутри холста. Полосы прокрутки подходят для преднамеренной прокрутки, например, при прокрутке длинного вертикального списка в пользовательском интерфейсе игры. В идеале игры полностью отвечают за область просмотра.
Масштабирование игры
Четкая визуализация (не размытая, не пиксельная и не растянутая) при различных разрешениях экрана.
Убедитесь, что пользовательский интерфейс игры (тексты, значки) масштабируется соответствующим образом при отображении как на экранах с более низким разрешением (например, на мобильных устройствах 360x800), так и на экранах с более высоким разрешением (например, на настольных мониторах 3840x2560).
Избегайте растровых ресурсов с низким разрешением, которые выглядят размытыми при масштабировании на большие экраны.
Типография
Обеспечьте читаемость на разных устройствах и размерах экрана.
Тексты, появляющиеся в игре, такие как кнопки, меню и всплывающие сообщения, должны быть разборчивыми на разных устройствах и размерах экрана. Этого можно достичь, автоматически масштабируя и адаптируя текст или предлагая пользователям настройку размера шрифта.
Если размер текста меньше 18 пунктов или если текст выделен жирным шрифтом и размером менее 14 пунктов, установите коэффициент цветового контраста как минимум 4,5:1.
Для всего остального текста установите коэффициент цветового контраста не менее 3:1.
Общие сведения см. в WCAG2.1 .
 |  |
| Используйте крупный шрифт с достаточной жирностью и контрастностью для удобочитаемости. В этом примере коэффициент контрастности составляет 4,48:1. | Избегайте мелкого размера шрифта и низкоконтрастных цветов. В этом примере коэффициент контрастности составляет 3,07:1. |
Взаимодействие
В этом разделе рассматриваются лучшие практики взаимодействия с пользователем и связанных с ним элементов.
Сенсорные цели
Сделайте сенсорные объекты достаточно большими для облегчения взаимодействия.
Для облегчения взаимодействия убедитесь, что сенсорные объекты имеют размер не менее 48x48 dp и расстояние между ними не менее 8 dp (см. Рекомендации по дизайну материалов ).
В этом примере визуально визуализируемая кнопка имеет размер 24 dp, а невидимая цель касания включает 12 dp вокруг значка для достижения целевого размера касания 48 x 48 dp.
Добавьте отступы вокруг значков и кнопок, чтобы увеличить размер сенсорной цели.
Кнопки
Используйте уникальные стили для каждого состояния кнопки:
- Включено
- Неполноценный
- Наведение (для устройств без сенсорного ввода)
- Сосредоточенный
- Прессованный
Также постарайтесь дифференцировать кнопки по иерархии. Например, основные и второстепенные кнопки действий в меню «Пуск» (см. Рекомендации по дизайну Google Material 2 для кнопок ).
Уникальные стили, которые различают состояние каждой кнопки.
Ввод с клавиатуры
Чтобы повысить доступность игры для разных устройств и пользователей, поддержите ввод с клавиатуры для всех элементов управления игровым процессом и экранной навигации в дополнение к сенсорному вводу и вводу с помощью мыши.
В играх, поддерживающих ввод с клавиатуры, разрешите пользователям закрывать любые внутриигровые меню и диалоги с помощью клавиши Esc . Это в дополнение к наличию кнопки визуального закрытия (например, значка X в верхнем углу). Типичными примерами модальных окон или диалоговых окон являются меню «Настройки» , меню «Пауза» , сообщения об ошибках и всплывающие окна с справочной информацией.
Избегайте сопоставления каких-либо действий с длительным нажатием клавиши Esc , поскольку она используется для выхода из полноэкранного режима в настольных веб-браузерах.
Для игр, в которых зарегистрированы прослушиватели нажатия клавиш: не используйте preventDefault() с событиями клавиши Esc . В полноэкранном режиме Safari это приводит к тому, что событие нажатия клавиши используется игрой без выхода из полноэкранного режима.
Гаптика
При необходимости рекомендуется использовать тактильную обратную связь (вибрацию), чтобы сделать ваши игры более увлекательными и захватывающими.
Ключевые игровые моменты
В этом разделе рассматриваются ключевые моменты игры, которые создают незабываемые впечатления для игрока.
Руководство
Включите краткое руководство или вводный уровень, чтобы помочь новым игрокам.
Онбординг гарантирует, что пользователи изучат базовый игровой процесс и основы игры, чтобы продолжить игру и получать от нее удовольствие.
Поскольку Playables призваны быть быстрыми и доступными для пользователей, чтобы начать играть, постарайтесь свести обучение к минимуму. Хотя не для всех игр требуется обучение, большинство игр выигрывают от той или иной формы обучения. Рассмотрим ключевые механики, правила и навыки, которые необходимо знать игроку, чтобы успешно играть и получать удовольствие от игры.
Мастер-классы могут быть в следующем формате:
- Набор экранов в начале игры (или, в идеале, представленных контекстно на протяжении всей игры, когда это необходимо)
- Фактический уровень обучения, который проходит пользователь.
Пауза
Четко сообщайте пользователю о состоянии игры.
Четко сообщите пользователю, когда игра приостановлена и как пользователь может возобновить игру. Не позволяйте пользователю думать, что игра зависла или вылетела.
Четко обозначьте состояние игры как «приостановлено» и предоставьте четкое действие (кнопку) для возобновления игры.
Конец игры
Сообщите пользователю, что он прошел последний уровень или завершил игру.
Если у игры есть определенный конец (например, конечное количество уровней), четко сообщите об этом пользователю. Это позволяет пользователю не думать, что игра сломана или зависла. В идеале игра празднует и поздравляет игрока с завершением игры.
Аудио
Игра может содержать отдельные регуляторы громкости эффектов, речи и фоновой музыки. Элементы управления могут состоять из ползунков для регулировки громкости или отключения звука для каждого или обоих.
Доступность
Доступность дизайна позволяет пользователям с разными способностями играть и получать удовольствие от вашей игры.
В отличие от дизайна веб-сайтов и программного обеспечения, для игрового дизайна не существует стандартных отраслевых рекомендаций по обеспечению доступности. Хороший ресурс с дополнительными рекомендациями по инклюзивному игровому дизайну можно найти в разделе «Рекомендации по обеспечению доступности игр» . Мы рекомендуем вам подумать о том, как эти рекомендации можно применить к дизайну вашей игры.
,Следующие рекомендации по дизайну помогут обеспечить оптимальные условия для пользователей, играющих в вашу игру на YouTube на разных устройствах и платформах.
Помимо компонентов операционной системы, Playables в основном состоит из трех компонентов:
- Действия с игровыми объектами
- Игровое полотно
- Меню и диалоги
Эти лучшие практики игрового дизайна содержат рекомендации о том, как создать игру для игрового поля.
Изменение размера игры
Следуя этим рекомендациям, убедитесь, что игры правильно адаптируются к различным размерам и ориентациям экрана.
Измените размер игры и адаптируйте пользовательский интерфейс к размеру и соотношению сторон холста.
Используйте пилларбокс или леттербокс, если игра не может полностью реагировать на размер и соотношение сторон игрового холста.
Избегайте запуска полос прокрутки. Полосы прокрутки негативно влияют как на игровой процесс, так и на общую навигацию. Заполните холст, не приводя к тому, что игра станет прокручиваемой внутри холста. Полосы прокрутки подходят для преднамеренной прокрутки, например, при прокрутке длинного вертикального списка в пользовательском интерфейсе игры. В идеале игры полностью отвечают за область просмотра.
Масштабирование игры
Четкая визуализация (не размытая, не пиксельная и не растянутая) при различных разрешениях экрана.
Убедитесь, что пользовательский интерфейс игры (тексты, значки) масштабируется соответствующим образом при отображении как на экранах с более низким разрешением (например, 360x800 мобильных устройств), так и на экранах с более высоким разрешением (например, 3840x2560 настольных мониторов).
Избегайте растровых ресурсов с низким разрешением, которые выглядят размытыми при масштабировании на большие экраны.
Типография
Обеспечьте читаемость на разных устройствах и размерах экрана.
Тексты, появляющиеся в игре, такие как кнопки, меню и всплывающие сообщения, должны быть разборчивыми на разных устройствах и размерах экрана. Этого можно достичь, автоматически масштабируя и адаптируя текст или предлагая пользователям настройку размера шрифта.
Если размер текста меньше 18 пунктов или если текст выделен жирным шрифтом и размером менее 14 пунктов, установите коэффициент цветового контраста как минимум 4,5:1.
Для всего остального текста установите коэффициент цветового контраста не менее 3:1.
Общие сведения см. в WCAG2.1 .
| |
| Используйте крупный шрифт, достаточно насыщенный и контрастный для удобочитаемости. В этом примере коэффициент контрастности составляет 4,48:1. | Избегайте мелкого размера шрифта и низкоконтрастных цветов. В этом примере коэффициент контрастности составляет 3,07:1. |
Взаимодействие
В этом разделе рассматриваются лучшие практики взаимодействия с пользователем и связанных с ним элементов.
Сенсорные цели
Сделайте сенсорные объекты достаточно большими для облегчения взаимодействия.
Для облегчения взаимодействия убедитесь, что сенсорные объекты имеют размер не менее 48x48 dp и расстояние между ними не менее 8 dp (см. Рекомендации по дизайну материалов ).
В этом примере визуально визуализируемая кнопка имеет размер 24 dp, а невидимая цель касания включает 12 dp вокруг значка для достижения целевого размера касания 48 x 48 dp.
Добавьте отступы вокруг значков и кнопок, чтобы увеличить размер сенсорной цели.
Кнопки
Используйте уникальные стили для каждого состояния кнопки:
- Включено
- Неполноценный
- Наведение (для устройств без сенсорного ввода)
- Сосредоточенный
- Прессованный
Также постарайтесь дифференцировать кнопки по иерархии. Например, основные и второстепенные кнопки действий в меню «Пуск» (см. Рекомендации по дизайну Google Material 2 для кнопок ).
Уникальные стили, которые различают состояние каждой кнопки.
Ввод с клавиатуры
Чтобы повысить доступность игры для разных устройств и пользователей, поддержите ввод с клавиатуры для всех элементов управления игровым процессом и экранной навигации в дополнение к сенсорному вводу и вводу с помощью мыши.
В играх, поддерживающих ввод с клавиатуры, разрешите пользователям закрывать любые внутриигровые меню и диалоги с помощью клавиши Esc . Это в дополнение к наличию кнопки визуального закрытия (например, значка X в верхнем углу). Распространенными примерами модальных окон или диалоговых окон являются меню «Настройки» , меню «Пауза» , сообщения об ошибках и всплывающие окна справочной информации.
Избегайте сопоставления каких-либо действий с длительным нажатием клавиши Esc , поскольку она используется для выхода из полноэкранного режима в настольных веб-браузерах.
Для игр, в которых зарегистрированы прослушиватели нажатия клавиш: не используйте preventDefault() с событиями клавиши Esc . В полноэкранном режиме Safari это приводит к тому, что событие нажатия клавиши используется игрой без выхода из полноэкранного режима.
Гаптика
При необходимости рекомендуется использовать тактильную обратную связь (вибрацию), чтобы сделать ваши игры более увлекательными и захватывающими.
Ключевые игровые моменты
В этом разделе рассматриваются ключевые моменты игры, которые создают незабываемые впечатления для игрока.
Руководство
Включите краткое руководство или вводный уровень, чтобы помочь новым игрокам.
Онбординг гарантирует, что пользователи изучат базовый игровой процесс и основы игры, чтобы продолжить игру и получать от нее удовольствие.
Поскольку Playables призваны быть быстрыми и доступными для пользователей, чтобы начать играть, постарайтесь свести обучение к минимуму. Хотя не для всех игр требуется обучение, большинство игр выигрывают от той или иной формы обучения. Рассмотрим ключевые механики, правила и навыки, которые необходимо знать игроку, чтобы успешно играть и получать удовольствие от игры.
Мастер-классы могут быть в следующем формате:
- Набор экранов в начале игры (или, в идеале, представленных контекстно на протяжении всей игры, когда это необходимо)
- Фактический уровень обучения, который проходит пользователь.
Пауза
Четко сообщайте пользователю о состоянии игры.
Четко сообщите пользователю, когда игра приостановлена и как пользователь может возобновить игру. Не позволяйте пользователю думать, что игра зависла или вылетела.
Четко обозначьте состояние игры как «приостановлено» и предоставьте четкое действие (кнопку) для возобновления игры.
Конец игры
Сообщите пользователю, что он прошел последний уровень или завершил игру.
Если у игры есть определенный конец (например, конечное количество уровней), четко сообщите об этом пользователю. Это позволяет пользователю не думать, что игра сломана или зависла. В идеале игра празднует и поздравляет игрока с завершением игры.
Аудио
Игра может содержать отдельные регуляторы громкости эффектов, речи и фоновой музыки. Элементы управления могут состоять из ползунков для регулировки громкости или отключения звука для каждого или обоих.
Доступность
Доступность дизайна позволяет пользователям с разными способностями играть и получать удовольствие от вашей игры.
В отличие от дизайна веб-сайтов и программного обеспечения, для игрового дизайна не существует стандартных отраслевых рекомендаций по обеспечению доступности. Хороший ресурс с дополнительными рекомендациями по инклюзивному игровому дизайну см. в разделе «Правила доступности игр» . Мы рекомендуем вам подумать о том, как эти рекомендации можно применить к дизайну вашей игры.