ТЕХНИЧЕСКОЕ ЗАДАНИЕ

Дизайн панели управления игрока для слот-игры

1. Общая информация

2. Цель и контекст

Требуется разработать дизайн панели управления для слот-игры. Панель управления — это нижняя (или нижне-центральная) зона экрана, где игрок управляет ставками и запуском барабанов.

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

Визуальный стиль, цветовая палитра и тема — на усмотрение дизайнера. Приветствуется оригинальный подход.

3. Целевые разрешения

Панель должна быть адаптирована под три разрешения. Для каждого нужны отдельные макеты:

4. Обязательные элементы панели

Ниже перечислены все элементы, которые должны присутствовать в панели управления. Расположение — на усмотрение дизайнера, если явно не оговорено.

4.1 Кнопка Spin (запуск)

• Центральная и самая крупная кнопка панели

• Должна визуально выделяться относительно других элементов

• Стандартное состояние + активное/нажатое состояние

4.2 Управление ставкой (Bet)

• Кнопка «+» (увеличить ставку)

• Кнопка «−» (уменьшить ставку)

• Поле отображения текущей ставки: вмещает 7 цифр + 3 символа валюты (итого ~10 знаков, пример: «1 000 000 FUN»)

4.3 Кнопка Autospin

• Располагается рядом с кнопкой Spin

• При нажатии открывается тултип / выпадающая панель с выбором количества автоматических прокруток

• Варианты: 10 / 25 / 50 / 100

• Активное состояние (автоспин включён) должно визуально отличаться от неактивного

4.4 Кнопка Speed (скорость анимации)

• Располагается рядом с кнопкой Spin

• Два состояния: стандартная скорость и ускоренный режим

• Рекомендуемая иконография: одна молния — стандарт, две молнии — быстрый режим (дизайнер может предложить альтернативу)

• Оба состояния должны быть отрисованы

4.5 Кнопка Menu (меню)

• При нажатии открывает панель / тултип с тремя вложенными кнопками:

• Info — информация об игре / таблица выплат

• Sound — вкл/выкл звука (два состояния)

• Home — возврат на главный экран

💡 Все вложенные кнопки также должны иметь свои иконки и состояния вкл/выкл где применимо.

4.6 Поле Balance (баланс)

• Отображает текущий баланс игрока

• Вмещает 10 цифр + 3 символа валюты (пример: «1 000 000 000 FUN»)

• Должно быть хорошо читаемым при любом фоне

4.7 Поле Total Win (выигрыш)

• Располагается над полем Balance

• Белый шрифт

• Отображается только при выигрыше (в остальное время может быть скрыто или пустым — по решению дизайнера)

• Фронтенд будет реализовывать анимацию: при выигрыше цифра из поля Total Win «опускается» вниз в поле Balance и суммируется. Дизайнеру нужно только показать оба поля в корректном расположении — анимация реализуется программно.

5. Процесс работы и этапы

Работа выполняется в два этапа:

Этап 1 — Концептуальные варианты (wireframe / схематично)

• Дизайнер предлагает несколько вариантов компоновки панели (схематично, без финального визуала)

• Варианты должны отличаться по расположению элементов и/или визуальной концепции

• Достаточно одного разрешения (Desktop) для каждого варианта

• По итогам обсуждения заказчик выбирает один вариант

Этап 2 — Финальный дизайн

• На основе выбранного варианта дизайнер отрисовывает финальные макеты для всех трёх разрешений

• Все состояния кнопок (обычное, нажатое, активное, неактивное)

• Тултипы / панели Autospin и Menu в открытом состоянии

• Поля Total Win + Balance в корректном расположении

6. Результат работы

По завершении дизайнер передаёт:

6.1 Макеты

• Исходные файлы в Figma (предпочтительно) или PSD / XD / Sketch

• Макеты для каждого из 3 разрешений

• Все состояния элементов показаны на отдельных фреймах или с использованием компонентов

6.2 Готовые ресурсы (assets)

• PNG-спрайты всех кнопок и иконок (по состояниям) на прозрачном фоне

• SVG-версии иконок там, где применимо

• Наименование файлов — понятное и структурированное (пример: btn_spin_default.png, btn_spin_active.png)

• Рекомендуемый масштаб: @2x для мобильных

7. Референс

https://www.figma.com/design/HTx30nGQpsmuEAEiyRUpO5/Slot-Machine-Button-Panel-Test--Copy-?node-id=0-1&t=eCzDU3osbdDpM3PT-1

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

Ключевые наблюдения по референсу:

• Кнопка Spin крупная, по центру

• Кнопки Autospin и Speed располагаются по бокам от Spin

• Ставка (−/поле/+) компактно слева

• Баланс — справа

• Меню — отдельная иконка, открывает дополнительные кнопки

• На мобильных версиях — упрощённое расположение с иконками без подписей

8. Дополнительные требования

• Панель не должна перекрывать игровое поле — максимум пространства отдаётся барабанам

• Кнопки должны быть достаточно крупными для комфортного нажатия пальцем на мобильных (минимум 44×44px по рекомендации Apple HIG)

• Цветовая палитра и тема — на усмотрение дизайнера. Отдаётся предпочтение оригинальным решениям

• Все текстовые поля (ставка, баланс) должны быть читаемы на любом фоне (обводка, подложка или тень при необходимости)

• Промежуточная коммуникация в мессенджере / на бирже приветствуется

9. Порядок отклика

В отклике на задачу просим указать:

• Примерные сроки выполнения обоих этапов

• Любые вопросы по заданию

Бюджет фиксированный: $100 за оба этапа.