Удобство PortfolioLab на телефоне

Правила интерфейса 0.12.0, редакция от 20.10.2026. Задача — дать пользователю телефона пройти основные сценарии без мелких элементов и поиска действий: выбрать раздел, задать портфель или правило, запустить расчёт и прочитать результат. Рыночные входы, финансовые формулы и правила исполнения этим изменением не обновляются.

Навигация и последовательность действий

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

Конструктор сохраняет порядок «период и капитал → инструменты и веса → расчёт → результат». Стратегия — «основной и защитный активы → порог → расчёт → сравнение → журнал». Дополнительные параметры разрешено сворачивать, сохраняя доступ к ним и их текущим значениям. Изменение настройки не должно запускать бэктест само по себе; прежний результат помечается устаревшим. Возврат к настройкам не должен стирать введённые данные.

Размеры, текст и формы

Проектный ориентир для основных элементов управления — зона нажатия не менее 44 × 44 CSS px. Это более строгий ориентир, чем базовый WCAG 2.2 AA 2.5.8 с его минимумом 24 × 24 и исключениями. Фактический размер определяется браузерной раскладкой, а не наличием числа в CSS.
Текст полей ввода на телефоне — не менее 16 CSS px по правилу проекта. Это решение для читаемости, а не обязательный размер из WCAG и не гарантия поведения масштабирования всех версий Safari.
У каждого поля есть понятная подпись; единицы «₽», «%», «п.п.» и «б.п.» не подменяют название. Для числового ввода используются подходящие нативные поля и подсказка экранной клавиатуры. Ошибка объясняется рядом с настройкой и сохраняет введённое значение для исправления.
Сохраняются масштабирование страницы и увеличение текста. Не применять user-scalable=no или ограничение maximum-scale=1. Локальные лицензированные шрифты, настоящие 400/700 и табличные цифры остаются прежними.

44 CSS px — единица веб-разметки; её не следует выдавать за 44 физических пикселя или автоматически приравнивать к Apple pt.

Узкий экран, графики и таблицы

Цель раскладки — обычный текст и формы в одной колонке при ширине 320 CSS px, без потери информации и функций. Таблица, которой для смысла нужны две координаты, может прокручиваться внутри своего контейнера. Это исключение не распространяется на окружающий текст или всю страницу.

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

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

Фокус, движение и края экрана

Используются нативные ссылки, кнопки, поля, раскрываемые блоки и диалог меню. Фокус заметен, порядок клавиатурного перехода осмысленный. При отмене или закрытии меню фокус возвращается к вызвавшей его кнопке; при выборе локального раздела — к его содержимому; Escape и явная кнопка закрытия выполняют ожидаемое действие.

Фиксированная навигация не должна перекрывать поле, сообщение об ошибке или последнее действие страницы. Для устройств с вырезами и домашним индикатором используются env(safe-area-inset-*) вместе с обычными отступами. При открытии экранной клавиатуры интерфейс должен сохранять доступ к редактируемому полю; конкретное поведение проверяется в браузере.

Таймлапс запускается пользователем и имеет остановку. prefers-reduced-motion отключает необязательные анимации и плавные перемещения. Размер и оформление не должны меняться скачком при появлении статуса расчёта.

Контроль и воспроизведение

Из корня точного исходного commit выполнить:

node tests/mobile-shell.mjs
node tests/mobile-workspace.mjs
python3 tests/mobile-contract.py
python3 tests/typography.py
python3 tests/interface-contract.py
node tests/breadth-strategy-view.mjs
node tests/index-history-view.mjs
node tests/model-portfolios-view.mjs
node tests/workspace-tools.mjs

tests/mobile-contract.py формирует work/mobile/mobile-contract-validation.json: проверяет интеграцию мобильных ресурсов, разрешённое масштабирование, статические подписи нативных полей, доступность управления датой без наведения, объявления мобильных правил CSS и неизменность закреплённых финансовых файлов/шрифтов. Это дополнительный контракт интеграции; он не заменяет отдельные проверки расчётного кода или независимую проверку базы.

Протоколы выполнения остальных контролей сохраняются по их штатным путям. Для опубликованной версии используется ограниченная HTTP-приёмка python3 tests/live-launch.py SITE_URL --quick; она сверяет опубликованные ресурсы и результаты с локальными контролями. Успех HTTP не означает проверку раскладки.

Результаты публикуются по фактически выполненным протоколам. Пока управление браузером недоступно, не проверены реальный перенос при 320/360/390/430 CSS px, отсутствие перекрытий при повороте и экранной клавиатуре, фактические размеры зон нажатия, увеличение текста, VoiceOver/TalkBack и удобство прокрутки на устройстве. Нельзя заменять эти ограничения утверждением о полном соответствии WCAG или гарантированной работе на всех телефонах.

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

Первичные ориентиры

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