---
updateDate: 2026-02-10T00:00:00Z
publishDate: 2024-08-15
publishYear: 2021
name: Math
title: Дизайн интерфейса математической игры для школьников
excerpt: Отразили в интерфейсе сценарий математической игры.
context: Миром правит искусственный интеллект, и только школьникам под силу спасти человечество, решая математические задачи. По сюжету игры люди скрываются в заброшенном метро и передвигаются от станции к станции. В каждой локации игрокам нужно зайти на сервер, чтобы захватить эту станцию и двинуться дальше. Серверы защищены хитрым способом — для входа нужно решить несколько задач, которые выдает компьютер. Когда игроки добираются до конечной станции, их ждет неожиданная развязка.
logo:
src: ~/assets/images/portfolio/math/logo.svg
alt: МАРАБУ logo
image: ~/assets/images/portfolio/math/math.png
imageAlt: Дизайн интерфейса математической игры для школьников
thumbnail:
src: ~/assets/images/portfolio/cards/matigra.svg
alt: Собака Павлова • МАРАБУ • Дизайн интерфейса математической игры для подростков
tags:
- ed
- ux-design
- mass
- kids
tags2:
- E-commerce
- Геймификация
- Интерфейс математической игры
- Дизайн интерфейсов
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-дизайн](/ux-design) и [продуктовые исследования](/ux-researches), независимо или [на аутсорсе](/ux-outstaff).
collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать удобные интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: pushkin-digital
- collection: portfolio
page: prozhito
- collection: portfolio
page: gazprom-services
- collection: portfolio
page: jetlearn
- collection: portfolio
page: omnitopic
- collection: portfolio
page: korochka
- collection: portfolio
page: tigitl
- collection: portfolio
page: zombieland
result:
- src: ~/assets/images/portfolio/figma.svg
text: Финальные макеты
link: https://www.figma.com/proto/MFYzAZLSZwk1MFlzUnhAaD/%D0%9C%D0%B0%D1%82.%D0%B8%D0%B3%D1%80%D0%B0-%5BOutbox%5D?node-id=887%3A44702&scaling=min-zoom&page-id=887%3A44702&starting-point-node-id=888%3A60452&show-proto-sidebar=1
budget: ~ 500 000 ₽
director: Интерфейс образовательной игры — нетипичная задача, а вот подход к ее решению вполне укладывается в нашу методологию.
metadata:
canonical: https://sobakapav.ru/portfolio/math
title: Геймификация • Интерфейс математической игры для школьников
description: "Отразили в интерфейсе сценарий математической игры"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/math/math.png'
width: 1680
height: 938
---
import TOC from '~/components/widgets/TOC.astro';
<TOC>
[Вводные](#anchor1) • [Дизайн-задача](#anchor2) • [Процесс](#anchor3) • [Результат](#anchor4) • [Цены и сроки](#anchor5)
</TOC>
## <a name="anchor1" />Вводные
### Рынок онлайн-образования растет
Наиболее продвинутые участники понимают, что оцифровки офлайновых заданий недостаточно.
Нужно искать новые механики вовлечения и мотивации, нивелировать недостатки и усиливать сильные стороны онлайна.
_Открывающие титры игры_
## <a name="anchor2" />Дизайн-задача
### Четкого представления об интерфейсе у заказчика еще не было
Нам нужно было вместе найти решения на стыке продукта и интерфейсов. Это не похоже на пошаговое проектирование интерфейса по четкой постановке. Здесь схема другая. Заказчик формирует видение того или иного куска интерфейса, мы визуализируем это, заказчик смотрит и принимает решение — брать или переделать.
1. Сначала мы отрисовали GUI-интерфейс компьютера в каждой локации. Затем поняли, что функционально он дублирует интерфейсные элементы всего игрового поля, и интерфейс компьютера предельно упростился.
_Комната. Интерфейс компьютера_
2. Изначально заказчик планировал сделать чат внутри игры, а потом решил использовать вместо него Дискорд. Оба варианта мы визуализировали, чтобы проиллюстрировать интерфейсную разницу. В итоге выбрали первый вариант — встроенный чат.
3. Карта серверов сложилась не сразу, перебрали множество цветовых схем и вариантов иконок. Не сразу приняли решение, как игрок перемещается по локациям — просто переходит при клике на интерактивную карту или путешествует на поезде.
_Комната. Переход на карту интерфейсов_
4. Подобрали референсы и предложили несколько вариантов стилистики.
_Некоторые референсы_
## <a name="anchor3" />Процесс
### Фиксация сценариев помогает найти нужные решения
Работа не была хаотичной. В самом начале мы подготовили пользовательские сценарии. По ходу работы они менялись и дополнялись, но все равно в любой момент времени у нас были более-менее четкие требования к действиям пользователя. А вот в том, как эти действия отразить в игровом формате, и заключался продуктовый поиск.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
### Придумали конструктор иллюстраций и отказались от него
Основной интерфейс игры — комната на станции метро, в которой стоят компьютеры. Визуально комнаты на разных станциях должны хотя бы немного различаться. Мы предложили использовать конструктор, состоящий из набора нарисованных объектов: их можно быстро и по-разному расставлять по комнате, менять цвет комнат, угол обзора и источники света.
_Конструктор иллюстраций_
Заказчику понравился этот вариант: он позволял быстро создавать много разных комнат без дополнительных затрат и графических навыков, а также соответствовал минималистичному стилю, выбранному им вначале.
_Конструктор иллюстраций_
Впрочем, по ходу работы требования к стилистике поменялись. Комнаты должны выглядеть более интересно, разнообразно, художественно. Нужны визуальные элементы и прорисованные разрушения, чтобы помещения выглядели заброшенными. Тут уже конструктором не обойтись, поэтому мы нашли иллюстратора, который каждый раз будет рисовать комнату с нуля.
_Конструктор иллюстраций_
## <a name="anchor4" />Результат
### Через методичный поиск решений пришли к уверенном результату
В несколько итераций создали структуру, включающую экран монитора компьютера, профиль игрока, сайдбар с постоянными элементами, титры, рассказывающие предысторию игры, хелп-бота.
Все баллы, награды и подсказки, которые игрок получает по ходу игры, складируются у него в инвентаре.
_Инвентарь_
Небольшой онбординг рассказывает об основных элементах игры: наводишь на них мышь и получаешь необходимую информацию.
_Онбординг_
_Онбординг_
_Онбординг_
_Онбординг_
Математические задачи интегрированы в сюжет так: для входа на сервер игроку нужно решить математическую капчу.
Решил — молодец, получи письмо от загадочного Алекса, в котором он расскажет, что нужно делать дальше.
## <a name="anchor5" />