Twin Cores — UI/UX specification¶

Статус: UX-спецификация первого релиза
Платформа: mobile, portrait
Источник визуального направления: предоставленный референс Twin Cores
Язык примеров интерфейса: русский; финальные строки должны пройти локализацию

1. Цель экрана¶

Twin Cores — экран настройки двух связанных наборов законов персонажа: Реального ядра и Фантазийного ядра. Игрок должен за несколько секунд:

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

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

2. Навигация¶

Twin Cores открывается как полноэкранный leaf-screen.
Слева снизу — стандартная кнопка «Назад».
По центру — screen-title-banner с названием TWIN CORES.
Нижняя навигация на экране отсутствует.
При возврате изменения, уже подтверждённые через Equip или завершённый жест моста, сохраняются автоматически. Отдельной кнопки Save нет.

Карта переходов¶

Twin Cores
├─ тап по установленному закону или пустому слоту
│  └─ нижняя панель «Законы»
│     └─ тап по карточке закона
│        └─ попап «Описание закона»
│           └─ Equip → возврат на Twin Cores с обновлённым слотом
├─ свайп закон → закон
│  └─ создать мост / перенести существующий мост
└─ свайп от закона с мостом → пустая область
   └─ удалить мост

3. Главный экран¶

3.1. Компоновка сверху вниз¶

Верхняя панель — Back, заголовок Twin Cores, Info (i).
Два ядра:
слева — РЕАЛЬНОЕ ЯДРО, холодная голубая цветовая тема;
справа — ФАНТАЗИЙНОЕ ЯДРО, фиолетовая цветовая тема;
внутри каждого ядра — вертикальный ряд из пяти позиций законов;
пять позиций всегда сохраняют своё место и остаются видимыми, даже если часть из них ещё заблокирована;
при первом открытии системы доступна одна позиция в каждом ядре, остальные четыре показываются заблокированными и открываются позднее;
одинаковые позиции слева и справа визуально образуют пары, но мост может соединять любые два допустимых закона противоположных ядер.
Центральная зона — артефакт и его мировой закон. Блок не должен перекрывать линии мостов или hit area слотов.
Зона мостов — мосты рисуются поверх фона, но под иконками законов.
Недоступные элементы, если они предусмотрены дизайном, — визуально заблокированы и показывают универсальное условие открытия без привязки к конкретной системе прогрессии.

На небольших экранах приоритет по высоте: заголовок → оба ядра → все интерактивные слоты. Декоративный заблокированный объект можно уменьшить, но нельзя обрезать активные слоты или мосты.

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

3.2. Анатомия слота закона¶

Каждый слот содержит:

круглую рамку, принадлежащую соответствующему ядру;
иконку закона;
точку подключения моста на стороне, обращённой к центру;
визуальное состояние слота.

Постоянная текстовая подпись с названием закона под иконкой не показывается. Название доступно в попапе закона и озвучивается screen reader.

Состояние	Отображение	Поведение
Пустой	Контур слота и `+` без текстовой подписи	Тап открывает список законов
Установлен	Цветная иконка без текстовой подписи	Тап открывает список для этого слота; свайп начинает мост
Выбран	Яркое кольцо и мягкое увеличение	Показывает, для какого слота открыт список
Источник свайпа	Пульсирующее кольцо, активная точка подключения	За пальцем тянется превью моста
Допустимая цель	Пульсация/свечение противоположного цвета	Отпускание создаёт или переносит мост
Недопустимая цель	Приглушение; при наведении — короткий красный отклик	Отпускание не создаёт мост
Соединён мостом	Светящаяся точка подключения и стабильная линия	Свайп редактирует текущий мост
Заблокирован	Серый оверлей и замок	Тап показывает условие открытия; свайп недоступен

Рекомендуемый минимальный hit area — 48×48 dp; визуальная иконка может быть меньше. Зоны соседних слотов не должны пересекаться.

3.3. Отображение мостов¶

Мост — световая линия между центральными точками двух законов.
Цвет линии плавно переходит из цвета Реального ядра в цвет Фантазийного.
Активный мост заметно ярче декоративных линий ядра.
При пересечении мостов линии остаются различимы: небольшой разнос кривых, разная высота дуги или световой узел в точке пересечения.
Мост не является отдельной маленькой кнопкой: вся линия может реагировать на тап подсветкой, но редактируется только свайпом от одного из её законов.
Если число мостов ограничено, рядом с подписью МОСТЫ отображается счётчик 2 / 3. Если ограничения нет, счётчик не показывается.

4. Жесты мостов¶

4.1. Разделение тапа и свайпа¶

До прохождения порога перемещения взаимодействие считается тапом.
После прохождения порога оно становится свайпом, и открытие списка законов отменяется.
Рекомендуемый порог: 12 dp с учётом системной плотности экрана.
Свайп начинается только с установленного и разблокированного закона.
Пока активен свайп моста, вертикальный скролл экрана блокируется.

4.2. Создание моста¶

Условие: исходный закон ещё не соединён мостом.

Игрок зажимает закон и ведёт палец к закону противоположного ядра.
От точки подключения исходного закона за пальцем тянется световая линия.
Все допустимые цели подсвечиваются.
При входе в hit area допустимой цели она усиливает свечение и даёт лёгкий haptic tick.
Отпускание над целью фиксирует мост.
Линия коротко вспыхивает от исходного закона к целевому; оба закона дают подтверждающий импульс.

Результат: создаётся связь A ↔ B. Направление свайпа не влияет на свойства моста.

4.3. Перенос моста¶

Условие: исходный закон уже соединён мостом с другим законом.

Игрок начинает свайп от соединённого закона A.
Существующий мост A ↔ B переходит в режим редактирования: линия к B приглушается, а свободный конец следует за пальцем.
Игрок доводит свободный конец до нового допустимого закона C.
Отпускание над C заменяет старую связь на A ↔ C одним действием.
Старая линия гаснет, новая проходит подтверждающей световой волной.

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

4.4. Удаление моста¶

Условие: свайп начат от закона, уже имеющего мост.

Игрок вытягивает свободный конец существующего моста.
Отпускает палец вне hit area любого нового допустимого закона.
Мост растворяется от свободного конца к исходному закону.
Внизу появляется компактный snackbar: Мост удалён + действие ОТМЕНИТЬ.

ОТМЕНИТЬ возвращает прежнюю пару, если за это время один из законов не был заменён или заблокирован. В таком случае показывается нейтральное сообщение Не удалось вернуть мост.

4.5. Невалидное завершение свайпа¶

Ситуация	Результат
Новый мост отпущен в пустой области	Ничего не меняется; превью втягивается обратно
Новый мост отпущен над законом того же ядра	Цель даёт красный отклик; связь не создаётся
Цель заблокирована или пустая	Связь не создаётся; показывается причина рядом с целью
Достигнут лимит мостов	Допустимые цели не подсвечиваются; краткое сообщение объясняет лимит
Перенос отпущен над текущей второй точкой	Исходный мост остаётся без изменений
Перенос не подтверждён из-за ошибки	Исходный мост визуально возвращается; snackbar сообщает, что изменения не применены

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

5. Нижняя панель выбора законов¶

5.1. Открытие¶

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

Панель занимает столько высоты, чтобы полностью показать:

компактный заголовок ЗАКОНЫ — РЕАЛЬНОЕ ЯДРО или ЗАКОНЫ — ФАНТАЗИЙНОЕ ЯДРО;
вертикальную сетку, в каждом ряду которой помещается 5–6 законов;
ровно два полностью видимых ряда карточек;
часть следующего ряда как подсказку о продолжении списка;
нижний safe area.

Панель начинается ниже пятой позиции законов обоих ядер. При её открытии все пять позиций слева и справа остаются полностью видимыми и доступными для считывания; панель не наезжает на их иконки, рамки, точки подключения или мосты. Если высоты экрана недостаточно, уменьшается декоративная центральная зона и вертикальные интервалы между позициями, но не hit area слотов и не два полностью видимых ряда панели.

На референсном Unity Canvas 1290×2796 используется размер элемента 180×180, поэтому в строку помещается шесть элементов. На более узких поддерживаемых экранах допустимо пять элементов без уменьшения hit area. Сетка продолжается вниз и прокручивается вертикально.

5.2. Поведение ScrollView¶

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

5.3. Порядок и состояния законов¶

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

уже установленный в выбранный слот;
доступные и принадлежащие игроку;
доступные, но установленные в другой слот;
ещё не открытые — в конце списка.

Карточка закона содержит иконку и маркер состояния. Постоянная подпись с названием под иконкой не показывается:

УСТАНОВЛЕН — стоит в выбранном слоте;
номер/сторона другого слота — стоит в другом месте;
НОВЫЙ — ещё не просмотрен;
замок и короткое условие — закон недоступен.

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

5.4. Действие по карточке¶

Тап по любой карточке открывает попап закона. Панель выбора остаётся под ним и не сбрасывает выбранный слот или позицию скролла.

6. Попап закона¶

6.1. Состав¶

popup-header: название закона + кнопка ×.
Крупная иконка закона и его категория/редкость, если эти свойства существуют.
Полное пользовательское описание эффекта.
Блок ПРИ УСТАНОВКЕ с изменяемыми значениями или сравнением с текущим законом, если сравнение применимо.
Статус использования: Установлен в Реальном ядре, слот 2, если закон уже экипирован в другом месте.
Основная кнопка внизу.

6.2. Состояния кнопки¶

Состояние закона	Кнопка	Результат
Доступен, не установлен	`ЭКИПИРОВАТЬ`	Устанавливает в ранее выбранный слот
Уже в выбранном слоте	`УЖЕ ЭКИПИРОВАНО` (disabled)	Без действия
Стоит в другом слоте и перенос разрешён	`ПЕРЕНЕСТИ СЮДА`	Освобождает старый слот и ставит в выбранный
Недоступен	Текст условия (disabled)	Без действия

После успешного Equip попап и нижняя панель закрываются, новый закон даёт короткую подтверждающую анимацию в слоте.

Если в выбранном слоте уже был другой закон, новый закон заменяет его без дополнительного confirm-попапа: кнопка и контекст выбранного слота достаточно ясно описывают действие. Исключение — замена удалит активный мост; тогда перед применением показывается подтверждение:

ЗАМЕНИТЬ ЗАКОН?
Связанный с этим слотом мост будет удалён.
[ОТМЕНА] [ЗАМЕНИТЬ]

Если замена закона может сохранить мост по правилам дизайна, мост сохраняется и подтверждение не показывается.

7. Состояния экрана¶

Первый вход¶

Одноразовая подсказка показывает короткую анимацию руки от одного закона к другому.
Текст: Проведи от одного закона к другому, чтобы создать мост.
После первого созданного моста вторая подсказка: Потяни мост к новому закону, чтобы перенести его. Отпусти в стороне, чтобы удалить.
Подсказки можно закрыть; они не повторяются после успешного действия.
Info (i) всегда позволяет открыть эти правила снова.

Нет установленных законов¶

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

Частично заполнено¶

Мост можно начать только от установленного закона.
Пустые слоты не подсвечиваются как допустимые цели моста.

Функция ещё не открыта¶

Экран можно показать как preview, если это соответствует общей прогрессии.
Все интерактивные элементы заблокированы.
Условие открытия находится в центре действия, а не только мелким текстом внизу: Выполни условие, чтобы открыть Twin Cores.

Загрузка и ошибка¶

Загрузка: каркас обоих ядер и skeleton-иконки без интерактивности.
Ошибка загрузки: объяснение и кнопка ПОВТОРИТЬ; старое состояние не показывается как актуальное без соответствующей маркировки.
Ошибка применения изменения: визуальный rollback и snackbar с причиной.

8. Визуальный язык и анимации¶

Реальное ядро: холодный голубой/циановый свет.
Фантазийное ядро: фиолетовый/пурпурный свет.
Центральный артефакт: золото как нейтральный связующий акцент.
Красный используется только для ошибки, запрета или разрушительного исхода.
Цвет не является единственным носителем состояния: используются свечение, форма кольца, замок, подпись и анимация.

Анимации должны быть короткими и не задерживать ввод:

захват моста — 80–120 ms;
фиксация/перенос — 180–250 ms;
удаление — 180–220 ms;
появление нижней панели — 220–300 ms;
Equip-подтверждение — до 300 ms.

При включённой системной настройке Reduce Motion кривые и вспышки заменяются простым fade/подсветкой без движения по траектории.

9. Доступность и удобство¶

Названия законов не выводятся постоянными подписями под иконками, но доступны текстом в попапе и через screen reader.
Контраст текста и ключевых контуров соответствует мобильным требованиям читаемости; свечение не должно размывать подписи.
Динамический текст не уменьшает hit area и не перекрывает соседний слот.
Haptic feedback дополняет, но не заменяет визуальное подтверждение.
Для жестов предусмотрено обучение и постоянная справка через Info (i).
При активном screen reader слот озвучивается как: сторона ядра, номер слота, название закона, наличие моста и имя связанного закона.
Попап удерживает фокус внутри себя до закрытия. ScrollView законов остаётся частью основного экрана и не создаёт отдельную модальную область фокуса.

10. UX-копирайтинг¶

Рекомендуемые короткие строки:

Контекст	Текст
Обучение созданию	`Проведи между законами, чтобы создать мост`
Обучение переносу	`Потяни существующий мост к другому закону`
Обучение удалению	`Отпусти мост в стороне, чтобы удалить его`
Удаление	`Мост удалён` · `ОТМЕНИТЬ`
Лимит	`Все мосты уже используются`
Невалидная сторона	`Соедини законы разных ядер`
Пустая цель	`Сначала установи закон`
Ошибка сохранения	`Изменение не применено. Попробуй ещё раз`
Заблокированный закон	Короткое фактическое условие открытия

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

11. Проверка UX / acceptance criteria¶

Основные сценарии¶

Тап по заполненному и пустому слоту открывает панель именно для этого слота.
Overlay показывает два полных ряда по 5–6 законов и прокручивается вертикально.
Тап по карточке открывает описание выбранного закона.
Equip устанавливает закон в выбранный слот и возвращает на обновлённый экран.
Свайп A → B между допустимыми законами создаёт один мост.
Свайп A → C от закона с мостом A ↔ B даёт A ↔ C без промежуточного сохранённого состояния.
Свайп от закона с мостом и отпускание вне цели удаляет мост и предлагает Undo.
Незавершённый свайп от закона без моста ничего не удаляет и не создаёт.
Обычный тап не распознаётся как свайп, а свайп не открывает список законов.
Скролл списка законов не создаёт и не редактирует мосты.

Граничные сценарии¶

быстрое начало второго жеста во время анимации первого;
отпускание ровно на границе hit area цели;
перенос на текущую вторую точку моста;
замена закона, участвующего в мосте;
блокировка/недоступность целевого закона во время применения;
потеря соединения во время создания, переноса, удаления или Equip;
длинные локализованные названия;
минимальный поддерживаемый экран и устройства с safe-area inset;
Reduce Motion и screen reader.

Критерий качества: после короткого onboarding не менее 90% тестовых игроков должны без подсказки выполнить три действия — создать, перенести и удалить мост — и правильно объяснить, какой слот будет изменён кнопкой Equip.

12. Решения, которые нужно подтвердить геймдизайном¶

Эта UX-спецификация исходит из следующих рабочих допущений:

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

Если любое из этих правил отличается в финальной механике, необходимо обновить состояния целей, тексты ошибок и соответствующие acceptance criteria до передачи в UI production.