Онлайн‑гейминг

Изучаем графику, фотки и атмосферу турниров Ворлд Чесса, чтобы сохранить стиль.

Графика Ворлд Чесса — контрастная чёрно‑белая.

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

Накидываем первые варианты онлайн‑гейминга. Ищем положение, цвета, размер доски, стиль фигур, меню и игроков. Подбираем контрастную, но в то же время комфортную для глаз палитру для полей:

Фигуры получаются слишком чёрными. Пробуем сделать их объёмными, деревянными. Добавляем блики, чтобы их лучше было видно.

У Ворлд Чесса есть свои фигуры для экрана, которые они используют на сайте в трансляциях турниров. Мы пробуем рисовать и с ними, и со своими из шрифта «Авербах», который используется в книге «Путешествие в шахматное королевство». Поначалу в макетах пешки временно были другие, а не из шрифта «Авербах», потом от них отказались:

Просим у клиента 3Д‑модели настоящих официальных фигур и пробуем поставить их на доску:

Не нравится.

Ещё пробуем передать цвета полей штриховкой, тоже как в книге:

Нравится, как выглядит, но не хватает контраста. Приберегаем на будущее.

Варианты:

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

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

Через несколько часов после презентации клиент пишет в Телеграм приятное сообщение:

Заодно клиент обращает внимание, что фигуры мелковаты. Делаем крупнее:

Придумываем, что для игр с официальным рейтингом ФИДЕ будет использоваться другой стиль оформления. Предстоит долгий поиск цвета и обводки фигур, чтобы всё смотрелось хорошо.

Параллельно работаем над мобильной версией:

Сначала пытаемся разместить нотацию в строку, но потом находим ей место сверху.

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

Придумываем, что меню появляется при наведении на левую часть экрана. Время на клик не теряется:

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

Но в итоге отказываемся от лишних спецэффектов и делаем финал более информативным.

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

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

Добавляем в выбиралку рейтинга оппонента красную точку с числом — рейтинг самого игрока:

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

Для этого же мы придумали подсовывать мотивирующие карточки в конце игры. Они объясняют, какие преимущества получит игрок, если зарегистрируется и оплатит подписку.

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

Придумываем показывать одинаковые взятые фигуры не числом, а специальными сдвоенными иконками фигур:

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

Одна из задач, которые дались не сразу, — меню на мобиле. На десктопе у нас два меню: меню самого сайта, которое появляется при наведении курсора на верхную часть страницы, и меню игры слева. При этом первый пункт меню сайта — это традиционный логотип, ведущий на главную. Меню игры тоже прячется слева за логотипом, а в ФИДЕ‑играх — за двумя логотипами:

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

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

Мы пробовали спрятать меню игры за шестиугольной иконкой из точек внизу экрана:

Мозг фоново кипел пару недель, пока мы работали, но в итоге решение нашлось — логотип в углу открывает единое меню всего:

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

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

Дорабатываем стиль интерфейса для официальных игр ФИДЕ:

Продумываем, как должен тянуться интерфейс в окнах разной ширины и высоты.

Рисуем подробные схемы для разработчиков:

Готовим библиотеку контролов во всех состояниях:

Передаём макеты в Фигме в разработку.

Управляем разработкой, пишем замечания и следим за результатом.