Каталог частей
Рабочий стол для тех, кто правит вид. Здесь лежат все части из
core/komponenty.css — в состояниях, с длинным текстом и в обеих темах.
Тронул роли или части — открой эту страницу и посмотри, что стало.
Значки
Один набор на всё: сетка 24, обводка 2, цвет — свой цвет текста.
Ставится пустым узлом <span class="ya-ik ya-ik--имя">.
Кнопка
Четыре вида одной кнопки. Залитая — главное действие на экране, и оно одно; тональная — рядом стоящее; с обводкой и словом — всё остальное. Наведи мышь, нажми и пройди ряд клавишей Tab: под мышью, под пальцем и под обводкой фокуса кнопка выглядит по-разному, и это тоже часть набора.
Подпись в одну строку — правило набора: обрезанный глагол перестаёт быть ответом. Если подпись такой длины, на узкой колонке она уедет за край — значит, это не подпись кнопки, а предложение, и его место в тексте рядом.
Кнопка-значок
Видимая — 40, нажимаемая — 48: разницу добирает поле, поэтому соседи стоят вплотную, а палец всё равно попадает.
Поле ввода
Подпись, само поле, подсказка под ним и счётчик длины. Высота 56, кегль 17:
в поле мельче 16 телефон приближает страницу при фокусе, а отдалить её потом нечем —
адресной строки в приложении нет. Подпись связана с полем через for,
подсказка и счётчик приходят диктору описанием — aria-describedby.
Оборачивать всё в <label> нельзя: имя поля соберётся из подсказки
и счётчика тоже.
Счётчик здесь живой: пиши в поле — и он считает, а за пределом поле
само уходит в состояние ошибки. maxlength в наборе нет нарочно:
обрезать написанное молча нельзя.
Обводка фокуса — 2 px цветом действия с отступом 2, и кайма поля берёт
тот же цвет. Второго кольца тенью под ней нет: оно двоится. Клавиша Tab даёт то же
кольцо — у поля оно висит на :focus, а не на :focus-visible,
как у кнопки: в поле пишут, и человек обязан видеть, куда попадёт буква,
каким бы способом он в него ни вошёл.
Цвет не единственный признак беды: рядом со словом проступает значок,
подсказка сменилась на объяснение, а полю проставлено aria-invalid —
диктор скажет об ошибке сам. Место под строку подсказки занято всегда, поэтому
появление ошибки не двигает кнопку из-под уже занесённого пальца.
Многострочное поле растит экран, а не набор: на каждый ввод высота сбрасывается и берётся по содержимому. Без этого четвёртая строка обрезалась бы по нижней кромке, и человек не видел бы, что написал.
Имя правится на первом шаге
Пара полей
Два поля под одной мыслью. На телефоне столбиком, от 600 — рядом.
Порог 600, а не 360: при 375 два поля дают по 139 внутренних пикселей, и подпись
кеглем 17 ложится в них в четыре строки. Общая мысль — не заголовок, а имя группы:
обёртке ставят role="group" и aria-labelledby, иначе диктор
прочитает два поля подряд, ничем не связанные.
Поля в паре стоят по верхнему краю: беда в одном растит его вниз и не тянет за собой соседа.
Шагомер
Где человек в маршруте. Сперва слова, потом полоса — и слова главные.
Диктор слышит одну понятную строку: жёлобу ставят aria-hidden, потому что
он повторяет её, а второй раз то же число вслух — не доступность, а помеха.
Десять точек урока не рисуем: на 320 их не счесть. Короткий путь из трёх шагов
(комната) рисует три подписанных узла — их видно, а диктору ряд всё равно прячем.
шаг 1 из 10 Что разбираем
шаг 4 из 10 Два состояния
шаг 10 из 10 Сходится ли круг: две главные пары мест напротив
Имя шага прижато вправо и переносится под число, когда рядом не встаёт. Число шага не обрезаем многоточием никогда: ради него строку и читают.
шаг 1 из 10
шаг 2 из 3 Отправь ссылку
Переключатель
Выбор одного вида из нескольких, когда экран остаётся тем же. Не кнопки —
те обещают действие; не вкладки — те уводят. Выбранное отличается не только цветом:
у него другая жирность и сплошная рамка, и состояние живёт в
aria-pressed, а не в классе — иначе диктор не скажет, что выбрано.
Ярлык
Короткий статус рядом с именем («готовится», «прохожу»). Это не кнопка
и не фишка: нажать нельзя. Не путать с .ya-vhod__yarlyk — тот подпись
входа урока, а не status-pill.
Своя ясна на узкой колонке телефона готовится
Полоса
Доля «N из M» без шагов маршрута. Слова главные; желоб вторичен.
Для маршрута со словами шага остаётся .ya-shagi.
0 из 12
5 из 12
12 из 12
Продолжить
Путь «Моё обучение» на экране уроков: счёт, полоса и дверь в следующий
урок. Состояния: начало, ход, конец. Данные — в znanie.продолжить.
Крошка
Где ты в школе: ссылки назад и текущая страница. В оболочке приложения
крошку скрывает body[data-yk-tip] — там уже есть стрелка возврата.
Главы · .ya-glavy
Оглавление курса в плеере: список занятий ветви. Текущее —
.ya-glavy__punkt--now, готовящееся — --skor.
На уроке открывается листом из меню; sidebar 444px нет.
Вкладки
Разделы одного экрана со счётчиком. Это не переключатель
(.ya-perekl): вкладки уводят к другому разделу и живут в
role="tablist", а не в aria-pressed.
Режим
На карточке игры два смысла: один человек или с друзьями. Третьего («вдвоём на одном телефоне» рядом с «компанией») нет — это путало, с кем играть. Когда выбраны друзья, под списком появляется, сколько их звать.
Фишка
Выбор нескольких из многих: части модели, признаки, метки. Остаётся нажатой, переносится по строкам. Высота как у кнопки, а не как у ярлычка: по фишке целятся пальцем в ряду других. После проверки ряд запирается — выбранное остаётся в полную силу, невыбранное гаснет: видно и что выбрали, и что выбор закончен.
Вердикт
Ответ на проверку. Приговор стоит ПЕРВЫМ словом, до объяснения: иначе человек
читает разбор, ещё не зная, угадал он или нет. Цвет не единственный признак — слово стоит
жирным. Плашка живёт в области role="status": фокус в этот миг на кнопке
«Проверить», и уводить его нельзя, а сказать надо.
Так. Воля — отрезок от Кона до Предела. Весь луч от огня до Предела Волей не называется: первая его половина — Вера.
Не так. Это Вера — от огня до Кона. Воля идёт дальше, за Кон.
Складка
Справка, которая не мешает: закрыта, пока её не спросили. Собрана на родном
<details> — он сам даёт клавиатуру, состояние «раскрыто» для диктора
и связь заголовка с телом. Стрелка своя: системный треугольник рисуется шрифтом, у него
своя толщина и своя базовая линия, и цветом роли он не красится.
Если тема широкая
Работа — не дело для круга. Одна рабочая встреча — дело. Одна поездка — дело. Один разговор — дело.
Чем состояние отличается от перелома и почему подписи мест идут через одно
Состояние длится, перелом проскакивает. В состоянии живут, перелом ловят.
Половина мест круга — то, что длится, половина — мгновения, когда одно превращается в другое. Они идут через одно, и подписи обязаны этому подчиняться: там, где стоит мгновение, длящееся слово читается как ошибка.
Как проверить
Стороны отвечают на один вопрос. «Хорошо» и «плохо» — не стороны: это оценка, а не устройство дела.
Настоящую обводку даёт клавиша Tab — снимок выше нужен затем, чтобы её было видно и на неподвижной странице. Строка складки нажимается на все 48 сама по себе — добирать паддингом ничего не нужно.
Строка списка
Имя, тихая приписка справа, стрелка. Вся строка — одна цель нажатия: не имя, не стрелка, а весь ряд. Ставится и ссылкой, и кнопкой. Своей подложки у строки нет нарочно: карточка на фоне экрана даёт 1.04 — край такой карточки не виден вовсе, и список из трёх строк читался бы одной плитой. Строку опознают имя и стрелка, а между строками идёт волосок.
Кольцо фокуса уходит внутрь: строка идёт во всю ширину, и наружное кольцо вылезло бы за край экрана и налезло на соседнюю строку. Настоящее кольцо даёт клавиша Tab, снимок выше — его копия.
Полоса-сообщение
Стоит на экране и ждёт: сеть пропала, есть новое, чего-то не хватает. Не перекрывает содержимое и сама не уходит.
Пустой список
Когда показывать нечего. Слова говорят, почему пусто и что с этим делать; если делать нечего — кнопки нет.
Разложенных ясн пока нет
Первая появляется сама, как только ты разложишь имя по кругу.
Панель, строка со своими кнопками, варианты ответа
Части редактора вопросов в админке. .ya-panel — рабочая
поверхность с рядом __verh; в ней строки .ya-stroka--tiho:
сама строка не нажимается, нажимаются её кнопки в __dela.
.ya-varianty — варианты ответа внутри поля; выпадающий список —
тот же .ya-pole__vvod.
Вопрос и короткое сообщение
Эти две части живут поверх экрана, поэтому их не показать лежащими в строке —
их надо открыть. Разметка ниже повторяет ту, что строит core/dialogs.js:
сам он сюда не подключён, потому что едет в бандлах вместе с React.
У вопроса отказ стоит слева и держит фокус, закрытие без ответа считается отказом, Escape закрывает. Карточка вопроса прокручивается внутри себя, если текст длинный, а экран низкий: проверить это можно, открыв длинный вопрос на узком окне с большим системным кеглем.
.ya-dialog--shiroko — та же часть шириной 640 для формы на
несколько полей (правка вопроса и публикация в админке): поле снизу полное, ряд кнопок
отделён волоском, особняком стоящее действие уходит влево классом
.ya-dialog__sleva. Фокус встаёт на первое поле, Tab не уходит за карточку.
Ожидание друга
Экран «дождись подключения»: орбита вокруг кольца, слова статусом. Когда друг вошёл — галочка и другой заголовок. Цвет не единственный признак.
Ждём друга в комнате
Отправь ссылку и останься на этом экране.
Друг в комнате
Можно начинать раскладку.
Мини-круг
Двенадцать мест чужого круга. Пустое не рисуется — видна только дорожка. С первого раза — сплошная заливка цветом «так». После промаха — заливка цветом ошибки. Номер места 0 внизу, дальше по часовой, как у большой раскладки.
Друг в комнате
Присутствие рядом с кругом: лицо, имя, тихий статус. Пустой слот — пунктирное лицо и слова «ещё не в комнате». Нажал «Готов» — галочка и слово «готов». На поле партии карточка складывается в столбик: сверху мини-круг, снизу имя.
Сцена
Лицо викторины — не панель кнопок. Сцена показывает, во что сейчас играют, и сама не нажимается. Викторина — шапка матча: круглые лица команд посередине поля, не карточки у верхнего края. Один соперник — одно лицо справа; двое и больше — стопка, как состав команды. Раскладка ясну выбирает каруселью афиш, не сценой. Громкое действие — у кнопки «Начать», режим — у списка Один / С друзьями, таймер и темы — в складке.
Карусель
Выбор ясны на лице раскладки. Свайп вправо листает, нажатие выбирает.
Стартовая афиша — Суток, случайная в самом конце ленты. Подпись «12 мест»
на афише не нужна: круг и так двенадцать клиньев. Длинное имя — две строки,
не обрезка в одну. Каждая ясна дышит по-своему — солнце, пар, капля, пламя,
маятник. Подпись «Играем ·» говорит, по какой ясне начнётся круг, даже
пока листаешь чужую.
Не путать с .ya-banner: та полоса-сообщение, не постер.
Карточка управления · .ya-kartochka
Закрытая карточка школы в сетке. На столе у всех одна высота
(--ya-kartochka-h): имя сверху, чипы на нижнем краю.
Короткое имя и один чип карточку не ужимают.
Раскрытая (details) растит тело, шапка сжимается по содержимому.
Список на «Уроках» собран из этого компонента.
Извод 9 из 12 Языки
Воспитание и Образование 2 из 12 Воспитаниеобразование
Дверь хаба · .ya-dver
Общая карточка-вход. Модификаторы:
--scena — окно со сценой слева (Практика);
--panel — текст + ход слева, панель со знаком справа (Сегодня);
--spisok — строка с иконкой слева (Библиотека · справочники).
След (__sled) — последняя сессия или счёт; без данных скрыт.
Иерархия обучения · .ya-kurs / .ya-tema / .ya-urok
Сосуд курса, строка темы и строка занятия с «Уроков».
В разметке рядом живут исторические .dr-kurs / .dr-vetv / .dr-uzel
(на них держится JS). Путь «Моё обучение» остаётся экранным.
Ясна суток
Базовый курс метода
Сводка · .ya-svodka
Плитки метрик админки: число + подпись. Не KPI методиста.
Реестр · .ya-reestr
Таблица данных админки. Не путать с .ya-tablica механики урока.
| Человек | Роль | Ключ |
|---|---|---|
| Анна | участник | semya |
| Игорь | админ | sutki |
Чего в наборе нет
Полей-галочек в наборе пока нет: каждый экран рисует их сам.
Дверь хаба (.ya-dver), карточка управления (.ya-kartochka) и иерархия обучения (.ya-kurs / .ya-tema / .ya-urok) —
уже в наборе, см. выше. Страница показывает то, что в коде правда лежит.
Нет и знака «напротив» (двусторонней стрелки) в наборе значков: пару мест круга приходится помечать стрелкой вперёд, а она читается как «дальше».
Знаки сути: цвета опор и блоки симулятора
Токены --znak-<опора> и --znak-<опора>-container (светлая и тёмная темы, текст на контейнере ≥ 5:1). Блоки урока: sim-hod (твой ход, реакции, «Что произошло», сдвиг доверия, «Переиграть») и sim-gipoteza (гипотеза об опоре, «Передумать», «Дальше»). Образец — урок zns1.