Перейти к содержанию

Artifacts & Stones — UI/UX handoff

Краткое описание четырёх экранов для UI/UX-дизайнера. Документ фиксирует актуальную структуру и поведение интерфейса без технических деталей реализации.

1. Назначение раздела

Раздел позволяет игроку:

  • выбирать и улучшать артефакты;
  • читать встроенный эффект артефакта World Law;
  • видеть постоянный пассивный бонус артефакта;
  • управлять шестью камнями артефакта;
  • фильтровать коллекцию камней по типу сокета;
  • просматривать, устанавливать, заменять и улучшать камни.

Одновременно используется один артефакт. Установленные камни относятся к общему loadout и сохраняются при смене артефакта.

2. Общий каркас

  • Целевой Unity Canvas: 1290 × 2796, portrait.
  • Вверху находится игровой заголовок ARTIFACT.
  • В центре — содержимое текущей вкладки.
  • Внизу контентной области — однострочный горизонтальный Scroll View.
  • В самом низу — вкладки ARTIFACTS и STONES.
  • Активная вкладка подсвечена штатным игровым состоянием.
  • Переключение вкладок не закрывает раздел и сохраняет выбор и позицию списков.
  • Стандартные подложки, рамки, вкладки, кнопки, dropdown и progress bars необходимо брать из Unity-проекта.

Важно различать три состояния:

  • Selected — объект выбран для просмотра;
  • Equipped / In Use — объект реально используется;
  • Upgradeable — накоплено достаточно копий или шардов.

Эти состояния не должны обозначаться одной и той же рамкой.

3. Экран 1 — Artifacts

Центральная часть

В центре показывается выбранный артефакт.

Обязательные элементы:

  1. Название артефакта.
  2. Крупное изображение.
  3. Текущий уровень: максимум три уровня.
  4. Раздел WORLD LAW с полным описанием правила.
  5. Раздел ARTIFACT PASSIVE EFFECT.
  6. Прогресс шардов или дубликатов артефакта.
  7. Кнопка UPGRADE.

World Law

World Law — уникальное правило, вшитое в конкретный артефакт. Оно не является отдельным предметом и не переставляется между артефактами. Работает только правило надетого артефакта.

World Law должен описываться текстом как изменение правил билда, а не как обычный числовой бонус.

Artifact Passive Effect

Под блоком WORLD LAW находится отдельный framed-раздел ARTIFACT PASSIVE EFFECT.

В нём показываются:

  • название параметра, например GLOBAL ATK;
  • текущее значение, например 10%;
  • визуальная стрелка перехода;
  • значение после следующего улучшения, например 12%.

Это постоянный бонус за владение артефактом. В отличие от World Law, бонус владения действует независимо от того, надет артефакт или нет. Стартовый нейтральный артефакт может не давать такого бонуса.

Значения 10% → 12% являются демонстрационными данными текущего макета. Дизайн должен поддерживать любые значения из конфигурации.

Прокачка артефакта

  • У артефакта три уровня.
  • Для второго уровня нужна одна дополнительная копия.
  • Для третьего уровня нужны ещё две копии.
  • Прогресс показывается в формате current / required, например 0 / 1.
  • Рядом находится UPGRADE.
  • При нехватке шардов кнопка disabled.
  • При достаточном количестве кнопка активна и может иметь штатный notification marker.
  • На максимальном уровне вместо обычного действия показывается MAX LEVEL.
  • После улучшения обновляются уровень, прогресс и значения Artifact Passive Effect.

Использование артефакта

  • У текущего надетого артефакта есть плашка IN USE на изображении и/или карточке.
  • Отдельную серую кнопку IN USE на текущем состоянии показывать не нужно.
  • Если игрок выбрал другой доступный артефакт, появляется активная кнопка USE.
  • Выбор карточки сам по себе не меняет надетый артефакт.
  • После USE плашка переносится на новый артефакт.

Горизонтальная коллекция

Внизу находится одна горизонтальная строка карточек артефактов.

Карточка содержит:

  • миниатюру артефакта;
  • уровень;
  • selected-состояние;
  • индикатор, что артефакт надет;
  • notification, если доступна прокачка;
  • lock и условие открытия для недоступного артефакта.

Список прокручивается только влево-вправо. Желательно оставлять видимой часть следующей карточки.

4. Экран 2 — Stones, выбранный сокет

Центральная композиция

В центре находится текущий артефакт. Вокруг него расположены шесть постоянных сокетов в матрице 3 × 2.

Левая колонка — Gear Effects Правая колонка — Core Laws
Visible Aspect Visible Law
Hidden Aspect Hidden Law
Flip Aspect Bridge Law

Позиции сокетов не меняются.

Состояния сокета:

  • пустой: рамка типа, знак +, подпись типа;
  • заполненный: рамка типа, иконка камня, подпись типа;
  • выбранный: дополнительное свечение или обводка;
  • drag target: выраженная подсветка совместимого слота;
  • locked: замок и приглушение.

Подпись типа должна оставаться видимой. Нельзя объяснять тип только цветом.

Тап по сокету

Тап по пустому или заполненному доступному сокету:

  1. выбирает сокет;
  2. устанавливает в dropdown его тип;
  3. фильтрует нижний список до совместимых камней;
  4. сбрасывает горизонтальный список к началу;
  5. ставит установленный камень первым и маркирует его IN SLOT.

Тап по заполненному сокету не снимает камень и не открывает Stone Info автоматически.

Коллекция камней

  • Одна горизонтальная строка без переноса.
  • Карточки не уменьшаются ради размещения всей коллекции.
  • Карточка содержит иконку, рамку, количество копий ×N и IN SLOT, если применимо.
  • Короткий тап по карточке открывает Stone Info.
  • Long press с движением начинает drag-and-drop.
  • Обычный горизонтальный свайп прокручивает список и не должен случайно начинать drag.

Drag-and-drop

  • Совместимые доступные сокеты подсвечиваются.
  • Drop в пустой сокет устанавливает камень.
  • Drop в заполненный сокет заменяет камень.
  • Drop в несовместимую или пустую область отменяется.
  • Drag является ускоренным способом; все действия должны быть доступны и обычным тапом.

5. Экран 3 — открытый Stone Filter

Dropdown расположен рядом с заголовком горизонтальной коллекции камней и является отдельным интерактивным элементом.

Обязательные варианты:

  1. All Stones;
  2. Visible Aspect;
  3. Hidden Aspect;
  4. Flip Aspect;
  5. Visible Law;
  6. Hidden Law;
  7. Bridge Law.

Поведение:

  • выбор типа выбирает соответствующий доступный сокет;
  • All Stones снимает выбор сокета;
  • список после смены фильтра возвращается к началу;
  • тап вне dropdown закрывает его без изменения значения;
  • одновременно может быть открыт только один dropdown;
  • locked-типы остаются видимыми, но не активируют недоступный сокет;
  • визуальный стиль и раскрытие должны повторять dropdown экрана Auto Chest.

6. Экран 4 — Stone Info

Stone Info — модальное окно по визуальному паттерну SkillInfoView. Фон под ним затемняется и блокируется.

Размер и композиция должны повторять prefab SkillInfoView: popup около 1050 × 857.5 на Canvas 1290 × 2796.

Обязательные элементы

  1. Проектная popup-подложка.
  2. Заголовочная рамка STONE INFO.
  3. Кнопка закрытия ×.
  4. Иконка камня в штатной квадратной рамке.
  5. Название камня.
  6. Плашка EQUIPPED справа от названия — только если камень установлен.
  7. Тип камня.
  8. Текущий RANK.
  9. Полное описание правила.
  10. Progress bar прокачки.
  11. Кнопка UPGRADE рядом с progress bar.
  12. Нижние кнопки CLOSE и контекстное действие.

Не нужно отдельно писать NOT EQUIPPED. Если камень не установлен, плашка EQUIPPED просто отсутствует.

Тип сокета нельзя дублировать в нескольких местах. Например, VISIBLE ASPECT показывается один раз в метаданных камня; строка TARGET SLOT — VISIBLE ASPECT не нужна.

Прокачка камня

Первая копия камня сразу содержит полную механику. Rank усиливает только числовое значение правила и не открывает новую механику.

В блоке прокачки показываются:

  • progress bar из семейства pb_big_back / pb_big_fill_part / pb_big_fill_full;
  • прогресс копий в формате current / required;
  • кнопка UPGRADE.

Текущее 2 / 2 в HTML — демонстрационное состояние готовности к улучшению. Точное количество копий для каждого Rank в источниках пока не определено и должно приходить из данных.

После успешной прокачки:

  • Rank увеличивается;
  • копии списываются;
  • progress bar показывает новый порог;
  • числовые значения в описании обновляются;
  • механика камня не меняется.

Контекстная нижняя кнопка

Контекст Кнопка
Выбран пустой совместимый сокет USE
В выбранном сокете стоит другой камень SWITCH
Этот камень уже установлен disabled IN USE или отдельное подтверждённое действие удаления
Сокет не выбран SELECT SLOT
Нет доступного совместимого сокета disabled USE
Камень заблокирован disabled LOCKED

USE и SWITCH применяют изменение и закрывают окно. Отдельный confirm для бесплатной обратимой замены не нужен.

Для камней, требующих конкретную цель — Law или Bridge, — дополнительная строка TARGET показывается только тогда, когда это действительно требуется правилом камня.

7. Сохранение контекста

При открытии и закрытии Stone Info сохраняются:

  • выбранный сокет;
  • фильтр;
  • позиция горизонтального списка;
  • текущая вкладка.

При переходе между ARTIFACTS и STONES каждая вкладка сохраняет собственную позицию списка и выбранный объект.

8. Пустые и ошибочные состояния

  • Нет камней по фильтру: сокеты остаются видимыми, в списке показывается No stones of this type.
  • Заблокированный сокет: показывает условие открытия и не меняет фильтр.
  • Ошибка USE, SWITCH или UPGRADE: состояние визуально откатывается, показывается штатный snackbar.
  • Во время запроса соответствующие кнопки блокируются и показывают loader.
  • Максимальный Rank или Level: progress заменяется состоянием MAX, кнопка становится MAX LEVEL или MAX RANK.

9. Визуальные источники проекта

Вся стандартная графика должна быть взята из Overlord Unity-проекта.

Приоритетные источники:

Элемент Источник
Заголовок, back, центральный артефакт, панели сокетов Assets/Sprites/UI/BuildCoreView/
Empty/locked frames, +, progress bars Assets/InternalAssets/Sprites/UI/SkillsScreenView/
Stone Info структура и размеры Assets/Prefabs/UI/Skills/SkillInfoView/SkillInfoView.prefab
Актуальный Stone Info prefab Assets/Prefabs/UI/BuildArtifactStoneView/StoneInfoView.prefab
Popup-подложки Assets/InternalAssets/Sprites/UI/Shared/
Dropdown Auto Chest dropdown и dropdown_selector_01.png
Нижние вкладки те же prefab и active/inactive states, что используются на Gacha screen
Кнопки существующие shared blue/green/gray button prefabs

CSS или новая графика используются только для компоновки либо для уникального арта, которого нет в проекте. Нельзя заменять существующую игровую рамку плоским прямоугольником.

10. Что пока не зафиксировано

UI должен быть готов к данным, но не должен самостоятельно фиксировать:

  • точные названия и финальный каталог артефактов;
  • окончательные значения пассивных бонусов;
  • количество копий для каждого Rank камня;
  • стоимость улучшений;
  • финальную кривую усиления камней;
  • точный прогрессионный гейтинг каждого сокета;
  • окончательное действие для уже установленного камня: REMOVE или disabled IN USE.

11. Минимальная проверка макета

  • Первый экран показывает выбранный артефакт, World Law, Artifact Passive Effect, shard progress и Upgrade.
  • У текущего артефакта нет отдельной серой кнопки IN USE; используется только плашка.
  • Нижние коллекции прокручиваются только горизонтально.
  • На Stones всегда видны центральный артефакт и шесть сокетов.
  • Тап по пустому и заполненному сокету включает соответствующий фильтр.
  • Dropdown содержит All Stones и шесть типов.
  • Тап по камню открывает Stone Info.
  • Stone Info не дублирует название типа сокета.
  • EQUIPPED находится справа от имени и отсутствует у неустановленного камня.
  • В Stone Info присутствуют Rank, progress bar и Upgrade.
  • CLOSE, USE, SWITCH и SELECT SLOT зависят от контекста.
  • Все стандартные визуальные элементы переиспользуют графику проекта.

Источники

  • ArtifactWindowUX.md — подробная UX-спецификация группы окон.
  • 02-artifacts-and-stones.md — актуальная матрица сокетов и правила камней Rank 1.
  • two-worlds-buildcraft-explained-2026-08-04 (1).md — уровни артефакта, бонус владения, World Law и общая логика камней.
  • 02-artifacts-v2.md — отложенный advanced-пул World Laws; не входит в основной baseline.
  • mockup-artifacts-stones.arted.html — актуальное визуальное представление четырёх состояний.