Стили досок

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

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

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

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

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

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

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

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

Пробуем разные варианты интерфейса выбора стиля. Хочется показать его крупно и соблазнительно:

После этого арт‑директор попросил нарисовать «кавер‑флоу» из первых версий Айфона: «Давай прям возьмём его как есть, типа это мы не слизали, а как бы дань уважения классическому великому интерфейсу отдаём. Жалко, что сами Эплы его забыли и не используют, а мы его увековечим»:

Я и не знал, что Илья такой сентиментальный. Ладно:

Отражение в мокром полу решили всё‑таки не делать.

Сразу придумываем динамизировать превьюшки последнего хода и возможных ходов при листании стилей:

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

Платная доска не просто закрыта замком, а прямо тут позволяет себя купить и ведёт на апгрейд:

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

Для того чтобы решить это противоречие, мы показываем на превью досок реальную позицию из игры, чтобы игрок не терял контекст, и не пропустил момент, когда его оппонент сделал ход; мог оценить новый стиль не на каком‑то случайном примере, а на собственной партии. Также мы не рисуем кнопку апгрейда, а говорим игроку, что он сможет апгрейднуться после игры.

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

Презентуем клиенту девять досок и два интерфейсных сценария — выбор стиля из главного меню и во время партии:

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

Также не забываем о ситуации, когда новая доска не в поле зрения. Тогда её бирка показывается отдельно:

Ещё раз проверяем все состояния, исправляем мелкие графические недочёты. Проводим встречу с разработчиками, чтобы объяснить, как устроены доски на уровне переменных, какие состояния мы учли. Обращаем внимание разработчиков на то, что некоторые стили не описывается двумя цветами светлых и тёмных полей, бывают ещё варианты с растровыми изображениями на фоне, с помощью которых реализованы стили Текстбук и Марбл, а также стиль рейтинговой игры.