Skip to content

Artifacts & Stones mockup report

Дата: 2026-08-07
UX source: ArtifactWindowUX.md
Финальный файл: mockup-artifacts-stones.arted.html

Explore

Вариант Решение Локальный результат
hero-first Крупный артефакт, отдельный World Law, широкая строка действий Победитель: лучшая иерархия и все шесть сокетов читаются без потери контекста
reference-card Компактная карточка по второму референсу Хорошо передаёт референс, но центральная часть становится плотнее
socket-stage Максимум места под сокеты, компактный блок артефакта Отклонён: вертикальное уплотнение ухудшает читаемость и стабильность композиции

Внешний vision judge не запускался: sandbox review отклонил передачу HTML с внутренними ассетами проекта во внешний API. Числовые judge scores и rubric JSON не создавались. Ранжирование выполнено локально по PNG-рендерам, UX-спеке и конвенциям skills-select, skills-gacha, chest-upgrade, auto-chest, item-swap, main-hud.

Refine

Победитель hero-first доработан после локального визуального просмотра:

  1. стартовый Stones-state изменён на All Stones, чтобы показать реальный горизонтальный Scroll View;
  2. добавлены дополнительные locked-карточки артефактов для scroll affordance;
  3. dropdown разворачивается вверх и полностью помещает All + 6 types;
  4. активные sprites вкладок обновляются при переключении;
  5. кнопка USE меняет visual state между green и disabled gray;
  6. ассеты дедуплицированы: каждый PNG встроен в HTML один раз.
  7. каждый экран переведён в точный Unity portrait frame 1290×2796 px;
  8. нижние вкладки приведены к Skill Gacha: YellowButton для активной и BlueButton для неактивной вкладки;
  9. фильтр приведён к CAUDropdown: тёмный selector на square.png, белая стрелка и чередующиеся строки #36384b / #2d2e41;
  10. CSS-рамка обеих коллекций заменена на реальную SkillGachaScreen/bg_underlay_equip_bottom.png.

Art

Новая графика не генерировалась. Использованы реальные игровые ресурсы:

  • BuildCoreView;
  • Dynamic/Items/Artifacts/Artifact1–3;
  • SkillsScreenView;
  • Shared popup/button sprites, включая btn_small_yellow.png, btn_small_blue.png и square.png;
  • SkillGachaScreen collection underlay;
  • ChestAutoUse/arrow_dropdown.png.

HTML self-contained; внешних файлов и сетевых зависимостей нет.

Verification

Headless Chromium interaction check: PASS.

Проверено:

  • четыре видимых UX-state;
  • bounding box каждого state: ровно 1290×2796;
  • выбор другого артефакта активирует USE;
  • артефакт с 1/1 активирует UPGRADE;
  • после USE кнопка переходит в IN USE;
  • вкладки переключают Artifacts / Stones;
  • All Stones показывает 12 карточек;
  • тап по Flip Aspect оставляет два совместимых камня;
  • тап по камню открывает Stone Info;
  • dropdown содержит семь значений и не обрезается границами экрана.
  • вкладки используют гача-состояния yellow active / blue inactive;
  • dropdown использует Auto Chest selector и alternating-row pattern.

Handoff

Для импорта в Figma: html.to.design → HTML layer names ON → Use Autolayout ON. После дизайнерской проверки файл готов к figma-to-unity pipeline.